{"_id":"@material/icon-button","_rev":"1675-61e99edfcfd5c34516a57762de4f4a5a","name":"@material/icon-button","description":"The Material Components for the web icon button component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.36.0-0":{"name":"@material/icon-button","version":"0.36.0-0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.36.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99e84d124e16646dc479b931192280589ec7f9be","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.36.0-0.tgz","fileCount":13,"integrity":"sha512-b4Jf5+XAvJn3zJ0KlB/7KUSgidV8RKKI2+ujtlhDHh+GYHvZlA6OoEzWMHsS49LQw+0W6bNwv7Msy0gSm8nMpg==","signatures":[{"sig":"MEUCICnzB89lWLX5gQTSuTTsmHO2j41MXi7TFiXgFYrserxYAiEAqvQYeW+mulYe7oAtR2fuvwag4Lqx/AkJetkgJh+UQ+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXApCRA9TVsSAnZWagAAw8YP+wUQbss4JqoPnWPPhuwt\nVPGq3Yd6arSq1cVaBW3CvbeGPs/Q3rr3g8u5t7hT1hf+G3rifLiIVIyAj6nc\nALhlDNOG5GtJijrDMLE8hvKEmtb7dTF3wWhJcYEmnYdlqPLwUxnz2ewfP2Fj\nPJGaJ/PY4iZkgPv8s+tYR1XKaPXIVCk83zhmt1rweAn0y9U+3yIRktm9ihYO\nadg34TOREuV6w0kYuqBxZMSvRSd2/q8e+eXHCh9q3fCOYhx9Egc85sjmq9hh\nqgvNq7gSbAoIx/5MSpzqOxExlk0JYQCI6h+1w7JvbITS1aSCKvtdOU9C9d7L\n1D6r7Ax+2zxwnbs71oQDwTVP/cAsDREwlMamF6eM99h8V60ZhrQZK6mHknhl\n80xDsCj0ZW9egUvDK5tK2uee/yR1iKfttw7v/CzrVeMeT8kFYlfXHmquD/5W\n92rfspZ+PDySmJP+ktV/LxncIQHSfFpT6py8I7NhGKdiJuJ8+sxvRRt7mTG4\nwBkSPCxQ53Va3Gjf3fRGpypSFGCY7eKeLrfjyp9KmAIULyjQ/KJqD3MrLwOZ\ntMEA/uAehBLW/y+VE8MktbnmQEBchrxh4YRmYkqHBHGj0Dv4207/hhau3dsW\nCGkWPLmV1M2Gi9eTKQi4nECgT/GYObGBX6kVZxJakNd87C3u7vdseH8trNSe\n7fs7\r\n=Ra13\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.36.0-0_1527607335761_0.27886428924402207","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/icon-button","version":"0.36.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b1846d2aa12793ce6af375f83cafa9c741f8f54","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.36.0.tgz","fileCount":13,"integrity":"sha512-40xIj2AHpf8kQA7Dq/P9Pg+QcbyjtJudXONKjHjL+s4fWDTOq1lOsuhH4MaQAoF7afFNibU0zxiKNq21In6jTQ==","signatures":[{"sig":"MEQCIFF7tamSPx4Xlem2fNWnpvJcPJB2+2N3M9LoJnLUGkX/AiBCgxTlHv9SnZkbMsD1rMBw2Ob7aLt8I1L5ALxvvM2ebQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzdCRA9TVsSAnZWagAA0k4P/2S9A1fJI2JtS1qLUA+E\ni+YH+S9DBYaunD9GUwqkScK9vG3VfD/Rg8kKSAYl0mEhPEjCoNnCfAY62l7E\nUf60iETxwJEBfZRhDmy9wuBMksyX26t0FBrUtaQnuycjA9tliBIYmHLBnbQx\n7IbUC8vmSzD6Sb/yQUjeW8gBJ7RAkWtpYpYeMdeVIXOdbjF/2/eHkzoTGbi/\n2AcTIei67VxAIrPUx7nQG/UUN3Bt/42thIiW8xXLCEagSiB5pD9DI7gtl/g9\nAcmkxIfClUkTkd0wmL/ctiE+nJMwDPs077ERyI/kdavkSIQb3BSl2UJ2y5it\n5NxC3c7J6zA3uob4qBv4Tzyls3JNgTepSzgX5pXWhDhP7aYdhSnAQQ9zM5LK\nbnOkAHTWBdXL34jWDyX7ekCPrIIWTHGhuLT4d14DJvxi1J9v2dlocJnAKaLP\nCA9UAgfyrKwMWtq7bnVF5LP5D0V2gxLcmFG0GNFiExN7hC4nORtIWyHhAK5J\nMCcG9+9Z+qeiOLC+vbj8ZFnUcfITDgujv3j8KVfLDq9X9bLQxyU2zZwmIass\nDryVqUl4/LOgxT63YXGTm/vbs6x2qAT7Vs7veQ19bliud6pPSK3gr9Cu/Hnu\n6+TRWRoKfMILVB0bkwRXbiS7kEjxiTztlKj89k9YMcZdqfUm5ix4mxlWAxeA\nszCT\r\n=ghXE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.36.0_1528126684667_0.9411512225482361","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/icon-button","version":"0.37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a052caf38fea05561a4959d763ab8d18315a73","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.37.0.tgz","fileCount":13,"integrity":"sha512-zNJ6GIv/oEndC129pnnqSGEH/ctDzDQSevt2MgvSgMJiaAYli2OJNc+niEhZ2+xn1Z8dIKdHmpFkEuWd6QVRNQ==","signatures":[{"sig":"MEUCIC8TQx7pCFNk+sn9rj1511122NXgiNV3CyBSLruBOBz4AiEAobGa6ABTUoBDcnWUW0KjeMu53AZwG4Q8gK+00CkCQXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqOsCRA9TVsSAnZWagAAkoEQAI9VY7lzMTx4Tj0Gcg8h\nnggU4zQMkBKAv/elCWFj1xjxnJiKSHETnwyfEZCsLv4MHppWCRu4P2U2nFC7\nZftZkfJgzAk45JPx91cQHOt6RcrXmgXJ3O0Lgu7LOEg+DX5jtZS8WtOztv0n\n84urDHga1w4II5H+dhkXhPrIa3NLU79DEhePhGNM9MYFs2JMMAjezCzyx7bA\nucVjLSI3iThiS8WWD6UJnLSNUkZBUec8MYdDE69a1lXeypwxMslxLBeE2j1A\nhH0Iygk97LdqXsZ02siRd+ZQjjfe4dAZvqegwCK8obHXzk6yOdeX2mt+TO+D\nKowsLe/FiGlX+4mFuQ7KEWvB40DyclyXlXmi+pcwGXLySdIRb3uhB6ruK8Jr\nn0udmcVOpHa978+iljOWQq6kAhtxYeCHpmivUadZntYyZ7eKtqOwg6MvTjs1\n6XPhhRy12L7kTbLJRbof2oQuOEsOKYrG2Yy+BcqriKdqXgNnGDRrRghW2RhW\nxNu/6O8oTIabSu1yOMvTn8izf+uTxjcoisjFxQvm4X2CsdvQbh8vYD/kqR7u\nsw1fRNPAPCAGh+ZAITQ4d13NYEAPv2AGQlYfwU1mGhCKbcwkrXZYcWL66hTY\nQgZnw+Vbb50+qhBjJOA9i8C7WDdOjA/KRfgsKXak01BZbE8SYdV2ilg1axmc\nUOrc\r\n=J18R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.37.0_1530569644515_0.1370635525705184","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/icon-button","version":"0.37.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.37.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f56bb8af465e76a867dd47619243ae7bfbd9678f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.37.1.tgz","fileCount":13,"integrity":"sha512-J3/p47pU3rz4BS0SQyPZVxp0AUQZJBEBk3RsDNeAUpX35EKpHubEWHqc9E+bSiRuTeMfqh626SUMDx0fAK718g==","signatures":[{"sig":"MEQCIAp4oem+nhxFQVZG7ydIHs/E10s508Z5AdTlSNOkPezjAiBcU+V+PYyYBgfvwTdAJnYH2MJbyFndy1cTaq4g4oh1tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvgCRA9TVsSAnZWagAA09IP/3eXYfk51okrPmRwd14t\nvt22CN4o+y60J2CJDKxMokEjQntRCH2lXGmqiJbrFVZ7V55lQI0emZ4Hbr1s\nfpIEzr3S2eoYanvPemwkaSAg4ExrZJ2L/m6YVJfZLU6bZM/spIbsFqlYz1No\niTkcyEQyqH/vsLz5r007oN0ryOzTAFMfUZIRCfGcZjXhWGoTzZ7W3nQJY4N/\nGpWeaPCL09B7eVka1m3qW0JFd003r2sRiNRnI/BgsK4uYg6MFdW8sJrFIkur\ngWz/lUAWxwjAdFbNr0NT01iUUs+KO2SGyRlGW3JIerzedbqKgsaQMYV+htid\n5eZwitJmnUfxXKBObYMl+HderLTEZVAnrF1vAWJxgUa5W45nDGq0FD1uec+z\n7eMD0A5/8OrAkvJfl83eNipQdlG7jYkJYhFgH7VRtlCFgGHxlK2nW4qBzK6o\nBgl3Ibun/zl956gIb+YRIPJbunHiEACvBI/DgOYqzXXHxDQM5MoHdOAgm7lf\nSrgxjvfIP7WmR41blPtZI5WgBlCnZwh8QJOgRU3ld1g0u+NGrKQznlQDFIDy\nd+FlQKhXHOu98I4e9Dq163jC1II2JQOL7gidKu0W0q2pc8c7mWVieE3+u1iZ\nXlovuLPzwDl4jgir6Pptnp/KTaca0HSKkvU7aReTLMkwI75cbTxTH6s3UnoH\nQv9G\r\n=mgKu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.37.1_1531775968503_0.19006483603994995","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/icon-button","version":"0.38.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"062aa03585b9a5b58523b15be67dcdddc5ba8012","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.38.0.tgz","fileCount":13,"integrity":"sha512-7FbqaPeZtQVFmVNMR/F3Mud2EHNt5Yh18748oR9vtfgNtojgclcneVy7gmdH79vP9KCua/0fksh3xANPW0ZH/g==","signatures":[{"sig":"MEUCIQDlgYekEpshinJFbXPI4t0AhY8SeAl9MluaN81ziipn+wIgCBeKzj+sBIv6LlLCeUBOkVl0rVqCPDLzuvOJwAD2rKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0W4CRA9TVsSAnZWagAAUSMQAIc40CwtzbMLqYc+DY8S\nFFuYt4i+SZOfEbWzz7TSwkhSz970/qVi/UEYtwWzB/1Uez12lRSI4lSyaxFJ\n/rOnX4QZVO7nh4BgfTLTQzKV4YAfDkxddNXj7DZKMpVtCTsvDmCkVxU7SkRv\nqhaokFHrsykOaTMp3wj3+hfP7tjds6kXTCGDpHcZnTiJgKLcVkc1NTWx6gP1\nW2RMihAEq1TTlLidMJAS5NIXyKYyQjHcYYJpofzQvoXedlGSh/Da3xyKdUKS\n7VOch1enT03ouXy6BY2TAqhBi8o+4AxYz3V3xF6nxWXRphfdK+uhmu7h3MR3\nHaHKfjkE0noqOWNItjOJZdn6K2lj9Hz5c1RIU7BTupIN8R5HCM3s7djzQoVE\nnJ8y4KI3aRbmc+bN8GcQGcGh74x4wjpN0n8z0ls5c2599pwaFUW8zOJ46oFk\nk3FuyAgYKm7DZb4w5JmQRaVgfAD1f4A0am8Y/OoCU/pM3m/Llp4X/p6LgB5u\nZ+XhN1Je48iYuxB9us81c+1zHxluTPpk8lgeJ4NJ8TBP2HdjddH3wFQdrLFO\nnS525EGocxNVWvp32m+N8elKYJysqBLiSm64vy3vDzy6dgnMQLbj79O2Eo2g\nyVyz+QE6F0QHbCeOMswuIo5Lwyb0tQcOF75gd7wxVzRJZGeEU6Yn1R2TpVAk\ndhef\r\n=6OXH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.38.0_1532970424812_0.7303727310636685","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/icon-button","version":"0.38.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.38.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e067fd9621ef0463ce36eb492c6ba88db81566e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.38.1.tgz","fileCount":13,"integrity":"sha512-ejMbhthSgC0QO0fvk7Cnw55+Pvo6onxVOtOjctLFaPTG8gPGRqbogsESN3VxGHe42ho+YDINxF5ELIoy1yjAhw==","signatures":[{"sig":"MEYCIQCeQNKZOHObBYuyyqSsnxvQn6a7q7prdamtIsdVmPvSkQIhAKNOwB6eCPiFHErLNJSN4uhA1NI9q6uRHl084wmfY+RE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcexrCRA9TVsSAnZWagAAkhoP/Rsw+0TABRmv5/jA1MBX\nKbB19JUbWO0p9ATr4FXLE2VTy/25LU3B3g0wUa9fQCxIZCN81YbHRWQEgm3r\nXsfJ6Z2SCpRTeJNnUOnciwJ5fJ/5adNtTH9DpVfRUUgHm1e37nEVoQuNfXqE\new85NCrxaFhNgShlMxAv2nGPaYbB5zvuzgzsvo9frMbwV1OwDT938aF5bgR5\nWAXnKI/p2vtfAdbVg5CqgXEDo13JA7I2fwEJLfW076VFbTV9Dr4bcrPb7U9B\nwBNlNLsYkR2NeQdigKqxlV2FTCUpPOEdy2rxgqJJmkGTWqS7Lvr+elBIqybM\ncWCuPNPJQA1b5jKjPOkbxg2KbVcvAy+3kEMsrobCoMNFqqN8XIZwL0Dy4ctH\nkymcfJ09VnLdZ2RfASsC0a3O1qe1bkgyaL0PZGZ/JhBtv7J8VROC8lUXkkI3\nBrzsJ7rHHnsbfgtIKGBLUew7zERaViHVeohZ980/UUXJIPqZrZc+5XGSvb7M\nCZ2YQsSTXksJi2AhNbmwPOFP99MeaENjAbocapNUZkpMuOQDUIKG3ELBvhpF\n6lLkoTxiApX3yS3j8dVVxAnYUkTcy76FvvtVvR5nz5ABkcgLXuvN5gV2Pkfq\nm89CnW4XkJdLrCbME5QnspscgJCdaJQbEQQNKxP5NyUtfJ4uvsSFeaDZoG7R\n39LA\r\n=LApf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.38.1_1534192746871_0.47767312172312315","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/icon-button","version":"0.39.0-0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"Apache 2.0","_id":"@material/icon-button@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e030364423e0dc1da24d1480555d992b42dfb247","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-AQQKhlJl37Hh5MGY5VRN6ZZwg5d2hysggAqUDXFpIQHHew9WVjk3dfK+m9o+JCOoH5SQ+5PloKYzYdV90IB+cg==","signatures":[{"sig":"MEUCIEtK+Rv9FRUu1YOGjonZpBcJ4XQESQjjVXmv8MJPLAchAiEAklPL08cWamlwPMLviIvQmtJ+NGYFZ1U1s+/dHzhrQYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUfCRA9TVsSAnZWagAA55MP/jx+IBEb8yv2G95xTtck\nNEUlCp7ULjh7rBJ/lAk6QQwbA764n1sUdJPIoV4vOfmSXaBWF60LLXR558Gc\ns+m/EIwyp9fKV/b2a0SP3sBJG8Su1t58fjmZwX4EctZ9KrcLyBCl1vfWGgFW\nXafwNaRVMhQDa8GADaf1N8ymxbT4QaH3me1IwzefuPeQIUmVYH6ANoxoIro5\nSJAINuKvZZp/NjKnVLJvi/8hzmSXOpnDxtQRtxijxYLvuqNV/+rxnZD5mn9a\nyJ49ROVPnLvXfHZec58wqN0aROZbekF3k1vEOwDV1b7PzxVIzqtY4kX4hTVQ\nmGA2Lm3j6ty1p8fZFxUjzi0nTGVtgakjnyya7DNyjiHS3Dh1e7AMh0n225cN\nuK6fiCC8u/ACcAMi0CF1lwTjeDIqN9kLh1GNoPDXlzT2FJ/Ggncs8hq30cq7\nEUYyw3EtQ5MxJ81y8yyOodRnxX1+NO9I5Jf8rDHeQ8IpWgPauqV1yQ8/IrvN\nxnFJ1w0HMsWaJ56ivel/YtnI7Wur1VeCeRI3PiDtpREdKC5XOYvFJJMcqHMo\nq/65TwkasauodAIDOriqV70SChkspSjdbwVg6aNDy4NyhBcLiBISTSZagEWh\nXC0tNwDtLNbybnMasPDawsyCUKyzyovCUthESD2u4IhSwBHtXjlIhah6QCzv\nzlEP\r\n=DqCn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nThe icon button can be used with a standard icon library such as Material Icons, or with an `svg`.\nWe recommend you use [Material Icons](https://material.io/tools/icons) from Google Fonts.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_0.39.0-0_1534432543163_0.6158082984051232","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/icon-button","version":"0.39.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4912acb759afa87b954d83d55cee03c3294359c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.0.tgz","fileCount":17,"integrity":"sha512-fEHPdngnWq/bwHjbNhnERcG4dV6fqTrAMwqPDILBtY17B3ivT9/Ytw+n6Lge7eYof2uBRxPx8svnRN8BuchBGw==","signatures":[{"sig":"MEUCIFxoyXCGPUEP6YBz7yzXVYsDnP6XVdMHO29tALzffREiAiEA/2ILM2c91kpINKwL+CHpp1UQeKCrPG1WHXToMcVj+yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeaCRA9TVsSAnZWagAA0A8P/R+CTiQesTvBfOUOgb6G\nkt72eiw+dYoyymndCvDOZ673thgv6pn+DseMGGEKfIOR0B0tg/76XXLzi21x\nb88oKvgmBSAUAFaHsNXDmaMoGUhp+4TPcvmkuvzt0L7+JWg8WwazI4202lK2\nfC5svLOSwrx/bv2m8hdCaG+0yVzp70Ztm0fSa2hNUhVy1JFUYeQ8CZ2o9Qmz\nqjJWg52Ae5bNp9L4K/GDyr7Jh1cvQZhUMajRWI5Vkt9MfInAevSZm7WFXPJc\nZ/vg14H8fAaaqLriJ9j8t5sWaOCMhC48zXJnVA2qNnTlN+rtjdQJh/bziYlM\nuhZ2tEtLgoxBy2XPkIy59phVl/qDfJzBngOylPLTkmstViwt6bPrO6oFpZ4s\n7kGEShnZvob/8aP2nww7EVnqZRUFW7sulGIwLvqvELRawLSzkm2iyjjn0ey6\nWlBPJC0JvHN1XYkCsYnvbHDqSxnG2xLspRE4NuofhoNuxhLR7r/1HLII1cuO\nQW3jxREE0GUKV4fzQvsGSVnqRD7nbgddeti9yeTXEF5fbZP/vMZN0tO8liOn\n3yLclJjr5Xue+KUFLtejcAMcbxX9ySip20mlt7xoboIlzyNZEoCMh4jfqjgC\nnmoHIedIvaDzwT/ZBWMbT43QrVOZqsToLgF/YvCGzv5KrpCgipYtBFy7VJVT\nUZ22\r\n=PiyS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.39.0_1535391641830_0.014229473651746094","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/icon-button","version":"0.39.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d4cf480186a69edfa8441a15a253e23d6d404b1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.1.tgz","fileCount":17,"integrity":"sha512-cvM78QAUdsKGwBrQv+AUXO0rXGHSBL2yKxRv/tjIBsk678t9JZAv8tHRnpAeoSlamR0RLwnADxnC90BpGcsG5g==","signatures":[{"sig":"MEYCIQDRfoZ2EMDUkdHg8qg6O3SfjWmdAt0mXK8G/9LlvtVnXgIhAKUwi78L8+pOs51l8ftYAPHzwuWabSSEKJlayw22Wbcv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTfCRA9TVsSAnZWagAAN/gP/Awfa4X6+5IawqHL4i1K\nfvgm/rk5H88FbsduFTazhoANzjju2Ct9awo5yA6PfdH+jc/ui8fqaZyIDcec\ne0fJcPXkLR+22VdN1yU9gwS0ojJ/yyLI42ljGozLETdy/asTruJU1C65kNxu\nx8VV5PDv9Fns+n9Q5s7azE9VcQLvuMcTZVPGLQoDv4JZJi9ml6bkWdK2IgWy\nXIbhqFglRHCnhNbhg4Dvxdztoe464qigC4ywoliOzRuPUMDZMtvciPMo+YyL\ntHCXpYJteXua+KEEpvVCW5go8teWBkK7GBq1YExtsFcyCiXfwl9sfAtSIdnc\nQOWVc5/1++AO8LmII00mOeZY35ZcOdqCtJ4KGUAd32H+y5UTKpPRx3nOEtl3\nDx6qhljPe9hDXk4wi7z7jmA5/ie6EccHlox8vzLEyoEE3amyG/s2Q46Uszp6\n3LZpkOcjjkDI3NP+0Z43k7teDp+l9P2s247eNqYGEL9pNVf5cjo/OpuN3q5R\nUZ4/nRLBqov4IhWGj5kb6F0zC1hApnGWUIS3zA9M4CtiYolv10x6v2fe35i3\nU6IpJc3VWCebqZxvBi2hLwBxvxA8ykD2+e9Zjl/xcLrD+xFkDdqjM8FvbSud\nG6Qz7Q5rhhH2KCCQsv0C5Y1L7td0oBMCjdX3hFjQffttxjIt1VIYcvtHaVMw\nRSZa\r\n=ntxu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.39.1_1535751390687_0.2709006217616057","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/icon-button","version":"0.39.2","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe81b4695166b06ab50617e3cac5c0b6e865fe3b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.2.tgz","fileCount":17,"integrity":"sha512-OCEsIfX0VylFu2VGXW2JcwF3B+TH8QvhM6l/jYjg1kFdPeX1fOVDs0uTChBspqPSeyUqsU5/IzqKHr5i66OQOA==","signatures":[{"sig":"MEUCIA41z909vDZMMrIdo7/zO/7lPsckIRc9aP6X9cHnzN2MAiEAl8YWxqmjmrV6EIPVhXv/lKjq7huUkAfeqxaxssHEG+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NvCRA9TVsSAnZWagAAF4AQAIMtKJoRgjrAHF964dDN\nS5avQO1XVCCA185PuYAL7F1wQpTWuEG7WPHeQxpuPbEkIPfJxNKFbc/rBMzx\nHczDL29ci3+uDjFCKwY7swRv0TFjx4B5IUcI8w8Py+WzzcjN0Vwcgoj6Zzuz\nfwUlp4nbLW25SCTVDN33QO7/3fWT8xsLd+CJavf5TF5krvQai+sxIpxkfUtg\nIMGTRJs3kPHe1swJQsxIWTYT/Et3z7i2BtMVZC+w91vTBmG1FMRFtAkL4Kgc\nD1DHIDW1W77Tx0vcmVfU4At0qx5G5VdKN46HAi2s+XKbOr+14HRZq/Q5ibyK\nPVQnQ+f1rRD7ek9qdK98F6AujPEXhOYIITA5nKS631uxtLOc75KNLMACNQJd\neXfhlP60j+5fiteXAs5divMGt0dy3rRlWUg0+2SSBAN3s8zDRfIrhthdPfAK\n4HSume4kn7NPwnmAM+N8FpNUrb9Lwc9BpBLnjSGssYYX4BM8E7lPjcx73NnV\ns6lp2gqL/TmA7kmWCE24WDE5TnYZvOTDKAJXyv2Gmovyd1OpHIqNIt8RJjvf\no09HQvxBqXmcMZShiQ83rxPv0K/rRpV/TH2pWuFBglVeAPRLf93koyb06Itg\nMTzaGSqPm2KuILf7/SYbMWGekfkyrLptJtyRk8mMFd5DH3arKkQJRr7JG72N\nnGTq\r\n=Rkan\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.39.2_1536684910850_0.5742186881047231","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/icon-button","version":"0.39.3","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389fb123c0c0923e05f6e6a6621b8f334fae4ce2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.3.tgz","fileCount":17,"integrity":"sha512-qogYy2MCC3PjOZt+93fD9sWgFYOVexXF3xjiZhDuP3zBy4fdSfaq0xx6P3vPZDEgG6JgDkedRuM6EBAU8FfU3A==","signatures":[{"sig":"MEQCIAyzlJcqY+h27rP916y4PsgppQJTgo7O8WuxcIh2frxIAiBvDy3QlWf5GP3Ok7XOemZ3/JXnfXMJeX59yWrTLNUvOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kDCRA9TVsSAnZWagAARLMQAJLRIxMJfjHgkuTGmG8v\nrT+1HAHsE/gTIRVutTeyEKRCcMHIB6SCKJm4q+OzyHJOb4OYg5SAsstnXLSj\nPN6bhzx9lS6h9MiTgZUCj11er13hpqY4kECdQt397KDSJwi6hLt8mMU1Z9Fp\neDc524fcewps+/QrJ0uK/CR7wLrijGg+z/MPkM66PyB0O3918YnRwiVR+yvz\nCxi1jq0IEjS7qiHvNygtknqz2dhGmZYe3y3KgnahaksxODLCD6m9yzIG+0e3\ngIY7b7yAldreJkFI6YsJzRABhN08byxv45av7sTjshmR9DXX3ZM0ZycPBh/J\nvNGPnxq9Oc9XgRmxPD2NibuRyM/IJXSIa3Y66yPJW2EwmwrHWrC26KBh8EDI\n8TfN2CGbQRv+h/MZg6gGMP1WLmsPwjDJg/elOozsQovwZFMN3kTI9eYW2UE7\ngjtr/II/KstVMobT85gdxPVyf45/dZwwzNBEnO7TFU4yeaQgk7zksPuEKFjL\nbOZgxTyH5QEGywBCalEK3q64mCF2p09duKAP59Cx5s+MnOdbr48yANL7bOpJ\ntOS8U/c14vmWR8CaQS+BSUX6Fqu7wrpyfA/foAriIQ2oTd0DS4DUuD3OYbJi\n2Ycsy7txy5sqrbx8/+HfkQAYcR0YuYL62Fkb19oejqmk+DhwU5PNtMbJ+OdM\nDYTn\r\n=+RVY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.39.3_1536686339060_0.4135217427287339","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/icon-button","version":"0.40.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ad20b854a98d246c3e45f5a96003a4131c80f88","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.40.0.tgz","fileCount":13,"integrity":"sha512-JhdGuikaAKZ4QObQjh8+CCEAqJctjiHreEtjsVmRvXW5dUrR4GKFUst0HE2yQaux7K8Yho30Vry1K0d10bJTuQ==","signatures":[{"sig":"MEUCIQCROBO1bxzBhUdC7tEip2Uhm8edXY+9KwtZzQ8Az+W8owIgLaO0aY70c65dKAhDii7esfw80GW94n212qTNWjS0I0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUKOCRA9TVsSAnZWagAAtW8P/1w21yiqWJ/+9QkZsSrz\nDyVWsH9uZcTLyxux8nRNNcHoa9+XL4ScPUAKyoS+sGvnP4yLOlJXQnjyQ/rD\nqaN3S5OPUPHdGVx3a8nodjM9wVvgr8Jtol1tBWzSQLpDiYsnX57QSz2Z6YBy\nv/Al9zfRfyajt9fKspVPsSjBqLSO5gIgP2j2wuTTr+778pqhsMSCCInOLbnI\nPGa89VwgH+pf3yTyzIfuimwvplW9uZH7+vS/k13kfhRCnvDiNuNBSCWI90r/\nYuB2a38Ajtknsk+hi9LvPJb4DhSkmTcLXq0tViYzNNFr0AkSaI4SW6XHi1tA\ncjmXCC9CZNHLyjT3yElG9Z6v1qZQGhwkLR2fXnZzErGSyFKE9rouv5KT391c\nY/wyh88kiYier+LBxD3KBFkz2srhN28Lhy2AiJmRq14Y8EDmyfsL4VMbiVZr\nbhlBCbDqkgcdeljDPONiSXy57FbtBWavTxNJ0+1SL1k5KqDiNH8tafV5TRpn\nadcoicloJYbx1T4MCQN116GS5UA4h7QQdDoMquxS9PFV6JZXonzAlmR2nIK2\nXNVZl/1LiPEUIHd2OARp+Vjluhf8JQfKaQnyiGOZBiUy3mgPJxByakpmBB0B\nnO/81CbCRcSUbzX2jFqq3VuMCgYAeMxmSbr7LW6B47MgCqtP41mV1UyN03RY\n50Ks\r\n=LBHi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.40.0_1537819278165_0.7241500456668863","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/icon-button","version":"0.40.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c00bb25a905b0cd686468dde95f4cc45c6585ee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.40.1.tgz","fileCount":13,"integrity":"sha512-SCi9Czx2kCH3ApdVdQPWN5cU4EQNjZjBniksm1ML2RgHQDx/aEiNl6kmhtn7oEca+TFc5B7eXlIty9eyuHr/fw==","signatures":[{"sig":"MEQCIGRh475KbwzpovNloT3HgRBzdARl/1wbtqmNZQLcgFZ7AiA4RFwNu/X32F6Kow12M2zDwc/lg5sduwtHsG0IN7RZXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QRCRA9TVsSAnZWagAA6WgQAJe50/EJC6MiNkGkpU0i\nrWx7p5RBLs4FHcP4jwR9+0deMYWCqtvsd9Iwg78kJyIAy50ebdHeA+XXRFYk\naaQUieO+u9giiPLiahC90HCAewuamuSD5ez5wdzO8UVeCbU4NQNciCVeM7S9\nzVFfPRLhUeMtf17mHllKqwxO5zM8hYwPji9XedxP3OE3nHBMJ1wrqbo6fR/N\neYybRrznE/d7+cF5dy3pqb56HyE/DkteSktJI4Ov4r396nG+uLwniAfeYeUk\nc6gAEB2rB8RLzeg6jygmv/5K0yx8v3l/QhfSdYOxd88MoUY7+v9FTmqTZISw\n1HF2gTvR3SOdiTDoSC3+Q0f+OKWkagSKqniZv2qPNdUNak6vJiXQ1Bvjemh2\nRMuFbyEgG7KSbM4n0bTf+s2YP3odsdFV3VlK1/hASSJUN1Z4TwJmJzJ6Vd2+\nezoRiorZDlin7AdpAtueBrLTjhZJuuHhex2c3ZyZF6N9kPJupdNkpJonAtex\nbetfTzQgffNjurxhXzkHSR2TVWJ1q9xgkMWoXBtGepQZlvYKJB8b1pn6jVOh\n2jf6iMDkJNnC6ummFeAvMxUe3lTxNxgBcuaRb5wdHcQwA3dGHu+WimHToKfU\n4qlZH736bWlindHpkTgMqnUDKfn6PxC9H50/73TZ6MxpCNEarigCL29oAAQs\nPDAI\r\n=H8hS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.40.1_1539032080762_0.4566610684222332","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/icon-button","version":"0.41.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695c334232dd11266805c6196ac0a3ee95f37204","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.41.0.tgz","fileCount":13,"integrity":"sha512-RzGSH97aUcTW4he+uU8ahT75DEn6+29L0hH4PBKe03/R/qHFfOrWfjfd03PPiCkaT5SNkPkt1YnfEPqKolnH1Q==","signatures":[{"sig":"MEUCIQCrvZPIlvW4soxyylze0JWkHVudf0m89T+iK4OedhAKZAIgds3QgkJx+i0KwujeF0FU/9vqCqUSoruFU+yxsK8M0Ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vyCRA9TVsSAnZWagAA6yAP/jX5wcWA4FGElpiQr7hh\n2+AetisG6ZfY9FGlBPEPMVxYUuqIBWtOswnNGHtYcjdj3zo9igGZzE/eTqg/\n/tGVT3QNKW34bvp5cWVraWSGnUUDyQYwSImwqFqW5Ooxgy7V8tT/4uz+OzBL\nE8AHxSGcvFCK2VE/hPEAPOEnIqlw5/LYiWFxxdG6sWa0CeZ6Z2LOQqmcrqFf\nsyOhm3Tqe3uw0Hd9eoG6gq+7mCEqc6x4mTpqETTIYGsAXT82sZRunTERU+Rf\nzqDZCP0oU0L9B6Lsune6RV4Nb05bsY/AihWixHJC81oemRnW86FNPWscceKZ\nd9fzhm2enka5hn3HCQMhmLJbZ0cvArcM0f9jf2J6lhDvM+TevZ/S5pgBagFW\nvPQYkR793zuYqq+mC4NYONm76ile+384rs/iaEUd3C6Fa+fYH7cGI/YbSdGh\n+Q0I3wJWggTxVZzrYt2S9ZtBIHV/joVRN5Bo8KGrQMaMXf7mMEa1o9SYE9kn\n8w5pSPcy6doivX9FU5GAfsxOBqC5yMKWZPo+AxnBDOWEVJztXfrgb5pZzgW0\nGuifGWU2qWKB8EmCuzaBRzmAoBRsbkz/H9ArZAIkNkOnEVDhYjyqL06Rd287\nunijH7Yi5cUceYF14D0lF0hSVJejaOkEpahCXVnRcxIc4Bdw8kCOrQ4uKGUL\noieb\r\n=j1IR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.41.0_1540844529504_0.9350819061269973","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/icon-button","version":"0.42.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f100b34717846b9fb738202c1fc935214ed541","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.42.0.tgz","fileCount":13,"integrity":"sha512-T8Za2DsJTYp/nFpJxAZhwtY95pyGsOxS9R5vImyyQaQ9CZahXzmFhJF+cai1LF41tV68hwgnMifJ0iVLgFq4dQ==","signatures":[{"sig":"MEYCIQDlokvvSrx2D3jJIvN0MAdJ9/7HrUyE40TVtafH1+Z9QwIhAMdOO3xRC2QPXYjHkTIHHyxT2MYabHjTvsseOM5wTCvB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW9CRA9TVsSAnZWagAAW3AP/0WDJcA59sRj7CZhDkIh\nT6x0g4uFWmgiqdLZ7G7GckipHRT8HTeGKG4LuFdvxP88PFeG/DKmmf0e9bLa\nWLAZjVFktVsVBo9qBiKCUZOuAxDBKFXX/LRiOThrc3Q/IOcOh27DqaqDs+XG\nQaEnBZvM7jUFD3yURkdxM6u+rSmpjfOTKuWD0/84BhkSgp1UDvMHIvgTNZ/S\nkQlVlH3YBQ71jKy2/txZKIgh5vbtIT+z2yMlqYg05KWvCR0HoYKZQaWJglyM\nSY1GP+/vSKr9BwSqeT9at1C7bQLKvWQd3PUuhGl2TEsL+ydsoOr/uyF3CRKa\n03048lWFhB4HsIZliDVuGxY318Q/rrr2e8o+rEThbpZii8rJNwpriXZOZHku\n1AYFzcJoyNg9SVkRoIS8eZyGJRqi7RO1yxsmwMlrPqtaZ1A1Z8zn1YvHM3+s\nJm3er50eZ7BMJWgd9LFqm92t/YQva/HU6Qie96CQ8XArGEvymAwUffSQgU2o\ntTidLHsrk7oBueGOQvhAPDhhEG2V7eKIg20PxQnyYpJ3po0FZOVpLmg/lg8S\nIvTcz7HD05OmI2t912hONyr2zyKy3ZTbI8jxQdMSpE4dZGmJ4gFJ7YbEFgw+\nQsT0lI/4/b68uJnLKZvA3NHD7HNcrxlNyzxAsoylhJha9vYv4ZViT1Vf5b3f\nPjKJ\r\n=89UI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.42.0_1543964092757_0.23737826839062537","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/icon-button","version":"0.43.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e777e585d56b99306b91b197c0d486e9fac9f034","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.43.0.tgz","fileCount":17,"integrity":"sha512-muldr6pmX2peY9ECYxcZfnmDWLqinT+HRVuND2ltCKUqgLBGi4DETQQE0PEOzsChePJothbyqeQorXgcBP8EgQ==","signatures":[{"sig":"MEQCIGI0MbJfJi1dyzZhuuCcblTSNqs2UIDB0b5HQxjcuEvPAiAzDGAMUuPC7g6sRNDPcpxPvy4RBkNiAQU9l6ytY1FYRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM608CRA9TVsSAnZWagAAiFYP/0kXSnuvAIWh0LU789ds\nPyI0xT4uuDAnMcBgzB2+Eqc7DCsXQ//y/sU5c5uv8e5u3qgWCg3Yd6zyR/XT\nIkUuLDTBzsOYIztnMS1FRKl6/qWt+qDR6SzDTW7ra6cBu3BqD8hFLZcHXiCU\n1qxd3HB846ecdCSifCBSUnraLjoQMJ1qEdG952AVYq5xNIu3WcdUGXGa9OaE\nMrHVrEHMzxTNUpySowwqfg/jb9i1602Cund6P006Jagf9xZRm3GLCVR8WOqq\nwiVU2o+CUyDpUZN1vyj3p1uFXXW2R5OLwHi+rV0lTarZkEJiB97xKeGxSHX/\nO4H1jVvdG7r08XuF5Oo/DdUc+75GZguuSBoYR4EfBhB/Wy9U+Mz5CirsSV0b\nxJzpycgVb+UAA0SLDUQ4Av4opVepA5tylX3WNYda5Hwq8vxIhIA6SgIQlocl\nUUt2ytPiDzBsUX/n91Fyz5v7ZcomYIg8y5h3ovMO7zjsNYLMpm93VGkjrcmc\n6zHkSVtLUKVjFyjhw0G8cqbdoaalD8QobFsg5tfo0ZcJ2BzB/RkzcFil0wMl\noTvQ0L+0F7T3u8/GWsfu6YWFmxodlFQ+RccisiDP7lDX+rmrzHRFFS+//ZH7\nOpelTyXMvG9qYNL17s3LnOyT/DGYM4KwrETjiOKDIBQsiYkYhZv1owmLmYTS\nCbJq\r\n=yXkS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.43.0_1546890555223_0.053082017500420964","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/icon-button","version":"0.44.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"febbcfd27d91eca8096ae042b9c07ed0f65345e9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.44.0.tgz","fileCount":17,"integrity":"sha512-n6L7RaRyEci6eGsuBTSEG+t9ATHAHaMlf9zuTWorEnIXY4DAmGO7ggBjw4+1XIOjhpLeIjyJdcvUK6Yz/UVM6Q==","signatures":[{"sig":"MEYCIQD7Obs7gjZv+6H+g9Mm9TmjY06LYiEGeH2Og+PJtiJ5oAIhAJh6/g75LiyF0L7+mL6JUnFjtdyzgrqEbnNYid8vYIlO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINACRA9TVsSAnZWagAALoIP/07O9EkTjoBfDAkgQ1U0\naAmOIDjfcE4ysdSmyBu44OAt1rKJaXq7eyiR5J56vSps6pkvHm+ZAtQwicLU\nkVvMUO2mUW4pU7Al0WCavnZLARVA1ezNg8ALP5UwN0Q3THYdG/xZ2/q+CoVd\nUkshKgMrRhjMZ8XrhacHKUquHzH5ey+Kom/h4jqtfrIiRIjlVPFBJkhAFPdJ\nrn/OsqSU1xG5Mz+NFEoB9XOCVl01CSIDvxSbtiDKIavAa/o9TkESUYtdHtIw\n3vAXAlsTlAIyQPD4kmuGS66kmOtOxBWg3HcubKWo6FOtAoj1HUhasjpFUxXk\n+OX2VP4pONDBK0eSxDCOs7mwVvMyzegW/T5QpV1kT4PxlnUojZ7+Ej1AklVL\nNwBR47R7qYksWwTqPiqgblXKwqIAuZdzHYyK4iNP7BAMKvjHNjT+VN1OdHwV\n9Zf/SySARPzlGZEngHRt9oZK4B17E+QhgvbP5dH1myU6KlRXtRtcJE0R1up6\nmGpuxwYqnR1GQ6WGii5Y/p9LQ7T+CvF92V8FBjvkfbyQ63LfBUv1fl7AgQIT\nV1GzzHFqTvzF3+6e4pje5vsGb/VJUPSFBS85JHnOqwRTrb+stvppW9uPYZiu\na+63UT4zR2B7yUilef25W1huHm8dIcn23WJs2eGEpYtxMaG5JIkbMJSXFLB+\nI4GJ\r\n=WJ05\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.44.0_1549304640173_0.29917931748865967","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/icon-button","version":"0.44.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28935c16edef62c0f77fcc1195707c55331a5d0f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-0.44.1.tgz","fileCount":17,"integrity":"sha512-46fLWwqLjer3w1h1HvfNsVuBmNwg+rFbIrLBzUXSb9iM6YlunjBNwPZI5KTmVpt04GkzVI2h4o2ej8dOdvQWOg==","signatures":[{"sig":"MEUCIQDVU+HTz+qNlCui9M1rX1BONfHsIIDFqmFbwHxPaOKijQIgECxfdmRzLwVK8mkFqwABhKCsbQO6UVpyWANbpwHQvRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsdCRA9TVsSAnZWagAAIGkQAITiKVSYqYgdigabDQHH\nwAzEAHt8vylEnUJzWAgUb+kOzkjlIyyfkfEOGGmixsl/nsWap4nB1yJqTVrF\nIMC8ZBB/9YLcg9+XPWrHL4p0s9HZumsh5Rpoxt3TX4++kMZqlylliRNLo2qj\nUQiyqJb8hXEd5VWZFpQebsMQDdHQUz1EgwC5X2+BBcF3oLklegSkgW+CRvpK\nFcYc8ufeOJ0x8esFjUOsVOS/JGrOWkqVFidGpwQwSUUw6yAvZBqE4gWN6frc\nT09kJbDjHwvyKizx3BMoUOdsjv2kG+9YheapgA8nQw+oNFcK88F2x59x4VOt\nAxbrC7G1OInuQNVToGDCQf4BwAS8rPbMqjy4hcX2jFEC7Zwq3ULKbo0r8zVW\nVBSQ+StEh4AqR5bxpscjCKBwvqlVFQml6QWbkR+gWibwzBmZ2Xtq8o5Y/Kbc\nm79drh6l/daGnKx6clx3HPDogGlunkZ+yvscUbIqaIaBJ/eemFo+fpQQQ591\nzsdOSetsYTXBtmFQuoWEEv8wnkp9jvqi8SAWg6xPRxxrcGCNbD3GfFPt17rT\nbelY4T0yFtLX5e4gw5DlvOktZRIh4BtO52KluqMYUfKjPlrL7Yde+WE6DNXB\n3OUE/iNuO/8XVjqjbT1kwo8Vb0tg+bO6YzBxpsPKJDkkrXuZAfb3udrQqF1W\nPieG\r\n=yPJ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web icon button component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_0.44.1_1550617373169_0.717527253876892","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/icon-button","version":"1.0.0-0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf94a9f8439d35277348ab42a9c3ff0a013d6fec","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-1.0.0-0.tgz","fileCount":32,"integrity":"sha512-yB5iq/iLRzwMV59iCvYY4N/RYvk+vS1pPyc6gyjOzkTtjhHEICc4zy4phui1TjFhR/WTJwzd8+KF2yt0teTVCA==","signatures":[{"sig":"MEYCIQDBdysmG9DvSZue3rwwqUvLSr0lbLbY90Hhzo8wLLw59QIhAJDdMUT20s4gAjphk0uyS+6pFcR3W8BQf1Zli04TlSiT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRqCRA9TVsSAnZWagAAdiEP/RoHPvzKyq/qKf6AnYvR\nXASYg1RsYovqIMijrMY+PUxXfTTsLdu8QVtZV6LcBzfRMaPdgxTPUITSj2lR\n4NGeKWmTfm+GZ8M1QlxyN2rO/1Gx6hYmcr1kAJVygoYdq2/pyBFLtmJdzwL3\nk71w39nG8E+aXGeugJmgr3i3MCj7XQ3jiIuJaxQgLFlJXqh3obmd65aufbfU\n9wXY5n4CxC6/knbGvsBa2+CLl6sPkLtWDg8I2H7rSHRACRFSdZpWj/LnR5zn\nASPYvZmKMHM4k6WbP2rxT9Yc+StmgTkwTHgUg6aPDYlinz6YoSgBBIUP+jwD\npuzYQFP26hdp0CfVDk8cvOEPZlp+1ixB1avNO+ymgab1djvZrhlBQ/JWb9ZO\nPa8wY4uHksOoiy3qjBsjB9iDsM7+td0C/3kUY7uMdwAsQ2gNugAbvcsBeIHM\nhIRMRyvD7NkBw3NxyZ+RBwt27vY/M0R54RpX3kaYJgOOXZ3cB+D8h/JoEOV3\nbA5OZgTUIgww5eHDIJ0ZmzzqkWLAUNQsoM+xsg1k3EBtbOBFN/cpi+qmlvCt\n3jEaP0l4u/THj73pVKmRy7l5f8V/OFAr6WwGCS7Doe1eHpKCpHdkzHJQwh4L\nZbhhBPstxoUIGcOLVFo1pVXjzLk5bhOMVhDzZuMRrIPiTNalnajxgmCS+9hl\nT7zq\r\n=T/Mk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_1.0.0-0_1551311977818_0.9228851543519281","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/icon-button","version":"1.0.0-1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90f1be63091f8597489c116a937eb9fa9ebe09ee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-1.0.0-1.tgz","fileCount":32,"integrity":"sha512-vA80dmD2M5ceMN1T/mAoJsOdosSslFfRscZstTKlfks2xmj0ECmldGGfF1XyNOzxx8HxgUxvEJ538SQSzeTv2Q==","signatures":[{"sig":"MEYCIQDLIynutkfdK2DAgAgcHFeJnE74nX5Sr2TfeCYfxGlOkQIhAJIJ7sPiiqbIuUyWG3elrHiHFPHYnRgCWdizIWOm1XK9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":603068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXLCRA9TVsSAnZWagAAL+YP/1hTFZavdx4Lcvkw62dy\n8+/Py7xglJZ9JYWcWHUZptJSQKS1XYWhy1VV6tzZrXKVPOg8Yu1d5+XcBlOm\nWcKwl9QGT61p89T8OUKSc7LJwJc3APKQnQFX+IoeK1ZmSW+RxuZjTMfgSdKc\nF2HBd35rYaazdtRz3PZ83Gey2gebG7S50CSjH47x+o/eSI8mAF9bjqaM3cGB\nNEQaDi2nx29JGeOEwWg67+8o4mkoIZ1MJWtROBmdDO/kMV/KnEutTsTvUcOz\nbEH7whVxZGfOQ7lXbkUoPdjQHKi2yNkDQxroQpinztesdbgOU5yCIj1nZRrI\nf06F8sDRoBfE1gxjGkMa/Cf7zI5PHd/9AUFhQQpdCWRcvXWdKLh4DjpcBMij\nVKVdInu+c5ETlGBuKf8QMId/vnUu+lGpzntDJHzQhmXjiCx4MVZCkyNbGHMy\ntc/KhF/LC4hFp1rx7r57vYNL0C38I956+8pnOMDxcceCNVPh+h9rYZNr1atq\neKPtfTL2Uu7UIHutzuL0LOoX//yWQ0meLJ0FBRrsdZwPo5deZYGHPLtihaVf\nrEONKL8rZvSpVHVlUdfDSKpPKtpPa9UnO55vRcFSE8xkvPr0van0cAoRw5M2\n0+bURySKMjyA7WoIP333Q0k4Ef5t8cyTO0ebZ6c300bpK0ej8rgrWPC9Db2i\noO6p\r\n=Y+g1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_1.0.0-1_1551742411354_0.08908644551037637","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/icon-button","version":"1.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a276689c1dc3aa6e016c4be04ed087689915cff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-1.0.0.tgz","fileCount":32,"integrity":"sha512-5eFpf8zE7KVdaOSHF6icwvGA0QFQa1x0nsHDv/l0V44Esmd2Y0wat4P1/h5bQZiHVD1+siDq1a3EyteCdFVWug==","signatures":[{"sig":"MEUCIGq/QK9pQXnipcG/5R3ewkhSVPiVZgntgJldAzpVUUfIAiEAuyCzhQSCC153zTfOTU0CjozrcKcnVUCMwjXLJa42GXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":603060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbGCRA9TVsSAnZWagAAajQQAJU7XwYyeUy8TDTA+soO\nre5c5Y9Q4GByIvoOU/UDhGJG1Y249bLdBIqkMYAaLWp0E15ZX2enWf2WmaBS\nKjNB+L20RHm5yvqI9+LKVcFXl4VrOImleQrvEhFLQcgDrxyY/zpL9xCFPzfi\n+hfVEBaJA76qtrgNPD+CAriXEM5X6o441FpTyEmpgqicYT9O1RZV+2bbzJgK\n0iowntwFuFYwE5Y56FkLaGyeGH5WqQ94ekRLljKHPH36/60jvLozEDFFAXqd\nwkO0g+4s+pcGvKng3IdqVeibPRGbQ/POG+9oHWKRI9InUEPPIvkcPyobXbAL\nUQW05jlNThenVmGbO0uxLygercnPXe+wi5AV70fw/chopXxRp8zaSddIk6Vr\nOK5Zb7YxdUa6tmK4bNFe/YDT5h4RTA8ScvhqHQgFTsMScDeiVMNJy+OTfxtU\n3zt1Yu9BGGV7NaZEHYiVbT+rJSNDEd2fgkMjYfwYOeqwkzgLIp6OSJQxuOWM\neWnjbuG0LPCbqHpVz6wsdGWnuWMMzBx8OJv44mMS+cWWIf84hPLAOv8CH4uO\n3cnyWriOQP3m27hicNHI3IqREISbCa/Bkvpt32Kk4KOPoYttDloinsr6wwhy\nAegS6uLoX/KmxRUaOWPU5fO0cOfV29p7Cep0RLTzBzrPz9iVFtlNd7worEG+\nKY0S\r\n=y5kq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_1.0.0_1551906501753_0.4787917467041025","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/icon-button","version":"1.0.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47293ba077a4da886b2fe5778d8c07e12718cfb3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-1.0.1.tgz","fileCount":32,"integrity":"sha512-a2jnwYMTDwPVsOIc4+osZIbXwQM7ujy1grQtjvvS0CVogsOdLXYzqUYrI8V9aHxdAdndos3ssm3JAziQhbsuEQ==","signatures":[{"sig":"MEYCIQDzGAALpfYkO89et6NOV8+VrEg7eOJ8ys8Fk38W8AWzjQIhAKBUI0Xit3eFAerbi4H+0NjRrjI4HzhxRentw2vz+z7M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwjCRA9TVsSAnZWagAAZrYP/iAe9k6p9uQQA4yL2aXU\nBHBncv2et8kBbB6cKMDq3cK1SVQaVYt6WKrRJ5cS9Kb0TEdnAY9OdbcwxxVe\nZzt3uRH/vkOLdZnEeprOIcarV5ty+res9vhKb3ud0GtncvJtdVbFD3N+gJgx\nJ+GNwAaM7CrxpXCq2e15nraLhAMxDMi7fJ0nibWulbDeOgEFcaMc/WXpQraZ\nFtAbA4akEwhh5NHzH4DzrwnZTJ/IjkcG5lMEaMt5xQXId85iHWdjHH/GJCUq\nPyUJuJ6lvOz5PqnlFJT9PuTB7TCfwcr1Bly5WKHsCAOz9CjDARCwom1AxYEJ\nS5qD2Ku5XhcrI9y5G/PkkkhXDHsWkNtpIPeHWCcUScQ44o5V9D7PkzduPOYw\nWw0YG0MIrP3lQLnPrKFWMy33ktJ3s5/f/CfgjMYTUQ7nZC44T3MBk+8spsza\nZ0LiOHk6onrI4U6+uBfJZ0xde9A+kez8V+r9CuqgWLix8tVSowhQ5+g9RiUZ\nZUZBQVszKlEoapj8PquzjHXbrcCn1fpF91qFARGvgsXKWXaPct29V82bBlE3\njlzjI/rvete7jq3Nk+LdBWv3uPePCWhAeMhiXozK/7HJzaYS88TA63wsrG76\n3M0vVr4xE7Do5Gkcp+rjBMCHYMCKtTMdZYQQqJ7PbuEirax6iurAh9aDKmqU\nXeol\r\n=TCKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_1.0.1_1552342050800_0.9004022570260235","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/icon-button","version":"1.1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c649b3549e6e9ecd9c82a8ef124757bfcc98b8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-1.1.0.tgz","fileCount":32,"integrity":"sha512-3HYOfFhlgpY32HyNt1thQJfTycjy0Cfd4B4IZmt2irfaETdj6JuP0wKs9kdEx1VHTbfWFkJHENArz0lPW+6r2A==","signatures":[{"sig":"MEYCIQC/esx1f7hWYRBSCaBLWzL9UAj+aoXfbCHTCxrTo+7XXAIhALDABNJ8cV/zsh2WIfjSsJGMQ5nA90mRbtoa+dBJZniX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":453121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzLCRA9TVsSAnZWagAAJf0P/RqNxrvqTHV/12/tpu30\noiG7ZuTWx2Onc5k6AhDJWFWkRpQ+FUcNT9iYxgyweES2lgiay0dExPbxF09d\nmnBCgjgGZWiF5It2MY2JbYSlP64A5spHBsA1NcEc8hPO0DTzvj/IIsjjmOmW\nvuw+VyTIc9E4EPvGUbXGwAC7XMPQ+LLk3XZVjvqd3ruRVpgekAphHtrruV2h\nI7G4xS0UM+1GqrPjgR7Xq7b116h+NOfklVdr/363dIpLXTmEHrvgp6DzYnRz\neyGWCJVfrR2tfaPpcFlB4jAyvRVSo6G47DvkdmR3JwE4qLnq+QbhsBSxL014\nf53AdmZRgzwcjzYUj4Xgs3R8CMLpaonK21Ep7NnclnYPTLUmRv4H4RsIUeJL\nQafAaJ1ouu6Imug/VFETpaEQ44muGWvgfe4K666BDVrOEki5ZuQXhOpCkg8B\ng6XnYiLSinEXUPjP22DeIXsgfEXAo3sAPTa4sNQp+ohgfjHSwgYGL+icqKlX\n+HOKZa9Y7fX9+zkV+OmdvIxTYwHvI2soehdXhAluxEqEskQd7giHAT/lGa1L\nk2empqLBydUXm68Hwdl6rcokHNjFG/kJwZEuOaYBImJ7bhcSE8LEvTeUQ6Q6\nYKo8IexKxsWiXw2yTEgdkOB1jCsLzNLsIj8vNF7d0oKyDjBkH2Ay81m3w3vQ\n76q6\r\n=y4dY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_1.1.0_1553628363097_0.08966765676144961","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/icon-button","version":"2.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90f84025cc720253bc0a55e4c9b654f749154e17","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-2.0.0.tgz","fileCount":32,"integrity":"sha512-SI+DgNzYft6r/H3nphzf2/AKsG6oQuBPZGSSvQLyyAeU10pcsHxNXm0iuyHBKiKWYXjokNtiYjpKnDpKb6ONkA==","signatures":[{"sig":"MEQCICM4lovChBIqs0CrIT7uE0EjF13I/dDMU5Lq1opzZDGHAiB3feCH2WT6BWYTkPadrPhj0XO0wQVMw/XZTNWsjnqgpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb9CRA9TVsSAnZWagAAAPwP/39S0tPN5xjCFftGh5j4\nPgf0cdA4TXgecWtDDj8cQ0cw2jv4HQC3sc2NRfS1G3pn4FYvCvD3zs1YF0hI\nLnjc16cb7CHAjIZpwUtP5FLS9an56LDvnGSbfrzPRgSacZIMMlQfqTjL2g1o\npytd9Cr2v2xQVM93LcABUwxFry3eEyT/EnspwWunEmgirHLS2lkxrCzqYeGY\nvj7Z7smNW+5mg6iBlxeaIwhnfOpSXbmXy5qNIVFdEmDbPMvWgfcnji2B1Lgu\nfBlNI4YQq8TeLrsdjoCOub+FY3XsQAs5qHVfADNlEZ9uNm1Hu/5bJ6Sl1wgy\nUkBcFpCp609Ai4V4P74yvhzvoq3mehIIUW+7Ey++1jHxuhl7tDiAR+h+IWvq\noYYHCt1zlHKHrG7DTZmVHRPhq93bi1zknWN+kfwJ5ORE43Hs0L3ObKqOkvE+\n+iQN7Q0+DXh5P+ZX0RZA6MOoJmQ1OsEgxsIInIdpOU5ee+flbFVTIP6+gouj\nvK37yhh+uEGQGV81h6MTjCGPqd8oNPh37B/MGSA+gB2YuG5RGMSE4spPjp40\nGS/KruuRaCR8JrkBRVStdJCvHHHyJbGxm6tcLbD6Zxn/q2O/5pu0obbWN6Ra\nCe/pRu9kkifJLMdf2gZoZHW9RMzmhrx9daf0T9Xaz7ih3qI+XXeBwR6SPJU7\n6c2h\r\n=/0Hc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_2.0.0_1556559612316_0.25463638539455014","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/icon-button","version":"2.1.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"574842abc808da774e77c097dfca2d7e74ec23f5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-2.1.1.tgz","fileCount":32,"integrity":"sha512-WUp06uqG458bWCp66hyutNvwiuptbE7vuOtVukG/DmxoGWLDXSRStcUzOXYYElZsmIR14SPOTD4694CaaqHz9w==","signatures":[{"sig":"MEQCIDmHZcqFtkV2J06VomdNnafT0osQ/VkAPnzu5VC4oHGhAiAYv340eLAb+pdbEnTsVDJx8SgW+I7r1XC+CLvRCUvVwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQACRA9TVsSAnZWagAAcpEP/iIYsspMdW0CzPVEzy64\nXLJbKn2s4fqmB7ltJNxrtxfEK5uRuJ6WXuNG74VYcZLT7OqjUc0lxHuZgNPG\nzs1Egp/nct9tzbQR3KE7hME6mB4LbyJ1XGfnhNn+g4aP4iAnqReZKCnOuumE\nOneFspgL0YdraVaROq7c4F+VBzy/bdKhgkUMqAH/e+imRRiSguM12+I467fI\neoiLa9S567SK3IcwXT5+UytULkVH86c1RYMB1jzXchA68AGIakrqMKNFZWrw\noWJixhEZrwvfhZwFG3aZvUaU3PJCyNGyfSL/JYhYqqMMAsQ9IOUu3+VlKWWX\nrE9n9T+aXwKMlVCo/LQyJfgjDsa+LMw5MNpszBz5fic6abnhshiDH6Z1dxaP\nqAbdSc+Xvbgx+LAL2zCaPCB26Kg65Jclq6y6UjR8MPqG3yt3yAC5WZS19vY0\nKzBGQgLqtM3xncaq4Cs2HLH0hzOcYe67QzvUIDnbhR8JLL7hOjqakjHy4qUa\nWbd87DDlsIsHZEG2WgfGZ7R7vNdEtnmjSCr+dVTcZNNMTWmklefPz71+zmnO\ngdzwD8YW6IwNxlCMLj109EDmLJATmuKfS+00b+XnsBBTC2glF1IAPqkb0pbR\nDK4yhJ6g18G8WE3C3s+uIkqPBLaQ56UYro4Ze/M4qa6dzHJ6QBhQUy6CZJ4K\n1bPj\r\n=hz1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_2.1.1_1557509119299_0.8287453400128066","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/icon-button","version":"2.3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1160ecccd201161a1a38033732beed95a0624497","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-2.3.0.tgz","fileCount":32,"integrity":"sha512-EZhdCn9a9livj9rGTUtDQ3UmF2zkAkaysWzgyDaGUih9rAbZThtGE68DhBWjBoe/+FDAOZ/vXnR23FdCsITmmw==","signatures":[{"sig":"MEQCIF8xXfhs0sb43uihp0EGS2Xd2WGoVz2ZZkP2UWG20lvKAiAd2DfJYk5zUZbhQmqAQ9cHCeNcO/zmca5JLRqTg0N+BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abtCRA9TVsSAnZWagAAK6YP/R01nRMR6E6g9SK/MfZG\nJlrVWVBHUA5s9md9h9L+oOrc6KKNHe91STOwqm/hr1ZLc+YFuj8JnMLJLags\nt02vgsXovI6NvbscUMuswYOapVmB1MoXUDmAtFsC58NJNhcsxSKae4tcfyxy\nNQXL1ZmsDQQP5d3SY3Y1b9wYzreOVtKAfGeSTH1DtaxHsLwqBpqxUpTrT9db\nOM+VBzatqWblmm3sKY18Z7YYF5szxaoAYZBSFyXZZFH76I6sQjQE7M29XT2i\n2N8j0NlhxNd668NxRBBFViudgv+u4s215mP+SiMLnfhJ+jT+Cxz2CWN1TMmh\nnSusGi+Zf7o0VK1eM8YO1UER03jJmae66rv33pbFSLd4JKg3/o5EhiXfjTpx\ngPgK3ArA2kY2wagDOkOpLqA/UjnjhyiEyYMzNi52C2CKX/CPb2For/jBsM4i\nCbbE0WLq7tOvwaMFksaRYKVsSnbZB+hKV8vZjwRiyR2oi5li/5ji6+pb6vy8\nN+nML8rzdDqX9Har7i9t9Het4FzW2YqyWsf7FPMF8z4WJJwY8IK+nEnuUkc3\nIUhTB/2yDYWgSsp0j3ODstogwOpac2AVgvETM8r5rZnwSyqZQ3jVQrqqtspV\nptHavC+IxJnX5pjx+RO+kOtPSQooOyyjjCj20GvCjJZoxHqlvsczG+dP60yH\n6sre\r\n=aFA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_2.3.0_1559078636631_0.7484590620974472","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/icon-button","version":"3.0.0-alpha.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"739a1da8bc821afdd33ecaa8156d205a7376e446","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.0.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-A9NCNQSrrM2OI6WN53UI4zXbPk3UXk5yUGont2GJ1J1jbd+mzvKeanmjaLhMOBy4m3cZz7awzaS80AeHQaYVrw==","signatures":[{"sig":"MEUCIQC4Ho8f3WpV9En9ZxKj8HZPWHfCyWotnRlRnHr3cDucJgIgNsEwthvg884sUqmBHB6QA9c624yMq9XBSursrIi7H7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpmCRA9TVsSAnZWagAAOTQP+wRXY1N2haq6gleGMsk+\nqP/J2ZbHcrGlDpLKjNQxgAnXbG8wvC79TFgFaL935ba8z++AbsRzfufqPYxv\nkT9KlM+NqGI6hY2toKesvFE+SOLG9d1zXeEox+14czTeBgNLPXRCfu/mMgxN\nEXbhSsBVjiakJNAQ7dIdUnQr3G3poerrUc4u5hHgTpPvHXYkcnBAKWC2Miba\nllEtkCpVl2l9smW5J1GsnHpRhZJf2mKpsgJaEdwqZyq5PLWcXj0jqJ1jZHVt\nMx2IlXh5jHLcoOnsgfgDnwzOQ/99etBtgiIwjAoFuOdvKC8v4v5pr5nEBFt4\nAnZtwnLDcMjV8xp3JhlLTLBMntkULkr6+ammt823wMbZtoXwa+H02ZLS4Id5\nmElQre9AS/OU+VzKoteACkFvbBQLowO18by+n05KGy63WApXfIRQBKctai+5\nMJOeco39KgLCEfY+wEZm2VEEk4QCZP37+7+nPN7LhFoyy81Ya3vWQ0VduTYK\nKW5NSThZvDrkR4V5fhrLm6aHOOLVvr+1pvufx8U3WpX35c0+derOATywZHjj\n8uLKqxBVsSuLKXaUWIwCPUeWCMvJpqQfrHS3DxJukjKzB8+zQSQThVdxEoxV\nHGjNp8EoKXxOxRL6FG6t54fHQXVLue5/GM65/SNMu4vV/k2wepbhmBjQXLAt\np+Zq\r\n=JwnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_3.0.0-alpha.0_1560312421480_0.847945801780239","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/icon-button","version":"3.0.0-alpha.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfe6e78ca2befa5b1986ac35d67a9e20372411df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.0.0-alpha.1.tgz","fileCount":33,"integrity":"sha512-p6CHYdeFAM4Avq5zkxoHUomY3ihEuKr69yRQ8YHQqj9tmCBPFVohejnu8HOCc9GJmqdSuPswKUdWp6aGzqK0Rw==","signatures":[{"sig":"MEUCIEcC2mPJmBMQGeOdrXgnLjMRircAW2Zg/TixnsjWU/anAiEAv9Uc5oWXL6JYE9GS+k0LLAntAZCbLto9RNXBx+ESvEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw9CRA9TVsSAnZWagAA+WcP/1F52p//Y1yWymDdE/Ut\nWcqw1cWjMOAV/wqvvp5nAxkL0ZO4PWUgXUZomvAoppls+mVPLA0GZA1knfN0\nmdgGoWzrhz442NoQJMYKXcW/fVZUcCj8hSZ/MNYl/mUPBQ2v3ht0DmpgVs5E\nJy/rAbXrwBvl/BF9SOVjnxBkF579DMU9yXKpJAOY4JHfDtdJX18O/msAMW7O\n4spkaTS6pguztISprRW5WbqMe7KkBoUzWkxo2HaIGVWpCKr/LzB0E3avSeLS\no3ZtodLFCNmubgjNC/nT8TeqfD+jqLDTL5fBHY1h7s4qW0qXYY2dZqb8eUw6\nhanK1vhwNZxgUQai7VURpG5xnnHr6QgqJuj4GFNCp8Ch2RdfDA2yeBKcdBMd\n9CCElhAdfn0Uw25pjCxuXu8iVsFsbiU67FyjKHv/rN22N1O2f4XjIzGfRKxo\n1E4dSYFijtKx0e+8nnGE+vdEOpv0FLShcCcjKzR7u4NKT3x2uPCLfGv/LIoU\nfSn29m2AO/GpBpX5vcRiAfflKeqUEupbxlaesAEycV6tAO1iFJEEitIVZI/y\nWjh0dUH8laE/bypBVs0JM7SVkyO9PwlD8139p1/JX4pIXgmcGwtWU/dGvhJd\nqwDrvnyFObUNEWCzShBBQWa64ZievOCkIBOvGK6A7kXEDt9VNdBONJvXXjLT\nXb6+\r\n=AzER\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_3.0.0-alpha.1_1560366140498_0.2598958266784239","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/icon-button","version":"3.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41069c75a06eb848729f43452e17af6556cf2028","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.0.0.tgz","fileCount":34,"integrity":"sha512-vgRZepu9MiTl+KDTpatysiM39EBNi8aearDwIaXQHI8OK/z4ac/je1ysv2NP0dY5m5dUPFVrHcFx7oVX9xV1+w==","signatures":[{"sig":"MEYCIQDu4ZLnHBL6IMMkTWnpqkd82Dr2APm/IA+fMLJ0BnA11wIhAMvksCXXEIhWgowqUBiERV5KYPzdoCDzjp2ecH/bz1GR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":518993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/0CRA9TVsSAnZWagAAYOUP+gNRnDIxCjN4SQGj9UPl\nAEyMtThvLN8TC8uyhV8ekhA7KujKmLIL/j695VXWpICSFAyh+lh1Z6pAn5mB\nB3uGSCWnSHhF97IkODwj9bISb3qQvJa8aLlThVr/Pu7qWbEOsdI0vf8i+mIh\nTG0IadgpPHDxx3hOesVCn6wIDG5XNXydq4ML7ILTUakCFe9KPnPBH3hP1PpZ\n8Zk21B3hC+Sat8pLGxC3UG4rwYkHX+sLMhrdz4Gh+nmsNYOqwFjG0OzsTGUG\nbEAdAqqG8q0606/a5eB9rtC10wFUhGqakeGBCBgj3yX1fRZ3inZiSJttRdC1\naxsX0Yq/FPgMhWkxbs8DOSqPuxNAq7Nvhn8/j4o81eN9g3a4iJ2eeSlpPbYW\nd5VW4kIkMQmCvoUeD3oV6zxMh4BwZGEhH2hx1dhrWQE9pEF4Li9bkQGC6WyF\nfPEgqAYkbCXieQKOVbhr+yyIhL6RGzYcbxRgUI1Dgrg/GRg+C0TnkmXdH7bF\nbqFdV2rTz9U1NAQcKZXKJYKHR4k5pHaF4NmUDAXi7Arc39ubVs/KTjJrMJ+V\nz8gW75jUoxnnUdy5qO91LKRFa6qDxX5rz9d9sYgPO8rUfaxc1SimJnsqspn9\nJhXBkU+3EyyyJANbFtWnuHPMZ3mK7drHkWDYtrNRXWrjr1S1SoC7E3wIGLaB\nA+oE\r\n=4f5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_3.0.0_1561501678104_0.9278131866797532","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/icon-button","version":"3.1.0-alpha.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3288de9456340c6464d6e41d6bc5199cd018d59f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.1.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-3Iemnx32S2g2mn943ZAToT1vwxqYI0WOK2DoHSZGe3h69oAnspx4a7KyhI+vKzRrzS3lwk2pxd95Y/TfW0h4mA==","signatures":[{"sig":"MEYCIQDd4GSfWgKoEhipSpukKba4t8DXbp79bFMTjzM/bL8xCAIhAP5QinWsw0TC4E4eqVcR+cc60Jnv0iBZev/mm4gJ4y17","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":295506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEvCRA9TVsSAnZWagAASUcQAI8NA5Ze+M/lhDb8v1Za\nbjLCUJVYlViFrt6HxXgThncUzxn8/oMqJhgF39GteZloYBjE0RKWv0at8DKV\n6Sl3OWqof5eeB2nHkRhShwu0UeNebYWSSI76sI0IRasSsUfze1V/ZyAjxVFF\nHRPm/urOE0CFJOGGg5fc+RuYp4t357iAej/Kd2dnwBw1NjL3EkUSxj6h9JPu\nkoGUDbLxJEvuBivZWNzkhrFixPVsRrhPaxG8WqZokjbGRl1hh3vOgOpy8e12\nIKrlvlGVZ7vwhMuL35A7D/kW7WPcE2Pzz/mvCw0unHDs38Acr444Qj35899e\nEUHDG4p1zEuGovHswP2tvVN4MC5w0Rj5p/L8ZQ5DLG4e0TPIiQtIdxz8a/tG\nwOAHk2fd8cGBPDU2OHCilGRms/cDz9UByLV1cO34aQk9eEB7TR0rURhfuS5i\nl0QWyohat0V0xI7qYhmWxERbNJ54mm4t7SJxzj35YsgjpMxunAfvdTc9EHAG\nsbSpMI8PLoZ4A0uWLmrnrntXrF6BEebkkIzFfXWpHlbatWJzfmotgDFl8uIl\n9B+7U2fq4wbWOKq1ubH4iYY9J2YzSUwZto4r6my0sL5JOxMfpc95TV6pyR/a\nnf2VV4PWoUyk/86mAa+O5yQD7VvwnjrcU7E06tQlyF1228XDi8vXqYmBK930\n0uj9\r\n=jqB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nvar toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_3.1.0-alpha.0_1563283758498_0.5530298118815453","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/icon-button","version":"3.1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"843d6526a47a20ec2bf9b1ba668c33ccc9a7eca7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.1.0.tgz","fileCount":33,"integrity":"sha512-iwcZ6OEgJYOpB0Ptjk2yuOoRPYhvLqaqVPYO4aJ3U8oQEAfVIRcTvP7IsmVab6MQIsNMBDiObToN4sw2brmOBg==","signatures":[{"sig":"MEYCIQDT6urT9L/Z5Cexj0lrwym7tTFAjAZwbm8qf7X+IWhe/AIhAMbybLR+ogyIvNNUXNHC65JCx4PXfYSsj9uDyGwU+Kle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":295706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKBCRA9TVsSAnZWagAAo0kP/iY6+MuWiTGgBiQQ6apx\nzVZHUOQ41Ep+vfcwpWutbJSRW9C2gr2YioUw9bCRKeG2gZzcXfvAv1wlsL+I\n7vXLq5zk0aRTZlhQ6nIT9eQSQ5c+IpQ3gjD2rH0V1mx4EGRo80khRfoGQx5K\n2ObxUQbfBt1+xmy6gmOM0aPgiqVh8jXq1VRUdDSFkfenLsLH47L9DNdo/USl\nz3v+CciC/fhbxRS84K7BN6+NVFXXKT942J7YGnGzVCqjItPH6oBS6IadlSfp\n8UhFRWyX3wzF1qTxYYxm8FWlB2D2tjzLsgMx3HP9hJ4+D2OrcTaI2rQj97aJ\nFSGu7ASMyrUru4LxS7iJKjXqge/qS759W5U1TZuk0+7vIp1PSwxgYzi8r85b\nTJu8qXboVpYUylBklfdbrfduY5wXN2QYrqdXCL6XNI2Z+qESpXZXihp5fxr7\nGLiQHIGXh9a6Wi+eCqT38Y92/awCZkv2LgNVMr844mBTrLVEXoQNlFznGuxm\np/pwDe7x1P/tmPV7sbxXblQUyEx9Q6n68DwK/l5zBXZa71KBfznfYF4FfZuu\nnglVYiV3bwwClUq1X5QaWMvelb5WyPMTfQ8Ib9NRKA3eUF7rYBhJRzxnBFVM\nTQNSUpAGEKqcMSPA8e0/08nHeh+zhmxKXlL7oKBER3XHtbfFFDM3s2h9ZNXM\nzOKQ\r\n=jo2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_3.1.0_1563832960844_0.8918636583919637","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/icon-button","version":"4.0.0-alpha.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e212698d4c3a36dbed7c1618d82588065276789e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-Y7SlOOctjL5rBriX2qqUDjNG7V9O4bd47M6Ay5ZZEaEUTHeyO/EUtufRX3F0WCXWdJ7H3ZhCHBVVYzBWnslDPA==","signatures":[{"sig":"MEUCIAGrcTvuNd6ZqyP6o0OKPSNJfAW1FSzYr0FfYR+eprwwAiEAwcZqLWBJvrHN+QNSzcSvVaaZ6IUvO0FGUSbSp8QBSB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":300495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4SCRA9TVsSAnZWagAAVzsP/i5fvJa7XZIaVBjPQmUw\nSWpBLXFw10aOmkNe8VPpZEiuHZESLbCSh9RD9pEtduyRteJfMmhwPfpjcvOH\nIqu6wqwjIwCWaw0gDFpTU7sIuR/z/HJNKlH0fvad31EZ+GH1bhme47/apkJF\nHYSvBNgsjLy4HbS2c1PIRTc1MjKg64KMkPyDUkTIziyU1guW/tfUUp1VHpNO\nn2+qA5AB7xPvmfcLc0prSQW/ZVNoS8AfZFNjuQyebKWi5dxd3BPxu19pkk6H\nO94FmPSDanzU8AbTFhNcO3AxU0S28c/wNRYalnPLpvLkfT8suUF1zgaCrXs8\nZ3b6YETRIR39sTYpr/ndQM5KHGZGc4enFCSuEJ3ZP6SCj6Dv4owQw6NSV7B2\nxQlVMiaP798BdFJ8LldCBGW30UnQ0hGtnlOG4xkns6SyJQ/DSDTOPyDwJfJa\nwMJ19cv9Z1p8wzK8PD6XnxZgR7K60T/9jtB/QcT7euyzA+p7haaNBr++pOW9\nvcgHsohj+R2mC9AZn1dc3yBmlBdN4+T3TCMdVepPxzH74HTuUIukvhcFBA7B\n/0blVMojMoWuC/rPRkrgCI1Kpa8M9KP7qAz9V+nEp5uHNIRtCa88FccivxKx\n560zjsqCIFSM4lat3I3jAhPrB3CXwPwt1Tjm6O/UardXGsBxsMOZppLTDs82\nvb7r\r\n=l4eu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-alpha.0_1565212177786_0.6297054811913623","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/icon-button","version":"4.0.0-canary.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"424131ec709993b0e9d83f96c702107950797951","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.0.tgz","fileCount":33,"integrity":"sha512-vxQx6lZ6dxMA25Vse+X2Xyb6a+svKPiT93POqnB4KB15+5XV0O+oZe1Dxp16VK/Mo9UlA5idJwla4Lr73e9wkQ==","signatures":[{"sig":"MEUCIQDfHsOebglLuwbcBms2qOemcBzaZFmN5XjgaauC8hpbGQIgeBXaLBw/zeZPIhxrMEecKCpXTsuOZjA17TolX3cgcBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":302880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEqCRA9TVsSAnZWagAAFlcP/ivXzLTsFoDLhSHf3NLc\nHxc4/NMWCtiYCN9MJZtq8E01utgmeMztXgFLX0Cnu49qGwD1JhJIW3CnhzRV\nAWFujTBhQzDAp0Uq8h9AgL+z90mYn6zSGFDKaIPSY5WYUDLbfJLurMTR5yrd\nitA32S1RgVcOXZrroSjc/eiF9h35MG8llAgAeL+hh/FxBW43Q/RPI7jz2vJ+\njPSiDWXDjEEH8fLeOU2RwP6dfZNDmsp65jF5ivZ2mLL4PHMVacMEhRYgGHdK\nR5Hq+EpLlL8W3S9nuc6s6udQhr5t72oN0ByEcOoCsv2GDDltqyrPlE7ijJmq\nMVyz/izLPgQ5OJ0fWdwe01cKL5KShklDGto7ohDlhQlCEDlVj0piFG74TUGj\n65dUWUBR50Ep/dj562Q8yy2hwiNKhxt+Ftdm4uhb+W8uJc4e6pSs53SpBKbo\n0GYYCDUMkebE23XLGb+s5F96i3xan1L9ViZynLfqwBG98aZJX/WvTLd1VP3n\nWA+roTq+VAngNNG1ZTJcvPjRoTZ1y8dwOltp9J8JYuXDzjAg4ugimHYIfFwu\nrzOZfsENz/cdWxyx6XpWOer3bKwTSTMKIgCMoZK50OUtqkhUQBsAH5YHMoQj\nUoVgYx0ghbwbT1h9/I3Yf2Ji3l1H21M2ENgyxWeA98uYPKGbHCLvN8prUNrC\nyCQG\r\n=qF4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.0_1567658281771_0.3592868375812397","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/icon-button","version":"4.0.0-canary.1","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50b828b2634db78e36363fb3c9fecfb3665213dd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.1.tgz","fileCount":33,"integrity":"sha512-f7jt7CD54jMJb9CGFPz4pGBu7EwHKC0siOuXH0TpuhO2cNBFm8JGi6hQMMiRcA7tUOZPHjWGK3K9DIIj7Gidng==","signatures":[{"sig":"MEQCIAMrQBUtSIR08yGZfQG7sLasCEClxtivgFAZzYyXE0q9AiBzvbxvcxX8fi6wMWO3J+uL0hl5l+TaBDpRXb67nZUs2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":303274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQoCRA9TVsSAnZWagAAtXsP/Rbt0jzudOL53xSbckUT\nd9/+L2NLic8RdGq4rSvPlOL7bqnZ/ZHvtL4+IluMaGc3UFnJQYAG4ehollcw\nUWzTpNcNbsFFxFDUjaRVnT7Hg1/9m8Q3YjnWjfDjT5jzwed64oBgiFFHq6/f\nUhXqJh0W9dkoQisE0yu4e6vjmUivZgndwbwJhBptigMX5+Vfj/YSp3uGdM85\nbmQuyG3wnfeRcCsFVs+GYIpCK++xB25rKBO+jMtWHbkMKWJsjTuO10NR46D9\niyDVLM5s/eIufhEocQho53HMlJg+ecn77nQlXOcZMOQx+iFOwx51K0HnkM9t\nmQtTFlBtLDN6+lxg1T7XJ26ayMKUUQxVrLgtkFgisUxmwZ5oGllKTzQnMPLI\n0GcbTy9VVWFchMKU2PGkPEwT85nyt/9VJrWXvXbW5PultCh8XSPFCGj0Y0NV\ngtKJpQJB+93Nn+fCwc+Wkg8oxGbRe/aiHwNdK57fh7Qo/k+iRfTiqA8ZlwrJ\nESNEfuJEn6s7DxqNxiuyWKz2XucFDcXdFhI5EfJnSV7mACWLosmWop1vKIW4\nv2uYSi3pcl50xUD6jV59guP4Wm1Hubqg3HqiByhc67ywP1Q9IVLxkbLOcG12\n4pyIftugBLmFD/4/yJo7d5mDqvNxUJ2ucSYnAg62g7E/5fk9l82i6YLfp5eH\nYlMj\r\n=becW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.1_1568060455581_0.8578852987398564","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/icon-button","version":"3.2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a132fffe5be347db77281d63e7e4c5ffe0881ca","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz","fileCount":33,"integrity":"sha512-UTX1q4x5FxntBeb5TxBsXIjbhwFjQxJxovaUGo8+eUL9V9tU6rJ3NnlrFirx9gZnFIU1Xpssm91NCItVZy/Dpg==","signatures":[{"sig":"MEUCIQD9KeeAZhQ3421I7uAzcfkgfqrLt0D8Ahv+d+5JQTbYMAIgN/54iluo9LEjFfPDImG+6lc5Q6ynhPLveIL7L7POybM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":298083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5dCRA9TVsSAnZWagAAnWYQAJinJMm5Sb275WaK5ESF\n5rQmSe4kcDFPJnL6Dd6GWbvhHQg7QVY8LzLJFh3hWi83o1OyYdkT69Q/wZOS\nM56D75gDEkK0xQ6SbA005nQiC4p0zmT3/5RznbdwHH4RDWxLGmLarFvpsBW3\nR0neKkLRHafdQe6zQz32V6KnZv5pkZ0U0CEdzkF2/Ka6RlENpyLsxR9Q7PTU\n1lEqCYj/m6+Tm1SFGtNwvCTkU5l0otka25tq7L7ytPHiN2ptRQ6dHaXVT8NR\n3+5ul6d7j2uXyp//dcDwdczwHXk0Q16ksFfS0T/i7q5Bebik2qdoBgcy3+N+\nDe67rNoclexQEFi44fIbSQdKfkwrHPM/hpbJGtkYVScqmj4m9WdSmsnt8+X4\nmSEULUon9uiZcmEm84WmBDWILwikot/bCZa3f8uJ21eK5NdPUj3x4Xeuf1ou\nS0LB515Nyy5WLo/a+fvCLEXUFdNksnxNrWN+Txk5N71s5wcPAY2xJPGPjtNT\nOi8eOnz96REXin121lb5S/Dh1wnOcrrp9CnrBb42i+5QmwJx1EIJaTB1r+ix\nexnX2Jbtmlf154uB0W0SbHNMgW8hpULBqTusZEbHKpXvUFuzRIGZ9teIbACG\nc/KyzAlrc0fcxQLFkEeGD0JLZlsyZXx/8FmkqaemgKWoKMi2WZTrpzhb1qG4\nFlKe\r\n=17VU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_3.2.0_1568325212579_0.18281316568566952","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/icon-button","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6719ad25651e95ecf01bf3aecf5b3331666a615","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.79d881baf.0.tgz","fileCount":33,"integrity":"sha512-4vGI6QGMSCBwcbnTuQuxB0pNCpTCEp6B4w3caA3aJwf3tRQU3chvTA3lwdrp7W72DODBXbbHZNi9Hcz8ml25tA==","signatures":[{"sig":"MEQCIBOpr8ZbhjI1Y5RZaDARwBRJvYM1htas/sfKUrH9JxnCAiBjilocifT3Vf7x5aRskj37MNoi/SYqrsGrP5tj/vXmDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev03CRA9TVsSAnZWagAAxFkP/iAxBQglY/1Wn/+1qERU\nCxJKrLQbb42MG9rBuOGpkYNU/yd63L8N4I80ctt9+OA286d9FveF94w1m+zX\nJqQuoSkOnBy+yc2fstGQAenRT/TEnDrKkCpXKR/34Jj5a8R1LsR/j8UVKsZL\nvYfJVj1TPSe9O/RlXI9T+X8qm/sCjxhgbugdkECnEE9VCeFCRwp+UvmbrzZd\npI0JNd94A4ihMRkPF05RItyCAUZb/d4dIcFMsTK+vFbC8OcedD6Dxca1kYtQ\n3Ic8lv9NDhoedjWX2ZHJnmy1XwgEbgFwWbU9mZx0LYH9mrGWswbzfUtNXcUi\nG6lG1oGqkpffG+O2Z9wZivUvQjwdvuHpw9Y64n10z0OdY/YfwMv4+aZhEDJH\nVBJWuAOyaJzP/WoKkHklKEcGhIYx/GB32XbMjheWXrH8Crpb9iZGCQpnNO+S\n6+V7CDXneMHIZ5oesMThmceAuXkz+XmgA9xucG0yOnLp9cEauVVXQ7SUDzWV\n+N7e4q9roO2eRvCtq4CSgeV2VpnC0NPmZ0R1figQGU7vAjgDrUjWd0dU2O08\nomOYS7JTK0RNOYwHlVLzW+5SytUHFkCLak8v5iMDFPtnfA+C/79WmsdUpXeb\n9njYHm+fRlIcz5s8Rx2VKqPvIfbi7Q0/EK4VR86esEDwuDXctvoa0m0oQP2N\nCJAN\r\n=dBc7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.79d881baf.0_1568341303273_0.604813520798875","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/icon-button","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad3035dff1baaa2e1c5753dd9af86c5e4def239","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.e851d4f40.0.tgz","fileCount":33,"integrity":"sha512-QypjUumYnNqJ1zQ/DcP9UNpgLbPOkW3m7/yyC6NfGKH/X0zmJg7dSrg8x8dbu2QruG4nBW1Rs351KvHczYT+QA==","signatures":[{"sig":"MEQCIHDG6D+soIxWp0ZXIw7mUdPSE3wLjXauDG6v6Kt9uz0iAiBqNZHYzW69NHMtOhXFvJFOn8mjnNkBtdhZEdaFKGzNQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYECRA9TVsSAnZWagAAP+UP+wYJKlcDVdpM6EqG1Yf8\nr/XDTSAwWY5gMLLwyv20VwV1xyF4hq/h1E0lEi8W/zGENSjGlY15UUZMILf0\nDwUwkiARwCwIRjivUK7WDEzu9r+6foT5Uy3dxKfgVSLgz8H5Colfyvh396ML\nr1RoICjCIj2bCYvlIEkpPexWerSy6bFk9vrIbzIIlrKch2YjHa3lziwZ7siG\nkMCBbixNLfiM4Zs8a1fM9m5W381jkn5vr62GhcW/GJR9rTOsCXfblRREaRv3\n8DdXMebu7FIHEaZ5YKci/+/+8tU7HRm3EOxPhDmIllFVdqCk8tS4ZXxorToQ\nEiuqVIAExLaUO3Mq4yBlNhnflWD0ZNETFfKSY/uuyJ25G7f4QhH1UbH6/13e\nn9cpQa+GHDEvTqV8+JsYvIOd0CMGZ55+g+sjk8dcpvun50B3EcRqlgz/Qats\npXOVpEruNjzfaLaN3D6i2Iyr7OMrPmaG7Y79Dg7fO2Ph+JMG4dLknojrjl+B\nejcmonEgXK2MtZNl0LViWOUD2qcfGI3//LIS82pM+uzspZx2WnEuM1VE73kE\nTIU9IBkNOfbG9XccQfLQVotO7QPHWkuCo7RmFU8phcBeW0+9N7cusvQP+2Et\n6JkVGd45PuKDCdbIyzFme1b6U6bBuKDnDPXxjDdb6WNfTJcy1VYx0KiALSbN\nm2gi\r\n=6o6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.e851d4f40.0_1568347651733_0.40389480476268935","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/icon-button","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adbd9e759baa61a8efa7894e9e6ba279a464e56d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.905884690.0.tgz","fileCount":33,"integrity":"sha512-UNkxZnOiAP/nJZDXjZK1E3LSvKKT/TzibTrDp5PKl7NxMdMOee6eQnp+xuGAHLTnq5SyBLJi/+q9tM20M5UdMw==","signatures":[{"sig":"MEUCIQCHB23kBKQGTV4DPUSZvJfTpQjrBAIwvmkznYZLA62rSQIgCqKSJxS7n/NsC4zcWWuPLHqdn+AYnjv7O56EkarNx8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9DCRA9TVsSAnZWagAAwWAP/R2O0NhKKgLSQGktoUKH\n97atUKDeL9ygeJ6DIVGjJ1rt2xgbRLgSjlTHcgL+Rk/HnjVj/VEapToPCFai\nzRlHEXiiIxBAYvgv3cz1jpTuUAynQcnXxWLvkpi3ou0NBuhS/4kRrDUXSgiZ\nXlZLS7ueuqKGukV+Z0wLYZJPR6odr4J16fDE6/3lrw6T6G/DKZ1KUEC9xdAQ\n3XUgSf6dZryNCPhsmJsZcW6AI4yBIS+XNH0oIFHJnkBxOcG0s7ruYPOz0tmZ\n8B5taezLoO1BBr+Bpubkl8tLz9qttbeXLgQFgCaiCrK5aka3bb07/sC9vbqb\nsxMGL5EFX3YafdeJjiteQW/7cpML21SgMvTolGhoAWXDRQ3lLCagT6AjrKNy\n4wwvnzK8fBgUlYntBvPUFRSgGudFMMfDnaYQDHPpkOWkG3LAAqTKcYPtxmHk\nqA9TP9/WuxvxGx1OADXBxgOXfdJ+ZBQJqtNuQHXlDnMZLP1KCGbvE8v4XZ4c\nZaSuOKIEmQ9Mv/SEbYyBMAfhk5ojQvpSOK3/yC8lSeaRr1E2SeQXbbKIzq9M\nvcSoinceoj3fhC+ils0OPpDnXpjn2bpbIyR+EWQMAeUJ71dlrZU88uXWvZ/v\nglo1ZyWIKk47bMKKjF5UKZsEVrm1TWPhpJ8+H491n3EuxsfGyDknh7cmI/Kd\n1MQ0\r\n=L7ao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.905884690.0_1568677699129_0.47181150650658843","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/icon-button","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40db8a997d901caaa8de4ddbdae1f8df99dfdf2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.199534d61.0.tgz","fileCount":33,"integrity":"sha512-Sa+erkNf3xUw0QGzuD0pw0XX1ePU1UZn4dpXdVCvWshRLdsPl/sXaPFqLLkFvDoVWtWmLCTpXCHZwLvL07jo3A==","signatures":[{"sig":"MEQCIGIOPNPq/KSTMXfe0Awur4cXzdSXyNHW8A8gHRDgqqc6AiB5PyozPpLTzQ6884XESB8h60xD0X/ZEXsrNfZXpOjfiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu8CRA9TVsSAnZWagAAkpwP/1gkdaXYbuPTzM7/7wZQ\nuiLvGJ9sFaUgTfQmzadPF1s8avzAFRMXlkl6KEHPWEKOtxcAnHlmPvMGP3Ta\nB1x5C3LvbF3xf5jQdn+p2g8AWpctqkyFyAGZDSzhHdzfYAAOa4g6tOk44s47\nzceVk35r2HTrbviHALCXl5teoWQYpGMLopMToMdk1DE9amFv9wyBBwCgGHOo\nfISm5EV3YXso4JlMfo6inO24nzF6HoM9prixoTimqwY3tZBY77+61klUo6DT\n3SUW2f0xLb8PnpuZFUMiUjD+DNV4BEWIRapTo+Hi5OOUksxbFD4L9B4vsORB\n01dp6/oSRteDZMmLEk0gN21xVZkTc0pvrCwEqT8yIYFnLevG4+AU7JP4oHuU\nPwGUrzlA0eieIkVmzr28edLYYpKAB4UK5LTZSGe8DURYbiGlzbRftxKVIxNN\nHwA9/Z+V0uXNJlxT9UB+LToxOmawnAaV+2fidN/P/aJR/t8R/gK7gifPNlru\ne4qGK7gY1227pOo7PBZ+ngVycefnqU5+mX1sDZRwFSx5neRvd0tSIoIxFySD\nt1093m4nfAsDhSyaspcWbYKaDARAHsItOFDIMn1XCwGCJig/rn3wKZdXF8kn\nESzFizMp1uA5H6FCUTu1PW/minpSuv0Lih9PyyPq7tXVh6dF5UlrFX6ZkGdQ\nTudO\r\n=mCos\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.199534d61.0_1569610683373_0.38963324651753606","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/icon-button","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efb74fa9c084cfaf157aa5fde169893d10d0b15e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":33,"integrity":"sha512-O6wIBu9AS14tc99uK8WRXwQqucAq0m8H5+5t06zAdZ6OnJjsDLNqM6ByPyxRPeyhSWNHCzHFymi0xu+esAD7yA==","signatures":[{"sig":"MEUCIQDKCX4mhk2eeK9S6udbCppJDtLPg8X7GMY1YxQ7wQ2jEgIgciyhuodL1R27D/h4P36V2rkYuMTzRoSu8TxLETOd3wQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":315185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaVCRA9TVsSAnZWagAAfIoP/iwGczr3b0WgBmxGi6lA\n3PHesCpCWN3PiBJGa7wIw5OM1cjIf/cNcpBRkBb3GDnoK5VKCTrelvGffALI\nXsW9vIlDrsRtDKWOZy4Py7mr+EfvM/y/fLItavUhJO0P1aHPqdV2/zwshvbN\nidQnkp+OrWxZcY5iAC3+VeeWLbq205PgGR9Hg5k2k/7axgDBH/ya6yFE5q+p\nbXfE7NEXD9vyMYzmOEyBdSOpH3FS68re5K0vNKQATLrUMdcPTmnarQUPUQ6S\nCZj+h/ofycdpZvJbaSTNKyhyxCdi+0Lg9tt6mBejT8XsSaanAsIjiSukPQLt\nvcO6x4Kjeh3p5wglVCJD4dEGqPw9cSuwj5vZcyKpPQ7UatBqUs0RgIwZgqL9\n2galh/h+u0zEHwT6arq3/47dl+QNaZPqe2GbnfqTV6NeJ3E3GLu/DeWkhjWi\nNgnyrvWSz1TI0VE30m/sYU1st5/1ZUr02ai7FXGsWtDsFIU27D9gxtwT1mzy\nHoTLYlGa3JSpZh6tIPsk0QqwVtoDrcErjRjyUbmuJR2X2YNHgKJo/EpEydy+\nHCvDfqCeT3RzzW1+Ky52uQfeYIBFDvmG8aNp7OR3676lySzHVx/D/nYIhvMv\nl0CNYr2j4r9lsmSfbRbur1cgxghKNETFbwvOjS1mYwUGdDGdbtu4QLBFOH0V\niGds\r\n=z1w4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.22d7ad2fb.0_1571165844798_0.4232058542762771","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/icon-button","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff855a33fd58c919b4221c90d583becb93520367","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.735147131.0.tgz","fileCount":33,"integrity":"sha512-D9KFu6+/cij3MShgDEL4EsmVCnHDNt2Im8XkSWoNcjO3nPk1elIhfEfgi2W5Wq4HBmAOxoQKtQlm3aZgnQj6cw==","signatures":[{"sig":"MEQCIG3eJZqSxBi0eDeojFFruti8qTCnEkWd/LBuhMfAkS+nAiAIV+j4r9X0jK/vf9HbK3SHV9HSJ8Aszs/EBPOBUJIiTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEjCRA9TVsSAnZWagAA4XgP/2k9gBOtTkhMsPfyVsUk\n3tn9fk0nAWDuQh8/6wjrddDtA/RzduNgLMAi0Mu3PaeIft8PRqjKWdB/I61C\ntbgmzQwQ7iyBy/XEu9yxJW0DEP5dN0k1Ickag3EsB8heUYQneu+CBGKZZ/34\nKBWT0A4g//urOkJSq59S+zJMPrhaSq5x6WRWBRIkl7loIPVT2KSBqv3vE8vh\n4DU65Ynk/85ntDU+4IPMiKMDzh8AM54LW02LPHnXvyXlfBC+NHNsmVV8/Nbt\nbPN40b2HVU51WHAsDCYGcA+Kquk2X9DcbKnhOPBbr7i8oAOjNP755Dp5q0Ih\n3X4QdzCukR0KiRf6YYSq2NkIZ14HUQDtJMVaLRyOAl2p61MLhzwD8YikcE+m\nISD1k98R8/BwaScPPqug+1JqOVM+gVd6QrXDUsgfPWdKOfR3JPoHzDx5wuJK\n3071s3jKfb5rTtOa+g37zuOhiHL5Y4qcp04vDxyhthgEf3oSFA3Br6FSUypl\nNTZW95GcHCOCjYeZUxRqqhg3s6rAfD/nCVDW4FYpdWtzypXCLiSk4Pxppv32\npYan2ARI38BFwkniwWZssK0k65QWewBjgFHXeITQfgrsDc4wozhARyQyYBCX\nSFN36hupSb4Zu9VZNCorj5teU2vXPphF7heffyIC0OhaqA1Cdkc3XoNFWAm9\nbQXU\r\n=Nk2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.735147131.0_1571189027100_0.3201823084858175","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/icon-button","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef15c219356b2439ae4c0dfd2037930263efa0f4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.062ade5c0.0.tgz","fileCount":33,"integrity":"sha512-Q/GBZ/lEJQKtjNZCLjX2JOu67m2HpnX5tGlGSqQmWeKHnuL74kIXudx7TWoZBFw7vdzRldk3jOf7tIy5mkUQyA==","signatures":[{"sig":"MEYCIQDr1YymgmKlhCMyMiGfORDr/dhxrtmAYBwjPgGoY+CfWgIhALN5KVljWHjp469BrEtganYFN9IHS5Pmpvsg00rSLHVk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp716CRA9TVsSAnZWagAAw/oP/0VtR1tsDyJ7CyJwii2a\nDHzAGYbfizDztsEB16joQgd84VrS4svTm0l2UGORdH1IvySLk7aC2j+ZDExF\nVXJVq65EYQEcbqHuuOHAyDtEvZ0rEVlykN/czNQFnFvnjj7amHGP6X6Xc7S6\nmOZ+Q3JEBLXA+JEUYeYJvcLyh6nG1yu4vo1DHfL5HLIJKKaWlpDsk3ECoq4g\nSf3XTpqH+6AAUO6/uT48AzZQ2wLvH9snWKPpJN0KCX24QpGOWYrBtQJjeZLv\nijxOzhdllfx1xaaNTchm1220odG8Fe65ZrB2Eh0rZSiYXPDe9mgQYnIlgqyL\nMsxp5SINCISJMwf29TeCr2STa+mtxKrHCZ2U/RgisMkmbVnmRXxUOF8pAI0R\nA3nhH5slUZ2SrlmXSshkfNWA6seZUNSpDEUCncbhgGT2/2Qbf0jTDR7kjAsp\n2API9Jz3d9wYE7gmo5BjrL0vC7Cf5fFeFiKG8HXjGqVPZUhotbRQAfcr3cfu\nPy4GY0uWAtt5nmjZSQsJnGXEbzimain4LtQlAuQQANzs0RcXofImSfp+w0D2\n1yRnK4ylzZC3YIclTi1ejcV1n8P9LrH3L7hU5E08wHl2gAgZZ4aG4v84SnHg\nWck+hZ7jqknARFDVGThizFGV06ooUdj2YyWDnRFjyFir5up9OPYXkEtLfygW\nZLs1\r\n=up81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.062ade5c0.0_1571274106148_0.40943797854829334","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/icon-button","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd6f724d0d7491d48f43f585ce1bcc0610e5ffbd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.774ad4f8.0.tgz","fileCount":33,"integrity":"sha512-fvX8x28nfIL4KURUoinW6hRDtMBsx3jm3FYuzv4VNo0yO4PB617H39rDcY2U8nmL1R2Ijz1UMBggn5dTS/czGg==","signatures":[{"sig":"MEUCIAeMpE0o5hxRgxlx9rbU2JowtAI0/bypzRjPoMYSWlFkAiEA4kv5UX5EtRTL8BOD6vD6tkft83McCDBDjqG+UZ/J9ZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hmCRA9TVsSAnZWagAACYoP/j0w/mVlqe5qjkzCYCR6\naUPLTYZSHwHyRJxqnirJlYiCxGRK7RqKHQ9QPSvRdpqHf6zp7rcqUJzQLy+5\ndC2rPKCTOt08jQ/MtgFP1Nl38cHJumNIbsubFgI3AzyJIF/nscoo4oJxg6zh\n6GVn9EShAMW6fiqwOyvYug6cT+28PYJfDwe/xrut8e8sBQfz3tGDSCQWP/q1\n60svmV4IHlLuReYVEeHsN+M/HrhLjO0xZgbP+amcrvC25KpY7IuAXjuRAdwJ\nCYnU5tZxm2hqd+r4bmY2fDcbvDCaz2cUzwcTPwJoqCX2iRZt1aLRBzWDcpYW\nOOA6GgXa8vr4tQr0Pq+cL2muMmkUEe7ALAidtTRhcEsTzFtovEBa0R1lT+E8\nxgMMy0RDCchr2KN/Z4e/ENMYksFCbvyItEUpIRFqUjfNAqn3oFNFDOdXL53w\nFHzSPaD2ov3HttbuKKxO9EcThndn55hfR6T44sTx9oCL02YVpymBFSLNts4X\nDCeyGc3R1b7TqjbStVJUmIrUYJtGnMAL1RHekMfTfOF78+W1Vmd42P3pCYpi\nQC+uaNtuYp5MJT+DAdOFUy+sjQKp1m8WDtXUOr9Rm2h+vhug9aCDJbmrcUaI\nKSodrUYTGkgfVUiiOWTGGlnHVGB305lqIJTeCgop2NDMLNtbNsBQA+m7z3BV\nnvvQ\r\n=sbGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.774ad4f8.0_1571285094091_0.06100449901192495","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/icon-button","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713bcb1909f385c2adbc625f2d38741a42daa93b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.5916d18c.0.tgz","fileCount":33,"integrity":"sha512-Q6yU1OULGKmGG8aG1LCmrde9LaNCrXDZ/Tx3hkBP8XUMFuEkcEEO1+Fsur1DDUb1J5SOZha47Am91+QYgwkCPg==","signatures":[{"sig":"MEQCIFOun8V2vw0JdH/N05qfishC1ZrcavX2Hk+rX/UToKpNAiA6tfmmA8L/8kdPUeUJQUwK3a8ctx9y4IPkT+G9GzlQaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvdCRA9TVsSAnZWagAAPRwP/2WedwdYSM4NyGGCofhP\nQ3gL7rj2hRgTwJ6dlRaTtXim1dpFRinR4LGdWaOq1UNslzBu4Jt8qBzjHP3d\n2OUEEJbOLVBmdB+dTPbhUno67c8+gs+BQH4ppKBsqc3X2Y96U4LBjBgN8Efu\nEY/f+g5STuuB03qP8sQJLzvqVCaav3XJx34vC75ZKwbvXAdis9ww6TtkPXtZ\no6zrpDk8orOlQU+yGAYJkA938RwgdWfpgxN0+53Mz4hOh/qh+62T9qNTiVK+\n2cAVpPSTM7dKlTvoQcTgELnTMI3uhCii9ZiZ5X21Dzyw5ofJlFuObfz1ZGy3\ngsGCLSnAcTD0AtlvJT7vyVht4y7tGk0i8W5I0bwizDubLpia1iIXL4sQ5SRS\nDo0kcQOpMNVdu02YohkVpzXZrnhqzWnhoKNwozuSgDM4ckF6V8OXu9K7T4LC\nnJHiTUoNrKoiD2SBHyyCXdfKg/PYP3wbRVOP3pNrjGX5bzse2j2SVMSSVLoP\nC0oeqJQvHkt0F4cOmncHYJri3/d7tcbkxOgrU2FxywOJTPv2Qgs0VhXM0Nxi\n/u3xnFwq41oTqKUcnCFxpJLvKgHGke/1/AzrnjIDZideqXrmef+D5wQYWuLU\naZ0x0CxwzrpsAVAKOZJb1QLsOHk5uBnAuG4bxf7/N9CpSTVCs24hSj+BAv1K\nDb9l\r\n=jbby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.5916d18c.0_1571429341014_0.4697441188115077","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/icon-button","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0b3c693b5c9974f06c28d62b6a948b482d7e10","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.d4141c95.0.tgz","fileCount":33,"integrity":"sha512-u3hUdeezhtokwtM8rjhZx65qtbLkImCqp3JCL64HfiWVnzDS3eLipBvniUEIZ0OW3bEq8DqOKfQyQHgObx4ZRQ==","signatures":[{"sig":"MEUCIFlUSMoRqhUqsLHuEzm9Pa/WuqvQd+K7fITfioxCV7EzAiEAyGVl2kkqIqCFTl43OlVm3gVVaQWLauds1etbpVGgF6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCbCRA9TVsSAnZWagAAb9YQAKJUIefmNG5k2rzm3Uo8\njwl+KCOrzO0JjigZuy3aV85Y/zgu+4FEmaj697LygKQkaG6Y77GU/XFTPKnk\njka+YKb64ExWX43wNWnt/wmA+r82ePEP4+1TilyeRB2yfn7dulbFB0g8VcQy\n3FnDMvjuWe2WTZzWQvYHOQfvTJzCHaD3Ezu7bszxEXTbqvv48nvXMtHDjbpJ\nNgeyGbNMYJ6Z7LgWd7OQvpMYcc9NACdIN3eTMx+/Wm+2KE3qcZ+4lzM7NXTW\nUo1ooU3mzHIfC/evSCJl+0+k8K2kSgJIcfvUT6ZPQCzkt2hYlIc7i63PzdtG\nm3Nl5MAFdVX1DJg5ZBdN3e72T5sj5tLtLb9ip1F8A28mlEK0wVlj6mj+vHjI\nOwxKC/QX9/Yg4hXV8NlczxVYjuZFnQGOVSjFT7G/kfKmZYxCxrwA6KWnc3wr\nJGccytjnek+ngf/Ouk06d0wRHZ+mKysx3BNYVpcHUanUPG+o74Gky6dIvS7a\nvxoJHUvjxnKOF5dAXlQBRBpszqoIpOZIeQmBQ888T4CRkQt0Lk3cOx83SXXn\n2yUxban5EyTJ0BTaw25h6wWVF2NgyyZqe9MwGb69UCIHlYLhDgAbBXLa49ag\ncK0juXVk5lYpEvMhhy8H7Y2MG35ld0bOYqswRqxPinqpprMg6bH5F28HkZrA\nRQU4\r\n=L++r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.d4141c95.0_1571881115396_0.6408873864025599","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/icon-button","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"074f33bbfe789f97dc8eed505af46892a38debe9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.2b878b3e.0.tgz","fileCount":33,"integrity":"sha512-PYIo889zoViahMAIe9P6uoaX5N3HJ9wOfpgd4Fl1YX9nJGofY6lAw43wPqWBotQJNuh2La6YmDatJQ252+zuiw==","signatures":[{"sig":"MEQCIHlnLRF1z6B5oJpNV4J18Bkr24lYETDucpvKUjfiTgLFAiBVzX7qZ3797vJv2iUpxPC24Clp8YtEAOQLFQ6lzwU9Mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslm7CRA9TVsSAnZWagAAkKUP/2wQ0TwZreVyPpimswWc\nibgHxhk+ofmTTsm+jDfWW6qbbhXn93j4LBXISTAwrR5DE9itzjbkCXyWsSC4\n8rCPEUnOI3/Xrhpd3bq37iFDoTUHsM6+lc7xk8bQR4mzsaK4eqAdTrwCeJTp\naUXrqyhixzSz5SBnM6Zaq4jds+MPvavsTtXp/hpnezE8BtDiVtkU/sI1noRT\nuUkwanufu3t0CYcreZWxmlx7jKxZiIJVmAg4OYj2xBgU10596VM5KZeHAy7Y\ndjkK0F33odYPACqW07cZ3CSCTc+O6CjMrfEob8KTRMI2gJ7FExq5eEqn37QR\nMuZ7W5gTcWaHfMr8hualZLA8hPnAiKRhWF5d0jWj8YGp3LmsF2ay+V7WEVdQ\ng5snifNzPt9sfcF2qtonXKZUzjRMQlXYbqOCGf3WM+QyJFFjcndfk7IIv6uu\nd6km9z5pvVVxn/zZQ+ukenMofQdVFwhlbp4Ke5sGULNoj7cCuNn2029Ajfee\nQ4hQVbWgmWSPV6yiemCyRcPs10IfVdGBlP64qY5V7tYoXybicvRN0/teq0w1\nVjFOQB40kaDtDQlrPKgJGLJHP2iXNnQbDqSf3uWEcR1Pjqw4bwobqXbhiqu4\nXd5exBD6P7yNi8OSe5/6FydRjMH7X5p8Tgxf9K6VWFNzOZZKxlyfc9pbc9bq\n9oqn\r\n=z9rm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.2b878b3e.0_1571969466955_0.3462418172633559","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/icon-button","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ab8730fda15472beaed9e6fcf648c4782c61bb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.b06c0efe.0.tgz","fileCount":33,"integrity":"sha512-qfpwkWon7ECNNsxnHHaWYfeExFi5Qivfkz25yBEgjR86cbc70qs6q7ptvaCs4/5jAr6/HU7OvEIhiWW0vvKY8A==","signatures":[{"sig":"MEUCIBaK4ctSydKZdGVui4DQuoMopZ6rEV+KJ9B49dgbDMczAiEAiiznPTM9W4MWDG+LwsAbUMxcPLRcUqIzYHawReW/2Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LgCRA9TVsSAnZWagAA/Q4P/AhN2gCC73zFqxt5VuoB\nRStka0E15FHM3YYDq8BoTqmepeyZw1z0vY0Ja5Dpn2lB0hI8yE4On48nrNrI\n5+bPvtrbpXx0fp9dUAjpXvVA5YgZr73KKmRRBQc8eJcywdHpBB7Gvv/u4WMm\nbR2E5U59vCZZeyeLXwc/7uZeF9DVH4PddwmjMdup9JsDfcmgjulK7/+wvKhH\nEUtLQhqJ9zDAPAFU2kA2sxtvQQEwZgbnZ0HGi9RuFMQ2sYyvZUaG1/pSasbx\n4nKWxyFOvFTjrK6dref13oY4ZvvMV39uPKf0eTFFhBG+lmCUpKy9sdwOMkFi\nWh6yOnyqWHHPLfnv7LIero9FnwjjUuS7NJaXBZFjO49mC6VCiQPKZvsal8Ya\nyDSG/LaU4PM5gk1AG7F6plJ8q88T0GCfm/6vi3noykbTPvyflHOfjsetT1Od\njB7WmkFgT8mfC86hXqFK/XAF9jd2gnUU1siABw42dWGaO2VFa/mSH4dJss5e\n5laG3ZQu7MbZpqAdriQR9H+zEBEMGwTZu/eL42EzCE6OL+lVKfh3lzf8PYBe\nx3Fui9HaMXtHqDl5/nSL6WXGyZHlzA8WHGZborR3Mm1p8mwh+p6umgR7hU3Z\ni9kj4xm7DuZR5AcNPbEA1GEBLTTEQbpLdeu8pj3XIyPQAfTmKp5DxVl1Alif\nKVig\r\n=wt2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.b06c0efe.0_1572053727744_0.014184770990306017","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/icon-button","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79663ddd099246484487c2521cac046616eac534","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.01628efa.0.tgz","fileCount":33,"integrity":"sha512-ZenaRbhvgM3VUitZq2HlzEvMVliKXCwdkQxBOnK1YzjoqJq5kLUoaH5jeKaPSc7J4kTDCUyxEAjeEDhySKDs9Q==","signatures":[{"sig":"MEUCIByBN+SaTJrFGmf0gHK+LQWicjKjvmosXGDp9Kozykl/AiEA8o7g0E76sQUnd4Xyi8/vJEhdep8VjtE4rcZlVUFqbXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HMCRA9TVsSAnZWagAAkssQAI+Kza7Oz86aHl6NYDB0\naZ85FhdUO5U9nc9MpLWqZTu59+6ehFlZQh21FGd69P1B7P3YyixTVx9wC5X0\n/X8uUfPegcnQIe7Afg7LPyZQeHciwi78vS+7XAopFIfXSlfk2q8tA+jb/EAg\n8VTPYN+NIIWXk/67F/CXuaRBGvTt0DMLMeVV0Qmw2m1PYGUZFwcL9R/QG+f4\na4N0m1GhpLSiWPMaC+UEUGaZRLVadUtU5bWA5Mjg11kXX+yHOFGWEmJc5WV0\nfQzc7U26eiUV9AD/6iYkfYy+7P/TiacUG3RUshPdVHB/LmSa+NzJGzzkUicd\nE04qqZX/8C2mThraGYIThQ766s63Kxf1w85T1Olek9abStUL2YmVeIv4UoxP\nIs/LADYoDs5r5m2A9J7sar1o3MY3HS8ow+WVFtnNF4fGHdVO8emoSeTv88K4\nFFAPaLAXhX9j95qHKngFa/ZCjBSZef1qt+bkR0wnVTtT//XpPvUbRi8J08lg\nc6jbOLMc/lv9kOjesQ5739nVJ/vz0Zd6NLgwYM1YJRzgLuF5T1w1iynDL1MJ\nFYUuRYDg6U9CUfVMfOLMeBsSwqsVf83e7pd3uFVw4jXDrOUJWGe8Ij6ArrZR\nJoBXAO4hxG/V8kV2684E/qBHsSGwKjY7vuXb5Pkbq2Bxf90HMO45OFrB8XCO\n0muC\r\n=LBlO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.01628efa.0_1572307404409_0.06488231678035361","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/icon-button","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd72711b15b5701f467ff43961a04a65c7888d9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.b5c6d66b.0.tgz","fileCount":33,"integrity":"sha512-BY6shE+SQO3ZKIDL5/cqK5MZ1e4bT8GgkNmsnfT/aW/RzUr7rbl5+y2aNSFzzkBI30XXqxEuIgMWLtPtPjiCOA==","signatures":[{"sig":"MEUCIEKThN43aEEFgGdBKjwySEo9BYrg4KMTkjw3jAkP/lcTAiEAz0CEgcZcbA3iqsOOW2aUv81AD1sJEXSz/oDEbeayWjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH17CRA9TVsSAnZWagAAuQ0P/19fVbJx4dTaoV2pYTX1\nvt6Zz11HINAmVXg8OPSSzrDJPZqvMamoaDqMnqyENsZ0T5bQSuuxRWc4XUkZ\nAlZWl4PWVxiVCigblLf7wXFDkVq77+pBv2IirWwBUOs4sD8zH8IUZFyhY1Sj\nljABM2aQxIuldMUFcj/J6896fozXk++RZ25/uAKy0A+qflXiq5P3mZE6s7A1\n9aBFMaNEyjLALswCWRuHA1cUINAktEJvMUDBZXC2DcpB5Aul9sb8Licf8JKm\nur/Hxb8KuP0lBsDry6yue2BJRY+ca4bJX6jkXH1E5/25dRq5puuFeOmfqN8c\nKhCRqmhNxrSDqEZ0nYSBpoumVh9rw31HVz2fjrVsWHGaQXq5zeQlsia0Gf8c\ngZwwWyRULumu26Q1u2CTdbHyRTuAPrgVfa9TeX4jy0uv7VqwDlIhe5auU1Bc\nJ5/USyFPYbuB6gNrleVwOLKfcVfAyzPR3Dy+2dmKHtKXKyoDau1B44+TJQJz\ngOtVuKF48oyXtN/z80bIoNk9Fc92O9WKaOtC4chaCl7s22vbM/BkV4q0sKse\npmlBXKU9cCNVpiq6s2XkeimSITu3Z4hXHcU804aVf6vJzlZIOQP40A91GqMh\nX41wmb/13/Vo7OrpqLYgNP+NaStcNpTtm9YGOX3CRovB6ziIH7OQE7zN/SiW\nLPVc\r\n=FjHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\niconToggle.unbounded = true;\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.b5c6d66b.0_1572371834836_0.4572567216072039","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/icon-button","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70126597894f8248a4956a38b29799d4140b793f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.cdf858ea.0.tgz","fileCount":33,"integrity":"sha512-/ggoAH0JjtSlQZIyOVtqS/rMbsirambhonMGDslEKgSoLx5Z5HmlzkzSY06hijWw83uxwLSboXdxToVAEgROsA==","signatures":[{"sig":"MEUCIQC/p65K1amCDcT+067tk30wwNuCrs0ZsL/x2dsgzZ4buwIgJppf+CzBPghSmxgUVlXH0/UGim7rPiFJZze3M2Wku8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJxCRA9TVsSAnZWagAA1UIQAIqCWNn5JwJrNqiyP7Hu\nK/8YnC7LEqkLG5jso/LcWXGfTjxozt6ccXgkY2sr7M2jg1SH1wTps9VBlpDG\n97K9+aganemBxBcvIr1XW3slYdcP9hKY5wxx01Ln6AENx8X8nAyBb7A3MgQx\nNdCw3XhjVRps+bqklpIQZANpzSbVBOWtqw0xY34JFLDZNQNotbR2vu3pjvRi\nIPEk9YLH7gHyjng0buz2UdxtRLvbcmHXv0K7nLvtOhdLJYZ45Nx/X5HSmOC5\nISe/AuH94BwIcDz4yst8HHupNlv+62LOb/Xpc4XKqiSFAcfloVNE4Y6XhxjY\nlIc8ZjYYY4wMSkjyeCCX04GsVkccOoycBXHAxh5pDt3ULEW+ePEVkTTTb6hP\n/XnIzGzCvUKe1F/SLn+y0X96GJUxUp61yxAFHVsLNDq4vT+TAS80kHi8NvPX\nL2F0Cufq2coSnPvmKTO6n9HqpSj1bWLjRvmr98uJpEkBlvDAClT05CzhzQns\n+DU9guM094PB3p7Nrt9e/b09Fi+LRc0I2VglD9KlTaSVP6u5yqDRhyKZgmXr\nOxY/dAA4y9V2K0MySUndM7nSETZ+UfwJQ/FdCOWKvfu6P94a9HYiidLGVCaO\nsAuJLXwCIJDeGPio4MCZGsDNgowcRyQsRKGcql6QryPiAKhND92Dog6EKc2J\nLONK\r\n=XnuI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.cdf858ea.0_1572631152880_0.9339332729619185","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/icon-button","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0aa56818b6d558d7443b045f4a419ed6c3e5f63","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.719b57e1.0.tgz","fileCount":33,"integrity":"sha512-H3OFuzFpLt3UFuJbdZBxtbldy3NabQ0GC+lcj/OTUfqLaJhx9DD9VpTfy6023pIJW3n+hmEswGDQE01IS0supQ==","signatures":[{"sig":"MEYCIQD31x6gkS4u/n1yuX9pSpvPv60jHXUDjE+qORBeFlcAzgIhAN70c3NjZScj6+AQqZ8p2FPjEVnHqQ4tvMOcvfAasna7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8zCRA9TVsSAnZWagAATWYP/j/RddIz423NmWmlNO5T\nTMQ2XSm5ItdLzeWbX8IbI/OL6OL/vmve0rZcCevQ9PfEdXEswFnp0CEKbezM\n4NUIyxHR2gN+zyCFMYwoL88TDAe6M2iNsGG0Ij8oO8LeReTbUiut1Zky2dA6\nKstMym3ahdbpCAyMS8j60ulHXid7gySLeTrfzHXZ4fQaVwQDr7LVgTNsjHkn\nv1zsMn+aHD8AZK5YsPCzilRojTgm7xJp07ns7ELmQEJNcid7QyCrTr2+ccCY\nnrMUR3EzaBcnwGhUE9WUtHE6ztXtW2HBFF3fCluZbLlWXohfi0RiwSmVH7R3\nIMjagPaKkczbxoNVW0pm+SRJXXAYvqcDi6rkvn9TUKbbAc4tffh7KJ+j9eX5\nOhTsogABO6p1dZSkc/LgsOaQdokUl3UjqIgvZRT9hmwkkhhghEa4LDAAHzc/\nzYYKQEym6im49Sy6T+SZ51puMy80kmsqs+RSSIByn/lhID2yrYAmaTTbXe9X\nonoqvU2J8AbdXd8U/SAzuUIMM+x/zTSTYNCv2BZgK9yBhnFPPBVRfYMEbAeI\noff8rJmkrrdfKPEaODAlx9wfmCB9dAEpzpsHS2iTrUKs/UzBKIzT5xcan60+\nqnfGs76SUnCJuwueUSfjqJWUUd5MlHfp9sQ/yna5F00uvSDqonH4CbyzubaR\nInRl\r\n=HVil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.719b57e1.0_1572638514995_0.6810334440575445","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/icon-button","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfe2849b680d20d239fe8f93f2bdcc820ddcb9c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.97cbbdc2.0.tgz","fileCount":33,"integrity":"sha512-FuUShRdKEjfRq+AeTP2052y26hIFdsrfSVw5YuJnGxjWR4XYZCvf1SYtiVDYynxkeluoYDbyFlXtPBcnJaCFPw==","signatures":[{"sig":"MEUCIQD9DjBcd/WYLeHm41M+CybhxAtYqT1h8yxIrK9blu/GqgIgPCW6P0lOW7fYJPIUsFkHebCPtFpGNyN1IHtl1v13w78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWuCRA9TVsSAnZWagAAxoMQAJDMIcvOzBOj7/1DOUM4\n6xbxZmRHc+/Nnp6da5UYr+y6WQaeclp1zMH43paCbOgzkLl4diIZe2Ylz41V\nfaSOea4TYUAXCSNQfD+aCSQupI0e4nAbn7Tu/uGDBkZ2zBFE8QwprpmuxHmt\n9sypSPgX4cXnjh1I2hzSeJcdqRiWl1qolVl/ATA1UmMqiaP67lc2WnpjsDsx\nyTKGIgo+5N8IVSciMUno/LU+7jnCXUkoxT4J2dPn/zf2+gVmh0jbHwIYWGm5\npWIG3vQMuRVPMlsyA43lxaS2yQl6QF0KBvDMedghXYkGE3GOqeMTKc3404R1\nqFzqY8AP5ddSxDfZWwY5WWzfrsstMEQ3FhS8qB1jwxvRKOfK+3NDDzqJD4vJ\njvBngS2z0ACeJc1U+TiCeLxnYyqjuoxJbTCi2CYpOforusYCcO2+t6crKWPP\n6YIASAy3gMC6eVW2sx/a1Qe8HLSHn5uPHQRF60+VrOCzhaerG7DESzRAAFjg\nOVnEi8No/hlT4kWGkonK3o74Yvr2F0tKH/ox5ej2XMnbPqmL20EiI4Q5dqSX\nXbXwFGLuKxyN6ePPRXKXTdKitcWgIW8t0Rg4ng3exhHeyGFv89yqTo0tXOGQ\n78CAZm2tQ81qNOA7YwpIbqwY643+x4nr6YtKj6AHeQ/1u7NKQJY9WpOUtajY\nHOze\r\n=/XfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.97cbbdc2.0_1572640173627_0.44654621333483546","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/icon-button","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c42d9db0ab0235d81289ef0d3e9c6c58e03513d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.8e36b3b7.0.tgz","fileCount":33,"integrity":"sha512-KxcQ0gDuJjbs+a0p5sLgJwiE6lWP3cy2yL2Wso4nBAmYUYWCy02XDCb60Q25SNi+MTJqtDdWMchu0oQo/4rYHw==","signatures":[{"sig":"MEYCIQDID18xllqF+liOKm7equ+yVvcs1i80qegDtwl3j+RWZgIhAKfQKDYsvj8REIz0Lb6Wv1XML8c2PP68YhmTVi5+Sp6a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ07CRA9TVsSAnZWagAAICQQAIsAB1RW+ylhwn4+HeQk\n35K93mXUCY2Kn/ZRS5buD/lYP/YVzX/XMkJnNf2brK84GnAiHBd2y6AYH9w+\nvBkLnJ5dN3pASLbQ0uEcTFEFfXu2g+loIlk5AQf+urnRtLIQrA/AmgwT1fJy\nc9ql5rIT0YDECJqiTbpIS3DWgHdmYT7PS97ojNGyzv50rvg9Qky1YE3FwCj7\nWuHYvq1m9tWROZJ9jlltlQ+CdRXgsoE6FkTbd+Xpo0+Fkoj6Dg+XcAZcuZZO\ng1uSIfcau00RA7wzVNRHWt0U8rU6lyVfPWpXderMD3rmCY2C0p/o9quabp3d\nqpGO0NItQ5+UperZnvUQGKWHXbE//lH8pK9PRfeaD4qXYxTiYxBvy5YEymJ5\ncsvpIR6ptFcHjagbgGxl7jdNUl5FyCjx2BzQDXYlO0KeQT8IrOfgjgHmBLJ2\nTdSFWrl+5o/CsiYPE3InoY9t7NHutZRYzHjsZCIJLNBn6QjM5ur9RhoVQU6W\ngwGp+1H3ASQ5bMftdBbNOMLp0JwPPjuh6luDwmstCI/chHu/hBw1McoAlSz3\n6//6r4W2PpfjRJWiHP88t6HAmTiQRiLS2QyzSn/2vU6Uq8Yakms5oiS/SzZT\ngPQDejBMbooA5eFfDsYLqWnHwm00WxeE2y46X/IHz0Mzi1tCBKrOcdcvUuVk\nx9hi\r\n=KKYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.8e36b3b7.0_1572642107570_0.7328999287973947","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/icon-button","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ad583e7809a7bb33415540f07a8199c32b84b05","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0-canary.62d3a09b.0.tgz","fileCount":33,"integrity":"sha512-h1balg08f0mgONwaWzOcQF8OOO9R3JiQcEdKt9t38QoAevslUJuUkkuVf+DLLjsLrvvKVNhZqk5qhv/EsEt4nw==","signatures":[{"sig":"MEUCIQDKcKlaidcDdE4jUPMenSR0WCI7NhgLGPvKbe8M5ajlYwIgPrwnKcUBawOC4pH+Rz+e1J+crDBrF1jJo60XulmT2cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9rCRA9TVsSAnZWagAAva8P/3rlCltQ9AJ5kRzOdTRG\nF0aU7CTLVEDKGGzFwjQe7V46ff3okZxx92rgBteCiciIB8oZiyFl27+FnEGm\nYY1NPKmx1e1WSJatELFnUvjpPYa7Q6hz7TGReelGCfYR5SS5qDj//mI/addm\n1Xfv4owce4uTXvkOOj+YKGCNQOamrp/28TURplZ6TToXkZwGzcRxkyRcr2fE\nk/SLiUwTWiOecwqiR6BobaOj+hnvayrgwYuK+83qaOUsWFhtiFPPNMAfRE5o\n2ucgNvsDnBtl53gVKqrNepPmjOf91Ajr0QDQZUsx/EWguOWogb8GGdzmRKlD\nwzp09/g7Ehda5DEGLZ6g3IB0BhYZ1g/zo5ZiIsI7K+ecyz6pW+0r89izD58V\nI2WCGmGf66T5Jihv/kAWhRA+9hCCyXfRATLkYDHTXegspa9Gs0hRm+ag5fON\nEVj/ZldUqbjdaebxFoZGecbx1s1gkUr6/WXoy1+MZZC/36lk4cuPkf8qlFYD\nlnVlYuG39AT6CncS7dDX0U5UtqJMqUWETu6Au9WzzA56psK3C7sgCwEaQhpr\nn3Va9+9egoMdAxaQMT9Lf2TOeRSRw/rlQZzjTwjooaqyKrlk7SojiL135boF\nkzpgBYyf+eApGJKeP0f5nT+dztnEIxZ76wFa3xH9+RqCla267kPQhPpg1STs\nzKbP\r\n=l+aZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0-canary.62d3a09b.0_1572642667443_0.2551190998627757","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/icon-button","version":"4.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7293462f1b4967712f9b8755b87c2228dcccc3d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-4.0.0.tgz","fileCount":33,"integrity":"sha512-b1SyWtr2cwlKgIVo+irxRgW0lpIzauADLAxQEJ8/RTO9qVFviohJUnS+5QQCkC5zex5Q52OmQ+aNl0KRjkUdvQ==","signatures":[{"sig":"MEYCIQDQvEALGWOmXlDzwKkAVjhSrg+j7UsLq8GXWVEVOiW9VwIhAI8oSrIyotarM5/QRNfI70wmhSSxRnTLhHn68ZjzDxM0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbrCRA9TVsSAnZWagAAWIkP/RldmPK0+iuPlJ64cFzN\nq+IUzMR2VWsPIFiIvxzvQ3HTbEIIsEALW2FVqwy8bGFK7lyBb57hxiQNJ3zS\n5OX0aBtXOIUpnibMFfrw7J3y+dS+OboZZyXMdX3SHyVjfff/5JItw/c0Npiu\nU4C9OkfVpuJkgaGVzEzNQitHaoycKL25Ly65lEgxoNe3oxlx3K6nJ706X6rZ\nTUb/xkI5OX3F8F8kE5k31WA0d0RX8cpnd93YmIO+SQnL9lx2cm5sxRw6420m\nph0N06dEwSblEwDkzrq3OZqTnJv8jLToj3yzJk3SsdxC1K0i6Ftty5bVNgDi\nSaj0AUNzAdxIytYLZY/7DxvYsdVC6F823LDwi5I0ogNogFp68EgY4AoS2UN1\n07XT2iIJIKaowMzMS1sy7S4rMqJTQHAgTvwhLZqIlC+JfasIiSvaM0O9eb/Q\nkdZ+xfMGhCGfgKYoeQU/1AnZL5YjaAgqNSAUd7ign099VFuZJ5OLTtm3iJPT\nClbw1WAnPl1UZRMmfst0TfhEA0pAO7iBlTE/h+xUBIHkpbgZc22MYgdL6qej\noEkTGMIE0W0MIeddQCQkPvrXROBfGVnnhh35jfIOKRccuxaIreWt38dLMSfF\n2aY86vrsBktFKQDNO2Ps0EfHGxInqqp+iSrYh5/SGTdCkW7z2ZhHgLLfheg4\nimvS\r\n=H/wa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_4.0.0_1572718315189_0.4510286565541821","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/icon-button","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c4246069ce0fd639e3791d7f0099cd4bc9d3158","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b5eb51e94.0.tgz","fileCount":33,"integrity":"sha512-Z/S1w7gaJA+H1hA0r98CO1I0kyAqsdn2EphHYqfvcIQ4UUiXytLMS11R/jFEC9+bR+QH5sXXRW0vLqjZI7gEpg==","signatures":[{"sig":"MEUCIAglFx3M7MnNlaoRzaNX9mox27QNyVk0KKe4oMUVtq6sAiEAvRr8fZXr6L3yLC1PnFnbwMZAfBwHH4ot229WS7Cashs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOZCRA9TVsSAnZWagAAHLgP/2IycacKsHpyh119EEwQ\nPVINDQcG7L1FO2E3+kmU5H2PfABdv1Ln6NWEcAPSoJyFpzuE92XNVmzK6jHt\nQq1NPnBI0dL4wgew031fEoNmiKMcewWHDLDXpD9W4qiAnA94R2waJggaYBBY\nTwCtZoOzKvDurLH3eMVC9+3/d3Vz5hXiGjOiWbFqsO7mEdYq0CZJ7JQ19I38\ngjXcvPaJwXp82wWbnjEujubs6aruemw3niksm3SHrA1Uz7wD+0zrratXuHCZ\nnXiArQbEGtAhOkeaNWGNtHJ3Fq1foXxdldJ1GCbzwW2r+yHi/EJI+pcWMpm/\nVMfij2RJGQmffIOC84A/dp3l9levnUcTyi3kWogJONbHOPoCGAs5dCt0qqHQ\ni5Nu3tNI0n6G+mG9LsVf2W2n43qIbCizoaz6TKq/mFYZE5coBrfk3PXDaj03\nSZAWJ3xg3wl6voqsUYwTFXztkjJJyse5DDkJNGpJcfhZSUh+pMqStv7XRuKp\n7bavJd3a0rwXNTnTB13WPhYvMk9I5coq7xSaPZuj7PxhYeQ0JBFYN9dptRJy\nnIFzQGfz8S0buQWaRc/evaeIiv/TRLp+LNbIPPCT2Dnl11uxEkMXbT4T1bER\nYbTHYVr0P1jbVYSDNpJRTZ4kGE+cfgZS5JOK6ms20SbhQwz6I9xjxBeOuzhK\no97D\r\n=dyHH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b5eb51e94.0_1573151640739_0.9686627306988911","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/icon-button","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e20079c379647897e97796f51a8f20f940e2b318","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.58500806e.0.tgz","fileCount":33,"integrity":"sha512-uzF8gO4/RsF3kieptWkJ84XtsFeLpHxiBICXwy5DoJzglyXqoLcFGkh4CsL9IbK7M0bNAJpdXk9UaoSCZuJJrA==","signatures":[{"sig":"MEYCIQCnP6M2h2N8bdKRQP9ozTIYoQg6fAGHumg5gfxnawVsXgIhAOAMPekA9tAbVhK5NdiTfRnU6iG5kaOTw0kI7b8o+k0T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtmCRA9TVsSAnZWagAAjSgP+wVgmaF4+v9Hxq3O8pPo\ncKOhxes1RGUS9tjRDq0eNCIybZJXuJXnJVC6+k0eG8GdpREJh9BxBizswtVm\nZdJxtYPG+v/ia6n6GfjBwO5JepeZu+4tCR7+m5GAC1RlJcScab/eqV94DLfa\ndKC0Dw3rN/LY+VPxp+Yt9hSGAV1u/t/EhATox757N6bnBB12HBa4ld6J/GXf\n29QQb2qRrFCuAy7DcX/8vxXmmTyUB46raHfzcS8oDEgAo1d413tfZCD6kDAD\n/+0CTgvQ/HlyV4/Xv8szXt78xIPvGor9lXFh8VArkFAziz/rh/DzxerhPmP/\nkyPragyrLS3uIhlPT5wvlDZMWz+/MR02uMWyi+OK8J3L3YO2mOwf/guNFZo6\nghMEjLdAA0yxvVnLAPBeJzMVXWb+KM44vxPzKf4R9YiN6n3TF+NVFGKaRr/E\n+xp+X5nkz/15JTdgkpS1oczB+LfcXCN8ls4LgJ9xct0fCoFc2nhnP4QOh2fv\nAKKVGXuCcyu54sJVb4a48Erl/Padh65WdCAfMEv5woNNTZIjE03CoxdI+V+0\np9TN9iTc6fBqMUQvUe4ogmoknkv6C3v4IvpKOfGuqqeDKvTK76JirbM+3d17\n9ZVEKuhyqVw4RHPBNCSPGkbfG+WHNSGEF8s/JgviE8mUXjtS2EyOiXm/p0Pz\nMYkU\r\n=eXrp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.58500806e.0_1573227365670_0.6857605704003524","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/icon-button","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bdd4fa4f9e9327e5d1a9d36111d76c445ca4c49","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.66299b646.0.tgz","fileCount":33,"integrity":"sha512-C8JBkOe2E4TFDJJCNZER17f9Xl2IHyQONXFtdU6W8NBXwDHbKMAdFKSbdCMzXAjvJA/D/+VsEGq0aDtW8OzAAw==","signatures":[{"sig":"MEUCIQCu6FgOhhtwgEL7696aM+IUElcgmix3Sfvfc91ATLzElwIgYsQ2m8um1U8OJBSVIUytr9Wk0ciqxRhpjQoWpVxrJvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdE6CRA9TVsSAnZWagAAQ64P/in8KpQKdEkhQqopHyBG\nN159RXkUUBW81iTXFtAg1suCXT1xlGMxWOc0g3anIMsELqslQ/WMJQcOnuVW\n/Y2LTFLDn1MKiEJC/K0dpNh5LWwhX/cZCnsMBc1T10yNB9ukROAQ/iFXcdEA\neiqxVaBBlV0P6gFBip9LgDdZNO9fHceroMFTKOdGZA3ufxym+7lgv0oLNa65\nJht0/DpRZudXWhOI3N5PSiaSfqLm6nMvcLH9ydjy3NdQmKVSTIhu9X66VCh4\nWWkGsa2H5h6ul1VArgt/DmOOiAsMEAXyF1Z8rPWHkefsp786zHCbCsbNnWV1\nQMKqOOtkoPaxR9NsZcwxDKehHDUREpRkfr7zgfvKD/7HWfC3H8sD8nBppFer\nSUhsq4QiFCKd1Qdqh58u+pG5ViUATfrlOluqxgmYTbVT+Y64jZQYnlRaI1Fc\nzgM4C0aQdEqq0oYa+tTS5tljaoMiWccrAgCupmsjtJhNlHnO7J0UOA2YEMqA\nXAfe1QlfV+x8Rj+xfLCJMr+f1ypCojJBHN8v2W30A+y9iv8Rvh1GCUW5lyax\nS6S+1wC1EJ1+4C2NdaBs6aj66CDQD1968xQ9DBcDLodsxRRUBXskZeWScQjW\nWMV77mmelmov9UVd+fsflSTsFMNeBaweWI1h49Ay4Z3RVGY/oQ6EdzV8nor4\ngHpi\r\n=7Sha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.66299b646.0_1573245242160_0.4930513949675852","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/icon-button","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a45ae27b49fb1ca02e8584f4e949b03af09123dc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.821871e04.0.tgz","fileCount":33,"integrity":"sha512-wZNsVRTwvs3fMq6Qw7Hfrh/4/HOPTuwee15gNba33tuOmC0qdj2/UkBniFVkUKY1kX+f2Q2bROZqJ0h3YK46Tg==","signatures":[{"sig":"MEUCIQDiwCnaYFMKLKUfrf+v7rWeWvgw24ra5r9iCU2QuzBQ8wIgCN1JTKMVPlnvKGPydO0K6Fj7mwRyCypT6JwcCP+lhRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4FCRA9TVsSAnZWagAADfQP/3JTn/MK13oixrn5yjnn\n3gpA1GlglLu4+5js7D/icTa+lKSdar52reGI+Yf4iztjZeLRSjIboSaT6pC4\nq2LqQ2O5lIzwu75rQOYoXQGYtqQdi/YaOVGepPkNQqx+C87Zy+dqwYMaUQnH\nZ4w91dUh/zudnVjw/U3mLxgIRtPhWrZsc3CD3XoZM407y1RFmXLojMHopZMy\nSs9Tl6DjMsfMwX2Z815G8yE/Pe4xRwsCUPHzaTQRx+FHOKseymrZjPvxsob3\nNwO8z/kOM51qQtHKXSxar0edcE2S6S34TnCNvBvegC2LZMm3s0P9FnnOitJQ\nT0efHAKWNjEB4tONyXs72gkRYwiyaBt65iSYCQXiwBMU+fcvd59vowxSzf2W\nfcTvE+ZbAH7qvu3y5if7ntvC76deHpKQgVjSYpO08jC5YldQO5Yv1noOv+M2\n1pRF32evtGV2awE+gMWzsUm4C/Zg1HppofMznhsRtvPwEY5nNxGb1uzqyMOc\n+1PKtL4AS2yvFrya948a+MnGFXXT7gwdxNGPt3XOQuHjt1TQsty1wHhJN3XR\nW/H0bS3iCIeDwTCi2TPSlndlVIEHfEI0e2+3rsZvDzz2qOcEsOx+r7fDVdx6\n/eEsjuVB7+fiWeAeqtVopwXmKQcXp5kslaRSVWfRndZsO28il4zhAfbvr/aZ\nW6tT\r\n=QVpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.821871e04.0_1573248516559_0.7549535884474508","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/icon-button","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"367244a3c0a6966459fde7f7a286c5d304b80c4d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.491fddc31.0.tgz","fileCount":33,"integrity":"sha512-axjdFRfMFWIEIALcdtrgUt/VFdM1SlxpVVkYFf1NlONW7tdX1QKv5rz+oeD+/BGmBvmUJRDazR1jPJJEA3FjEg==","signatures":[{"sig":"MEQCIFVKIzBGVoI1Tu9VArD7igY83bl9ClZEVsCZGTXYT/hHAiBRcMzuCjFx0OasorATYHR6lb4ILPxY/FTBswmF2/nXow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecoCRA9TVsSAnZWagAAcbEP/0ZO/kk1OTN0mnlBirwX\n6X60pOgVn4rBLItaBQraEB8icJcKIKa9NuPRTGljrKgf25VppEwCThQA0qkp\nDIpfo1Jmccal7Roy5Y5G2g305LXJ9Q5COMPg1wsSqavQ1MeHxEB8kOcdSlYH\nNVaU4zExatJa4GYsLtneO8brsRNTx244eoPMmPcgO7aCV2bW5oYH5CLSDvjQ\nydNNTB0JS4caBWnz+COPN+XNVctNyee+MqwCwEO6n+IeYbD0wnlYKN4wGFPY\nccjimK5M8s/jYHpPp/+ReBG0nmspswrAbB0JMtI8MZPjq4AbaKk4HR+EUs65\nrsVffpOvTENN9hXh/l1ReZAUBRgvTLTBESbYmVF97bqawhKOilDzGov7Qda+\nHt+CMofHWyLBgPw0f4YpR5O4WIPKRY4A5aMGDwtWOuh9YrfDdu7nu08MTn/v\nPbopB2ux4mxy64EH5Z1YxGq2iuyH+2TpVnkZW8iAs8zTlZXgD6aFVANox29/\nWjZ+V1gh+9lUxaKjtKHuOS8nqLKc8q2r3z0VAvysvKiWWwSCcX4RlB8j+vIb\njtJEIW9N0Zo5Mjq+5XnZO8Kbrz+OtYI/ATBFvtnoIzv4NTYA6tiCK83XCBAv\nyn1dpdZr14DJ52uVXpy0YH/RXhPk2VQteEV2D4NiuAUu7wWdpZOperTF8EIB\nkQCC\r\n=+GgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.491fddc31.0_1573250856359_0.3644979276892053","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/icon-button","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6c1dd1e10858b456f7fe6288d9718fadaf2ec7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b0cecf145.0.tgz","fileCount":33,"integrity":"sha512-8f79+JzOkHvuWBNcq0ZQ2eu8Jc6Vj9Ml9F2MMB78TJIapMeQ/QE9QUzEgSk5zWeWo8ea/n7oh4HgCRqxXF5Gmg==","signatures":[{"sig":"MEYCIQDmkjMuNeqaw/QaFMX5EAkGIJITFcMCctajH3+epi2cGgIhAINYSQXRnqZi+hXsuzYbkt6Ve0VzzkDnuNGj/1VNd6Dv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwikCRA9TVsSAnZWagAAhrUQAJuce/4Lmc4jHgZgtxSm\nJVcGR5aS1SeqXSAplIRSXmRBujRpkFUenza2jrduJcMKihl636PLSYCERsUx\nogeiDJBPddu64Hgydy54yhE/XMEjJkEgDputZ4LACWk2qGuWxxMmOkz8Ausq\n6v5p1U5eVPR4abEEGCvaMMJMMJy+BXgNWyOnsqMxMh4hWz0piI4Fw8FSirJv\npuLxBGrsy5DeIoBMkYgiaQ9cdi66hYqvgTx6gmTByr4x9rWVtw4WIPpztSW1\n5XegPaQvt+OOQDNFPCc96rsGOTRguzMNEXuYvK5QoXh5zlUdecMLpu58WYOk\nxguLzEFrrZKrb3dDYBFoF58cxd0YJVf61dn1rP5bkMLtM/PP/cK7RuDm9Wj8\np7LLaDxQUgLWdRoBsvkijbtgceIEFRdZQ1s8tA1EuKdIJLKzw/qswJY/RMNI\nJd0hnSEkZHAXeNj1ayWu6yPGHVGPd5uj9KUxOZ1NhHhzwMkxc14ylsaWQ1+X\nUsinFzi1i55X/KHpnSsvlkfSlSU8lQJ/MpcUp9AR3LRlZEr9MWn+DEX41dDf\nqL2VVKYnN87nRgY30cHDQTk2uSkkOtcRYsA3/xEppZw3Bh0+MqvDuSaYsVlO\nahZljMVJvLPaHgrAtB5x8teQO6jzFU8yPsqt3p29lnyi3lPZ9JRnpxP0GXpT\nRmqN\r\n=hQZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b0cecf145.0_1573324963901_0.49191845512253307","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/icon-button","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f37ac7f6208805e101da020abcfbd2fc639941","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":33,"integrity":"sha512-yhMDuuxBtyTFvmYot0eirbwnwjvIypoyWj1BO77pB1XUU0BhoyOCExV0xjdVcAqYYyqFk0a4cM4TnAWbjTosMA==","signatures":[{"sig":"MEQCIAN/tKgUPtXg3TeATzMwiWK6n949vV4GhO2wC15ghyelAiB3oF78yuKghz/QYlk1Wp0usUaru62CjFvgdA6gT2sTKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBfCRA9TVsSAnZWagAAiQcP/iillWFS/OqFwnyTKT5E\n5qJTvOraYLChbKx8B6JQNhf2Aw4q9l2yQ3MXHlLqM9Kl+M3NeYnUuDKABsA4\nr53EQ6PT1FRCnZx+IciRvPr6nE0qhkrkPIBr9o1PqOew4Vw34z9J8NjXkDCP\nliDMS5Y/AcbFxbsWGEDBOPQj6Fedahs+zqO82TRl1f/Sorz3IfLiBLP18QSa\n2LOO6WIUv1m9d/tVg708MpaRtDdR30XPOv7WI1ZPh1YWjIbUu1sBzxFGa5QK\nBWsPgGBrdPJSgTJvfIp4QkYcnIbpTXiyG7xxB+NLzvaqDYiDJrMjdvWkDiQP\nsRzpTTJmLEIgRlfGmUUcS+HxSOOQIte4bQL3YEDZSnaqClPCGGK4s2nR9b9c\nn9JyRh9PjsXqRBG+aTgdi1vBnV1vvcnBTV/Hbtkg9b985487+7B3hBdYI5aF\n9TksszcHwBmclDjFinuKUQ3KST0V7sz7RHLcxfLEqCpM22WLuBqaqwHAhRSM\nJWc+DHO3aG/edvOwhDgfuNnJHofD6GxlLh3rOATSloLuJYaulnXZFxt3JFvY\nNAUFmE9/zem04DC0yFtCSsoJK6kQvZuVO3t0+ujStdEZuzJ/wye5mAGiIn7w\nQPfeF9gWGYzg9RQA3clOTi/N2Wlj3y5eZ8jgJdRoawwsrgTWKrlMzbkBOorB\nqBm2\r\n=JcVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.afe0dd1bc.0_1573486686731_0.22411568837905005","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/icon-button","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef9b42c755cf72e8b8e80de02e72dd6ef06d678","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":33,"integrity":"sha512-M904twoGuT2HXP2LeP1Rkxt3ltswrkkzRN+Ojy5NfPbZIigDTAfgjrPl2o1iTLvk9b5LWjcgi8PwE8se+YXkjQ==","signatures":[{"sig":"MEUCIQCiDmMGNlPkXDtkj3//t8ElG8nGHzZX6HQS+hjQCerM3wIgHHP1li4NB7Fo0Q7rSQrvwIOT0KJc6ZkF0f7U0BOXstQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnICRA9TVsSAnZWagAA2Y4P/iuHgdDi12bm21JEMtmE\n+P0edQYplUnrbPMGptJzTyCBZm+RSkgwgr1cOa+iSeZ9ifJbr+EalniuuOio\nn0EfaFE6qDcCIvEw36hiTNBtfZm0jQsqcNsxtnLtU7cBYLDX/iB4OttBljZf\n9TIvLfm05IRFQR121/PYOPUdiJ/8JrTwR4LWSSZNDuBv2JSZtb6Vrm2ADt58\njTvZL950ePFN5jYctRn6XihlZ8u260VCiWJDFryeSPbH9hEIm713nBk7an/e\nq/wUL522V6d1RMvbVlj5vgPdGiv6IyAVl6Bng2hxtm7jnrS+yDGjt8zY+B7U\nj0XhzrUrNsohCPMJ8+4MQUv7457UwsDV35g2bLfQg1trv+c3ADNOy9sN0Tnp\nku50RWo71H9XkhTYqrJ+tkz3oCc5HS24jn17qn0QWS5+LzF3PHhGE3Q9/Uwy\nvBE33S4qx4nQJ7nIlfwdU7Qd3R6aZzfXKXkTqGa5AZRL+eX0j++ob5XEn3Pk\nAGqxQyltudGBbYcUjX6soZSVr6CCdaFkDGUVUKOIHrKKkOAmM6uOQ3AQvurr\nyfCzQtGyR69Sc9Disvain+b09D0zjlZDbnfNVodTLFEqSXI/F0Ba9dFldEXH\nHrkR8pZSa9/JnBJ+50+ygv0b+QFyQ17fwUugMtZkLIRTtaE3Bl2PP6NfspRp\nYsFY\r\n=uFDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b4cfdc40b.0_1573747144355_0.24532621081413342","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/icon-button","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"454330368b69d4234fe983fc40b855d8ac4c86af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.525989b5d.0.tgz","fileCount":33,"integrity":"sha512-xJQmeTH0Dy0qS7yakXQNPQNrROAYzuiQBbN84GCopFwhI7G/AtPKiZE07PIpB0shMm1fIRr9dD51qMAhhxD0mA==","signatures":[{"sig":"MEQCIBxCXT203Qk4rrvsj/JKagY1vdT/OaF2Sn6uH3vePj6VAiBZ6GMN3DNRHe15IhcnDn1+EmGXYS+8WoH1YhKpkJIoBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePACRA9TVsSAnZWagAALwUQAJDGyF0kioZkIvx/OnAJ\nWj8SIT5CUN8qufUC/9FSEzo62/FD797n3I+FHw2mu+RfJVKc6/c9wBpMs1LJ\nVaJpwh2S2FH78FXBaYTlygCOCCZFhZ9N6YnlKe08eDwcAgcfepKxXQaU9AsA\nXDKZBqpecbqXHzYAOWlcIfLclu20k9NaVhfTb4gCmC0OAIEN+e8cTEmHQeb9\nrKJqKsjZ7X/72Jh33wLBHVB8XAxDlH4Hos3p5+eKnKW0lGg0foam6gC/FJc5\nWT6WcghA/we5XIbRVmlZ7UAfsej66V2CKY8HhBHoJ9iq2adF2HDMUhUQypIp\nvGcsA0I+ti/fOaEIpCY3Qh5ui6V+yBRuqLJhWiKyaJYgiKgflOZVxqUYjNKE\nzvTyB7MzwrgqkJdxfTxGMYYaNHI0udQgqBlxpfvIHVX8JDorVWh3LCLpfsVO\nv8DWhaN2eTa/KBcy02AynxjvTsMuoF/q9T4qBVjbpdpAXOxCpZVMECn6yaYI\nkf5Hw4Xbc5nEWNytiwrFPSqTubqSlBwFuqEl0OFZ/zlNysKYirrxzJ9jd6cz\nqlT6MswDZgaR/J6FSmtISJN/bn3Ausy4ZVCj9DaMHgde8mypCYFxRO53nSJz\nVDba4m16KKRhwDpTQngYWyIDCfFao05uWadBVAQqI4NFRq/ZnIhwL7v8fgFt\nhMBg\r\n=rgjp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.525989b5d.0_1573774271507_0.4068538321404018","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/icon-button","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"541b11b1cc043b325a781959ac615d8aa5b8fddd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7084b403a.0.tgz","fileCount":33,"integrity":"sha512-7Q2ufQQLsa/PhEUHdWO6LWhOfXWWQ/Vaq2kVq+fzXwIf9fl1JsnV4KHpinLu64afLTpxz6jG/uPiJhra26kENQ==","signatures":[{"sig":"MEUCIC2g4UiUlH3rZ8DdeJxb+QiymEEApUfM8MmPWCuIP6G3AiEA6KbkMHUkgyRawD9O9KzRBbxKKh3unJk6/O8woeUyPCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfoOCRA9TVsSAnZWagAAat0QAJaILoXtH0YqInAs1kF0\ni33C0Yko/1eo74TN+fTdFCnXH1VLsa9F1FnCGQk1OSmZoRjYxnxVpZYkgTYc\ngODHFglkVF+QXrNxjrIS1RLkGJDHhqJrQP+jaLpi9WP0sxqaamWx5HwMT3+z\nIaQhSXe8NTymwySeYwzhP/qXV9eUZcah5BerVpu74TbXQu/XsopFP8LaRPZZ\nkCM68GuDHyuJ5Uu3SIB9Cr0z1spgeqjwhvyxyXaJQf6vc4UruMfjwxSBOrov\nj5O91/2CveFuSbYYz/L4PzxK1k6Lsi5T1cIWmU8tKeUr8q6JRlMnwdJDxFnk\n+33Sphf4TpN5rr9ZIva4GQqYYP5jvsgsLKp2254I/IXn+CgnnR4hUbmVWTss\nHxn8GzwJOM88fYNKG/oqEw+/nYHOkCyly9x9K1kqsggNqQo198QPKRpoztKy\nazfvUT0L+/1VB8jARJ+wkBp+Y/ihlRBsgjzIP7bBR0LgkTASN98ZjS1VJfYL\ndE7zchta15M+6ICBjNgmkqeQbzsYjymvb8yZVfxpKndnBGNCTsK7iC4uTo0X\n3fxDz8kytwP42wXE3YrXVvJf0vS4cTCbpsZLqg6xcKxFKWe15S9P5Hz68uyY\nl2mTvm8xyypHR9x3IUGqSiR6PZz5FsYL2ve5ccbo5EqlQgeu9znuG7MaZz+l\nF3bC\r\n=qjFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7084b403a.0_1573779982306_0.3724174182240356","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/icon-button","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70a90389b90aa938d8a8f3ed7f4a935af4467da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3cbee6dac.0.tgz","fileCount":33,"integrity":"sha512-uZYckCgFvpv3lFeOnkKK60nmJGRJIpVq91uYVFj+4pyaLQwwRR1UoPvqB0lA14S1974H1hHVAFnLZoEsJ+bRow==","signatures":[{"sig":"MEUCIGvmbGjLtnXuR5wf3iy4AYKA490y+88xLSe+ONXpZswFAiEA1ai1As8jFjaxa1b1QsF7vDDLodG/YsMmzkBZaizm82c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeoCRA9TVsSAnZWagAAX+0P/3gGcc8Qcv/TYTChsLpf\nYkcU3g2VRAlx9yXmgAPeV+2TFKrMoh76Hidlgl9O+AVFQfnkEFlCU5Zc/keS\nigenDQx83JOQiQbBhq8lzpaQ+bUXkPhKxlUMVgqC0s3g1v1uHu6uuaNzejU0\nijAxtHFqThLtSvhzOMZJP3hQXt9W6IByCqiJlL7aAYnGmo/yOqgu9oZFZte0\naiPsLWxvo6jKamP/2gBBYswAFS6NcUsP6WOawUvWCM8ODnlGsYXqj/wrTTP4\nxJc2hLaas98jUN45nICKWWLAnn8I86cxIeqznxMGwUBZD6zLRICMQgrsiAZj\nXJ5o5MPxXGYrOoVFp9Rna7rmEe/dTbLP8EgCoj9TEZ7EnXI0dUqjZZDLfaSC\nWdpNjufej+bUIjrMbfay4IrH1reynuZ5E/BjHd+zypxfdyS6riTMN4QvhEk+\nwypWczCmdKQHkMQjsB+EegB3M3l7RCe69+aYmJTt8tGQOry5Ru3B7M1elOcj\nBKZYVRIf8vvFLhV2uP0usC0pj+DcVpBCWNvm+JuSf9/qP4HV1KJezivXC+hr\n+RCXD/DF2o+AI6Ib9exxUJReml/odLH55hdOEB9GVGzt8pvDA8HJGJf31HfC\naTmYSSiysD/iAV2jRKi9+fJpQJGlwTNSkWXhvJqLO2Vhy2h7m+qhCqn86QSk\nmfrD\r\n=CWva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3cbee6dac.0_1573857191409_0.7271687639627826","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/icon-button","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"187c469f1e3e58c1cdd394ad7109bfeea5d0c673","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.591a6ad44.0.tgz","fileCount":33,"integrity":"sha512-LQWN6rIZ3gRXXjz3kzHwVJIrhkitRiSfh0URsoX9Ph6byEbDm6TB3yYfYeq+t/Jqg8uI0r8RDidvHYmlCRi52Q==","signatures":[{"sig":"MEUCIQCwlDJLbFWNg+Pwmeh626Mb9lClAeWZQlNw8ta3MfhoFwIgB/HZ9tbG/AGcVw4Z3r3/KNOdq+LvF4ENaeCzNvI6/B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3pCRA9TVsSAnZWagAAwGkQAIZvV2uuoZFK9Id7NfDY\n7ZTQTz2V3jqklt1kC6lBX8ohVUDjH7Bq/etf0LsxMqvWLDGqTtJVdabp7eFo\nJpddtQ10zw/JX1jHRebsJFfsokFdXi9YVDYQx0wdwv0HPr6eniTX/e+hqJHG\nUBhEMuy0S/0JrWwR7hyPV7+AVTLLQjwsW6tFWxpw1XINnwNZrQqGwov4F/Y9\nrkiPE8ikilfFhjgJKPOMQ8jYZNHHNLw/vE69WFxUa7YlFeld/V0RCETy3AAK\nLYsCHQOwJWonqHiZ/sC6JXVgsz+WvqNk1ChAPUkpwNyfgYAzlnK+JmqGcv4N\nb1rzdaQLZx5518z713X8ixmYsZnCLZ4cLvi0VmXadCgnSZyvnb5efpTUZb/A\no/4cjVzrn4xpk1Dsd75EXB6LCDoNJ4gMmrvetDbXpAHh1SkuPx8w/t6vosuZ\ncT0HCrp1OxRvQ6SJUN2q3KSulW/eyPVcIoW+7VqAYiOrkRy8G7XOUZq5lT8d\nLrcCGyAEdKkR5+4mBa4H2ZYCHvoyMHytoutcWYMvs68oSLDdQunJlfYQbTrw\n4YPl13YPjpsUh/cLKE4qFVkoY5pk9+v1Cps6Tdol5Dh69S6VsjdNgV2utzNP\nd909lHjhAntnAfyBQ84aAb4MbhB9+THxPalzA1vAn8UOqcbxXdlhLJe4uWD/\nJR61\r\n=QnZv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.591a6ad44.0_1574120937320_0.11813381191905825","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/icon-button","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5393fa3af45c74f17bdf7da87ae56f700e9751b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5729943ba.0.tgz","fileCount":33,"integrity":"sha512-yhbFiGKhMqS2nX7sGJ4IBT69UsESfbJ8DLQbkWhmfOU7XGu/lQXEB25FGpqsNF0bmBAEtisP53NQE3eSG6pIjg==","signatures":[{"sig":"MEUCIQClvXBhq+2JfTqJvm1GngpwENgiNL9JoL5WH2hCtwllzgIgW5XR/DswQuVoIKau44pSi0hoKkNTfI4GiArUrKYDixs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1Mz0CRA9TVsSAnZWagAAaX0P/24XEvDhE/v1L2NQ47Cs\neTbX/r4iwlMWIXLz5wQujdEUAcxQNGvx2OAzT240jqJtWh46qGvHlOEqPXnx\nb/4L1S6MtrpBi7Ted+8Ll7kFy51VziTod7657BMK7bpxPCcxplEJZze9Cd2x\nor3TowbKCeODHcUAynsXnpI2oa2f8UIKFmcSuSUS4G3USsspCqedcabx4jln\nZibg6oooymMhtD+WtNvdyOSxn8ZZOlXxEqdf+qORvGZSpdxPPa/t5TKUkFxL\nQPgWQ0ewalS7TukcDtcwgV3pNbjnzHxD7aoBCfkB2B4dDOlnPG9fbYL4mW9Q\n4WxutQqZ3fZvmUy9VPoIwoNm0j4N2ruuRwX1vKJjXNPc0gKo+M2fnF5I+9HY\nxbbDg0kaDWpl3/7gDeMnZihYZhvsrDSHyQbDAYIFgjq4qgu81rdjgXklFXjh\nKdMTGH13eYRZkqYSuOrJUNIc1p4QbL4S54aF04EKHPgpwNQGgG0Ll6s+8Qya\nwwGXAzQ7O7YVUpjVnYrmEOpnUksCHlMHnTY+gdlWbDIe+gMWcEErTgfx2HHw\noa0YgfYfjLKHxrfhzziohF/V9HzeUEDPKZ7y+0cDiXAFRBSjzosSgjEDHqmX\nWMoGBLDSF5vw1A5JIZHQqiEBJd9aDyNfi03mQBr1hK4WTSONvunRqRdHoXnE\nqspG\r\n=O5MP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5729943ba.0_1574227187739_0.40436538591506554","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/icon-button","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0ce02034b5d96da3fbb7ddeabfe1a96eb69acac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.e89750dc7.0.tgz","fileCount":33,"integrity":"sha512-DERudcty8rp1/RypbkFrRMCm0Ilu6OVwb5qdy8KYZNDULrlAroJk/8FlkEIjkM5tdSiTXPiIXyErxXG9cvc3kw==","signatures":[{"sig":"MEUCIQCaS8eGdlg5QIoPwqbKGlUV2cwK8oK3Cxc7nSrBkB8CuQIgHIDUMleehv4qx2Vs+4hkp2BsOspUQh/BKZUrnhpVP9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsBCRA9TVsSAnZWagAA++AP/2RsXu25V1d5cvbcRRm/\nIyfUbO4CH28CbMkSbdQQUrD0xyk6RYuqvtQNbnEJ/hpOHBM73WGILy0kutP3\n1vB9wJtQ2Hj5sff8sCZccvji3xJpkM55UB4HEe3qbxybsIyqpefAfOKdFHkB\njcOd/qyAnZowrjsSjKyH4icnWQBivoZu4xCvBpA9yj6yR15ZyFZbpgXjkDqm\ntgfouS7l6BzKjPLxUlWpENDZIZZa9bQq7MkpXMtmCMv2j1xb0TbB3my+RAsv\n376w+i9uHzF5uNXN1fPBPfHel+fhNrSy2HTFfbXqO4XK11i91Ki3F9TXmOw7\nMWBNRQaHn7JobzUzsp1xnn3FNFoDNWSW69XcFu6cNJxXSk0g6PbC7swIoGRs\nd2ZMZBUqdY4mQDUfkvxe85DiSbpYjiD0h0AQFsEHQPex4nXcYEidEXH+zS+6\nPC/vekR+abx6ItE6DmxxbpLIbcHOZ5WqXOCCXUKsjkmmA6gxWIYHRU+Z5ux0\nsgFFONXTU/fyTjyC+HQBf/J0W+hdeJVPD/krU75hb++gXWRkRM+p/M8CK5Vi\n5hoV754Il9zSgrEZ9rIKvLxFJW9XwtVlvg+8WkLJnhO7oWC7QIQy2USWX3cR\nmaEF4JN5+pmcX8g1jqydxSpSfLsPGpKeTDgjxq9hr2vTs0ii+jn42AJqBuHG\n93MC\r\n=GSiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.e89750dc7.0_1574820608492_0.06349484522928095","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/icon-button","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef3de03730d22afad6687d52358ff0be1e0718d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3e560b33a.0.tgz","fileCount":33,"integrity":"sha512-k1hOuLxMqHjOYGEqLPJGGPX0so+Mh2Z9uvZ7yLhq+VjhZRT92GxnWZNfvDu6vc35eUSW/U2la3IhxcfaYLSxOQ==","signatures":[{"sig":"MEUCIQDii3SHggBLd2BCkYE2S3XsAvjB1nfPzHP1PxL2bTUBoAIgZdnb+2mngTg7pDZ/PYXOZPeaMs+vleCUTS2GF8f8MTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds0CRA9TVsSAnZWagAAQzcP/A/8eXXA7mwmdjHY6Nae\nCrD8rbvNTQP7Nq7KpIpmI/E7jNVX0H1Ox6AHiLdbEU7pJ1OJGwjhT+Ya3cPD\nRZONHpocOojMpvCvuYz2Nm3JI9Eh/4dPviDPO8xnjrTkWJDw5kslYsXRYqhE\nhTTWEncFmpDk9yhItLGvfhLWZCOpSEeV0oQ7grrT1Z+kiery5hMxtQY8cjce\n4fVqFNgV2tlhF2x5JeXsA8m0oR3/1bSfV4qQJsBfezH9l9411qdhxF1kmWO4\nyIF4AWvEdp3/7/bov0jYOHeff9XhmP8iZKO/ZqKfPR74Zk43LqnsBX3g7gjQ\nKESbvMy63J9rDLL14V0EiB/OHHmpqS/gaHo73Ficrdr3kCj4c3LlOThlDGE0\n0s7ufJA9EzPpCaCpwmkx8Y7BacJcp7/CSMNqCxuaXO9kc1D+ozeJQ8HPpqG5\nWldbv5ZQ8cHBCfDx0arld0zuqXd5vpaxjsB82KuwFs1lVGhvHyBA8FJ8rd4c\ngLk9Yx4DRIrIVP/VZL76WEZUXybTy6/J4kQHQwdbIX2onHY3ctD4zM9MFJ44\n4LEXGJRhNY/mzFYFl6pdIJO0etiTDQRxbDGtdLaXbipBsfQDmGmzg4p72omE\nXIReKjOcM9ej22b2m8lm39p4/j9xstBLHLn9TWi3fyM9fRqHcQjj88ZQX1fv\ntYb+\r\n=MeiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3e560b33a.0_1574820659764_0.3833693942502814","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/icon-button","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37eb6e019c8955a89d4a14d9596939c234e45538","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":33,"integrity":"sha512-jlVY4UmEsYl1NKozT9DI1eDxTYZlRBG1xg11tPwpRPwGpkqXF8vO/O6zRKtiPED5gQmQB9Rs9XoYGS7Ijpk52g==","signatures":[{"sig":"MEUCIEaq1fx5KV4Hqt6FQH7JG6BPo0I8QEcHf/K8FEK+q/g8AiEAw0hZhoxIsaOeVda6zaMh3o7tdvZxo/7R95lm7pWATII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtLCRA9TVsSAnZWagAA0OYP/RXMiI8KYCbWq4VxEGjm\nTnWZCYl11r22DrYdi0cLrGgu+LC4DAvgzPg+HzreC4kXM5fod/CXgr1ZRILs\n+/D43p6frogJak8tjB690xQbLnwmg6ArTvAHr3NpcdZOP4KbjB3X+e5R3cvi\n4RknMNRHSGKsH3+EEOdrH+lNMZjdoj3wG086p4B5qKx7X7tKN5e20HUJROyk\nvYJjThZYuc20023ZG9qW6bw1wc5rw1QVJGH2ClkjAtbugmNoPuUDfhcJmrad\nTCPPPOICbI4qoemjyPK8ckLkJOyA7NFQTNNG5cp4VOY/BusN+Xg2vLzP6W5h\nB/CeB0ARpJYseAoHZo6PBGDuS7eTDgCzGG8kGGipwu4tIK8JZ0CCai1wEFPV\nWGjsaaVG2GSZKFQ+4tkHe7c5teB3Il1TPszrSoCUAwtwXkVAiy5Fq9xdSe4A\nnyo/QDYJAWzFrwVdtDg6QGf7+ZFXPqdYCH41h7X514wN/eMHU0Z+x6kOAjPT\n1tFkZV02AmVGSOCje8zhYA1BPPuajQHLLAoWc5K7fqAozKzJ5i7PELNunO5J\nfUlffzlILhsBdsY5gjc2c0b/oAjU/IWIUlP+gr6hnPpWPfjyhdDkCXLZuBFH\nzY9un1odU6WyXtGVpYgPuBiaYpCOIWAajXXK+wWRbGjpcYFOYfgSoGATud2U\nMthc\r\n=XRl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7fd17ce5e.0_1574820683238_0.24259904694712486","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/icon-button","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee8d24daff59b77088f8eb3f9d45b22db0b65f9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ec729683b.0.tgz","fileCount":33,"integrity":"sha512-71G/SFFZS25D2yGpThW2h+0Bg995k5zg51Bp7YLwXaSZ7TJklvU03cWDhqMtFO8+jgUMZaYLnqueLl4/0YPk6g==","signatures":[{"sig":"MEUCIQCfSsw0saYENdvGhCPOtuFOcu6YCoXlJCLT1DBlBeFghwIgeMEO3yuFGzOPABoifOkljRAIb+zqNftIUQb3MX+AVmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxyCRA9TVsSAnZWagAAnk4P/18DJggCjExBRDFWhIUw\niefed5a/ktjgZ2clBcE4o5SyzSfbFNKZHQS1GGPcpA5ZbnBVkNEaTSbwt/Wy\nSswopYCUdvNf1d/8Ds+akqjYeIALVUvvTm2qvATEvG38JbbIzMeeh+4fXRLM\n7ql6u7Z0l8BzRcKQRm2u3CpbijrczLPw6MK6UboAsdo7LTdkO3VaGSHBIex8\nqr087eM7qqK8ei/ssUKXmRAEjiw9t6MntsdeOX8ewb54hjmo46ru0VCVchui\n04Xe78fq/wefBwfhTSRFdBFzvRER3tn9yrW4evySVFrVM+LwMld2DJTkvfQB\nMGW6arWPY6aPZ24aHFtt5N5pGfG+tE4mV+t8Og1JfjkTzgRh3oxqoZnVVQPz\nxd7Z8/09eLKHV3FTrT1Aq6IrIfaWUIaLdgT/e5Khqy9MJTprRdYAuGB03yj8\nrqoWmSYDk3LAC1VEIcVR3oJRl/zfIbZ0vR67QyMqeQ2IA38uLsU47YX8OF9P\n4OcpFzvb7sclsg3XBGCpRfGTfEEVifhqrjJ0r1s2931U6zR3380f5ZhUSwc6\nYI2fY5CuzUt1ibOFKyRu7YkyjD7X/XXHgWKhqu/KFlxsEC5I9bTgq9Q51iij\nC+RJz/TxXnRCibsoG7V3QT+eOwZiWQcjAvm3Vl811BBH7VuuoHdnjkyqqdpo\nqUyL\r\n=gV1X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ec729683b.0_1574870130388_0.9391310108106481","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/icon-button","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b722eb91e2d01f8d8640e9927290cfa1fd83d97","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":33,"integrity":"sha512-CjbNVMxWiRgZRWLY/CGByH9LoDcRTh5ei60Yd+rzFAqblIiRllh+lW+lW327uo4/Ku9DfkaiFPY/2be3t4AnUQ==","signatures":[{"sig":"MEUCIQD4MijuUZ81tRNHOhsRQNjTTCo+pRVhtLig0XDOcbCKOAIgYn2+lijuGZUtoLkVbA79k/sMNgwQlJImDI5JF+hROEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3su1CRA9TVsSAnZWagAA7oAQAILo4Mg4QPVnJvizYFvy\nHxOTmSR3LQNbbeCE4mKXqV3MEWb3Fu0F/M9hdUNoN9VGAbZ6WQOP/n18M4sK\neScjWpIxHk5YV8LqLqGnS3E9Zc16758AYtpWEPciTYbBxMqEYO03uo611ari\nHNByFmelcuJA1fahG2uJS8zgx1vQeiq8pFm3OoZthakj3VgJD9dW2qVGjyDR\nLPYSnWwVMI1Ka0DGmGmcN15Zzi4/q5CsmkGBfjHidAj25Fz68gmuDfZE0AfY\n0qt+D9WDxndObaLHUVs9DfUEiXDqra+Z99H5gO7q9hd35lOVLvPdeIjV6FmS\nL8cR0k44A2akkGj8zF+wEhgKpvuGJEbnBP+hGxOuOrNJlRS4su7OF5T/mS55\n/ImuGx3ECPWYqW5DM67BJi06N/MiJPFN7C1SZflFfxoY5SUDGezIpxcNROiy\neoJerill8+1Dqo264XQM63Sj7+m2KD+iaFqoB+/eEHNhs2h8oRQTjOR2efbO\n6P/75GCC7SKJrEWDvwLyUhRn2d8Yh+JiHsnbK/gME8qj+mUpU7RoKXmtzKfb\ngj8XyWaMWyrjet+rm89qJooxE6IJ1RvueGXreGo1aIz54MfMWqijQWQGaCMc\nTpQK9R8BUPLrPkwLP+L8oX/03527MRWUELYOpWAuTNBjdUR6NBI0Eljpiy0T\nsaNT\r\n=OsoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b8bc4a26e.0_1574882228666_0.893663961869813","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/icon-button","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccf2c5ca01bf60b6374d3fe553d0af20f8780944","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f978109c3.0.tgz","fileCount":33,"integrity":"sha512-AZtf0jGD8/KgaGXJpoZpytGwV+Hk+KGdmbtZiFMPuCUe1isgNbj0hHcAgI9tq+3ORlwIafa54dsp8UdHbGUjrg==","signatures":[{"sig":"MEUCIHuXEupwuXr40Am1L1zG/VnwbG6E5IyOQiiaENhJNtS2AiEAr+3qLvba33UaTTkpsYwhZQf7c7iQ9pB3E4vBSWT1Dxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTqCRA9TVsSAnZWagAApRwP/2Ufk2ZxtSRCDeENsW9P\nZaZ7eN4JQ2YfsYzTWQP9foguUJ9/JeMxZTEQu5JgbDNPWvuxMmowTH9IGiRf\nSyjqD+nXcXNKB3huYQqoB8kbvkKh+FTbYS4brp1b6C++qBgJ3Hvr3A6F1ijV\nTyz+BDNAqVzhM3EV6Hvm+xihga8esu2QS58p++0wjHYNpuoDLAzpPjKvuBAA\nMdoKUSwfReAT7ifjwx5LYRXxbr+RcAHF3G90xnf4CH7vfVfuCv7W/YCi/he6\nudVbmSZwRc3qEt/4qnaLB1ek2wGepAz2ARQFFKAGgN0+jeRzJKoaz+Dk0rZD\ncGIR8p3uOC0UCVZiMmgjBf5zs1KnVYRNcLFtwodDvpZB/xGE4evuaC9dMtln\nrulAFhJCsGwMonHQ6XZZ3vRV4+wFwp5LyepAeL7DQWUwg/ZR1P0NWni2sdbs\nghm9iqvtWsVY4bPMHHDuvBJt8FGG/AQx79bwCdy42lnFID8xgeoAu5cea3o7\nwZjrPoySfNh3wGK2+TK207a7crM9hqPZ4mPw2Y1zz08TBTiWki8QgSRzK935\noAdG9L6bNgEODX4WSkR0QCrHwwvUJ50hKme49JDgU4yNCMl79r3Yud0L3CtL\n7KGpk7KJdcMy3XZZe8r9hi4ZMYie41rTAAd7KO7caJYdotOQRne4w5c5k+da\nOIc+\r\n=7se0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f978109c3.0_1575306474409_0.14110344975618871","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/icon-button","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39388638f8bf6d88e3d1864eeb2c8388817a8bb2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ad9dfe706.0.tgz","fileCount":33,"integrity":"sha512-s1PfaPkBkldG+02Xg44rsqzOo2k4JfcKOcr63JQlGm5AZBNNEtiDen/eI6omikjRgIrGGsRAf3D9pWn2qCj+yQ==","signatures":[{"sig":"MEUCIC/aJwuSp9j9brViFDqILNJJsjDHuhEsAIJj8B322Gi2AiEAhgbXpliYYgHHFrl9vBYm2PlFg07xhUwCrYkg6XK+7Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1HCRA9TVsSAnZWagAA9QIP/ik/n4Pff4Ho6hvrHvdK\njhJH2sBGMtNxvINxaJ38us1uzHl/QxI7L08p/WGw+kFMQoXG8k5jc8IrSp9S\ng8Sl6obqTYlkOUkvuPlsbUe7mjd0bCZflSh5sXt9F7WYeHcAjmwqDEjzNKYg\nuW1K9MuN7VUL7JLf+v2hUF3gWjyiyw0DKGa736TgTCv4idR/NmmH9a8uNzws\nMTLvygH2gR4wMYA/kegsj02p6Fx7YiYYOMhMmDTixVMxUgBOrhijj9bB//7F\n5HGk6hZWAKnomwI6riPRVbnJ+6k8z3IpHqFbHMhDv4ffc4I9p10pfwB0ZOSW\nFoD7B1eQvpdT3+Xn4h5E6aPB8PyjIwp/ztbthXmyivRySWyN9DxEOBc95Iad\nJSazInyjcprjO7gdj6oJoz0oAd0WHAehwbfN6x+oEzL+rEYYE/5ZOm1bPFG9\nZnKFdviG0eObxfGj7YOsk+A0O9IcuYCb9ljcYXmG4RZx8V208LOqK6ZVlgQA\npI4fHpUedHE2MxtIgKnHf++rLVSCrj44Uh5QOryASa/ERNwDK0fIWXekftJA\nC9IEQp2Hhhj9jjV9tNZzEE4TVStTYNM/qQTjmmntRen6FJHXEkvja+IpEOKZ\nGp3175dr3Q9oPJrufDUUYoOk9hEzBlq5nlk1Yk0Natzm9hzaRMgp7jQdGzMs\nUCR9\r\n=QKxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ad9dfe706.0_1575415111211_0.2650595632377275","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/icon-button","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f6d40ab6deefff5f2955da7a313d1d855c751da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5e45d77f3.0.tgz","fileCount":33,"integrity":"sha512-g/gcU2KoSP7RNKHI2jD/DKs+oLk/Oj8uLszMLy3xz4ZLGDXFc6aDwtyDHzcgZbrshXqIygnNerOjgo7TsnxahA==","signatures":[{"sig":"MEYCIQCM8YUf77rQsk1Fn1KcErhHwBP1KyCWEBEB0fZ9Xq1v+AIhAOO91Jufm3Qc1my7OXflh9JLANZLHhc/8O4yq7fi05RJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2zCRA9TVsSAnZWagAAo1EP/3Oy9SohiWTh1DzYA9+d\nRNB+ZLfslbmDyeNOOVC5rZlmQkBahEtkAQXmfQmPePrP19s3a93KolngHHum\n2kDECv1YNRtWF1arZbvB2OLG+v6t7LKBi4US+8y9qAKGg4staK5IbO90Xuln\nERjr+7dd7n1Q4anBo6/N18MWFIRu6hWtKDiKowPyp6YaPHU4zzQSJPlfWftw\nO8hSK11BK3cAMuJ9ra04vS1vk3nct9DpxpJcbwh1xdF2SOUcfG69otiLxe0X\ni3xjdaHpAM8oKgW1RpVVmUJeoW+aChTJcb8gweSFNGt5otk0a5Sm9gVaUJkW\n9ErFba8H26Fm61Ldr6FKgCc0BFB48W2gl2/wYV4wuHQShjDXFdvi6wcWJs1L\n1/XmgNT99Eu1JvqwiYaTXIrUOZosDJNVwzxUoYxnopgzVspi4LbnGWehkVf7\nyw0BYiVg6hUDL1RBP6xIyuOb5/oulXE6l1iSu/UW70tBVFHWEme1xgb1oqXn\nWJMIULvkcQ1uorc42fk0y6sinxbY+PVOReNpsiaWciH36kPtOLPMs5Y4JrbX\n1tyCn8JnY9DiAJfXp+yHL0a6caVHPjDozaNCf42P0RvCGkUySR04ONWOcOvS\nDLqWney/cO1LlXcYXUwP6sectUJgFK1VK8BiIGqOI8W9FDQDHORZ+OJzJ1Mw\nv6oD\r\n=RwJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5e45d77f3.0_1575415218907_0.9769049643520542","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/icon-button","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89669eee590a3d98258a77e66737e06d8110b86","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":33,"integrity":"sha512-Iv9dUsqo4k2CV9lkacVnKqA/PiloHnXn1Eg72Hv4NgloqEz6v0iFJwlybce0MosiuB0f5Kk3CNMPi9G8IGhvHw==","signatures":[{"sig":"MEQCIAGu37AH+MD80kpyzwLEX16N36KqHLxDATYHdghVTsqAAiBjxEDcDRBbEROZfvoFfbqDn0zspy3ekpciLXB+6CM4eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3PCRA9TVsSAnZWagAAJsIP/3mC04p0nvLEXR/Uh0DD\nxXYijsKElZ7jlidFUdvWn23K1GNrz/Hm51DsA5dE1yxIE8VDpIi21J9YDqwu\nCCxep7IXqwe5c6Vxv/eRQac+N2f1nlqZ8y7DPIrMXlcmn+V7NnCUei14Q/55\nE4dznpSr7JHSeXXniO9FECrYc/lrEUrRKz0gQ7rvWDQVqswnyDuVWDmMzqq5\nkUepkRLZ3wvjbAC4utgZ10ocNVRRkycf6bs1bUpXDZzDjhDwxkjaiC22gNgR\nd+w9wbWasRRFfJf9DiOYXJb2QV0h//R7QIRb+PwtM9OVAJB/q3eBi0ns1rBi\nRdzblSsmxX5npzcM0OapUpoIV2J35U175gEopNY2cPGY/2Q9hy+YAAmuzSx/\n5i3KZH2YSu7Y0qGPM9ytk9WPWZCmqE/QqKa0+QxC9H4cYqO1awpZ8LmIpkFH\n4r+kazgQYl2SModwPRtAqIfHghKGkWe4Hl0EP+Qgd2565bA53QXfQ3Vw25nN\njvJucjDmJW/h8tRWtwIMZWsDgH5ZObc5UUDdw9LXEpJW6Ug77RYVAjRshXrg\n7QveNuLDFGhwHYXjx0KgfyWGjUbT5bqjWzG48BxZTuOSqYr4eKoHrMANwPK7\n1tfzDSvOGL3/x/BmI69OsVZzdVQIgRFzv3w0O/FfhyAtLl6jz5IKnvPY6XSo\nhbhX\r\n=J/R8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d10e8cdf3.0_1575415246972_0.06242960081257087","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/icon-button","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ce59a1b3b0444783e48e596884c7e8ad247e05","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":33,"integrity":"sha512-hIeIPeThM5bjqymmSNhoXLtBLAYl6mOIh74wYEUJuJ8e8VIPK/pzI69xNQExG98oEkf8mzHiipB0Mx+jpU/3mQ==","signatures":[{"sig":"MEUCIQCDZzlacrhyAxbGh3+bi4IRMEXdT3ueIXR9AbLdh9lrRwIgVDbRNk06DtXusz3lHJbRT6Gtr8Md0gOIWw2hp7sl67A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXtCRA9TVsSAnZWagAADZkP/3A/kWsnG1Lg7TpNGLnZ\nptyEUX9LUnzZ1vYMKA6IFLbAXgs8fQBsh0hqX7l0SF2MALTNLqkcT3TqYLwh\naB5wyNYFSg2WNkU59nbWPJq2xAAMhdIW/X/m7Tl55S7lV3/kjpsBh1k4hvOJ\n01qWsu4c00L9n/+TGPa9UjlP8cA8nJI1AC9p+W+9CWvrQQtQnQTHTT5t8Rks\niCnHTOgs/1P/+nABoB3O8e8JC07okBrcRhq1E1x6VTB3T+uqodmbZhREKoxS\n6MRrUnSYQbswEDggk2P3kxIj5ZYKJYpvtStjGAR+5p7Ad4+TQsH34lQklfpD\nIMX1InB1gGbZdW4aE5pJpK6gXPYN3HwXPxZpmAk/y7muMYJQEpBCOSk6Yb7M\nWiOp+XoL8BOys+ZDIxe6azK/umHkFGnZoAsSXTxW4ipDuCLMYXHWdVjR9qB7\nk1PKIgxWeJJvkMajft5uYukD71dycxo1eXMIpGMIqqkzWtZOVclVMZrfE9Py\nvxTucFGdPIVf7w1WXshbFZhSIE+OWDlIlRju0h8LkmW4jzNUowQjGfPqbcCH\nU8pt1Bv7gKXVfsJ7pBrPvukXzQDfxncoRF/IwefEYZdLvU27YYaVVxPYAvtJ\nRqtJQVdBVnMiKbPNQClql5Uuapbp+ypuVIQyXQEK7JXSuhdeYdJz74G21lZL\nf79G\r\n=OP5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a5dbd8a2a.0_1575417324679_0.06590821829096893","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/icon-button","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f00f225778f50fb3db98db12e08fba79077434c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ba879b68b.0.tgz","fileCount":33,"integrity":"sha512-O8da2pMvQDUQxio6JcDcn0ONM0w4YqVe+32TGG5HdG+xBks2un4UDVLopnU4LMSRwvQ1QRfJ2ucXp3j6zySDRg==","signatures":[{"sig":"MEYCIQDJdsL4k7nNfCBZiuk/I1SAGy6NOap1j6vv8LSbZ9FJmAIhAIfoH6eXmjGyRdOhCovP6mN1Qzp3n87+nredAcPzyVQB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWqCRA9TVsSAnZWagAAdmIP/jS+XenPJ3D9jdly4UX1\nJOfcdbBrtjYAt6xGKbfLRcjy4VCJG9YTzYpuJXGvCYthVERTdADplmyKlIlS\nWFtxX3Dm/FFselX0jyhSDuJHpgdNQuTNh/E0G8hTrBRpP3dpjntdG+Okm/XK\nwmbvdV4gA5gLWwi9gfxA6TLNg2kI5TvBtbtUP/vQAJzlAeZSF2Cyf9YOTZur\nBE1/OFmbbId2R5rkN6UF3E7xVTOmHnuiEge9h08W7JsGcyOH4m5Lm1RCQuHd\nd/kmR1JARSeGqQt93XiWCWvqd/Zg02TXm5fiSSJHX9hzeQAh7Y+2LtBYL+vw\nL6LkBWuOjg826I0hXDVSjtuDL0atddpAhfUmsC6pWa01ZW6oYLQgXxOiqs7u\n+ZptzllzmaV1sd33lZohvsEIkTYzTSahhJ55LJeJUYZMDVwpUxRz2w+LlT0/\nBYXNdZ1rQJakdjLZ5gJVfK8QewRv3MNCaa8pt6iCKsyyuf71zq/9Hz9Y25t9\n4IPWDoSNoM7OFIynfIDBHmbed9zmZa1Y0t0umIHGyT8hZdFRJc5TFfOXRaBI\nKUbEHySnSMEwVc9vV96toTlJ/7xgkqQ88qn+SZtacMXo/VSfi6sPvE9l4qSa\n9KjJgfq7EvpMKxhVfC7gPisXLpR9XjqeAPjhX+FQFiCJmmTm1aqxwRdaOJK5\nPwuH\r\n=pZgF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ba879b68b.0_1575490985672_0.2638092611471945","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/icon-button","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d51e25153365a8e94663d2dba6534992e98bbb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.aa0eba489.0.tgz","fileCount":33,"integrity":"sha512-3cJJlH9IFYnDEzm6M8zJltF3bWIDPSMdSlHcuw9cPrHxskBZXWuWqLlHYLm4uc8nyqrkIchHIOFwTSoElt3xxA==","signatures":[{"sig":"MEUCIA4cBNkm3NXK33k0AOyGjVpv/6Ht6tB09tKAx5xfFZbgAiEA/WC4Ztl5oMmq7Om6Ve1HyVYfp9bdBEcA344Po2LYXSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYBCRA9TVsSAnZWagAAV7sQAJqKAVBOB6VXXADn5fnq\nbrjQB1w9by56XAOrSI4IgMTouUC8BjkH7/QYLmNdI8jK2xXzNxEIliq/iznI\nmdYwmnea0eQyN22G6ciQa/dZVfn3CG7f9AGJfl+doF0XhptxYmcXDAPOM9T/\ngE9tZBNFRgZXd0XaA3oQyQW9LI6e0FYbXJ+hm8ARReO2HTCm5Ubr31eoNVjf\niIadNFPErjmOiNgJK3wrMo+ii6uE5fV1/IYDN77MbScWAut34teOaXYYgb9e\nZvv/XN5ayqGC1P9isZJtUTaxoqAebsoKvXwVd6LHQiT8Jeh/493prpZQo6Cd\nmnzGM/5iZTdOp7G6Eyru4uoz3izNhoywzpwOwZx2mLhWtEHOQ5ojtMpgnbQC\n5a1T525gT1bnUPZUBuonM+8MHc8SYouwALLk/Lq/szxNUfnmaLtgFzMy7Amd\nkkk/zciSkoXlDefe8f6jklpBG7y8rZ3P/00bT6wTu7LJDMB0S/E028V2SXRn\n211HoX7DI4WAu09w5hIqv+Mm+JWijjMIU+pQXC4MNTWXUh7avHVagHHp8cOj\nCoveCuNQsRrcx2OHE9YcTY95Vvbd01z373uvEDAqkuT0j9/j08Td36dEys8D\nAB+Y0Nv2zPCSFiFs75Fzh/XeW5dwxvgQuAV5LuvE0xiF4254Rb7KnymJ+ghS\n7/fE\r\n=5wHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.aa0eba489.0_1575597568819_0.6516091015941348","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/icon-button","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75262ef062ff7adbc0d4f94f9b7f3b59c51cfcbb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.cb7b71a86.0.tgz","fileCount":33,"integrity":"sha512-ra8QWcGTL0r8wOlnsKg1CoICSnUO4rzZz57/4ecIFBchwP7vENX9F/2F/A9jIRiBeEHZrcS6kbi7tD6rB5F8jw==","signatures":[{"sig":"MEUCIFBqYZsFovqpbZZCI9MKMxdWcouckSxPVA9U62Yb0qUdAiEAp/bfUdbGPE1Bx6elc8+gOc3UaeKwflrqp+BhPcFi+oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqgCRA9TVsSAnZWagAA0SEP/ik1XOqsnrOWOMtZBOba\n3u+B52ylyMsgx87iGGiR3QjpkwVXT1JxBBARMq/qrZnQZVWdHL69434+YMOr\nc/6W5IUwTTNSJyMh0xbKHcV/kASPLQvTVzSHt6lkagd+iQingNy17FUQMIqT\nhgyWBMsJSuxLP/5BQoiB8RK6PXNn1aRmnJ98dFdBihzyLI/uQO4vUrOHAYgE\no6B7xpR01Kspw9zEMqR09aXbxgQlKLCjXVocu4rmy8dV7gfvJZfT0m/A1pnv\n5xPDMCqraio06VOeHPbFmlseFYLaaZV8LQv0tltLAEb9crrCsXfOzSgt7AIW\n5DsKJTSNyv/Mj77Rz3xvRt8r39Tkcl8S7jDS4ti/2a+bngFqSbYqY+KJJU5r\nXv/5sH/KWPS0Xu8uGAIaz7ZvHoVQiQeNu5A2Yib73a2BEHG5PwOUWEIPT7bR\n1uyHlrQSp0jLdu7trenz/bV6MtilvhNKp6wWxcUKc9bWdq7uj3EJpNifhbKk\ne105k/jLWGzjAXlYg6heaXxxx24j/XL5qBeATFnAsrqnUnoppHKaYU4701mv\nP6LWWP4bQtMbkcpC4L60RMWOIfFQloyUIi8+gtTo8GzpRxCHjaznOnsHiDDO\nHVlSkBsaCGx2RrmOmBLDVKiVFzhsmwRGlPM6jvPUllujQ+79fSIfWHuTjRuR\ntz5h\r\n=Pzop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.cb7b71a86.0_1575676576620_0.14513303591929083","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/icon-button","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c984a0dc0ff22bf22a911fb702ad7140f9bb02","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.50f110a6c.0.tgz","fileCount":33,"integrity":"sha512-vD+X1OErv70zAaRrfJCqaZyg7Xz5qRvXB5WvJdS6hJeM7jfF0UmE0o2J/vRkawOLufODeL3Ssq45gzWy9tZDew==","signatures":[{"sig":"MEYCIQC0tkhZwYKLpnoPx2K8OgcwqudCnoPUm5Qt9w81QpC/bQIhAL7pZGGgvMhZzy02ceR6B1wQ3fBNsFThze7Wjh7KKLYc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788WCRA9TVsSAnZWagAAHwAP+gLp01VWmXb9IPx0lOiQ\niu9VaRkHPEmMnkyeQiv0D5/aObo1JqTYOQ/dKESvs2+8bmkPQiW1SlQr6Npm\nWvXe1he3nyPQ1AnSvDDV05iuxHiLkgbPTgi7bBQrmEZZbx2oIRkNRKtZl7wz\npnoEKIlt+AcDY9cAb7FKANVO/oVCqkyQsV2TmOYs+iX2oueLT1w+VucXnEkD\nfiQZzhr47x21wlwkXP1c3OUstxDYoGHwi7dcx4ui72g+AMXHx4TizAXZNmX7\nj8N6jK0mHzuqPi+D7yeJggCQltok9UkmGCBo2a4jjjW5Q45TmRInvWHALxVq\nYAF/wtLk9tf+BG0vZoOXUcB/4PDqhI82n7Vnn+WG+XHhFz+xV8bQgutb9OqK\ngSDaKlX4nNrU9vDjMDhyt6+kUKMpWwQzvuE3Pb+IuT8/v+FHfEZ6rltnZkY8\n4Qx9pno3dbcnglZPkEZTm8r+WlsoEnpXUjHs1sUvIwwWNVzDFUR8RRE3O6yS\nX/2TfPHLBMyHkpNeHA9nYGAtZjp++IHtFqTxpf5VbJ860ak37z4VD26uvv68\n0nu3XaBtadW4VGKe8VD84XyfsemDFACkGAoH0At1yPgzr6FrfibbEYmFFYaf\nS/Q7ewBrMVb6B9Kx7hfrbbO1XA+WX7Rn34pZ0pc0ItyJLXgKPC7IgDVdCjpw\ngW3i\r\n=tHTA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.50f110a6c.0_1575997206146_0.4169627067346513","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/icon-button","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b5f39b49adaf6a110f4b8780af4426edb75c8a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.878a08b7c.0.tgz","fileCount":33,"integrity":"sha512-GOpF2aRu5Z/ujz7LES3m89xuUeNtqV+9s7LE5YaIpN14c+BpAnBJv/UQx8ahxVV+wdDPgBxBzvnahzOBebqMzA==","signatures":[{"sig":"MEUCIQCaEXz3C+4dcgWcdHV2odsVa9/xt9xRdTAkfYQrDDGR0AIgNVuidSDoozJuImgFF1ztSlaPQQcM/H/TnWQthnQkA1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6pCRA9TVsSAnZWagAA/JAP/iFFgqzCkc0c+QoU4gYs\nuBGNPeczvhXUoUt7S1Kz+oucAuIPhT11eJ6A+4QWLCSiZKMOxXUiuCBx5jH2\nGKL1uO0VkzTLEwb9a3BJMBZmQWjbA+KTLP5xYUAVTHdJZszpzAJb+mhJWnuR\n6liPrxx1+epi6hE0d6C37XCj0Iwnl5d6VjplDi7JIj4ecufzVNFok9KShcq9\n2NeOC4L09OHHSQo36rNOy8To/9mnwTs9Sc09OzevAfks/2s35MqtcL+hGS5n\nCUYHBJFV5+SXws3IlZa0ucr0j+fTCXFbnOKmJYBme4Gy9DyxYP852hTCBtH0\nKaw6U6mJd55RlPJj44jaRbIruIpEPD8j//OmATd0tzczk9Tj3sfPV8mbMAsv\n65OUCA7upra3Dw81n0iLapjirFqIqxL39DdjxRvlvwLdb+pTobfBX2sY748n\nocERJBrH73I6QzlkO99te4u4roqk3TOq48sGgwx4eStH2sCHHlTfZvjPeIK2\na8TsF2etjUZp0zQ0l5PXBetX66xzbdzT6F4aDEgrOlZf5eXoOx16TocsWHbj\nrLZXxw+9xzK0ls9JKhqynx4DiCMtcpJDFJNRJYJxGcJbMBlKoSmeYjMc1wFY\nhrS1mmoFdNob0r+keLCoIind2BW5UeT9wqShPDclO54wc0TgmwFE03IA9LF4\ndzJC\r\n=5rXL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.878a08b7c.0_1576095401450_0.16902109651416697","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/icon-button","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394ff2eba1a90d86b7beaccadee98c127bb31659","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.397905b4e.0.tgz","fileCount":33,"integrity":"sha512-R7fNjoG4HGw9Klk3H+BlqZf9PA0MJ8FPqKYN/cmslslCoewV8ay0iI//fTsGGbBr23PR38Tmk6mKjAlh3+NEXg==","signatures":[{"sig":"MEQCIEZhbzOQX3SKY62N78DGX+J63129S5XdOFRqNauFgH/MAiASgyHVxMxkHhFLKoNYlGGtKCbEM6wOXlB2UnxJbEGcVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apMCRA9TVsSAnZWagAA4MIQAKBdPgex+0cCc0r0MAiA\nkKpTRDjXdIn4kKmgm5QzucJauuRF2h+v+l5Z273ZNfbwi6T3jMJicsXli6CH\nej5hxcXoSEljJG6q5siGhGSLJLMG4iaSzWZ0i9IIXRU/a6xgbcAdo37mxrD3\nFv+zLMNpvZ/PX4yaWAeRYEre7KQuVfJ0MXI6rF2cCdYAEJSqt9o7kX3CbE/Q\nCkWG7SLg+YFOWmsvTmNWkLez5Vxq/+o+e/0Nx+9Y/DudHa3b/KobJGhZElMW\n1EWM2TTItA+gqj6AztA98X6jyNzYU6XoxI8VIQnRkgR0rCyYUzbKfRjibJjV\nJaYtgc/CBsWa1thWNLZsZiiL/e9UpEZGzW0JBwRzEpWNZgrakddOJ98lH/7/\nyrGIvb3ta5ZuYwKLNHjpsOpa1Jpsc3Mw2xPO5rMQe6bmEmXIucM5DL8WIF6v\nAbAw2sQk1ux0X9UAM3BKY2KUNAhlHPDj7MFXkRoFVT4EIEDNUshzgYkvnEka\n/pjTPmE0soOHbU8LJF9MHu6zbbbm5WU37yIKfkJLRRfuuoiIvzAfGpyxJGjE\noDTvXe2t3s81iGY5wi4Rhu95tbghZeu19Ow5iIB/k4bOX31TjoIUjEMf0BlA\na3nst/+P2UdzairGEcu9YfszEbXOjipdiO4/3EsqpLq6iMRokSeDN5ojENk3\n/Elo\r\n=M3q2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.397905b4e.0_1576118859550_0.7585697806967624","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/icon-button","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60879b6b3c8aa9c2a4fe4f5f86a89eb44c0201ef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":33,"integrity":"sha512-ZJfwzBH18ZASVnXovgXOQZiC72VYeeuqB5y7tTBgB+yq1aoOdj/DoH9weaiV/z92sdaJ9EE6/ygQoSQJrwVgQQ==","signatures":[{"sig":"MEUCIFlMycTkIn7HdERMZEYE5EDscvs5jpKXuhkQUE7qefbtAiEAy4LxgopfZquiVc0gIPar6/z/rQSBOo1Y30QkdW0TV7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4eCRA9TVsSAnZWagAAo5oP/2+/d0BknrrTwG4jEtT6\noEVVVlWnjO1ZRb3dM+MwsQXTyQ39l4lOvBQhFiZwpS0J8040Iq2fp0lU7YPx\ntPTWIIr495qR/UbacQPN3QcysTniVm8+QPm6/AuTJJA37TINXld1Y/ycMD+e\nJK6vR+5McdvDiNy8YptJ5grmZtmhT/MNQVZ1hlic6UQeYkrYm/7mk4U7Npou\nlPGn1YXC+kGbAo04bcWtWJX9CbF8u2nPX/hIfhuQX/FVLGKzR9KdylKZSjwa\naDimsb6weqCmi35dSb1CdlZZz9gDkmRvQ1wOGTIrYzduZ4dcg+8Sqz2xCWJA\nxyfz9NS5ianZwLWYz0ekAMo8UBFgIbOo9usH1XSCkPS3YiJDvg7NDcUVyvV9\nqVv/fwnUiC0w1bKK8MJ9RgOlEIFpXvIl2eRH+bjdffFL3Mn4L8fIWD0xQxzq\nc+0bvNwPXKjP7Z2sD1zJHx3hO4KoL9oBh5mcUbYYnkdjt5v4DwpqJqoFMQyx\nbyxQIQ+dhghjNp6IuuDljZDARXsDhjefpXp0opVO7NinUZ+0yra8gpYgn+rE\njB/wnzr5Ph7MHqmq9SdDZyK1tKbAWVKxwc/j8V33gWpE6jNFrXlXrGKDQM1+\nsksiwOdpFuQzkhfL7WaDCEl+C5sf7LOo7P7taXhVtgUmhd5N00BAqHCuUSyC\n6heu\r\n=BNzt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1fbf5bd1d.0_1576177181852_0.3914915003431425","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/icon-button","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d0b5778202e355bb1792f43b51e8f09be1f2be","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b723dfa78.0.tgz","fileCount":33,"integrity":"sha512-ZMryeSyJHRswFho3qNzxdRMvsmWcpIJLCEuV3pXaOwyLk5UaxjcTOWJ5uFgqZjkNAOoczeaFTJouMj8aQ5H+aw==","signatures":[{"sig":"MEYCIQD9AB7BPwmaJTWt4vzcuD+GRYc/Gxcc6XQf5iFANDF28wIhAJHMMrX/aPjlSFTR+jeNpMhyS5K/Txoqb85/yz5KtRLA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6vCRA9TVsSAnZWagAAkygP/RDF8riro0KSKNarQHmD\nYiDUHl3eaJvhmxlnXtFhibbEKTRnzAnqsrhq9ovE6w6TUrCb4CARPXtKS55k\nhdNey/tWNlVKBraQO6/9Jqt3/XmgyFs+WsMzV5M4y32Hawzl2Kaie3Lc1zxN\nTHRFsIL8YoFaye/rlZ45J6PkEoi2wgi9GMwOJBcQiLrDqi5YCXn2R+6UBY8p\n79hABbLbhmfOjrOHXLUgvCJxXFJm/jaaDw1ZSSJ6n4FicfT5WMt1BYjIjrVv\npVTNY5tD6agBCRG2uPPst6VL3mOpEDRecD1F1NvigOXIKyt0H9Z7WtwBUblE\nK0zl4Hom5WzA5HK9aTMS19eb9B6Xy0ov/b+mO9H/4qtp6c01gaQAHc9xDR6u\nyYgB5kL3MeVCvP2Sn0NMt3iZp1bdmTzHqg5/JOyfBHJ99HyxqRJSuR5ASy5w\nQYtxGeDsxtJUL01fllTm4V1hVpB9HX7ar3B2OUm/iZ39LBUTKyBCu/erhIZR\nqqd5i0FoL61qunTT0UlGLvfBfEJvU+WOCzDSCtvK+b/Tp49L+Ic/U0NO1yuo\nEU0akxUlQCCMVqjv/VdYicOyvQXnfK6XTj5pmdet2L1virsGWyI/khiOCNw9\nW4GNheTWO2ycXGjQTZ4MdNiQDtcjZFHAHYaZTDTl1+Qs400s7MNc8gneax8q\nGdcY\r\n=jR7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b723dfa78.0_1576181423587_0.8574360891710116","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/icon-button","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba840cdf3ee43aea0e67ce995a89641d2dc0f8ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1c494e567.0.tgz","fileCount":33,"integrity":"sha512-hSRBd/N98BlGkjjc6e7sVCfZb08ZTeuDO/ctYLtj/6qhOuDqymhiXgZy9DNXRVm6R8MdQlo8c9cWQLa1K9Dj7A==","signatures":[{"sig":"MEQCIBrthg9uRvJLe8ciMf1QtD+l8lyf29/zewhkOH9KWfIjAiAIq80NTCy2a8N7AASyltffU4qHi6LCuHRuNKCSZoAc7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s80CRA9TVsSAnZWagAAIJEP/1mpMBc4Hh3O1Z4pWKLk\nmlY/B870Ro4yqaRvhawS2wvNzZ6nxvEnKMfWH53H+Whxa94leGvMFoj5r8Bv\nETCEqD8ytoOUDlkLbDxar6Stj1uKjpO9YJCKbQrPjFcvO48Jg3o2ETMg1i7W\n/3ZT7LpMzlaoM/OCeTqdkNLrsupArV8lX3hwCYyXcqzhmp7AdUdlp8VTmoFE\nFWGe1732YfutM9xRXN7dXjs9SJO+fK+Q7Hth5jmYHInnNzHGpW6UstvHGfMf\nT8o1SDIxpggoY8IADhZEUXmHFY9ilWr8E9Wq9usrdH+tA+55/7Iq4RQKaMCR\ngtNmiczwKLqPRaK0I9Cukylk41hhjYvdramdXnSNI0HmM+Tq/xGxtYll2fpQ\nX31UUiRZFB8acCbawCl+hKBGfzDmeKZh47EAMVY+yMvMapwd+45cSaOL3NFN\nB/Ggz7T/yBKfsL7280FHquJBKZmkNN2OnCmMXJ2ZcI9lVgwG+3nD0FBfniT7\nncSvE+VdsqSHmwdR7AyiU3D1weYdKguphfeSWPg5l+NVX5cvQXtflVQGWgYJ\n9pObH+IX26ajSTFQOLpi7iJ+38rph5S459DSnu4gy3xOLXmF59NrgqvYthGg\nVWBw6Aw+RxzC+e0gZ9u9HXMPJ8S3z7LDr3sEbn9xttEhjas1ewT+W/mpytol\nz8AV\r\n=OGgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1c494e567.0_1576193843784_0.14788853099650545","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/icon-button","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a407c9dcca08cbfd80298b0ab52206dd27290859","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c9e98a125.0.tgz","fileCount":33,"integrity":"sha512-eAbokvc3NyyBv4NtkLBzDwEIRw0fziXAAYD/LvOEQ0iXDtxDFId4hpDvoBGgEUmVRIDuBifvznQkp+be34qAqA==","signatures":[{"sig":"MEYCIQDBLB6jfbQ94yCDT2e3dF3suYtiIvqmadhhEBXDXDG/ywIhAMIVP+m3EgU0A9Cu/1VlLHrfqJF1/wn8xykdJZtn66eQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoYCRA9TVsSAnZWagAAp5QP/RujXLMqSe/ENolGsDkh\nIiPlBPThhwfLUBUZBwGbqTADDtAlWmHDSbKVv+nR1d+afYWrHB3Yf8eC93AR\nBiJezxAIUY/Oop6IvURyGYZaaILhDSa2ROi8IO4/UBpq6Pi9+LjdvX1jD4GF\nTKBiE81yV0Vm0VCBSWsUyPdBccSaGUWUXX/knD6BzghpzmFxw03mqtfld7JT\n+Z546dRbi0qAW8rbybHvTdMhQaV+d4AjkJY6w8fE/HYrThTAXxKq2oTZGkOD\n3m4eaa/P9uj9NH4DoIadlHLo4dcDiF8hMMcdCtKqKtF1dzAmLIpY23BTgxOr\n7Ik7DbYiHhqywvyyQPqFGnEdmaWxQKMwBjBCyS4boV7eNxVDYH+tqrx5RDj2\nsgJgFCLhF+2HWAc7yDjeikR6Xspeam7xLpjjvabNvo50QbhFKknMLSKeVX3q\n20VXlXlAO/Tpkdo6PqtxCG0xqnuxAyU+wfoo+dCvToCEIF9tZjFmBVWrQYvA\nxUgQsIE6vicHX60autWEaJUzXmzTCKH3wa/vZeDa1LOWoHqsNuySLn/vjyNH\nKs5+mIiMbNpKbLSo1ftGdoP3e4y2GWxcqR+73c2AjoR51CsstduXlD5UKHKG\nIX0uxQUsOlog+gTF00pRIjagB64H62w6/GRpAeD5cy9hKAInRF/cGkLobJys\nzaMj\r\n=cTU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c9e98a125.0_1576606232379_0.872175754420996","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/icon-button","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eae051f6a8dd4b563776bee004cbc60a8bca1bd4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":33,"integrity":"sha512-3yggVXNvk0p5lPesy14U5b2uHAOqq6iPGEW3ZnZCq+AAtlhI6pzuDHjp0sEW1Q2p4P8szc9ZVWv1GfBOsiS04Q==","signatures":[{"sig":"MEUCIQDNff1/rErN1vADGs3wn+U+k8Lo+luZkZxb4ENn2papdQIgEdG3y+qmmCbrjJTRja5S0HnNtGG+0hoZNDMuVbC6CMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfECRA9TVsSAnZWagAAzSkP/Azw7Rtw4OVYYO5ailL7\n2WETSFsqMyaXurHyfJyK8lvnpZKmZETslWgVA1HkyD4HLd5Opkj6hOdSTW5U\nDP+3RLYnaLmMx7wWWRNMks66guhquCxggU/rEkELxRFuDkQLpBT352Zt4tfY\nCMe/dgKn0zjVCx6xfKao+nmqZkg8MCCw4jt6L5fwHEEodWyCK+Np8yyhme5E\nzMMgKyo4AASUrtNQVGnY5/vRQYdMgE/qQgSBTYrqBfMznBcQKl4Pt1Qhs+mx\n5kIlfi1NB+Gwsi/koFsbX8vuI9Okhr5UqszZ/PQ4L+MeuOkeUKfVkqLbhwtH\nUG9arD1LHoVmTB20BoAWMnGk7AsHEeakUnzNgp8JWtYvGsTp+Gkc3b228O4x\niq6pZ/NldphcY+aDllswlvSK0Z8i+6stw/G8kk3vMF5qi86jTWuM1X2rQaok\nv0fD7ifhjiR2wlWCH8lRKjaTqqHxAS4gEaTpQqZjqIGN9xQs+YCIvGaQ2HEG\n8unJprYLfas7FwI6joS4io6ATu6Tv0wjQG4InnHApDmYsCZCwJDPsKJnQb1G\n9hDTlgv4QuBG/+sQcAp6SP5EHg6tdqLSQ142Ii4U79Ahr6eogp73rxhr6xLK\nX7dOZhjS8deX7kvZD0wPT33T11jiRAAJnlLbZzMz+bR1DKWhDDgrJbZmkZ4D\nOm3P\r\n=AsHn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5ffe8f7e3.0_1576622020318_0.8393024053133598","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/icon-button","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96392953ac0e67ac65748facb82131167938a601","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.47949b08e.0.tgz","fileCount":33,"integrity":"sha512-Mj0xor05JTto4s4lilZ4p/C7MKsMUtsjFCXxqsjZEuN44dSASiGbYDmIXHRv3jhpYxwPqr+ojngMfvh4d7yMMA==","signatures":[{"sig":"MEQCICJ2DgYfO2EgePPaXd/9nIu+lDD/BZyCnZt3/HH+6eiFAiBBoPn1vBHFZf2U/ZHteeZJisRB9Jbg4usJJw4F0UuBMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSrCRA9TVsSAnZWagAAF5IQAIKxoBsohaq0Gop8zjfQ\nj5Zq2U+tLPWsGZwbV2Ql63p1aA5ExYUoivmtVHPz1rIy0zI7I07G6qBth8YN\nSnlEN/wDjrC6ws4bGEoyrQ7yneRXrat0xJh55E9AVrBIXX8LTx1Vs9/tahj+\nt/Ffod7Fy1u1w1kdrVwYedUr6Pb/c38XvEqTIzmj6Gy60V+qvUWDf7jFXEkh\nxzRx8hu72IPgrMlVhM3/8fgIhMTcCBhdIPh7fm/Oil4oX+w919c0DsBJ859d\nN0IKlwohI3xm2AibYSFMcuwBwL9yeUFT5/4IpBv448BJq0jPlBIVjBGkPYmI\nxEpOFr1+7UeYUPRWQt6b6rowjws9DgLc6u+yNyyQ9AcGftQurXKsezFXJmGl\nzdNeJ9K91TnVW9G9x9M3Sx3EK+KD5P0pIq7ASHP07LLRf/7bqwTjBW7rdZha\n9f9MCrNH8dPOYTd9kYFAuhJQTm2SVPrKuj2h8l7ypri4+SSkNFFc3L5+omhG\nDcrm+bFqalop8nUJcb/FePiF1HsiITYB+Gwk0chbhLiKHqnMtAOEdbz7DfRA\nOIjIKTksGy3YJJRqbbvyklc+6cj0dl8B+5gwGy97UOjW7eMsXiCGSsCwn9Rn\nhNLBsfT2zbKWvWBLl69ahUY3SSB/WK6TU5+GTRKfUrdCguXKSANoAIjjTy+T\nq51U\r\n=+vdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.47949b08e.0_1576690859293_0.3404723360271451","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/icon-button","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b8e32550fe071d3f574ffe0999e5d55ad345344","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b240bcc1b.0.tgz","fileCount":33,"integrity":"sha512-LoA6z+7VjEtsyBu7PrTgV0msIBa190tWPbr6DYB3Z7HpaIf8Ozmv05pyT+fjDsOea7edcy//BFV3etuM8cR0RQ==","signatures":[{"sig":"MEUCIQCAv5rVJwH7L/KGGJhNlaLbFuop9bz9ldZy5RHP3p86/QIgGA6SHVUx732+w1GoaVup/vGDyym2VaRsl9qPpleRWZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntDCRA9TVsSAnZWagAAusEP+QA41KX5Cnlgu3NS6naS\nAmxXzm6klM11ucWkvPoKSacxA2u593FDe1x9PLQ3TLbePKXoDv+LV67nVzq5\nrvzUZ4p66pMgZa14qAQ4dNboSvKkMk3XLc9JWJAEh3mCPA8rWYnRFR5G9VaQ\n/RE4FDUD32fZ5CvM6COsG1Sh37L6TKwhAO8lBFvszhV6yQlYP0QFI1yhNrlB\nX12j1/Mp4mOlWtPJMkfgvQxq7wHXRNk8b0Oxq+WL0DZRV3DLT3LCqp1qUBrj\nsbaYSy/57AUD8DS/V0PF3lfyZOhuxk0pPIbtk9Z+toapuzWF0987fPRiAAI4\nuErBCek2GZZd8tvFGBE1rDVLbpKIYN2xMbflmKCWxCHnURluVWTLHTEw1VBV\nvAYUrWZdIAiWy2XYS0vP5nHBe79CyMGbXwDqVL9YIT78phbxqcbxbTYEem6I\n+JyQPxCOFsg/+Oo2XQqhQP4loNQJppqFt8cv+vgl9Ccu+cPOFdHaGMHT8PCn\nj0SYNzmdrLyhCmt0wRkW2AXdSpGBmEexIlvm8UjhqtPDaeWNtkikbeS53Yo5\nnwXD3pfjI0e0NsMyvgnFpDw61Ib2kn6E1dpDuRYrKd6J4f53SRXElpNNrl61\niMCUt/5ljRVp5MXY9o+8CfrKM41o7EPGzIqK+VX+RRPAD3wR8XZFwV90vjGJ\nIuaW\r\n=UstW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b240bcc1b.0_1576696642595_0.9122495716585777","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/icon-button","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff6ef3834453022b99d2576055611bb4d59baa7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.391674a26.0.tgz","fileCount":33,"integrity":"sha512-NNo7hcTmmfDqZlljsKekEDqQYBfedzuGPEP4lKjGnTHAVAfwqGYmFOZNDHlvhSs3eXd9LkwF+ZiP/WwbuBNPCQ==","signatures":[{"sig":"MEQCIGDbP1ZTO81xCe/0WiN1MEqsPQUgOTONXXcFffBYw2j5AiAaobVD8jfOhNzExMw7b1kcMc7vaXYviPujknZ8smc2Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntRCRA9TVsSAnZWagAAFSIP/i/j/2WK4tVm04NcT4L4\nbQ5h1oUtWbqFc7TLuVazSVRvVMy8DOUArQS4dcAMyzxrHwFQ1r/kwuawz8+5\nFLwbDuym1TWIKU6xrZ1tw1CuG0bjheqBp1WZEB8Hc2cg0/KJmg58RxmoRPRU\nzwaQA4pjE4ExBKP962iVfGHgqUgCCHOlsHCwe/tjJyECyi0PqXCib30T3Cdd\nkj+z1027UerpwDyIFUCmTzV+7ROkca0GUDDWCpy/78rJmBtxgcYsqHNexqvg\n4VjE9j904AY2L+hM2iF3UQmd6Tzktx+wezcM5Cs9O0meqRtXo9YLazZprWZJ\n1NQV5YXf1082mKfjqX92lV/84YGtyaMLbXVaUBA8TBtNKdpCZZ3a/A7ikbWo\n/X21R9PTLUjX+l7/HIzpCIZNKMPm1r3D1I97Hw9hFtnVGSp4AolHr8TXWjGF\njrMIvcKWJUWY4nTAaySSzpYTw2Wvib3L0vl7Hekad+udgEnFRPVzPPeszIMK\nOlwAC9TMkv3qCfsHUYFVRZspE3NjKoe+d232q7aNBCSuwIPJkXgT53I/k1Rw\n6ssfiER3FjJk78PtIARmJGb/NswX/wcZtzO/1I/GAw/fXY29vsLkMMq3s4+t\nxHAE9k9IM0O8n/Rb0vA//M8pBieVM3szov/ahX9Zve4HcVFYBhgQvZMZmyZu\n1Wtc\r\n=N3Bl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.391674a26.0_1576696657263_0.4895290469878075","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/icon-button","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b6fa7c0896ba719a6ec8dd169056a219b53152f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c4837746c.0.tgz","fileCount":33,"integrity":"sha512-g8DKgp5qJ5RssMBqM4R7t6PTST7UxIMU/mZsBIpSvGxKDwJqPXLQe3glgIvFM1oc3sOWkjasNdQQYvRRNOwGNg==","signatures":[{"sig":"MEUCIDm3MG+lGBFXHT+yat9/HQ4XlHtbQubEN7q4qqqOm0ZVAiEAvygA3sSAQsWZ6RZHDI+MpJol4E9Ww36QucWi/fDDp4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+GCRA9TVsSAnZWagAAHMsP/06uWe0Icux3R/457jD3\npxu+PIBF9sNa3SywWyCYpYC8ZUKQHpr4vYP+V+QtyjLaSbBiqkMeabopBUcy\nxt/u4qbjdLEFU206sYyUgWcNzK6wqnrbR59haOQPlK6jzQcXBfr1P31UYlXo\nUZV96ZBkMmWfedWpYUzyGJu5E2wB2SikthE8Pmxq2eTvMJGy/3pBqQN9IKqR\nerkOHRpU7Y1FrEPlK9QS3SP3klr79cOWKSD4LVf5nIjCiG8xD3P0exLg1fPB\nXX+HvGrTSZS5dbHvDWl4aQ7NeT11epPREiEoz7JiV52iCLIipxcIKeSbJp5z\nsfWb7VSYbLWGIP8+zWm2rxnJE2QKVENVL5bdfkeAatYDV5KzPOCyMVJQfIxO\n9JJWMdQDrFrdrS+qs5js+7Cmi6i+kXpz2XwYcqy3DvrwpJKDo4EgYTYaIhPs\n8gKMqhoD9PfyXJz4ER50z6uXo+W4oR+VL7f+kLu8qxDPp9wtvN4NdW1ziNwq\nnVeDL+1ncMdt0OnKyXFRODhY7CcbrccWb3ly7W4ky3cDpdMSo3XywhdmIdis\n0tCnuI3DL1JFUZuSK4CBYtvNuKzTV240x+UhkPAlBNT//54VVAfeTMHfQWoa\nZM1ok3gHZv7mW1mYMwWjHIYtqmXZlaB6ECx8k9pTRpvW+blPvvE7FiCouGfo\nBjY/\r\n=RxZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c4837746c.0_1576697734255_0.891684911847171","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/icon-button","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ad480c15288780172621b63867fdc9a4ec6c75","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.e41a70425.0.tgz","fileCount":33,"integrity":"sha512-L5R5U5mlhyNMTrqxJnvxrs16NxmDWu0uwyB5uHLWpFLUcxgAVe6hzjmvGQ8AVqaeEQMpoqBpP3GDjP/S6zKc1Q==","signatures":[{"sig":"MEUCIQDJiBlY9WkQ3mJyqylSonGSvghqUHF84FfCO0YIps/HawIgdpGBcMSLsA4Z2/uTdSXG7I2K0exOlAQTlywpTso5+QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rROCRA9TVsSAnZWagAAIfAP/1eNWG1IMX7bmz4yqR0b\nQ6unZrFlVySbRyQoWp4Rfj9WvXTBcP7zu4oZooe9LIvP2twL/f/Hm5FudwdT\njt/osSpQ0HTSAHy6TAE/gaZidBd21COmBlBbnGZQFpQnDPYF8SHBT+3CMsJ6\nCSBxZJpwWhzsENNmA5+Pqn+zJ1anVLDmUHaV1ORDCoJG7dVK9CJlSdthaqHJ\nmTEpiha2xmjNQ6aGSDc+sLkepe3b6n7g9ynWqlYl34/R76F8JU96lwFL+GtB\np/6g0gNZaez5J5xXjT7qklf+5+IXDWTlbv5k/wYKUQzq4delzRmqjYGdn5O2\no4q0TON/TMNMV1lLXUSFTGlHwWCDkHUrEqAcxuw/ZIylDvpXBktyqkr6/1YP\nQW3ybGSbzdLfExQwqnqEqJ3r5cNxj4KnLKnPUPTo3w5xSg3YOfqLqxPHqefE\nS27EU5ufMKmhdwB9G33BaS/pm/cyD5x2b9GPCHl+NncQJJzoyykQ+STm0Xtx\na37v2cSzpxe3LCXUWt+/LOT73k9K7Ig0+gzB09P5JqaxU9euXMCQFqXqUjt0\nzRYVixVsAENFbIekKV87HGDsTYyX/H1p101CuHZ1IWIZAofQWn8eeCdgL9b9\nfq/wdkZhjPnomUZNlSYI765qt5UF+XPLe40AP+bMnWki6L+WwtSDcIPMAeqP\nq5jm\r\n=5mbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.e41a70425.0_1576711246104_0.7378397366664897","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/icon-button","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729b52a63b7b6458464a73f86dae45961d809106","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.bac43eb43.0.tgz","fileCount":33,"integrity":"sha512-shU4IxDOtHDOsjXPeimqeR3FB2vesicGX+wXx/Kd2LKM1b+U27Yl1khyqf4+bVP23uAH/7O47GxJZdQpDhnZCQ==","signatures":[{"sig":"MEQCIC8l1cZtk0z61PbDWUkcC96zIt+yggkBAYoG0Y4d7k4sAiA1rrIVYjhqiJIaDScBsd8AiU6VruJRUDxM2+PcWRLEXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUwCRA9TVsSAnZWagAAms4P/2yV72QVvTnJWWOLBtj2\ny1xwEtNidoAM0qKdA5hGfE54kX4JFIP5YIOk++1TWrpapQlwyv27XqB6zjv3\n6bDQIAhNs+rR7f6ZnUp/lUlYMm1dMqlRXAWGaBhQsayDdLy8hbkk8+ItEn8O\n3sY4Y/6b8Wm5M3OdTp/FyLUNXyWMHvvYm6L6e5C2d/ojYAQfm1j8yl1GY1mZ\nGYceRTNUFeZBlBvBfPkptLG5qhI+DRfJPbsP1FY4+5mvDWMmDyWQN4WX3Gk4\ndB4k7q/x3qNEXrYk0u7CEB6JGg4MzPlXt9Cc2MKefJzvHufADbm6qEG0AHPr\nE4lWtCBt8pu6almUfXVXjrkQ4d3ptHL6zhwwpbNcd+8EbL+DrpGzB+PMgT7c\nODY7XqZTUIRzcp7TRKHcK/pzBAZpWKluufszaS4CLwHDpSsJbJfSP29phNFC\nR0rsZHb05iI1h2xH+DEOFSUovoJ9+yqb8uCfTisBBLqR2IJPSX6bVdUrxXiy\nAPbXB/0q+6BmtYQSuhkqjCtN29Ho7R+u14BwGDr5iPO7XheQAnJXPX4LSd3I\noIwfwz50WXdBWbXC5nmv3mHWr7qToqnTNo7C9V9A9wRO+/+MVfF5GHWP0YR3\n+/eOEcRM7dj0VINHnDUgUlLMBzijozIrgAmTBEyKhfuVeW3rBpETTYZbBPhg\neZfB\r\n=PjC/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.bac43eb43.0_1576711471993_0.3529014734646081","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/icon-button","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2a2f087c4c47784ef1db478b2708d6f52c2540f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.2e491de55.0.tgz","fileCount":33,"integrity":"sha512-ZrXzddtG9uhnFpCUw7IdE+AKcVuj6AQkf+6WdpLR4xE8ucblqZSQhnJT2K2LFTw17N6uVcMJ7KlzlLHLu6czXA==","signatures":[{"sig":"MEUCIQC29bz5o9ioBWQ8YVQ7BV8BpYEQxyZTG/X+AA6PNPVhfgIgKdNKaMETCrw6/CpEcmx6Ey4OmyuozjENuEUeuLKODIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XuCRA9TVsSAnZWagAAyIgQAJuULbk7O/2VXnqImuR6\nK4kzHQKy6/ugdLtS+gnxdY03XVzI+a5IZdYaKcza50d6JgA268RVJNcmb5j0\nzXF12WQd4mcnuyCWsjgk/ThIJfskbGSno0YXNWJQgJmzTwFX5fAYGZpFpsG3\nAQ66k+8m9kztJEya9zumitUt/SzGWE9+hESM74nZkN1EvgN8qxfAcEVsWDac\nn1mIFiU3eM+npOeUMuk+w62sRPQ/MJWt+pcvQ+3ue1tkVjxmMQBbLMGs2NC4\nh39Bio/HLCL7/mIl0lvnMbyS64mwZJwOYnG/x0R3NEvir4VNpFC+cq7ENDt/\nqtKA1uV8Y37J1ZpZxIRGM+sWqv/cHew/XRjHvau8xQUK7zx5jFUMm1QV+F3l\nRJzRsAOBS2mxWikqGk6xuE+DS/M8NgENis1SvbbXUBSvAQRr2fm0JE3LUOSJ\nZ6cAOiO/3+qMkilGEg2khrv4olE1pjb5tojGfS/sZsrEtxxBYeqjyo8UBLkZ\nE95Kce6mQgwFoSAfGaolXUYYYyBFZNLcssqbI2dFmI2by5xIwcYwPi8i49kG\nbV0wk8HnB0zsLvLa0kRLMV4jcziBJvI+YBzJ7ke0tvocP1TqypC9BE0cVT5c\niAremqN8g9fL9p3WWaVq+IV64HmIu7j40YZIHB4A91zwo6aZm31oasq5Ubtn\nzLHH\r\n=/9ZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.2e491de55.0_1576752622093_0.8646982462241837","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/icon-button","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbf4bca88200faad477484b8c30df24c0832ba7b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ae101c144.0.tgz","fileCount":33,"integrity":"sha512-heUdCmaoc57Y1pKVxDOZg5d9KRWnj5kmYBuHYuoF+9tPmqW3zw4YkgsswmC0zG2O3RJCJMweVuowRZjetzrgGw==","signatures":[{"sig":"MEQCIHi35kvpS5wzlndjuAIXkflHnuoO+xADkB2h8dxSwv3WAiAS+tnwnwR6mKf6Pt+mEGAOgBSkGUpNKGytakUHjx/ITA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RxCRA9TVsSAnZWagAA2i4P/3twJWzaVrv/richiCbM\nDHLQYKodm0Atabg8fKUiTcELvjHrYRT9NuxeERNWHgs69/dJaZF3vYbcf/BB\nns4s+9p0JO9s+trYkq9XfS1f2CyiKILti2vp8++JF4yhYERjqVRopcn65vaH\niV2jmJBbDpkm93NFB9OBlQLwKKFTd0DDaX3AXOiNN5Ey0YEduOAd+AacUSjJ\nZCDjXYSOgdGGRbhagYyXQ9tc+stUe6p4psZlbPY1KGpWCQ5iidudNbU/ip62\nxXeWzcJCtYPxjTAeXx0EGnl7xmKxsNNa5b7QqZRJzdJsOpzTfbI68FH+W1tv\ndl9AWOM4Hi/YdDRit1cMwhb+eF0zZruoUPkjSU5qLj0Q9uLhKELOiLJuAQ2j\ns5222GBi+4Jd+y8tkN+DVuGPFIVWhVXi2XpG1bHRsPswUahORqiQfgc26sUz\np0qCQbEkjfFc4qSuIu+3y9fGIjUXaw9NFRFRZSko9q8WiwnCGn6PMIfkigj2\nZpVSerf9t4IYQt1iONgP3NKvZ+TIexkyAqu5fhuINriefhWA8m1oyDITmpH6\nrZVUgVzLgePSwVn+mqc0LvVJsLM0PnUTQr/wuoZaUzL3n1GgK/2lBuQurDM1\nZjUrqFXN9/tahXn8mMXRTUOaY7VBfs4Z+4G+7+LZq70ICGHVyupSReInMzyR\n/6dE\r\n=C15d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ae101c144.0_1576772720218_0.8853494930843324","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/icon-button","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc475ed54236d21bcee2c702d3301130a9c02681","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a51c31f26.0.tgz","fileCount":33,"integrity":"sha512-IUOZNcWdUMecMVsd84J1GU7FgIXPp8X193tHW7uY5PPMfamKG+w1hOQQT+FZvgla95Jat23cfMp60dGUW1acKw==","signatures":[{"sig":"MEYCIQDtrYmTPPXZ/3zp2ywrSb1CmWmEJeCMgmPYS6xwjNC5MQIhAOyBr1+Hgr0vXlf+Ojx1dfyMBUoQAoPxhxhQZ0o+r5KF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AHCRA9TVsSAnZWagAAs8wQAIeNK/OeCgtjL1ysgA8L\nFY9jzEPyIFUrxgU5F6FX7FgrBMEcPZYuyzaQtwnAYGJBljp9jG5I69x3lD7z\ngU3YjzoXmh+mMbcD66nbZp1+/Nu5i98PG1ljOD8qd356cYupFJNMHcvG2vrJ\nXQAFgdwIJ2uX0r1WkYIZP0RTUoCEibzFeNvnQIWcrgYT+ah6DBp/zRSxXCKu\nA12lh9Aj5oywSAzsAsVDdbpk+5MV50cAHO1cn6J8gquc6D7cmdEhhsL13qoS\nmhPX9ozMD6CvkON8hQc5+HkScx29EFqrLIV5g4OJg1py5R+qYvgud7XoICej\nm/e38zA8ev/Sv1fEhr7voBH6+CDpVtEKwnLuLhT5EODVmmzA0sHksq1NbEBN\n8nJXMfE1+ODlFVX8dcjS3dcLQlkHvA91W/rHABHUFm12xXvp60y0ZNVCVOP8\n3dA0qfoBfxtn/YjG9+WXrdUa5+QZ81rArWG7V/GJRNjRABZe988bN0jU27z5\n7cIG6EvlMtv3KJlORM4KWLA+ftUJ2gFqOezFv0K8yfnRz8t8EfpvY6uyPNqK\ntl53OOagWOoFERGDPLj9YY9vGlaGraw18+FUft9MP3EpCvShbNjGkyoDzTAM\nk2t+uhOkl9+3zmCchxbmyy1LolO4Mx4QfKLMoBPlgXiRsOmMp83+STkD1Y8o\nNCJw\r\n=og5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a51c31f26.0_1576775687348_0.5820398640922799","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/icon-button","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd280f2ed25b35ebd4fa0ec1683ab12836a1715e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.21fc4e13b.0.tgz","fileCount":33,"integrity":"sha512-rz40GkMebZe6Gc0u1ATsyx/TKIN5mpEtaS0FzGB4OGylj4Ff59lp2g51AtB43vq5jGOjbJ4x/SRCYfFVwW27OQ==","signatures":[{"sig":"MEYCIQCXyvx1kWLIliSolg1rOhpeiFLC1U1CpnJtIwLypYDJGwIhAIpJpkqUJd+a6rnU9+hNMlZcQyGUWBaYryhHWTQ1fiti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tCCRA9TVsSAnZWagAATnoP/irk2PzkmBzB4NZ8YoPV\nhbUloIdSlWVbH+nBqwxdkBrHBtHRL/Ff3Vcpwc4GP7Pht6+AeEXudouwcLkg\nXt2HtgTct3oBZ5AE2Bhx84PPyHxy96y3JgAPNBaYNHokqWe5LkCWE9D1mEFP\nrbLgtYymvyoWa+7p1AKJZayoqjPsVEtJOJJM0tM0rt6ewo/LlcWnySr7Bb5u\nK9N/Ycmf38iJ3OMPaMu+3REo7MWTuuLRflR24qfNmTVe3xY8qKAhQnGYRwR8\n7tL5GeNqXggXZzNAxbRsHBLz5cZq5hdlYn7pwB2Uyix7sHBXUl0e/n3OhgXy\nUzVEPY2AzqhIzIAjV0mNtRbtzi4f087Av0E4s1KJFlrTYY5ge+tNj/vMITzl\nzF9oeqw1np3aSmrBo89wPrxpNE8eHXqtyiEtTFvFcFUrddq9H93tX2J05U9t\nbY0CRQi6akimC+bDGIQGHwn56J2paIWukHpxz5x+U3bPOY1Iuc8RM526kDjD\nIpmwMIdpFW0sCEcc4iQLYmIeZ84IUrabOqKo9SxVNPcxjjGU8XsLc0gZXPgn\nR9XUnadUwKGb42lkGvvLGEvSuqkN/99GuD4sr1bXkofvTXWwFdR4HtA231Vc\n9SuDfC49ffk9x/NZakXJgRulbqDZ0vGc2Q3JxuSnPGrba5cXuUkzTpAZXo+1\nmsX6\r\n=kAf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.21fc4e13b.0_1576790850306_0.027135410001531524","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/icon-button","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bf6d9eda561ac964b506d2b0f31696fb4d57fbb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":33,"integrity":"sha512-inlavTVdhoNv365D5aPBolmaNrkH8eTTMU5sJSuL6ReeF7Tgr0tMWqtX9DbQF52X4WVINSbAddMADPZzCl3caQ==","signatures":[{"sig":"MEUCIDb6/t1mHHQ/vy2OYDUsllzt1T8E8akuBYd4DESyiwcEAiEAwOJi6hw1DkegSyQfsJRJIpUKFMARHVZJjIPIJqiyago=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/igCRA9TVsSAnZWagAAM8EP/RDLb9Fvpk8XhE2KRRCg\n4m8IDLoY/qYAJIUteDT+87wB3LgXXYUwLYYzuRdln7GiLFTagsURQs7F21pr\neK9ii764gfOgvJ/tABbvLwCZX3N2QlGdzYPpIs6bPNO12tRKGE/4WlEtaRU9\n3NOSQfJLupusB//oPSF8qZr8blhzC/7CyrJ7Zt5DryZ6RxOzA370YhyP1EHY\n6jvPHOOhOKEkTPmhl8hIDgG4iyfOgfgkxxiByRopWmbAtB0Wk5L9F1LQBEhB\nxw6QETv+CIbBpllY8mICudWSetocKtKtoGcUCdpZa4OsZRY4RHI0UGzLRB9+\nG8+Ihhf6UKY1TVCBtrPxiBXNRN6U8lO1kr/vXnr57zcLzHNPiLVagNOLRAgy\naqIFYunv4p/rdAoooCwPcE1afVi98e/lXTJ6gjf36cA20WltANGrl+OeyL4x\nn6jRRs9/zCLe+UBOdFYuxHfYlU/C+L9kGXRMiv0OV5IIIkSWwV3/kB/wi7kn\npZm7G3vv/qaV9BbOF2bckhK7PG8DXoZI1BqejQl1z+27lXcMZ6EwvdHAt7qs\nOJDZqvQNJBHWRwKR7KOMh9dJzJRFu0OlkHCIW3OGCfSzSmdYytCziCBVbnFr\nhyen36ecuH9v2Idfoe2oo71zhgDGCvB1i5F/8VVJ7L02qAD4+oodNlh0x9Ad\n1W2Q\r\n=TMJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d2ae6e17d.0_1576794271676_0.06320704873212968","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/icon-button","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd827346cfd9a273a752259f626b45a501fe1f8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ba30399ad.0.tgz","fileCount":33,"integrity":"sha512-Yg/gKXWi0+LkKv7yrGxJRxZoYvw6GrjWnlEQNBWpa8Oq2affuSK0tGB76xRUUcOkMRp9t9mL2VL/1hn4IyP6+Q==","signatures":[{"sig":"MEUCIAR83AWv85gA38iKYzN115YHHAk8bN8WIPP8o5yHtP9ZAiEAgfOPnkAjUjP7uQamrzhYloXkTuLmGuzuHft8b0OPvpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B90CRA9TVsSAnZWagAA15sP/RAjo1SYxNjwgbO7LAyV\n0+lPEqXwYVMR/Xq4hAMHqnFYna5DF9F49YTuXQy3oWgd1HFnlaJBnet4v1/x\n42UNTNpZjyrVa7J3vv02idxcx9NeeuofzJKdqez2TYuj+RY7ltmsBAnGKRdF\nsUXyRCxGWbICUHqhXn2EoZIfYljHcU6ewkf6no/Zny+VI60Chr4KNsQ7QqlH\nchLRD2ZGJ1bynheG+8GvOlzDol2noKneaMiAUPwaa1/zaG/LJrU4QcDeo/kX\nNZvQoip7pSfV137oxp5uFHRgHpvTIwAlZv67EHOMShGabySwYzv+yN+955Y5\nPkFodZKM3ppxBljn4EekQeUWBvcoWnAKat5Gw/VVzURXOYw6ANd0ab5F6h6M\nVtwwE6g5uHtd/MAOBQMEYGlKrpXDqeVjlEIzadGigHxX2aRjPGywQ03MAf3j\nqMoqpri3OiiDCa9OmPuh0DarOxCYG1A6DSIXRYSLtPwpx48FS+HGaHaMrLs0\ngjZS7FDNvld3QhIYSQBZUPC/0vJGA7pnkufu3t+csQKSOwD1ONYGq3W+jqdH\nIeLPZ180U/8R/qnQAU5PXYBYQW5LVvv4OnCOqZYxBmBgxWdmKdASn5LRirEU\nz8VMD8n9IHahmOvuix41aUw/SgM8fMBaBTwcAgcHXFvjeyF2zMty+oUYPBBS\nqGp+\r\n=WhvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ba30399ad.0_1576804212387_0.7783592426269506","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/icon-button","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0406605ab5a4bc9db2b4f4364d7e6d23fccbddad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a08ccec35.0.tgz","fileCount":33,"integrity":"sha512-fmz60NNJj7BHKes7lmQ4e3FBIYA2acb7R1lGg2QelyTjbJJcUC9tdYBrW2DgKt+XpTVX7tw8Gfwbs0++xWR2Qw==","signatures":[{"sig":"MEQCIEO1/Mhtx19yirvAsA8ZVT58k7N7JmjCVh75e2x5N7nmAiABAtAfy1G3WFIVmZVTsj+Zx6Krv3IcU62suKj1pIXtTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjOCRA9TVsSAnZWagAAnGkP/jBspdszqsvmOR3WOmBq\nO70rzOnYxGtac6JpKIr+PfptVopM9pMK1zJtsbHZuhtw3ZVt+4QvIgYevbYE\npUOfwWo3sPz5t5Wnf5Qyj/Q/moPztpiM+nfDdqueT4la6yQOtrDuizcJKy18\ngJBJoUXpa2LaGTnBnxYKclGthToV1JNsozgfU3hfQ8uAQig0qud8oNJEHvaV\nmy/SFlwTJXg11eH0s/wwUYv9yu3hNBD0y+Ef4uVGohB5iUmZSkMoRIiWjSQR\nz3gribvfWIcukDIQVIsPrAjz45GxWn7yht5wF/3r21NFoVE3e0kwd3T4dFyO\nrx8Yjn1GBgOpP2lBDnu+NHUnUUkOmnLMTymHmdaSfemNMNaopRtea3SFAhfA\nbZhQ5lQCBlynijeVvOwupf1GrcsXLAMhcjayxOSip8X1uaKWxb4tV+REhqYZ\nvrIa+3H+1hfv+BqcGUTD0HU5sXRq+sZdBaLARDBx5S1ASfUcN1Q2g4HichxT\ni+FkFW31Rczs1VlKrkBM1b6sGkJTC5AyvUExl6hWc2lcHKRHsEODqtmcyQCQ\nWyJ4a4wrbfrAwjDC1z4Mb8ITzk4e0k74XjvbOTk6xEGYL9pShDY4DCwTlw3Z\nkQ6Nn/4VCBW+pfWKi2eIF9m11vUxBXRnRizrXc9UUiMPaUcRlSxP5mplgAXL\nyUii\r\n=Tu5w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a08ccec35.0_1576884430228_0.8790619095203991","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/icon-button","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40bf35c6613721e34d5c2ecb7b76fcdbea72d5c2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a2f75105e.0.tgz","fileCount":33,"integrity":"sha512-FK2LuudQ9+wHlR6eqcgBlspHnsYZDCmDNrQrlfLwOAiQgUVz8pugwxqffU3a/RIEfr6Kcvq/jegRsXkCIOByTA==","signatures":[{"sig":"MEYCIQC4GpRAfoxVxBIOEXvU8I0x0SWQ9XKvisHHlFFvB5oBMAIhAOFe63zBYC23SfIHOJI1g+d+l91WdbJiIYmxxsgYpSUu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARn8CRA9TVsSAnZWagAAp+0P/R6vKAFxDDRLjxPgb/Wn\n79m+4b1xE5bSi+xNeyy41t0HYHDRn7tGGr1LKqlgJ5Eco0AtTsnkkP7YqqwY\nTkruND487yhng0ubS9OYCVeaIPrXw49b+lY+zM16liJUDNHNHzylVEu9HLGi\n3Ct86k+N3F3nPD53H6hlpUSOzaZjscB01skcxSlac7FV/6TXTS2ymdOhSF+5\nnR9qM2VEI72Xug8ruOT22heo4AJUsQaYI8ue2ix/trSB8bF+UVu3oXPynbjy\nf3kO0xfIiYbIMPIcJafyATJ4MIN/rs3d+roVUH+UlL2QTrc5Vdu1NDGSrsM/\nX9YCJKw9UdY3xFTrJiZnbl/KGkyoDsGh7htlQI57rYd+QRm0o+0scBMpEFxF\nThnPhWqMTHpjBmzxVKjo5db7fARjp9Rzx6uSiYNgJPPdiB0QR8i1Fl1cQgYe\nW8Co0hYOP61y5hoMLKqnXIJISsKcKdV1oXFz8xfXAoGeKDrWsEuJf1lksS8Y\nIaLqw+RLI3RgoCQMi5cG7E4+SEOTEspsTpqDXikRU5Gz5bbegsAFoG/RkvQm\n/4tDl9hYBYPos5XiZz1Efg9izXaeVWCFlrAW0JuAhfsBZT42hJ3OXk8gZPvC\nlb3ha3951oTm7OZ3dAUEXO1TqL/jkeSeG7zSjD0lrhYCXhSKkIEO6eCRA3eD\nuuCF\r\n=7fQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a2f75105e.0_1577130492349_0.09923762515384449","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/icon-button","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2373f4c898f2d35951e8b5d573f7e773698f2f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c054a24c7.0.tgz","fileCount":33,"integrity":"sha512-AGEzJGTlW6mKLgxZ8HkuJGhnUt4UP78kmKTDXalLyB8SfzFcQX1bHOM32TDk7xVQqcg7ATFPBkPPoqdrHu9+KA==","signatures":[{"sig":"MEYCIQDE5eK5dndba1U80toEWmCWO5hGSQ8mvcHC+BFKmGUzFwIhAJ/dj3nH1cuz0q3nah95xAgQmNbcOdZTsQA1I19rXDEi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATalCRA9TVsSAnZWagAA19gP/Av7alWaLUYbnRy3iJoW\nbQV7LPG9WBLFKVUFZhpbV1MZUaQ4aRchTisUw4pjFA0H+uPjsOwJ9855BeWY\nLn+p3f9MSvjD9a3lE5/2KTWW1SybR9a0r+KVFfTrQLJ+uK/VOa6E57PBDnz9\nfCYTVOfMShFioNdjA9zwL86YC5LB3mETzzH2uLeVfOwwvOHygeLZyVrB/O/r\nSDhpUYboMlqcBFmkrSBWCyBr/SRsr6O5iXzjFEsHGOfTv9v0Ha/G6LbkOmYP\nCCFZz9aZV2z8fY+IRS/72ZE+HXZ/+aZO5XoQqtWy7MES7VYCsiJxaTDXW6v/\nYoP/khq7MT3JQN1QhF/lpnJuIgqRm+5y8hedIt221ECXCP9jbJ8OK3sHf4fV\nnqfujH3ELzqlMzXzCJHvmJgzEgdDaYlLOY14F/aTFNnYcl8RzrTU/FKJDSfr\nHx1JuA4Jo3QngUzAbRrPcXyw17X5J+K/1CzGR2xnDzslmKGs3h7vDl5akdN3\n3EbTYKgv6VAKBA+a/9A2Hc+02oLKWIKA0lnWtaZjU79vrSzkZ7Ug0pfzIup/\nUsEflAypUXGZ8d1vml6TZiLKNHbVwklAIwBCiPI5VSScePHao4Es5r+LxH6q\nAzLgDSpiI4lCbk/sO/U7rPQtG5vLMxDpndJ1iuzHEOfSnDefkNMewNW6V3/v\nvPTv\r\n=Q0Ah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c054a24c7.0_1577137829000_0.5035626787553278","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/icon-button","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46c7d4ec4e21195c4f2763b8771e10bf8599b45","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c6808c51c.0.tgz","fileCount":33,"integrity":"sha512-kbQBtODIgdXDEBT50a0cXsdGmWJ02rkVN9VundmKnfZ2i+BY1cCdtRf2UPYbiB4eJfsIFlHIqs0+gCs0ZN7C8g==","signatures":[{"sig":"MEYCIQC5HDGoscJWTBDKTpA5WMzt9EZYJU7JnI/t9jA9b2lXXQIhANuLMna8bkuCVoOncaFJW9qO02Blcmx1kzwPORVxoJ9W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATe2CRA9TVsSAnZWagAAiwgP/j4f4UkKxyqSbC5+ZflN\nLwepNmZYbyc5Ar/LmA2DevvhVMiA9ndwgEsSkKHKZpXndW5juhvou++rD2Tj\nao2oTLol1rLV8Y+mytYOoE99VT7ZZZFhK6ZEKlu7W3p4c32797uDCvjhst3V\nRYIH96AQqu2yUTEoSY0df7mti0JG9JADIlDBL5wG0rBSvAqw9e1P6ZQ4fnmg\nClTz1oXKfeojE70n6KRFBRyu6i4cvRXp+a+bk/J+xbfRznkt3yHrN3l8+EKP\np5j+V8HTPbXdE57m6Xj10NOkvxOCdkVXLorZwgYx7ok6Z410yS4YnhluBcOX\nn7x/OD64CPXSwB4IUK/K6ZHxBxbJGuU3PwXp3q6Mdp6yqRIw5zENLeWmlbmO\n0ulXSTyLT2JiEriUEjjSCdYTJETlSqOlKHoraSfno6oEhHt1Yw6RQaXGq0of\nr167Kxumg5BS7mNoiCE4JlmJY+CCsPrWytmu1wlBw/YCWU2FwFLjYXWmfMSI\nuwIl53oQbxajJfN3XZog4M2o21b7hpbHeViBv5Btr4pUQ8tjcow7nxeUhsCQ\nSQDk56vBberLa8+2JpGnA2TDAGT7QL64AgJaTBkJhkqa5H+eW/Gyp06l6nNc\ntYCaqTTnkfhnuq9wmsPLt62kelKylQyWVgC6K7VpbRqRRuB0suQKaKWjMot5\n8eBZ\r\n=ulPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c6808c51c.0_1577138102152_0.0521082972658895","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/icon-button","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332457c904a4967a76700889cd85b9be8dc2cdf3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7bce9cf77.0.tgz","fileCount":33,"integrity":"sha512-qjazk0nIUuqyNnV0R/kz89B6XHJt3uakriwaj7niusydP5fLw2chqLdfbZ+BJVrp/s33PW9PDMneXcF08GwIcw==","signatures":[{"sig":"MEUCIE/KiUjBY+RzuHguyePQH3TQKlxv0mM++mDr0Fy6poTMAiEAr8DWeBcHlRb//HU8b2n6FaO/q7yMZ8uBl6BVqwaObhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/qCRA9TVsSAnZWagAAMOcQAIKTIyAhrp+hgQ+Sh+9K\nrNM+XOYc/TeujmekjXqd2jBX12tK4SataA167FXws/QNtMPFgga13Jomtt97\n5pFDwpV6CJSJSVkZ1D6NJofPZq9qFS0t5kPZ5NuUMcEfAo4VOPw7ahGiwdu6\nE+WxW0yV38dmbFKhWkAAzDX+G0EipE2vtdwfQ4mzv/hJ9zROGMIONKsoX/Jj\nxPjGNrHW9vwBt2P/UClb7f2ogukfxIMb9Cf3YusRU9AydAV3g01yce60AIpE\nqEK5+oh3mGeSBfuUIzots6olfHgkDtZdildWZYUPHP2nKAzH/fVennyD9OBl\nohXEXm88bo8PX3UCYMqX0aJHyJKJDwONw1ZVC8ltGJP8mqWx+gB315IhABiK\nv42c44WV8yphSh1K7qTN49vHen9CbQktW80I8jkz0HyWFrv6baBhtUOorg/Q\n9UR08IyAu7oj65qk06VMXu3eLR3+nAy7AC2CKvRXftoiOpLdtzk9+gUSavFX\nPbTVKviv7hRdKG8L+RmO8pHNJbpsWPvO174MPKYK4/vqrFI/cC5HPF6TK5FD\n5Ses+qx/1yjZ16QjZIOTzKqjz/znqBJjHaBLvKiSM77i/uq5tHkBxbMi8onf\nE0B4+oUlabPVTg8fFm6pEqIL96jjs7hRJMf/VwRZIvOGdLRQhEGUunH8MP53\nGOqC\r\n=7clK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7bce9cf77.0_1577385962382_0.26639991127137796","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/icon-button","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a94d3f4fd93c3893b0f9e830a48f69d893605172","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c92f038c3.0.tgz","fileCount":33,"integrity":"sha512-I2g2Lg07wvrVFq6jvTwo6/ObL4sa2lnV6STQdo/zs8zImbgpP1WX7zz/Ht8aiLBfCYlTXBXuQOLRpVaDHp0r3A==","signatures":[{"sig":"MEUCIEoZnnAEprairn3+nJjDHmyGF6lTnJmdnAxj7Jw4aOjqAiEA4BKfCNgQ/ElW9qNa3npW5cUOY/V81/+XRm6zCadxNcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQ7CRA9TVsSAnZWagAAWrYP/2zjq5yS1VCP2LSXkLuE\nlcPhdnkYYiqNl386Ed+hSMYT3aFtGnJjHbMCg2Vc1amyd5qMShAUk6c8fh7s\n7AWGgcvdAKvx8xco2WeqqE8ZwxbLoEX6mqL8xuVg+nOqG5tkbyBr9NK/LcKs\n+b0dCO9UeyaDagfL6gszN12dR+kOZ7JIQ2cVL66C6aJdjN6ML/RoPySnLTr4\n1nfe9cmr+h5trC3+wFtunv+pDCZYPFuKztHikeGkEXA9+20xQTXtHoqIZVLY\nqdP7xPw5L7ZMhPneZnhM3r/N0TK4aN4mZhbpory1iy97u8QeHbSBL4ty4W7E\n2UIDPykk1CSz0mfSIxyuT0DlK3tKabrSfdTPYAd2NqEGlMadyvt6KeF9rIYR\nOVejocMV/LgpFN2FeEopj4P5p8vV0x1EQWxBeN55U7juvNKxG8vvgNfNMYhb\nFe3PxyD9nZZa/SraRB52oV8GtchHztD9a9pACvHOR7s4jRwRdtLLeONHliKS\nknyQB/Jh/TWOn0rjWtzkOyS4wR01jOR319M/gfej2srCXtqWRg4p/X5GKf8T\nFdzOXYVnSLLmvTeC0WeW+MUR1u09iRg7gR9p+3WGbE6arvN0sYwGBgJmhAgW\nu+J65rtNDZgvA5fgQYYitpql4pRS5qiKL8ucoLszue0ZO/lpSVfPTeU+d2e0\nEAVt\r\n=RBEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c92f038c3.0_1577743419206_0.8288573280957185","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/icon-button","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379da7a8edae9ae360fae05d578b0dcccbff4296","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1f1ac7558.0.tgz","fileCount":33,"integrity":"sha512-rVY0cTiLR9BeYFK6m35u0b2/0+Bibeu1G6/PWh8Ix9bg4GWutqvvQKHlzr1+zPEzVU5/rQaXSenbjmwUqT95OA==","signatures":[{"sig":"MEUCIQC1fegYfSvM038VVlAHWR2Aae7s1o1rV2R3XzHQctcXFAIgXucmrXIsuSN1o/GEbgXSLH+WjgJ9nFd0J+h86HPH2MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliHCRA9TVsSAnZWagAA4OUP/1i4rHkTUJhwWQoDSQ38\nFEPvyJ9q02fBPLgeGPztZ2yTwwkCqFR5WWtPhbY6s42jfVU1G7nrAuCTXJHz\nDL8njRO0Smbx4URZUT0/LZtVMt4RCwWqKRDeBsdtj3Q38e8f0NTAN/oh6i4C\nGAct+ZmEU7It47TVdZeIj5pXmlua8MLArmAbwtIp3uzRWtPOyAqvak2fF48M\njgvbk/NYLjqI0kc+RexDs+EV9URNo081zuvfJ0G/J/+xqTMM7isICvFoGGbV\nL+M2dD5heivjnsh01tEjkQLhhNrUp2mSwqIs9gSJAGISNzBdGE5MG/eqdqLo\n1LL0KHL1WXKKFkP3HZzdD3lpRHwOQRItTcWwTiJHVASHDjVaEn20+OIxfcWP\n8VKY4ZD2zZh/hwD6mbqiVyb0HfrV1CkMcCHOTUhLzCa03mBx1y+dgloT0RPi\nH2KvM/15aDXFy4Ioy12bCN7Jg/4QCp2jVmHpArRskXunxIIVvuSQR6z+eipg\nOhxAqZxeaOvsVsM+1gZMIRFpIt7TYvDVHsLQfUE8vxRNobuO3+IQxjw31b8I\nSGSGaf++lHyov+2ReBaG+6ehpR652JCTu973Z606OPxBztWIZbAaClMLfYnP\np5YBeBm4LV3reA3h1KIkqLmH+Zyt1uFVsCyju3Ruj8w37cjUBDrx7DTu+tky\nkRR2\r\n=NTOm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1f1ac7558.0_1577998470603_0.8872181533047026","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/icon-button","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4de237a22d1d7461383cd5fb40e622b2e18bfc4a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ec26e799c.0.tgz","fileCount":33,"integrity":"sha512-UMHcGimrHUNTaUSDecvkkMxNLQ71AGhcA7wvuk6nqQepqtQBS+86+i7MfK1/pf/C3ReI3tdnMTE37z8VHhhPwA==","signatures":[{"sig":"MEQCIDt+R/Eo8UyqpQSw8ayKz4R2LrGzDULYXAc9wtw2FbP5AiBcQDyAZvzgFb8WOK7WB2/aVH0BxYbm3fmW518yNlVySA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPSCRA9TVsSAnZWagAA+GEP/32jtIBbrMXUfrYLPK5r\nuCt2VS8ffxli96c6DIBYdDVRcYfZJQ+LPZi71rOcRmuWs8rj6NSUvThhil0W\nuFh4IOep4oiVCycaFrZxyAim3KBho234xzTFJfucYm786NVBzlUipubps3QR\npqT6jIRbbqFMb4xIwyymBoT1VMsPdEF3wetEZHws+rU4LKjV7SP22YrKjby9\ndmukap8JLVcDL0oTLF3kSzp9eN5LLup7eSlB5ZKDfGZyJfH3Gux1Ns5LhCWq\nsi4KoSjmFTNmCfzjWFdFeRHRDiGkpge7EKxx16QKVSlj1F3XiZ4Z1Zck/BCK\n6M1aZHoM646UQAN3JHZ9pFxQB/pLUyM/Y3TSLbuz8FABwnkSg1azzmYE9Zvo\n/OGVQg45HnklBREdRE3diMHV+mNx9VuVPbeKkw6A5b8xf6VsowibO1gWLYiI\n3NSDmOZCF4SK78nEcQ5QRU3EONY3O74n9PBrLIj+CPwp28oI2u/ZsTiTpukm\nSfJLvdlqnXFGbLDPgH+1+bL5g5h5LmN+omoycOYmkW07hO/2mJIS3ztMdBSm\nJx7Tc6Im9gGv85Low6LP3YoB4D8a7/33XRfioG+B0AOR856DDIhPQyRMIGqw\nlu2E+xvDACURl3alqyHYwdbd8lY3aJogtbjf4hcD2itO8XHmxoTYqZ8WmDnF\nsuiv\r\n=0rOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ec26e799c.0_1578001361756_0.18918273812105113","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/icon-button","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fccdf3373881b274645419ac8e16001cebbf863d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.0a40ced40.0.tgz","fileCount":33,"integrity":"sha512-10ccGbDRjO4VhN9HKQDDjiG77K9fWesFiExQsavSBJxpgglZp4f74I8SLMfrgkMSdZdMEM/4MtjGmiXCJKd8Dg==","signatures":[{"sig":"MEYCIQDAw4kaerGgnz+N8j6R4I3s4GRSG/1pR32GLHqCxpeUTQIhAI5dkbKICZYOq+KeY+DK113f0n0YrGag+A2mZiP9stw3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VjCRA9TVsSAnZWagAAa98P/R6dXO2zDROces+VQDim\nlvWDeaXp1afoQvL+fh/D+ZGyoau3XmWXoMYswAC6JY/MdgPae+ldo4CyexLV\nz/Gv3ZKfje81ZfmWXwg+Q9Qx0zZzCNm4gQPD0ouP0uhKFKXQvs0hA84OMHuv\noLDYpTkbHGiR0g/rr7PSn8PFFNdibuqI6IxJnNLjaDSliTn4+oYsTqItHR2H\nHNY59GRByFzVuKzdptR0WtiQlRgTZA+XLJugdeiUP+cEW2RHRPfDJ2UwlOq+\nTfCujfkJQGemJKz08Jr4nkWTCK3/ZL2sDvD2AIT2sotr4rl5j0olnzQlurOE\nYp+K2OGhSAA4/GgVgE81DC2xqsGN+LebwNr84s3UapWy6Wn+uLMuSLdMA1e9\nR5oROlDUdacrQnDrj9TrOFYCGKKdyt0lIWK2kJwEJM39HR0PlC1jyTsmla3b\nFCutl9Bh8zCA3cVMQ8MLg1eCJSMbArKI3/gjhXhLcH8k6JDjDkhB/97NApiI\nY8vMzBiAePBUIfgvOVdPeNf7fyBwVvvtIZqkke+RdDCMVgcHJ5tR6RdFI8Hw\nphgDEbsmI/rJd0HMLxPaQxnugufapH6e7dAZDsBxKES62ji7k5yb1hL5SbR0\nfcdPk/TgO6HWl+ClBPmAD8IXWA/ftTNm9bWNM5ovO43IiemI5jIR2bmup+6y\nwIh3\r\n=JGNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.0a40ced40.0_1578071395488_0.6583323937711636","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/icon-button","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de483147dbf4c40db1f2ad8a3b6b83550c61f14e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3adf84899.0.tgz","fileCount":33,"integrity":"sha512-aGmbB6TRy1Lb/GZkta2HPe8iufO0Z9/KRwX0d3sq8LPqi49WwXfcQJRxBN/i0+7x+0HFH6lwO25Pf7NBCf7xCQ==","signatures":[{"sig":"MEYCIQCDJf6mofmllIxj23bb35D29JjMJtMp2YjqM45hbEif4gIhAKDze4jJSfyXnLwfoMEdR0kpacf/ecHrNMSLfuW462Bs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4Z6CRA9TVsSAnZWagAAJ90P/j8vS/l5hz0jUqet0Mh4\nVtNYf1IUg239SbVAbp8d2Ppl00LHgZ/TFgZsAZbj7BMXAhHYTe86YDi/BhK+\nTbqpYIurtt4jTAULVw0VQZsQ6rfnc9TLkDlCJmPIMSgyvoPIV4iKU+T90kaU\ned9v3cxHdf/SQGQnt29Muv1iJNcL0XakooHSodKvNSh7b1zwJowQFdXsHZ5P\ngsARMSaqQRVWzy8k2cidW9eVonhQM1y/9fk0GmfgJsw8+4y+cShAleP0MMNL\n69C/00LhRSVrabz3ZjpMQGRRba5bf1RdwlGcT8GqAozBtR2ExF1+Sejl/jE5\n9mQn3fRbG+im8zlyYoquEOtCIfneiSShx/vplH7UJiX+Tp4BHiLcL2e/SHqV\nTBsRfajb6SNKlX7SZW6SkmtFdGZeX0X/iyT5FaPjmVgdYixWqgj0cUVwiy+r\n71EK4/dGJz64SMPYW7ryXnpeRLqUjTDLkFuv9E4nvTl+GSnOAzMnHlq7IZeo\nkAgEzHItRRz59ZLJm74TeNtRJrjhCFZpTV1Wi70JN8yxa3iW6SK57zLmonJk\nW/x8ICFiiuv64tCA62kli3dYlevEmfAnWrxb+mK0RQ2c/rFMCxeZbvZjGqaV\n9+l9Ky9D9bwSrtsopVyJNVEF4P+GY1UOUCIHLYjcBRLJG/QVrGv5vSJsrhdm\ny0gq\r\n=OUH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3adf84899.0_1578075770107_0.6454256629503496","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/icon-button","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf63d4cd0c09fd49deac70cd76500ff71f9bb68","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.0d42ee650.0.tgz","fileCount":33,"integrity":"sha512-vXdx/VazgHn2LykykokUKb86FioPlG380+uRnpHQK7fGs6u39wm22vt9qEPH9p5M3AD+URDyksdaO+t3Km40YQ==","signatures":[{"sig":"MEQCIC2DCwjpBKu9ASOXiSM8bQYos08tbie2csdJQ+umimf6AiAx9Kr/JOJXJ7dHffE+CTi9cUzv8C6QWNSqBAtxb2MGYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QUCRA9TVsSAnZWagAA33wP/RH6r7U7ewQfUPaWBtLC\noJPPjajXkQNgQM+Qmfoq8AxOOvAszc/AVt92xKxdCVj//GYOQwarEpISc8t0\nplU0XC7of3BZm/sxIsWeKilqEea16hJRf6KcFUEN41Qqlw1fv5t86C2KolQJ\nr/7OTpuyRCeqFxBiUMrkPIP+McCzLCoJEqygYze441SoybOIO9j0fQ0K563n\nT55j/et0df/snOtSEvQufK7GNebJETbxX/M33TGR5jOgnOKlzvXEB0KlN/4a\n1CK3pQ4/uh/Cg94nDSIPcmoBbw9XJ6BXltRSt/LUt1DqRvWoCnClu03dcYOU\nCj57FOiGOtxWUQn7Rm/D6tnNE4EXc1kgzVMAYGt+ikv/uEVFSZkIjUgYOUAW\nZ+fRdbU8L/4ZBoY7laaH2QcpJ53Jysj+NNQwtfECA4N1sEvcDZaX5Dfh99fy\n33PJMu/x+f0ROZsdUUdAeAdPNxBGms9Tsi9FoM5BtULsKYGW9lPSOeOp70TD\nHkzfgiTl0jXxAAEs6YakHiMLXNGx4CeUsYUjTXVbSnZW6N9eaLl7lRw5rteA\n09YSxVECesIEkeAPi2Vq5b//WBbxM4TPsxGwpeKxh+yzxeQcvqc2XSSBHNKo\nKP+YpEO4/sr0I8vWxlcUbypD64G2+aqbZi7Jc5SKeWCfDXnPcDbl6Welnf3v\n+ma4\r\n=17bT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.0d42ee650.0_1578087443663_0.2977339256893934","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/icon-button","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4070ebd6acf2736ceaa8af348f591ca24483b4b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.847dd1ada.0.tgz","fileCount":33,"integrity":"sha512-sK1udhsnm1BIr+j/joxgl0uMcZT8IOhQGIkGVciiVU8wgD9iKSWBKaS/5GRtuoYiKcIrSwVCHl7lsKQq8NQ1Ow==","signatures":[{"sig":"MEUCIGNAl07ZaiDyMb+OtKhaNINhub8+FPXvmILYkMYcxiX/AiEAsS5Nre0im8r7mBokZGx6JxwqWyNHEtnq8wZZ8zcBEU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nzCRA9TVsSAnZWagAAaOYP/2Zh6CpMM+lN8h3ijdTE\nYRGl+g0n5Ad8eXvZYODQzWmsWd/lAX8qX5Lzk55iK/6vfLjtNHwdkqxGjQmo\nH/c3BOCfW/Ph2YmpFSw4GOFYfUR/uXCCL2B2aHcPhhPwVUTK0asgvvF25li/\nPWAhCOyQigR2QVXarzQ3J4P6bBfafFEjenByibTVUmBbV7Dci1krw693fyHT\nUEZZVl2Zwi7HmaLHrBOsn9mGF5PtJCmg5MQMcfB0JJM1gnF14eGwqV2FiiNh\nIkcugjll3R+tAvJIr6GtuMoJFB81wmA+Vx70JMi+hBNGGoVOjkr5kbHABbIl\nevCJq+vUT2j6oPC3xh9P/F+gwbotri/0UfMe38Uek0dmKTD14BBV+F3hgpJa\neo1E75Lw2T4jFpXeclFHHHgbWbNU/xurCAdCdbLvZVIABWiosKBwHq/uGIDP\nBKZw3tpUO4dcF/p6G0RKLmw8c1mzVzgGAyA5y5ePxOE7qxvBSdgkLtisupku\nmYV/E54NU2wYlDRWW0FHAkRfveD49ILq9XGhZ4PdbiTKoFFOSAsmCIjQasVv\nR1eMMmEt+O+jP337TCGgesLdZYL1ZYcF56N/5gj0kMEc5ZGMcxHfwmB0A4/R\nnDeKQ36Iq19s7ouA+8J2Wxhc/cFuDi3uMH3e738VPbjjcnrZnpm8R8CK8kmI\n7Wdw\r\n=hoh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.847dd1ada.0_1578338802993_0.4285360586397087","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/icon-button","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40f728788ae6fc8152ee042873d823b0a6de2511","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.39df7e5df.0.tgz","fileCount":33,"integrity":"sha512-/Mu+asHwXcFoQri/8XOhKlLYP0ZecP9quulkfX+U2DPbzlrKqch1XCn/UGp8xmoiUGMJpz90V6vvCEugJUflkA==","signatures":[{"sig":"MEUCIQDqMOn66ejrQ4jBNBAnRxvdY4GlY/o2lr2zgscQP6JFlgIgMeaqBJ76xC4nb6i9aK9TDJzQv95nwzYo/h3vliP/wV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cdCRA9TVsSAnZWagAA+3AQAKJO5Zk6gE5M869DEYsI\n5G+QMHvTLrBWPc1e9Z1RVdT99xJ50LVjUKa3uYdi8PAsRBoXaBdv63LnyGmc\nsr6JaGcWNIuE4ND0s0i/BstVYXxJRmv5WVwSHn96o7FjMBa9JFpbcaahYKEu\nKFa8rNnedn3IlEqIdc3uc+Kf5i08YpIIKuPe383XmMsvUa+7r9Mn2xmzVyRn\nzxTVZc5CAep0jOpRHxnHKobiGIMbWVJF8e/UE3m8rVrJZNqqRpTgP2BXXZC3\nBsyoedjWqA7zfWNMb/rn72PU1ZnXNSl9TaNte30YKi245oQ3KQ6ukbtUGzlC\nWoIP1x47i1u3a/C6mEIK8ksi8SSfNlefZVhnvaLENns7MJeQXga4TtfcUiq4\n7gdQr2ajsj2JSw2sw5s0SJYuWelJwC5mtQ2YPQqx4cBhEMUYnzSkb61ZvN0c\nEVh//EP+VzHTWCV2kvJ71z0cxt2aZwxxgeYZJq41RrzkD60vdNcEvsGpv9vk\nhVShPMVT8Jtv5vkRNbEeGigh+LDxty4hKiFlsMCEH733FbNYcqTG5mfb5rCC\n+gdl7bXVSdWqodWvKhUNe94uLoiN/tsUkxhgSBmzawax/bN1RJ2ECyqM9MbT\nJQSqdHjQe0/SA9pZs4WQCzzHQsCdsWQ6WTVUbL/k04xQ73/m2buuXUErm7MD\nv95J\r\n=SS85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.39df7e5df.0_1578358556954_0.10057597159408704","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/icon-button","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a7ef7386ba31b13a5a61dd901e55a6f65c65a9f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f1a2581ab.0.tgz","fileCount":33,"integrity":"sha512-ygvcm+XSMMLEaYeOBcDVVS6z3dAlwnT9awpLSHDluUgrQojfWqPx7lvvcIJbxY2cHGctMuuWTk/WFbYKCC+kLg==","signatures":[{"sig":"MEUCICNnN/iTRny3hwunCQoXxvKb47h9AXLdBHdMteQpCHizAiEA8PIiobz3w2PvgIMjK5M9h+w2WYf4qH6dSgb9zk5eT/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJz7CRA9TVsSAnZWagAAEDEP/1TEutv86TZc4+Fot3f8\nKR4Q8vQVssrteENFJBz9PxO7x9UI6t3Q8bLRk2RXyca/OYGWr+ZEUDlJGWx+\nXWlwNsOQoRx7RulpsovfrIyWOy2WxUZ6hYV6bG7qV+lN/V4KY4Ri8uIcZMI3\nBvU7MP1o5rlmz04jIrASUJJOS6Z44u0c3PR/Fox0WZm0PN4gK1eZad1QOPXc\niRx1wpCaIhb7k3WPN+PIAyccz2pzgpgt+no9yQIfw0h7fmYmhOq9FX85pi2t\nozpdI3TJQwJnIzmLi31+FNWzsJiUrsuKpSCKj/bpGGXOmdGFGBoecYjYgJrw\nIkaWtZV4u16L3x7fc3i7Ul/JnWK25BMO7DgU9YT9kuH2tE2t1tSfGlRC1zxZ\nZC3+TUezOw1IuFExsq/KJ4m0zWnU5o7WsMEyWkyzq9tfNR4z24bNCnGE4+Zp\nYr9tV+MqGkNYjth5jhOswtCHJViuc9voKnebx18SUhxA/JKN/jU7kDgK2gvc\nD9pgARsBRUU66xSmTnEgM5kukQUtnBC1YI4dJ6hK4Hi/QohNTfaMgERDpePC\nbsjhbPlmwdPHbxVCb68NysC3rAOsVFThyzaEsdPzNTdnTsOdoSg4mgH9u+TX\niAoxHPfu/k18TKLKWKkmdyUqfN9zDExt7JZ2lcMRPCi23UFJq9iGYYsayyQQ\nhoXB\r\n=yj/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f1a2581ab.0_1578409210987_0.7241172804529772","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/icon-button","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028efb365a633f633386d59c4bfa951dd98dd737","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7c7ddf347.0.tgz","fileCount":33,"integrity":"sha512-7o/Yu4LKwstzcbMgmFncPBbuiAXxu46Kg4JYvhkCty8fiJHsuK15N9NApDladThf8CxqiHC6AV99ggS9STACAA==","signatures":[{"sig":"MEUCIGn6itENwh/h7z1fTe77Wk+x+4G+xKCSyzdCwc5owlQnAiEA0hA7ygpE+lTiFMHFIVxnLnU72j+BvqLaCSgqIGGFMn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDlCRA9TVsSAnZWagAA18IP+gKZSYtAzz3SBSxTFQU7\nSVsVl2Rx0G0lreGKNkGeuvtkJzdeiK44hWhbJHDjKFvBOL7G90pQqNeMz8aI\nhp+2oYd4RrYQ53gv1IXAHXnSuRwlYgmgDHEVbz7cGOP9SMqTY+hYrbmq2/kK\nuV30VUvyYW4f4M65+10snq8SFdHzjPLL8T7ZgtW9J3FtjGVzKpvDyySuRZGD\nMXVm6k6bX0HKSQMCoKNbyD2NuSMx1eHxXzSvDY1o/lfk0lpsGMmsyH5bI4X/\nve+miS2xBn2HyuheSM2J9ULzN3R8Uwd+ktUlwEwYmq5q4yCdoW90ScnlBfrj\ndQVnz4C3UjBU63vp3CawVfo4+MSJOn8n0hARmBkTArTlPi/TIyz4neuFi/qT\nN5mOq2byDZb4kJxikjuWxarg/gS8jDSninXJeJw2gDZKLBUtmhjLY3jdNnCN\n1AE9a2S/7FIABeEhA5xJLozNzemGKQh6wZXveicrH/3WgPIRQXHhFwcWzMJQ\nnwGgdPeAaYUdlHHn+UQNbCYst4vgfX5oINOrOkTulHCfDVlrYxadwzJGkpR1\n/EjAagI3ImxTg6ZjfdKMAbDOL16dO0woH26Qcs35p7YoyW44bXcIDbiO/Yqq\nj6I3eju7ZA+newKlZ3I4PvQrdIwQZllFSASbFbkkOWlvnZPxKCf2oHD6/Say\ncsqu\r\n=+iiO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7c7ddf347.0_1578410211399_0.23067516826053658","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/icon-button","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a56f894393df266bb7d46f19fabe6904764a302","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":33,"integrity":"sha512-3mcgB/sCgyqG74u0Dh9GfxJ7I52pNwgsDbMPeM/9HhA3REGcwzNRZ73vLwoS9jX2Xu7b7uvr1zmuzEr3pNyGdQ==","signatures":[{"sig":"MEYCIQDXr1t7kRUsM5TSZbm6hU0vahpsJQ4ILJy3shZbuv3L5QIhAMnHP5AsaDQbN/I95Bvu+dpQJLhfwipnzzGqF5hIWtPE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmmCRA9TVsSAnZWagAAWsYP/3cplc0vzdnXjMrC6W6Z\nJHQbKJ8cKwQaICn1bKQAPDpHgCyJR/prmE3Jn7pPwspPmGHvxKw46brophJo\neaHJ9XbuR3kf3BUV8LZYYwjgE5XWd26zBuYFIHiLDMyohJ4YgQPCzFoLzzvp\nlMZN7b+xYW4mTTfh1gRgBWOPvqlrGGY7FiI+ppE4XkUFeu2UzsTjV48F9jfF\n5VB2L0V0i252EJ+Ex95DOhsQV5vDhI1SXpMw6NDDHwR5k9tWoHn8cJbUpXFa\nzX+tvidwXuy3grfQvLhZ8ryOtG577OExYN/cQ87RO4orr5SKdlE8Ypjl3I7X\nhAC9MUYsOM5n+51bXS40ScSD2JwSUrcl27J6IuZIL3OA3iYTV1H9TsCrQJcx\nOM1i97JjAqheB6Ka3vFvvuMyLUq8/pvlcU7a2LP/8BN0Cb4V/neZK+K6gIE2\nHEB+ad62JrmopAt6pYXXBfu73gHckdnMIpsaQM1nnON0PYRWpHka2YqeehTY\nis4NsDgrYZlyN+IQuAl+mRovaueOr5vBrKwsahui7/DVCbtsOC6KBC/oS1o2\nIRUDD3XGMv3hcoazCCBrM/p6bUnzZ17M5BDvQzGnBtzpr1QSrO1ZDmYhwVjK\n1rJ592S3w5DAeMOQZrdrWHRpm6qXZzvUayv/GYZFRWcZuAKG502+WfEZ7TP6\n2KHY\r\n=4h19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a1c84d4b5.0_1578420646320_0.9615136424112309","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/icon-button","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20e83d70248d1c02a3fc6037ecc8077147701a66","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ec9f16578.0.tgz","fileCount":33,"integrity":"sha512-acxm+XGZO4piOT4VUkDRWMhskCohVvnxZLeZwKnjp+EB4CyXa/hKeXqmrmYsJU0hn9v3C3a3sVfXOZW2SGHswQ==","signatures":[{"sig":"MEYCIQC6DpvKiTbHtBhjqHBR+/Ku6CIzGWb33GT7reE2I02P/wIhAOhJPgbqPJELHiomGhk4P3Zb59Eofdt/R0E8Hb1Q1M21","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6KCRA9TVsSAnZWagAAPRUP/jqrh3BQc+dLnbm0Utqk\nRrLAg/T8xEg/TS7ree5srOELPGXqp2lOK/XXjT0Nl2xNwyWWcShPh+gtA+x2\nqAn7RnQ2FVDyu+A16YnC3oA1p5ngScKxtdl0IHsWFVJXiIHyiljjVhDWwMfS\nkmcRlPfkkGxgaQSnr5/y3eepXkIoPDPbbey8XQjE06BUiC5Kg1a2KfuEbN3v\nGNyLcuuyLdKv0pEdyW/URXYuOBqt/TMX5tOb5lKGyVrJx4BOKRn9GI6pONaU\nke+1Kbn38hFBZnwnL4W0B3QU4jwS3J4spkz1tyXVQ+WQcg07xz8HR4mTU3a2\nimF4rExEJQ7wQvpQom6HHvlCH7KxPnk4FKLAxr0COwGtUmhNiLXsdRPMidvW\nMr4b4r/PGTY97fA/t6a+rpRvXA0/69srs+6mToSMwU0a4hlMXTwf6BY8+QCd\nFEZHzop3QNMvGdfbCqbiCWoTRGRh+UNIv14irQ6h5Sn3lAFHfApDYmWY1d32\n790iVK/kwVFmZm7pF3++oz5i8l0N75OUMmaRXxDBYrYqMfqZf8v0kDSlawgm\nV3b/LLzlXZFUucsPLgRKz1Nor/X7T/Q+R7B6xJkzU8H34O/onFRQJG+Uf1Yy\noxcsvb44uCRE3elbui/8f5+MqhqNqgjHHWzvBbYNi0ApdImigmPDmMqmxn33\nUQvA\r\n=+xah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ec9f16578.0_1578425994231_0.3205439378758854","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/icon-button","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c75113e11796c4575e5d0a271ba50d3fcea160a4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b602226ce.0.tgz","fileCount":33,"integrity":"sha512-q0iGsBhN4Pjoio9yuqaDKG1ziQj24ggeMhfs5F4d6GVPnmWleSO0qn4wwkcTB3S6Utwt/4RNZUCJuA7C1YAnUA==","signatures":[{"sig":"MEQCIBuBKOxzx3Y1r3kS4kv4wt5jgLMu+uf7akJ2VfzwwPfhAiAWXiJyCDwmDYp1iTUzQeNGWUBgVvtDWTdLCNoUeJmtKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObqCRA9TVsSAnZWagAAC3gP/3kOU7VcEReCxkKGUg6a\nNEbHzPl0ba2IomxKbUvfrzQ+sgLDgWA249W30ru2YfqRRHofUdbPZNd9BjRI\nluYHhdXpyS8sTI0DLt/HVbGzL6Mkbi7S4aCevI8qUPrW+mrigBBqct0Rxkvi\nwCti9A0S8B1ugqU1tSMAYfiRL8cUasbJILb8E4r6AD7LVF+LvKRAdNKS6CEW\nO09t6Eq9xR/bILm1Z/fSNvfkOhKUCKDg4hDhcmNKgLlgOoeZa+NNZRZACQwK\nUCMGa71GcTtUFzpMM4EtQSqcZ6xwt9/+gKDrnDVPkRBWb0QChCP1vY+hmlI0\nG9UxN+FMr4vGWM/YmPVGg3WCp1NQ2xWUCzwk4uP7tc4HAGamth89v5uEYMmu\nKGq3u6FHCB1EiHbzu+bRAM0k1I1xMyLpCHyGv7qnGDbp382k43LnvbugCNne\nSkcJI/xiU9KfnwRlzePf/R8jna7lfeitzmeZ+UkorVb5dYycuZGZrlr5foAe\nRnJDQHXtBu0qz6kzwZr1wiEjoGXNEeozxeKPpYoOP0mDwT/KqB5VSc31dPYy\n5WqiwMS4Nk2//IuzXFsJd+FsiumBoqd32tzOOmMZiU1a4ZqBP62Fc37BYU1a\nL40fRQ3fiwuRZ5hJi5uwDiqQ+UeaX+MD2BoLlNO1EuArNWLQENNlJMzccO5e\n4GUY\r\n=cMlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b602226ce.0_1578428138265_0.07272736946682512","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/icon-button","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"634b0bc586a024b3611d0d10fcf167a41130f2bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":33,"integrity":"sha512-3XVW6Yc+yTFgiELiKgN0IjZQ4KVo3QIVPjw4MvePKhVy/u9l7Oj+X5KWCCP3TGbWL60Grud78rA46znSU4WYlA==","signatures":[{"sig":"MEUCIBXkaegLLF2IZDGEPTRfa+XUD8KrI250a8flBromVgN8AiEAl0Lcx+JiFvlSFYVfDzUHSZG3Zwk+5KwwJwBZhBiKpm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeDCRA9TVsSAnZWagAAfHAQAIqyytyTT0RWlXp9Bi/4\nWnDKCWiSneFH5FyCrH9z++pVk5fok6sPt2w9bAXTAWykF7Qzes3SJzvLlgxv\neYtwLDOVe0IYK5/A8aogp8dPoFdat9YPOcyFALS5pCtWl7XMbTs92AJjvoux\nu7KTPlSwuBIjj+7jYPe3Hlft3LLYC4M18dCqqnjtWN44UzyD+6N8o/nHQu51\nfeZA3rEvuU8Dtq74ALsno3OLtuLgWsWvm55AG92/t1TC5jgZhCcd8CP1zSKY\nOG6BFsvP7sifKhaJO89oEU+SA/BAYItk97VW+D08+wsBGipZWZCMlmWxVW9k\nCEDluHE89AFGd0I+RBeWlKA4/2m4UtmcBLNM1HQ1RsjR+eTfJrCgu0qaB8O4\n/SX8I9hIHLazS2WlkvsNPoNGfz50OiySASd55WS6B7P2EVyerArxM8w0s1J3\nbwCCLoiceSaX0zB/5bJyXdHw1F7kF+ISVoS/TX7gJwvH8eF28Rfs2TeoqFrh\nAAyKEsFxvoSPQjXqiTW+UlFhqRrST9Bc1k9Df6fm7H8P/g1js4w9ytfgKW5G\nyPnS3sia7zVXNRf3ks2DFFAJMB86H1DfhG+ocDAGUKAzawsJ4yu5ouQXA+MT\nUhZmyqtAO8Ue2pLXrZWdUCI3cvb9Y0bb2g2nHk3yXhwZytt2HDZmhW7p6x1o\nu1kz\r\n=wezb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b2d2dc08c.0_1578432386922_0.3597499201779142","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/icon-button","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"797e32ee02f8f9e78aefd52d9ed86644e08cfc95","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.61f2d7580.0.tgz","fileCount":33,"integrity":"sha512-521GDO70ut2MvslDcC7BM6lBewV3eKqBRbVoluB2FphpHPmeFjC9ny1qR4mbqEDlYKciX5R7dGjy2m5lNR596g==","signatures":[{"sig":"MEYCIQDL5A/RRmT9F9XxETMcviyOH5wIeTwZg248rx3e16eaQQIhAOEwySxOFWG4fNGawq++D3EJ+SzzgVaBGhfrI+P06OuO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqxCRA9TVsSAnZWagAA3IYQAJWnoOo5t/w/LpmDmlAs\nQl2200Qe0NnaQba9hYndALnChYN7lYkRYRbH7us6yaRoVURU75Jp35qAEi79\nw4OUDBT7hAhlq8fW35OI4sInKnaGCq+R77xgrc2pRpkQXJJq3uit5AIco7Fb\nOwD4ha4eGl+9H908hxEideKzVXuJv1UscjL4PqB+hMvGh6SgAJzO/Zs8/Hye\nmnqeOXW4usIjYpsnxaFgRTiMZ/aADPUMUi2GeIVTMnCMjp+JDiUc6RmNygZ5\nOapfpJNDk5/+gJzzrX6wOBP+SkEg88WpuW7SzWdigEbYFN8HkjEAsUn4JpZU\nz28zvit9T9VJynBy6lHcmdyPzHGINKm0fulwv9JHEVqmU8JzOtyBFjXzFFWc\naTX2W4zOoki8Oho//SOwZ+uTOGwuZQ6DXJuzKDQkO2N9iEN567u+xJ0bcgfA\ncP8C+St87yHRVadWWgGZlqTgT/qyfWNsITO4p6iN9FfD6FNgHsw4DHyBFR35\nSYzCoN1jERMsncTVr50FlHjSqe17djQuJB43m8IyI5VjZT7PLs42xOu+uPed\nay8s8avLrIL1DMVXRdAUm1SK3qTRYZyCptDKQ9yFA0Yki7/akarxV+aTRFfc\njpxgTWvQmS0LdaIxUKcZ/iVUi6TNIA6Ua9UypSj01V7eElzK4WgMeEfPhXaK\nYl4G\r\n=bgM7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.61f2d7580.0_1578433201132_0.06949637167420941","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/icon-button","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cb14cf47ac36e3b9b6ccdb780561c337e369cb0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d1be53a2e.0.tgz","fileCount":33,"integrity":"sha512-HADIld3DQJ3qdcZrYQB1ljlHxjcKMyPXgws3BYwyomMbmOf6QJC3W9Tnf7EyL/gmI26mqGOj/UA1gnc7A/81cA==","signatures":[{"sig":"MEQCIEE7OEGWPDfoO9tluwI6N8gcw1xeWnphIVym4pPE7IsaAiBfx7Vxv6cUnlMFfYbwbffHeN7ZhQg+2jzMi0CdWB2u3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQN4CRA9TVsSAnZWagAA54IP/jBTI16ysR1FOAQpYs6N\nbUTZTA9BC5njmEG+vbw82bUz8AwgEcTnz2Dzw+6iqD2z/AOdPEGN3zcODLxN\njrc4Pmxd162QMeSn4upXaGKkxh8PUDFZyGMWS0imA02oWmGLufI6bB25zz/C\nyqiMY6MWSVC6GnnL3cWyfwBEh1dDUWw8slb5ULjxgUE9ohmblic1lNXlPKQO\nsuhhTCQ5Q9kbJY1n8SGSX+vKcO3xIQ1/tfoHs8HsPUiWS4MhFQVasMx8YlZn\n9oEFi2Nr74oPKTFHo4EfbgnTKV+14bjY50/qFKnSmyRsUnAVrETUCuS+ARDG\nzFKPz5i4cV3tm5UGr5psMeRf6j1ivBwPdsYtHt92xkWCn377yiK642sWqdOG\nLQvtJOUIpWkqpN1d7gpoW/idI59r1mtrgM/3b4B/qhkIpY2i+kG1VL6obWBJ\n06W8CAA+v/8Fr2CQMHPoGD3mZaKNkMyA/HKC6b0oyWOMp6GW/KKMakwAWAob\nuZ3ksnlbun/8SUwn6DhPWqF7tI2LFC46/uaGNgWwp3e8Bh882jKAPV3wqcXr\nrlKLGoij7VxhXt9f15AGAF1IQYaJbvzqKMuKr2jT25Mu/aZRmcUuCXIzBUu3\n3xQttpWltOn0+SA0MhmjXVH4l2xuFHYzLkP2QTPM33Qgezmxi04Usar+25Od\n8yLg\r\n=5+D0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d1be53a2e.0_1578435448330_0.04656703312432464","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/icon-button","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124baa2fa34b3f94a35ad768afc352158c1a2292","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.9b0d06e32.0.tgz","fileCount":33,"integrity":"sha512-KC2lW0Qobjt50Eic7APgPp+zDQw3i5ZWXQir6h9rp6gZ4cC69NSvKwuK+PL1PB5WADriZ/Yvy7LQw4IWGRQhlw==","signatures":[{"sig":"MEYCIQD9vdFRnFFa7LEi4V2aDcXFW06GomyR6jZri4tK//CzywIhAPpBHOe07KMr61pDTF5fGoAKpNc4sUQbPWl7OJ9vyob/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQP7CRA9TVsSAnZWagAArvYP/iIQGXHZkKyiWU070iVv\nw9J64bdCnitTSSNcInpjFjMXOGePQxexAAjaaFonIYr+2OX1tYs6qlB6Ospj\npkYy7pJtoX770FBV4NmsYRk7JUtGCthLSLtAirzZAW+b6Fz9/NQ3a247tFqp\n5EmFX48ko7m6ATg0DF+zQIM2a8Mx/j/BdSnov6UL++Xq0pm99Y5U6sMGJLKa\nd6h1mEBhk2yMalDvvOx10bL6KYF5en6SEM1d4Y8iI0DJ2RuYSmxk8sHfS5HE\nS14u8cJrS/ukjcvGsPGZTRTfqH4R5GGTJziedfHbX8i2RLtDKSGKVEhKK7VN\n9hrlED3K898lVRrgw3PZAi8/XZUydXra6GbGqwoFtrGQ8xVGIrwyA1R+q6TO\nKo6C2WsHlWD5VGNh9zaEtsie+B8xIvTD8a/f/v2sOpPBGYIvldCebTVM+Ofi\na6YcNNEbn+AHQZS0zgUL7a8fH7srVTrl7hkyEmo75tW+cG3RGCMfuOwGLk9Q\nPe3VrNvmBIzG1oNn3PqjWnfQO1XaLc34SMuAWAidq/7KRsHQ1Wzh0TqFlbEW\n6w67OCcOvcyjOCh2IRIyCGJEcNuHO7clFMEjesGxL2K40rWVy6PKdQatJnhq\n12W7MEoLtT9ON+z202Gp2toVpVE0weSdYFVMRNJpwIRS2VNua54cMiZX75vU\nzZPX\r\n=PLWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.9b0d06e32.0_1578435579149_0.3948578894121473","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/icon-button","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7de87c76fe24de917293293f4c67e6538599e23","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.730c807a0.0.tgz","fileCount":33,"integrity":"sha512-wRsfqQspE+XFS6x2SkMAAVONtIKNsqoRlpWnyO0OgMdQjsuk2TvPNCd+9iIC1TWiwG4YFjTC+COtalKg/exe/w==","signatures":[{"sig":"MEQCIBUpCtQ+Z2/iHvJB9Oggx9DEnIpJe+tAvWZoeCZVeJY5AiAUQHcZmfsPcjuysNHzuf9Eh/PTURkNY3JZ1a2NDcFJDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRbCRA9TVsSAnZWagAA1IYP/RzxIp/IEldM7bvOkMWB\nOZ0Fiayr7KVGTrbFzP6s0QEdumbkFs/wUz0I7wx+bMzonmHsiXn2KDvYQhx4\nV10QG0bCKE4luCapTbGiDPb2+EDgDrbHIYmN4VgIGS6OAv4wd50q2eu4bAIO\nF1poylvMonysp7iLUNuRQL/f94ZJEEym8kTiLVGWE5/q0WbI8Pk1NEuDGyJG\nvbddQIPhU0MD1PdZM8Alb4XhGFKq9Dt4KF44DGgZVQFK/cxNtn7IioqVUTI7\nlqa6Fmshh0OCLnsd18bZzqYYQ8mACeX19gBSByvasu93fjZSIohduXF4h8AB\nE/Iib0xkGiMjrmR/GGNm/5dB8zcY0BxIxuI5CmLUBQgb8znjo4H6EFpZPicL\nfUy/q1SSNIWZME9SZz7ftCR23y/i24ekl+OEAeIdsMrCdM7dwO1Ju26Z1n7l\nBr12gwD1y338ZTxDWism7vznoUX8Pwd2wGwSOQvvGkzTR0vaDCOiwKCf2nJj\nlpWXP/LehbxpXCTWImUe0PYOrkFzduxXaGyBmtuDTvTly1SDFKWsB11R0znK\nukwoQ9rWe+xFy5XyYMKEdUpL4MihZVwZEm2VFmsANvzKum3Dny/q3Seofgaq\npS4I4w6vaTETNwwqGWMJ1QJA0BbKkPjnzslyxS/nd9cqjT2b3cIuPFq0WlsS\nXQka\r\n=xcnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.730c807a0.0_1578435675341_0.6787994966631379","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/icon-button","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f6688a8a32cd596f7302f506e1b0e5008667b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.2213152cd.0.tgz","fileCount":33,"integrity":"sha512-ggScyvQyDixzEVsaitebY/AsavQMgrnjxCBqAoO0MCsMz9lQopirGVcmkiphMw+usMgcE9gJpKgGPlwJ+GsE3A==","signatures":[{"sig":"MEYCIQDlLWg27V8FMXQwdBhefeXI6qysat5cpOI3Ia+enBjyXgIhAKFNeaeOC6SV84PaDfuGrtm/2KIxmvRtNMQuV+f+zLzz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/YCRA9TVsSAnZWagAAx/UQAJmSBxRs47twMJBfxE0W\naSy6TzpFg0WKx8icMw+YEqMiN9aqULDl4Yt7uAwfPzqPXfxJqtk7vjYyvXQt\nrnxfv7l2uUQg7EFIfD88p+DEwV/eFhN+Ueto2HyGB3R4//d/khM5g5VsH7P/\n23oVEghJsh+j21b6NJcJ2hB2LduV9oUPUozkzqaNYJH/aQNQOVOk830/FYbd\nereunqys/53JtIdT33MN3LKf8O0dCTEQUK3ghrQQI/KD2c/kKGoDf23Hi3Ev\nBhg+j4CUEMotWzT7oW/Ydqfez8UnPdVAW7ayidM2v63zqRYyNo/b9lW6Nw8B\nj0A7xy//rym8xwE7M6FTRqMUHFxI6szd8ozBh2d6yqdaXjJP+Ncg/l1vNxX6\nBjqc+XEDmN/Xv6NJKBIb5sb4FFhdJu9qKIQgF3Y/nlREoU5VM94GAskWgIee\n+nn7UgP5nqt3xe0xxqx1m1woUfDkQNNad2BKJKAgEWcOk8biKaztMYjobEE9\nPXVrK6dBn/BOpFM9z2PWLVwJY12Ixt3aS+P/DvpRaI362kPq6dLoULcKSSHN\n34J1V9B4iOV39dzuqo66iLIzMcPKYy0HsN5rUtg6VdFtlsaKiWX58keoS7Lq\ny0m4w+Mfa5n3BYzHsYSZWIXs3TnueN3bO2teCf5xow8ztPj1jxMLdS+xGDKO\npGV1\r\n=ghmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.2213152cd.0_1578504151887_0.18909463861124465","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/icon-button","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d00a0db89827600b193f2975335553e59c32d3c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5750f7169.0.tgz","fileCount":33,"integrity":"sha512-UkXefNyKzwaI92jW+4jD8MUoYy0yN06CJNWPW9d/Ubq5nIOd5hzBhPS9nMe2SibOLTH4PDfx2sRSz/yTBGoPww==","signatures":[{"sig":"MEYCIQDlrBAwvXO0SQuUwmIS9IflvraJb/gHpyP2wyrOfKoTfAIhAK9X11pOMIMEXlcCmwwBs3wUKS09EBLCkEuVtuGyoAi7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhf+CRA9TVsSAnZWagAAcDIP+wXf/KtgiEYnDgd2fjVO\n0cG8jZR7f7/xQQEWu3ivVtXwsxzESOR2Amn3XUfQ6eGx44SnUku9SIFJlUUe\nyo65tDFiU3eJ0mQbIzFDOEOJd7cg2JXY3p/yBkETeT6OLj8ibOKyUUoJqcDn\nhDBFSWw9wdbWKqP17IMuN+ZxIDjigPcAnpxyjmvxZTgxC9a3t5P7amjI4CQL\n3v8u4FMV7igHorIHkAM3Lzu1cbn4UBQiOorNoshLOk9qElSGDTMv1JoyruxG\nV0C9C8uUZ9T2068Wa6QElqOsdvnSkviY5QkR3Tr3eudymOIpF2UVez65s1Jq\n8EJKhQsy8LIHFC6BDAqI+NvT0h6Cvn9dwDl7wwNJOtqgRi7qg88XErimwbtU\nUU38pb8Q0uLv2klDAAo38xan7nmJNQ3bu/Mt0Gh+biwekYY1GLM8WVVg3991\nqa7Xw/by9t9iYfdIuJGczSpUMZrarPC2lu+lRFTx2vndI2ceVg05Bu8a6eBj\nmq0bi91DiuLXL4opxCRXZ8Ufg8SIUq4JI4v8re+ZE73jTy+3qAFbsOQkGDZR\nexx/wOAk6IJcUBvtWloQBC9e25fLOrB81wm5bn7Nqkw3ouAdGtwM/E8zcP6U\nh3iD9zgb2XPi8tqZfw8o50dZcRh7JDBiJf2+5EF3MpOQYKMMYlK57URl2MOg\n3Emy\r\n=7rL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5750f7169.0_1578506237965_0.04306597732993689","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/icon-button","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8b55136eb043ae5b15353608ba161b8e0b1e57a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f7abc7a43.0.tgz","fileCount":33,"integrity":"sha512-S3E/r7Oc0qTI0aVUehRbvWbjKYngEAorPguUIVnomvcG2uNA1X19SSKD1slkVnu98Su1fZw2D2mLnNnuxoKGwQ==","signatures":[{"sig":"MEUCIQDgBs3ewTLxoOHrtxJuuo+HPUnWewBwZKw6ObIrwt8wygIgW0VdST9GlmnQPzWL/AIUKlJ8S6M16cdr/jyAVD7bzPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8+CRA9TVsSAnZWagAA4GkQAJDXKA4Gtvhnk3mW4WK/\nR53/T/9plxBpltsV8vI5O+qjq1F3t0eW/J+daSY48NJxldAbqiLyF4t6zLvP\nhIXBm8EVIyCsOKNjpvH3h0mErXK607CzLY/JoqsvcBeabu/Vdwlaoa0QQJQd\ntzXN5un0vkyz7MfJWiOFiYUAqmQOVAkFrtZWlMrX2ijA03ihpUVqINK5Y7aL\n6XeQSswerFPeHQM+nQHfEWa91XBh4KqJ414DiI4279b+GVvzolEy3o8WTQQF\n8Z2LLpPXlQ8oZQUsQmruV8kZb1oW8ALR8czN9RgnjEsk2waDdwrtY3ViZxVL\nbve/8Vb9U8ExXkgQQWzSDBK6LpqSgQPuuJFhIthr45yH0fdqxwxChdfGg024\nqo6zAHDOp4I8SHw9f4dvVe7Ynz5fBaTXjLXW5DqhWvCbvp7sZpnBv+ireP2+\ntPQl7b/qUPSUlrQXvwVssmKGU2undDQweuuROB1kjVcCbEsnIVyJXjPXqZo7\nYm8nJtu8SMGOWmLm1kl3sFotNzYkdtjI9clLHIph+g813zcmELl49lZXOYIe\n86PwpxYZKegXkzKzjAzN+kPTM4hwkviF3uny5/34yGMYg/aRXmQfpUV1XSt/\n4xDrbpkq59EFU+UxoNfx/pRbgCEtS2f5m3z2PpCem9zhQVlOq08cLW8Yirb1\nIjbe\r\n=YlbZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f7abc7a43.0_1578508094315_0.26542849024030146","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/icon-button","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d561f2cbd1d575700185b4238e025c5c1000c9b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.bf7b4a061.0.tgz","fileCount":33,"integrity":"sha512-sZyJxFsdzKrthOxFaXLQt+fbnvXpdyRU01pBkPX+aJHP3oESbxggeLZ2C4jtdsC9RqlCHcQUwpsz5HYHDU50QQ==","signatures":[{"sig":"MEUCIBY5uAORNd6UFImAdUPNjgWZhFjM70myXH1g2zF8mkL2AiEAtKVMb65qiGqbif1+i9g4UyNwJ7oiMPbBYo3THzmDQfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJyCRA9TVsSAnZWagAA9PIP/Rd92ZHJmexMKw+Hi6D9\n15l08O5DokN/VSL7Ry+FnLue9UoMrnErMt/IfyUGxJ8hc0Mqha0UhhIqe5Z+\ntBFi8yXd9F9KInRcI0muHtZ2ESS99Ey4QmSY97XuWttXEo32TMUAY7dIRpFM\nPDDL404NG4ngwZmt9W5PoQZrWekhncODA2COGHvduK9/gptH8L2+YN+A4wMV\nA9MIBcPEHx0w/VgHgLLn7HA+h8E75vMI1j8fY3CXZutYMbIpcz8AKmlL6uoP\nOvycogRciMufMjr+Trep1JofFK3EPzKD+fD+M3r/er5Tece2ZE18+LT1Lv+V\nTkEAiHYxnfAUlOOfX2vlOuxJRoX4UWEIGaZC7ckc7+QZM9tc6GHlws10P2YB\n7ztwy8FEs5abRId1hpMeDRphzCaR4OYX38S3gcoCcZIlugyGyxybwOd81HAT\n/jCitMIRF3ZO3LxLpcsbL/QZP9sTvz/iVO3WoV18/U/R4PjN/n/mmkMhGX1W\nie8fUewDX/k3mMAucq5EKiam8evppjBRKbNF3BSKSNuWBTCEpG3ngTf30nLP\njQNvjeO2n0suYWabFnLHjOJLNd/7vImCTJ1vaelDi83HHLMYv5AldSjfxlb8\n3yKPCjwWmgZGBdl1nAKXCaoWVdLtOIaohRtr+YnE2D5R9dxGSCUE+iwXpB/l\nGTmo\r\n=7MkQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.bf7b4a061.0_1578508913671_0.046937435961583285","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/icon-button","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b4de4b2ecfe8c873ded471563e2ca307febc066","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.784fa7903.0.tgz","fileCount":33,"integrity":"sha512-KErVRIQmlrGg9EBaLBWqFX74bP7aVtyU5t6BAH0knI/jAr4oY/QyoEjI7WPWuzJ9OpuGUCYThFcAFETlKaEw0A==","signatures":[{"sig":"MEUCIA1FnxyYBO63iGdRn8gxVjZsSQ7LWzySr716ScqfXIJtAiEAuyYqJhu0gsMXS0TV9s+M20+NJfChOBzft0ZrYDomlOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikvCRA9TVsSAnZWagAAWAkQAIEF70+lUfAGYPEPwjqQ\nX2p2+seInpWkGFxTvB/iWkemFEyzyrkedNnReSf0DA+Pa9k5jcFNfjH88xkd\nxLEXXAomNcBWe9LXx2AKdOQU4DQ4/zcrfSXAPjhW/Nkrs2q2wneJYzQa5A+g\najai3WyTjzRBNtExSCmwEjk3mOhlgEm3LPGfDDD8QFqJfX8kXsIa70d1YsQy\nHes1e9s0wMvKUkJ5F8fLfJ4l84oaO7TpVOPssXKN8HtLs50fzwYn2mCrF4v1\n9/cGmWV5gOlNbfICMsZuv8jTAp9Lk5+dM5hM7t2DMvNlDtxG4lM2D6bONDLr\nrDzmK1co35qL8aC0hEXWVJBzVA7dnrqkVmd7L9vgcXyHi94T/sppoVSA8A78\n62eg0mGUhG3q3wKHbeI/Ij93Hp+5IGg6ne6rdnURTPts5WNAzBY8T2wR27PY\nhb07ZrP9oW+9pO3nu27OK7c4HySpeDdpdRWhciX+b3Zbm0cyh2YcK7zMTtL6\njTexvdsRo1OzvnvsALQh6qrFeUyOnadErsR7+waln+UcOQ1xGLI3Li8AzN+u\nBGG5xARlBNuxA08uYiyUrUfL6v6CojqyDiQuefK0nzJr2tFO26gdU8879OK2\nu5G7WabqePJg66+3VDWaLIaRHzG58Q4VgDYqXsPh+G0a9UbvMaH6SpTZWjy+\nXkhx\r\n=7L8f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.784fa7903.0_1578510639590_0.3943846014748018","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/icon-button","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfd8cfea05d9aaaa19a192e8e351e9a452b2f2d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.823c050ba.0.tgz","fileCount":33,"integrity":"sha512-wdpabg/XZFs2J2hBt/+4wvSw6wN4ByIt2S3iR29VaWc/I40BssTeaSH+22zVBdgsdPwRu8MbY3HOm2A21gEWFw==","signatures":[{"sig":"MEYCIQC2jRFuw0uQ6n3Owl3SiWev49VhyOjZdaxZbIH1W3inswIhAID+KWkxBXYfbDL5K8DKcMwKUlhe/2fvXe6jqs1ivhxa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdiCRA9TVsSAnZWagAA2ZAP/3aRuqGhOHnTLJAI0iCa\nlLL9B3pviP5TqC8sSyuWoKrBvH/zqMW7OjI9uEsOcMPjgTJ85b/BWx3A6WJC\nE/nSmWD3OZeU3MUTwIDlgeQszTQ8yOsl6Lvsuea5xf2RtRI9gRZF2s/eeUPo\n+XYlCV09m31e34tgj1pgE3XIqgu6tgSOWxLU5pXik35we7KNbcoydIHzIOmT\n4OcPP5ZjPBzjdMXnVG3TUsVao9d9eYbjYrMx3wk7rgEnz/ZQUNKBN16EdGiA\nw0SCj8U3s3u7SXDxAYBkImRB4aCRzkuI9zkA9TUjIMw0b9KGSY7y31AUnyDO\nBz9gQbRxbHBYs6IpgkYDGf2mereCay0P5aqm+17FTAe0GiE5wLV1bzDd7RR9\nsA/2M1VMezlLxgZ2Ju1q9JtNHRNhOmYxhKfzucHZ9A6kwUnHAt5dGINjciZz\nXB/0lkfX3k1nYyEAANaeUHm2Vu4utc7ZCf/Nrum0XYljSudL/t14JPnKbdL9\nvOxC3p5VSSakBqNpGQ5F3Eb+L4iiDOJ4VCTVHhZmoOx7rTCnBaY8RRHToOBv\n0lXNqHHrKK8uKsSjiV4a4LDbtWSlX00PH0qbhe3mt+hmcdBfFYhKEmG5ECHf\nxRratF1/X78sL3jJ56S1elOAaV7jV8Jnfx+qqAnrbHqkMZr+NGsmeUa6GIf6\nQudB\r\n=zgQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.823c050ba.0_1578514273676_0.2107400903758605","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/icon-button","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"074ac88d071a941ce6692ec797802672e8c67f43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.70c708dee.0.tgz","fileCount":33,"integrity":"sha512-q4E5hGBoPW522MWz7JiKoUfkKpPJk3Jdz5UPvnM80AnlcNnmews7W0UZ5K3Bwdxes46FRTNLLOEVcyXgK8hlsQ==","signatures":[{"sig":"MEYCIQCrWQowE9wjn3z+nXlHK1fs/0+ih+8vRA+uhsiA1gSVYAIhANrY5vurZ9c4KDy5vCt+FfFSblNL2Z6siUdMJsYwerIf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoSCRA9TVsSAnZWagAAwlAP/jLY4z/PgTwXHRLTw/HH\nUC2mSBWEJTPQui2BA79Zr9t/uHhQaWjATR3QNrNzWuhBvuXZNz8s2BqZRJgs\nOeQyqhvMUEtn8T6nekTYYgofpRMQsl7YZLg4ocs+Vz51Rno7QVt9C7j3Yads\nBrkyD2NyRQeKY79ry379cUiYNoxuJU9qcGTvb+HArMpN01rnFcqeAu+06X8j\n3awDBt9JqUV/3mbh5yTZ7BGT3vZOfLf2flkT6uh74rcykHItlcmOeXLzqnfd\ngCbcgW6U1Q3IVx+7sLuK53gRug2D3/EN9GsQt5GNq4jKWsaO6NaUuaP9P757\n2pm4mZAIVsNy7ImtF16jXtKPIqeL/dnvIziWI/7tzwaZlK1A00R5Qz0wYPOp\nOBT5afGGLRmjyc2aD/D+F7bYIegquXNAPZeiiUqMmlnLD9aKq3o96UamKwXD\ny3jH8fzwc6ome9a023jjMSfYXS63LG5UlhRZYjJs4nasitlKsN/ucGbpPwSS\nqmNl/7uolF+NyEmgXOZ0kRlU9+lPeIlM94D8sjvapcVTSS8QLFrKIt3BAJXm\ny6H5WuuTKa2AsnMzogPvfC7x5HUMvxHQZOAW5x0MP7rhyXB3D1oKGswH1wJK\n8q+h6gD1YGERuh2rGGllhn5U9Q6MaB+qcyvg7FKiyZdkB4fh0PqTOEzjEx2k\nWeht\r\n=PS3K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.70c708dee.0_1578514961699_0.5177928540959191","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/icon-button","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f264926a30c2a9ee54799b005a0bf8b5c84e87c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":33,"integrity":"sha512-JRyLazLNxpWz0zz7mTNeqAZqJBy9gZjK9xaTxTbcGtxa97x8ylktFhIDRvyv7LxVEgcgvfGhh73dWVLsGdaS3Q==","signatures":[{"sig":"MEYCIQD0TrgwaF5mB5jpcg/E4ihy9LqCdZmnSXhgE8vCRHL2AwIhAL4fMqkEzbb7hUhygMt+fvz3sOLcpj143LB4P7n9q9UV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzlCRA9TVsSAnZWagAAvNkP/0Hkk+fPy5NsWQGbo9V6\npZLEM9EculQfsmkvjr4raShLtYmszAvllq3ZXcpDLwr07BSnPS15L5svhUXB\nok/MT2tQqzqYfP8CsfPWhxCGqx5sN8f9IebWfFRl1WCUVey7jq32YaTvJ/KG\ntlOzowZ8Fpxi3dAJ88B2bWrpUfPvDIiVr6GongHtC7DcTJqcNbYaX5CNTwvn\nDR7yF/qprWyhHMZdHsq4BicLxeAsg5TgY6Gql71Tg2tacay799OM4dNxQ7Qv\n/iAkeBRZar5o238TKRRmXWthnef2tY+wRcb0qB8ZNwFI4upnXjR4Lsoaax5I\n1x0oA3+gPJSzdUv+R/ad8Gus/lxBxNwAfJ5j+jbA1dXSGF+Bl3k+xfeA+KUm\nyAudGLLeyUpgd6aMfPyoH6o/+oEBOmTRS+YhzzO2+yaSEi4nNzaLCYe6Nfzv\nZLqL23dK4PxBUctn4lPNCDiri2zlpk0TMcL8k/LimvhsqR7NsyR4uSD2RbJM\nuidxV3Exu6+VarI9fC5pwVqyvPupEibKfo3c5wpAL5ibGRX4E1mF9ui5JxF9\nxHCE3qHZiZaLFTLqby4v+xYlaZbaz2g/TDgpunimfTsEQYRVLUwudrl0DAC8\nuljFzL8z/IvR1hx/sogJr/jjICfUj8FN/YuJrQ954rRyxX4kXYTXLZ+ewNIp\n/Y4J\r\n=bOJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5ed9d13d0.0_1578519780829_0.1718968764743325","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/icon-button","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47c6f6c0200b8a0c2f53258ce4f4e461a44ee3f8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.4819cc7e5.0.tgz","fileCount":33,"integrity":"sha512-HC0+8lB6qp3HnFvABCGPTbmyEpO1/q1iKMORjGkeakVE1tDHZzNqYaP5AKdW1VHOOAlYk1iGgnp1X1+N7GjsAQ==","signatures":[{"sig":"MEUCIGdt7L//SjrwCUwdUyezur0XKyvyT9AfRMwwH4tmgj/6AiEAs88O474MSp23Fna4v170xqR/KdMbqboLdKwDs/dN5U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCUCRA9TVsSAnZWagAA0hoQAJAOCkWQPLXxWirUzaGV\nHQH93EFoOY2apSauaraSRGVC10YKa2oYMM+fKB9SywpwQzhXHzqt0NoesLNi\nu0faLlu4n2aR+h5z8ypXVBSeRK+pB7lqszwSPFw9t1WlUTHwy+RN8mLHYkj0\nGw9UZnpKONTlh9ICBMJ8kX0IeWwpG5+8d1IjC8raJE8yLZAyIjU/Qnfthh2m\nAYBNGfj6ovpfNjkGTejh7xM27Amg0qZKZrJzzz5+DI8LPJYnnlUxFeAk1yqJ\nvBNUTXTeYRZdizzCnS6+2pJsnk15D7FHGknyqAMNpI/3AJyZnT7HivThzCaF\ngAdroHido5H5Gb1qkbaAkSmFTaFTwBaNY917V8Vj/bo3LeYINY42hAgBMd21\nmkwftsEOwvCJ5FLll1KGH8IKfJ2C1HWsrZgbNJTthnJt8FWzyhejFkdoSpA/\nc+5t2sGSooGPW4gFcxI5NwBwN3Mwe2h4AwE5WcFLeI1W4nl2jy5OGXgrc0sM\nCgEVevJHdds5AvCstN9ZEIlnR9AVKCeklbHor4cDrgXP4cUQpC5cqubgMImn\n8JAlX6z+x+A+IWR8TKzlxs++2JrvNomgSujsfiAAUxnq7hP08OXnadmZkrhA\nUCYJAcMKgg/L+OcTCH0lvp7ZnRSC2/ArsvkMl4uJlX+eWsaejquaydyDX6wA\nSCio\r\n=ZfFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.4819cc7e5.0_1578520723876_0.8163017130591341","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/icon-button","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a5170f8301da3663d814ad85992ab00337199f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":33,"integrity":"sha512-vmL+ePYy6VGbCCtv755sxZd+N0ZLtVTlEGO+/xyF1hjYnUJH9B2Z4MUD1SVBH+EnBeAbj2XTmBKZHkmbj5PMEQ==","signatures":[{"sig":"MEUCIQDCq9QgTLtF0k0bOmkKOXOPHlNGDRIvnsbrEmDipqATpgIgT+6tn92am/ZMJeUGXdT1dnizWuqoa8cnF9Ws2I/uo+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTICRA9TVsSAnZWagAA6NAP/RxoymQkV6Pfrujg4/n8\nXF1ZVHwRladDkFuTASmJehmAKEaUENoXCjxmjZPxfyF9DMOkETDt/uJo1gvm\nQaEA1KcfA5WWa621amWOI+UG28FH3S74JMcWHc5rchaHTxv5scuLwUbKHLsL\nbNK+nwWe+WNi/ZdBy4m3hN+DTWk5/aDMML+1c0g7cnG6SP52OWN2rxdlQuT1\nqnwFLC+2FeOVqCVI2t32KHtxPzksC6JNt1VxXrFJJBAV5wqHs10XoefaVqLK\neCrfMj81gGj6JLW3EjesVzFQRucw7rYdIns0+cwn+yEbzJnkJQCeolHG79SP\n+w4caR5AISywUD89eV4vY9Um1AoegnFli2gTWEq/iqiPBCxmsF/JatEc+VGl\nkHj2qV9xw0DuVsqkflzJHuPMXuGAhJQF0zs5aLo+apw1V4/Cf8F+Lt3Y7bTv\neX7gVOfoif9zAtMxOX2k2204/2XxOrbqtp/4SCheY20EbXp+JHJ02iHZ4aGE\nnJWwCNLLozwhH0EOGVkaEvPD2fecuHkMN//TIvmYAyz29P4RBZUENRSFQ6Jz\n1ocZe4Xz7KYPdxJapaYphtcGPPuGvc+WeQAYdKJbGJ8bB9BsNORtMwpagjRB\njn5V2KYpBRHk5ckcdMq9MisT1tJ0gg3aB4yBJUoC8WBoTqUIu9h/4LD4i4ue\nPT5H\r\n=f4rq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.fe3ffd2c3.0_1578521800145_0.7497546127696753","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/icon-button","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17437358346cc2b81d1fc95fba2326ea30d70e20","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c0e850090.0.tgz","fileCount":33,"integrity":"sha512-78UcFTOoRnbL5QrWuaGVLT91lYWV3lK2+rn7JxNQzAOOjqzCzH1lkMwx58uXrBFEuAwwsJDcgp6SZmhRzW/4gw==","signatures":[{"sig":"MEQCIFQiK+jYZ9S+4fUaXRvH92Ihii004Mwgk/FQr3/RKAOSAiAJWhcH/GiEKLdKYbRtK7JsOg/uIaah7gU2bAy7gKjDOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZkCRA9TVsSAnZWagAAjokQAI1uToT/1uVPef63E2M+\nWoSG8gr3awDTyGaix3/8zz7OEDPvbagpiLy0+KRSv/PFEhV8DTVMBhr0DHvP\nDUzzyhGQyaUoRJMGSQAPqcYjDWO7Y2bvrcY58rF1b7/tlbtuAh9k2MEWP93N\n4dP5wbVW85mmKiqqrcx5MPsLrzQsGdts/NkluimwbjqMtMocA/nw5Qn1+IaI\nvIYbuJ7MBbVGOlFXk2rEmFGGkRkwqCoo1wPTsxXpeGNQAMG11TI0SGtGVBzh\njI7pzj558M5DpFX021KSaa+DDXWqaJk4yhusahDG9Zw8zv1ffNRsewBkZ3k9\nYIYwT+8/qwDVMStwodLEwWMpnKEWBu1Xfemno71rrmDrVDmJGqUg7aDK5n7n\n+xFndnXK7aXsFMKxmflhTvo0IqFpu3au6cLlgGd1+bQ5tr1aWykqAVvhANLF\nieHqRwhoweUd809O4cGdhMhlEBt+Bp9O9ZJaIrjdIY3XbRyBmKQcAFMxgiUk\n2zxVTUF9nyu3eEUULqJ+w05nII0tebm15ByJ1gFV3PuUahoUXX3Eca/lZDh8\nAMkO4EJ96BvtMJEoivNjXHt1bIrYBtiakbTNnA1aBO4/zKTU3ZRx6i8djBy3\nI7q09fiOABAZl7tTfl69yiiiOSNlYWxxckRdJzDDXVzTgX2/pQi5An7pVEWK\nTUwt\r\n=HBYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c0e850090.0_1578522211727_0.7601477506125176","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/icon-button","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c769da37466214683d7b847d51cc8395c948189d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.615f86f38.0.tgz","fileCount":33,"integrity":"sha512-M/j6ViX6YCto+VeVSv5gJEBpxfnA9pA8PtaxCmObFKkgxAA9QQ7+VsqWULJx2XbbSq+VnXsI39TlF54iKoBX9Q==","signatures":[{"sig":"MEUCIQDz5mQHLpH4Q/EgEQGAnkCC2/xMcI5MroRVBMyRJdCMkwIgFzwUmy9FW4ZP/u/rAFtjdp5aa6nckhKXibpk9wkXNBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpsCRA9TVsSAnZWagAAS3wP/R4gmlUdjHmkXkdy1Fgk\nrCW+FkeJeWbGgu+XkhMDsNKbIGQ3dfv66ntykNrEmoU88YCvqKiakzIh1Nqu\nm/cQvUL9wP5+Qy9nI4TGjDdfvu1WsV2jl+TGv9T+fF6jMKt35LcQz8PWy7X5\nBg2t6sappoQR7qibyKnAq7x3RmrVXBjfCVBCDLm7pryB+rXxMVg6dbbe8dMr\nPPcjdECfc6SjsGSOxfF+kn5JO+MS7icCn+LxSKsQ7V96uWKeI9jnLWvowPyV\n1K/Y5NsSr/tvtIsZUXuHjLl366jigBnhYPLbqTtnyQCkKi5Festhq9GHbNQX\nUL29yoh9tBNDpBc8F0XV0d4k0JH7Jv9Zvq7a470NmOJTiCFoT6+MSKE3ps4j\nkdTRtCveHw+1rmQ8wHG+PY9WKNWv7p9c3vZhMg9oJpRUCQ5FFHWWM9QuS/n4\nx7+TcgM9fs7W5VX22jfe8yMvaJdfglAkYPwPVnW6WK/fBs3NSTqjx5wzfcgx\nPAm7++i1rzUcQwo/AWXX0m0WNUuT6PDBKKpbvj7LqbfbWCGvcqkrHseFXiiV\n5smHq1Gb6DV2FbN0QVMai77Glasg5jcTWMbiIFcqhN3B6iIAeoFe7wQKnG44\nMrsPnPJKpo0l2LWY5phVrLzP5xEQl2N5acfHKEli2jUBiRkUkY8bRRE7Qtzd\ny/f5\r\n=iPQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.615f86f38.0_1578523244205_0.20002870908582215","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/icon-button","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d1aa78ee948edf95cccac7156d33eaf09d44bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1eb032637.0.tgz","fileCount":33,"integrity":"sha512-WQL+cLE07bMpfaFB4lEeMKQ8wY7lClp3AANCRiS58WxmucBObonwF5TiTWcQaSKMbt+OiTeVndNcOT2ANC2KYg==","signatures":[{"sig":"MEUCIEGq1VIZ6Z4wIPOWCAQhER131u9rVBnEBBGILyiCP2HpAiEAmm3gidNijjhPImTKWBFCkK7CyTNGpG8XksknBIk6qJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8GCRA9TVsSAnZWagAAcVkP/imEYjkL7oDBlHlTHJid\nzGpu/+QdX4ElNulnDwdPbeOxLN65aeSELbBx+CZ13EFqgbZg3uJjSImZVp9C\nRh5icVzDOgQrZpePBm/Obriu5pQi4GzyqUc8lSGgCFuuyQ+O1RtozGCaPQ4z\newVgHBgOGNMdeSK8FhTQPM8arG3wdigwDktL742ZT3d9g5QBjS1/9ruvUD+S\ns8hSbpqrvaGSXgJn7SC6lBeGY7uRRmZgJ8PfYM3IOGXxdRX8a4xEqKO28cVH\n7c9zkafDyrmXGxXQgG8Pwhldbam09LAfEfxwB6iruSc+KUDxnxNw7ph7O8iL\nu7X17h6e2OOFEFK0+1Fd9Jkzqsf9vaHcyHoDUkx8JF/R+dRukQ8cY9wgqHjU\nwJjbp/KVMoH0gDL+bDVBkHRu7LHXfLspAW7+CuJnpZqF9hiH6oDyjcXkeWtD\n6o8wgoha3wkJ+YSKxiAiXzUvMAEdBspaQxBVjRn2M25xLC7cRV8ASqPQr1Ly\nOlliMrSRMVzQElfUGFz0BnaeZ9MfjjuLjY2Mp5rkvtWOaz/PcJkRnAhmYinp\n/3kwYoet6J+GT6LY3neatph+432EcLTEIDzA7/we6ezIrZIQc11ak8hg/hlQ\nqd7gLA8KBBDMkWyjM+kMvLRVB4L/LsxOEP3avq5aGS2gCp72TkAnXNWnS9zY\nqiea\r\n=P6h9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1eb032637.0_1578524421865_0.47770130080466777","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/icon-button","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90c5142da2623a3dc0a1402c8fa5f90e08758f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":33,"integrity":"sha512-/LmCsMhqAGUghnBUadCD7nGnN2OshwoqCGn+LtOblvsIoEDOPKYNQ0L0Y2d+SA6vW/wC0EC6eSZFALanKCvqJA==","signatures":[{"sig":"MEQCIHE9NZ8lxw0J4pqHyQmSdlFuA036aSOgU9JwNin+GkI1AiAfPj6l4hq8+I5pxnPmaaYowDiGoLwxTGpBjvuueeA4mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl87CRA9TVsSAnZWagAARm0P/RJFY+omcxl6JWY4aZJO\niEvo8AlFNVeyYlpg8G5394078BaHxRpfb0jXTrBa+pPOE/2HU57krs6oE+Rw\n9DzT/h9ESPYVxUqj8aU+FIKK0euBPKDW6S+DJlIr0SqT9bnZBXSJbvGIe5O/\nKK0YOUJIkOnVku8gpVgpPYOzdmIaxl5im/pxd18WqonyosUlSy6wImn/QGWi\n3NPgAqqIH6O0VAauGhVBAfP4AkzOvY8kvKOTsWNRmrNiyrJy71SvNICD4h5P\nf15AVq7zmnglu4IWC9o0w10OGUrDBlvtMnDez6qkHPw0xYq6U1TqwBlIOszC\nS8U3mqHXmlg8V1HKGutG7I+VeNDyT55thcxts8+EFRe1lGSlrQdAyweiOS76\nVz0ECvHMcQRTzOY9unSbboZ0fUximzorWzDMCB5hP4cZeUJxpsL5/qHAbf+p\nXippbnbmyZhN4ApQwIAA/TabJ1C/T4v+hzUmQRlRSKq2YkdTRyxdpzp7J4hX\n7tqIvrVJHG80eavA/rCCtFy18lewixp82YwmsiO5P0xW/9exif++JqCWgtSd\nRDlYXPgqEnBTHT+IpnqW4yebr3lkvbgKl/oP5pvryyfFEx3/VKN7dfbqc5Uu\nBPL2KSA+62agfXHnghoNl6hmjVJSp7XKUJhdqPIEi+o4h/2B/yFIQtKB089c\nBtGq\r\n=Z1aZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5bc5ebfea.0_1578524474713_0.6909707117137416","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/icon-button","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d1cfe242d244f4be1917e8ed4a78d385ba85554","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1112b8def.0.tgz","fileCount":33,"integrity":"sha512-vJU6Owv/Wdp7uniayUb0easV4AJ+xOoVhbPcnJnk6qrPCzwrGteoI4mgaHWNj/Gn8RSqh2bi/xWjDi+Ucbn4Ag==","signatures":[{"sig":"MEUCIQCh5voT/2UcWmtmnQSg2YVEzCa+FIheN1QSlSWGJAgXrQIgbHWSdS+k05xW63KFRWFa1xDYQfIHDZIJ7q7E0jLTh2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TeCRA9TVsSAnZWagAA3rEP/33CURzuWtYRonhYYn1g\n0nmqAaAIwjkWnSCemjUMmJp72/Fyl0+2k5jtrZXPl4NY1VmiRIFmFvX7pKuZ\nlOsOD7Jao422LTNlIO4YZmgGcFam7KFrg59jAio4v3O/HQsK9euhD3ZqvFsC\n8tHHhGjSpsNvtDaDtpRapzr2MT5cFds0cF7zE1XxhRP7oIPbFfB0IDuPVnbX\nyBmNOTlkdQp8QaY4rlx8sZEtaAxiCZvflanl4Z8YQj2ZLPQiDBlsCN92ENBj\nxgdqPk5XDhbAXDQ251h7tJwuMZaOJfyKCnE6TZQx47+H22I5fykJmg9SDDV9\nALzwJr4F9YjqncKU6F+ynBQU3KrBq51QOgRnesO37tvBcofpndzgR5YqYygV\nS943fFh1oPegbSVxEYgr2LQ5+OYWVM/P8iPW6Hm2NYURX3v7IzcSdcz465O7\norB1/NsRcO4jZdGs2W68+hgiV9tgEq+W+BAqkNd8ROGjafZlsqBV4i9bB/Hj\nYvNhKAR7G2ojdGPO3nMdpdIwfPPvnWyynxZi+KS7w16Q6/sVvKD2OzZ59DOM\nMdBy5g/3ImNR4pa2cA/O/d2OgiY1ZLROXmmwVu+wu9SsLQ/IbpVSN2jwCPWv\nn++LPDZP9UMvw96xUWnX0QJBQcKInPM1Zb/ryA/LvrQXo8RnNZCk74V4elZb\nuoOE\r\n=yYuQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1112b8def.0_1578607838406_0.3547912246895606","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/icon-button","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec44596314fedc0e38d6b7b9d5747bb29481323b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.aab102017.0.tgz","fileCount":33,"integrity":"sha512-H/QQHJ2BA0rygQ22IimFm69wbXLPfgFQ0BaiUOHx/lRWH/ERcNKsa81xls56M7qxM9zE/cUcpnGWo/Sh6ZokyA==","signatures":[{"sig":"MEYCIQCkoBoa4Fm/wXU+SzaSWNvN/IVLkLwyET7vCIlEXxNP+QIhAP3s2nb00opSyNMa57Me2Qs6sTP9VDzJU0oITPuhd3nF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8F5CRA9TVsSAnZWagAAh9MQAJALeKT1htE9ylSG8bxb\ndFaM/7jnKklT9MBK2C7wmAspQv68LVQneV1Y5DCfgc7nAxWSc29er7QgjuOc\nsuuOcbAKUhgFNwFXCMKRmMxmfFWc8+fLBSYRP91Zhj1ShM6TLqf91CssCuV7\nFmA/UtAVcCyFDbsJl8nyztsAJMaxxTFXzZNBT8TH2ikSnTnHoOV3LII+8mwO\nfnSsIcm0uZPgdjgBZ9/j+7lp743NQ7U43oKIcm55eqAnDfLpGaH5DLUQ1ZHV\n2hC8xKWnoBA2t8TsKtkWVgeZ2WKYeyJZxeiI2pR2csqRYQI+R8BXkcj7yNYm\nOFWaA0TGW2SAX3UM+PTOZLwSZ6EswoNU5zpaXYNnvdeapQzDlnPxWJW5fAOj\ntmfgcpNioX04DMmvnWiHQm1lROAnh3zgheMUAqGnn7gihm573/IOPiyir1E4\nSaxxFVhXbc4Xg6XV4Q2FayUY4PAaqD4gi+8EphdviWbCpU46K6zkvkqH9V+e\n36aGaw5UjNtDvvEwUQ8SGF6PZmweSQMNf7GcNGWDneC+4TCBEL+iWmB93dBB\nP4rOTa6vgQLh0M/JGgnSO4FHtPDgegGT83YIOR0m5KEHuGloWoKcEu1TpMYq\ny8ay2HpiGL1RknNigX3ppoV9r8ExMTBZVZsZTyXFfHa8dZE+JABVkx2nDaAZ\nbbeF\r\n=6fum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.aab102017.0_1578615161048_0.6785846512277971","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/icon-button","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84e9f90d38dd4d46ce6f80308e5e5aa9a2da4f31","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.426913342.0.tgz","fileCount":33,"integrity":"sha512-bEoDJWyhThqvEfmTCLtK7W6hZDnksSJ54rPV9ql7RmmPueq2GOtvRs50F16q8MVdWLXpkpMrdFgDxPFvh9BC4A==","signatures":[{"sig":"MEYCIQCk1wXzPNUVyCPqU7Ux9XirQMGDqamYzcGoCkJmBT79EgIhAP+/EQE96ml2SSvMBguIvytmjj3Dzki2yBTYZAczc2xR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cHCRA9TVsSAnZWagAA3AYP/AjhE6QZV6VEBZKddQ2y\nQf46qTXfOQZRLkqlzJOTx2Sa1jZS4hi6Ut+3f//c4Nah89HvSTS2Zrm3r2/V\nRQBGNZjWn+YP39Src0Jhucy+JK+LRkgPGOSfMmotoeq9hmdz/0pRlz6biZPh\nUxgtkVXK5AJUt8/sc8Pbp9tUp1fy+ivMQXSspVKOk0Da0Xl7rnbMh31bxFEN\nrG4/IMoqpHHHXZN2QgLCjananvxr0STwJdpBjIvtX/NHej9LdrZ1WX07tzMi\n3ZTp9DZ7Sc94pH9fejKq6VS/9WdHQMj2WGbu1KUpbKD/qFSdrlPh2VjhZGYd\nxQwz0NhXFNaq60uXaVXtYRnbZJAAKlyXWavlBBTbHZWOfCfbh3KGUd4ijwMg\n8wichvKb+YqSz7/BAU5AMpB2wTglxpumPRIti7ExZ+2zrarrM+UQyFiIn5xF\nTs/lDCHwtSFHRBt1qasrXq4ueVqwI++QouCwINoWG6slo4KRDJzC6OeNG8Hv\nRF9+Y0RTm5UPqn1RWulUFgQaJEPoqrAACjaxlbFRV86Z2GJcrprCO3BWhoLN\nimcliBifNQ6me77+HZR2x/MoMuqRwPwZNu19xV6Vs1XsprDibwvCXI+Nt64I\nH2R/r0LYpti7tdZhZxbPsGcMMCSnIib/GEb6cBcb/NkZ1OKzFrMQ4GOqLtiP\nwJSN\r\n=Qek8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.426913342.0_1578620678893_0.14824850135118295","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/icon-button","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1768c23b39f24d399ae26e791af57179e94c9b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d4ea9a706.0.tgz","fileCount":33,"integrity":"sha512-JZqn/1oSJRKjDegwWii3rjMf7anARo2p/x78MiPPAHApTDaBcVxxsiFbh63eRT3qi0e0iw1Au7ydF3JT3Ojcug==","signatures":[{"sig":"MEUCIElHyXlgRhseSEy9GULXdGGSYPwg/HPbi0gz5r3FRNXOAiEA5IDph5uzUGhkCSCeir09RrFe3UgujKWe66hUsw3YZ2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOWCRA9TVsSAnZWagAACpAP/iqdeztNPMVz7F+z5dB+\neKmIVtJbjbITvs4k00+3OfEAYuqvATOsWxypmx9FRAshyUrXyTWaqeR1wMp4\ncSiPIY9UGxVaV5AGOzgSGK8IET498+NFDrr50ThF055PqUjdkdqFRjBczMgm\nqnZts2YhlyIyAZ66scUYMYmDPqmKGWO7Mdw1esYSkolwMgo8ISVG1+npk2xE\nQL7LL9n7fFv3w9rhCPZMDhSM97pGOTuqVpRQHPCPilVA8EcLaXPox3dzNqBx\nuYRL7nwUo+ZxWRavaW1YVMDfpuqJRi09UJvXBNXqjJoosF+J6DKf5fE1vOMd\nAQCsudE3Eq3efjrZgenI8ct5CERGmGOi88F5fuvOsI5eT/6i5jpVJX5nJUIP\nT4c7PKZUTINIr4IvpnAmHlY7vlDSdzu7NbXHGXITX4M3PawovttUUTXllAIH\ny8yyy8/yAbwgBS9tMACpyrtqNfMSFvDTgMLJdvgKWlCp+12rAdbb1qvjnJWF\nM0Ek34a7hk3tly9jIl3GDenpykF+xLXfS89FkG6+igTmMg5F14EtKlDItcdj\nvsDVyS7tgy/qqVEBgn87ndCX3v/AjnAwcVJ5+T/ptypFv4Qj0hCANwU9wl1R\n76WTqCjoMsCC2GP4NcSqQb3AUzm336qXgiObGsdxSsHLP9ua5JIXFUKTU6mU\nlOBY\r\n=Vp6+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d4ea9a706.0_1578677142353_0.7347847464513437","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/icon-button","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a394340c0e1c14f50879f34f0a9897140d87833","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7d4ee2996.0.tgz","fileCount":33,"integrity":"sha512-4QFX5reD0BTrIkNxvS0UAe1DFWb1Gq5KlgC/cmjwUs5AYSZu7w+2cTl3HyuIQ4mAE/10gSd25yh3tdxZDb0PMA==","signatures":[{"sig":"MEYCIQDVmxNEFM4jhaDsIxzhNtwoIY7BaWwobPYtIaaXtoqBsAIhAKc2xjbaqO1ZwRfp8kulcPDpjz6TQIgM71bTYGq/YwWO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLr9CRA9TVsSAnZWagAAUAgP/A0Woyni6yjn88jKCJjU\n2jQtHl/Mjib5nH6T0srksSFy8mIoB6641JT8csYxWP2Cmba8HpIZ8syX5WLy\nr3fat8WF9q6cRKacKoKMtbKPcqmEnOPYMJh7OU/I02wz5ynJMBwVig3J+k5W\nvyUT+1YO0brFxm7SiG2N6wUG78IW0rwrEjNqlNmXvoR32v+DuyjzjZ09Givl\nl9CIfEshhbD+Vnmdy0B/rp9/sP3QLVwmgIyRzAwTiTvd/agdFfcCcb9PU+fe\nPrQqu/N3ffPbqNhQVVNwuMuhw0VxkPpeoPGUdD5RpJgOqnF7gwl/VtvKOEHB\nA5D9q0gl+N/Z2sH9NkM2DP6kjGm2hdTNVtLoeBP3HB1/6OZQuypORQ+5Suiv\ndWS++fdGu9a7jS9VGOlF0HliJ52z+bkaGWmCuR7kE3s65MPDr1ulnCrDW/CX\nh8HF55IH8rTmmWupeVHfHQUFTWt07zfSpjHUPq921PCOhGJoUpQ6hiV3afYH\nbMVBlAEoFgE6arNW/M2HscZFY9P2c07O3lL0L0kU1VLIAoALpqhuObi2tHvI\nK79e9/fI+nloC76g8U+tbHG22YnsXcdkxwZ3VJRKgEv8dxdUB/dRncvQp5R5\nUX940cEnBb/+Q8tTd8I/6HyGHl6ari/tzvXrGsDwz3Q78Z+DUW6+wYQigfy1\ncWNt\r\n=7Kbb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7d4ee2996.0_1578679036653_0.3232317205648989","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/icon-button","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48a3cefc98183ed619ed0c00cb6842b0ad1bdfc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.981ec9b6f.0.tgz","fileCount":33,"integrity":"sha512-tXD/Q7UAZO5Thw6vokgorpH/iyBE7hUmD6X7OOKyeifeAto/PhSnOvzOtNnWMLQKYPYVCthxKUvXtWZvapEZ4Q==","signatures":[{"sig":"MEUCIGrQGMLdafFhWyv14LaFciClIAEPs7I+G3tbepMF/pgLAiEAy1ZwTB9xNMpueoclIo9V+3uCR3r6TEQy717KDT/x/2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAfCRA9TVsSAnZWagAA4QAP/26RbRLNLmyXA3KFpJdZ\nz7DUYge5extjoDdbWgaIevtfwm1/YgdWFP/EehzJx7t7CDJUSS5lkixzJFcY\nh+ZgTXjldLic/ZtUgArkPJQBxW+cLcYcMGyjGgoffqdaX1aihprVfR/V7P4w\nmH0RGsuuWtvhTuvz7ylRu8IBr2VyoD7hecqImki+qXtr49eR32Z/wO35Z6tj\nNXYIx2CenhfWh8ola1eVeLp8PsrbT9FXXA3THc791T6p6GkYbvBuJGRUWVcO\ntBX9VD3dC0nQL+iVQUUCMgoUEtkQzaPcCYJcjnFMj5e8xDP8yQ/+YM2EDSqi\nqHg57czu+Xy88K19oGXARj4yYD4kEs4KApVoWUBqFRFxQCZwaUpBbASwzCdj\nVTVF9fvhgtW2drmbdOr29oUZvljMMWkKZwJVGwnJL/3YxEJqD28pAtJilmbU\ntQQbOYCq40BCH6uZXqeqk+Q7qpf0GHadTWiXRuoIqB6GFMNN1iIQhZtdbXLN\noZamiJQ0qem0ywf8uGgZ/pRrkvi+AVuw24rjyFtQBissThdZBhSRpyYGLNIL\nyVpwZyGZL0AbIROG1lJ34aquBzw31oG4OyJhUkmqKRsoy+lh/AMBoPvXzYt5\nVLcb6W/a5bKaYInN1yz3aFPvZF+I+csWMHjpJ2AsEtoC3m5SzwpMl3LdLAHW\npY1d\r\n=a1Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.981ec9b6f.0_1578684447185_0.3353662387396428","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/icon-button","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b4ee7dfc897f74a49179e55c56acf993c0150b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.737da83fc.0.tgz","fileCount":33,"integrity":"sha512-0uQHg8sn4Uoxg7GNUvcwRptKvX8T6jXzwIzXYaGQnZ7Wq4HsVtSD9nPl8FfKpOTcsm2jUrcGuC6ZTByYLIbRmg==","signatures":[{"sig":"MEUCIQCyjBmMdeDDamha7K33mdZmkxmgA2M9QylwUjv3qNwmWQIgR2rd7y7wHDv6FlvBeCdT3XLpt3obSoE7f97nytQGv1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpRCRA9TVsSAnZWagAATB0P/0Yk3pHu0l83nqEMDaEz\n1lE47lceNOsKlKbjvMKEAkL36+wXHqmZMaCn2lDx7pDOuvJ9khz0m/lZcE4S\n/e8afPHRQBY2ANG3AiuFA5Ek879iwpeumGSU1Lmm+UfdZb3JHvkpZVMqKJTr\njr7Gm1ZYD3ryNx66MQtB1PjBlB6LmoMT60Ecb43uY+0kqwLdgr1KDtCPI5Em\nSOqr1Dd6wqQ/64QvSOvTHWYx1cTP+KNwCzMjN1MVyCIitTp6sjWg9c0Ah5w6\np6wDl+xauLzG/O8Chv3wGHP+BXtLA2NgOsW2lUNxKHYi4PfeczZQf257YlIb\nfjWHoIgCU5QLg/4uHST3K289X376nYDOOVHCDEfrN2B38c/jDAJBdPji4bZV\nWHPtwxoh8dh/Fv2kDPH2pvMJgudlhNmZvRhfEKg341rQjgObZ1xBKICO37mr\nTJqcfa3P+ikKqv7e4kkO/Pr3eMwW1E6K9feXLTQsVi1gcvlZK6i3NC6vHesM\nJFuu+awpnMExV85sp6Y/N7BebgqbJkY+t4CrzmjrkjOGtIp3z/++5ECHljvL\nW5snGvIj3apy1YkrSQhM5Zp4+rIvq0d30b5U50Mt8Beli+nC4yxz+G4X0Ml0\nScULhjaWR7UAu5tuqugQ8orPltZ2pPusHR7qnvaGHxIc4lisLtF3xdwd5Tj+\n48KJ\r\n=K2X4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.737da83fc.0_1578691152632_0.6520913161524589","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/icon-button","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d14b1bf929b11c320d42808d761c95580942b94","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.aca8e6c18.0.tgz","fileCount":33,"integrity":"sha512-GYV6ds1gItzRYiqMA8lzT+nG9nyZtOjn3CW5xMiqcm4hKGhJtuFps9gPL0bI6X2uKWvwJFz+wY6K+GdgmAjgEQ==","signatures":[{"sig":"MEYCIQD6sXOVH7Ahfy90nXIgFUgAGV2YEUGbswC2zjMFy4MzWAIhAMCDonpdnXEOzHrqJvfco/aoBNtibWskppr2+1xwCyP7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXiCRA9TVsSAnZWagAAzuEP/0LD62dqf8jmuugIuUOF\nB8tzvlbtrkGfAd9oWB8CS9VSFZqK68wF+3xExwU+6pvdP0fTt+gZCrH16HD2\n2f1Jq6Dmrbw3ckVDAPP6CZlGxuzin+EVRVIYRyYjQ5XCSL1uFgPhw6FC8chB\npywz2Vjxbyvz9Xsyrg6zqWID5Zk8KAU9R0bOtIZ30PnXrFiQgv6b70k3+iv9\nuWMojM5Um+9orTVSOCM+zckRin61JQCnlBKOwN98/jhNsRU+GO3jGDu+HdDd\nPsPXwewHQix8uYdzZMK5sXYSx8smICXjorWWaZ5ETNl+xjbR7HPxrh0Xb4vg\nyifOI2zCwPUm0/Jje/LC9cF2DuuyXAZhlq6cXlendii4L7qZM7eN4nQhvXXO\nwwdZjNzavqWPJWenWcRZAj0H/dCJArOLZt+2zo8zBESPZNjaR1KXLJ3hEeac\nZ1EUxel2Si4qiprL1IE58NH8h9IM4ubL/yJTM5pwJVtFBK2NYas9MRd+I15S\neFZubTU+Jb+NWU6uEniiHx1ir0+ENysvh4ObuJgAbR+VBL1eRXPF5MUOZriw\nfD4kPNXS6k+utzHAYNI416EWsd9frtFfr6fviIx7xfIDywp0Gf2+s23npm6Y\nwJ8wUUl7uoPsm/U4stLAdXFdTqLlvjj6bJJIAioWW3yIz4mhTRHkArAZfyvP\nvMTd\r\n=U16d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.aca8e6c18.0_1578943970191_0.522951853485788","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/icon-button","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"554e2abe34ea0b9bb3afb8c53c05243b539b80a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c38d84e21.0.tgz","fileCount":33,"integrity":"sha512-TpG7SpjMa3Em/hO1LqJ8vRakuVGIXT5f3SLjAqXWL+mjrbIfT990oL/HcztWHtGLD4s4YZ/cNzDGla2QXslM2w==","signatures":[{"sig":"MEQCIBPhhfJj2DHEEVqhCgoQU9YRYN0mZ/uRalwScRWM4SiwAiB4yGQzizzE7TzgAVoOuBP4+w3dbsHDW6Exg2lskfyH5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOunCRA9TVsSAnZWagAAi2YP/jWNHNkJSJMr0M3VvzvT\nQKEwubVTVPR+1DTRVMesqK6l2lCIg7457e4zkPJAUlQH5lNxl83Hw8ANkk1q\nlGk95nuPT+DuMr5hxNdFADC/uDGI06TdOI0Y/YGIjrx1zp4wJMvpjUq1OhTI\nB6Zor6HXTUwk5ogbIG+3HjDiy7EyksoXE6qKitseOYBlKskSK1CoLyid15CQ\nEZfGE2Hz6TdQnJyefqp6JwOkW4aZqlgu8d+umi1H7ahRJ4cKmgO4j6HAY3tx\nUsve50YoN4in/7bMD4dqq0VdIRtTc6cvGPWnE6XW/YJBU1YWR0NgX2WNghA7\nphIApPD0T+gibuNenywPoRRrd6WQSimixejAfbTXX1u1rpCuQ2a3rOhmUfnw\nt6utHDxKkCd9AM8px2Npfq6hr8KGybFTTLn2U3355Uk2CPGnPerPiyAHIbKq\n3nu1zABRqKxe1gBWZv2P9ViuqTUJ/yySCcxzBxiCpmWXPSJhNIl5I/bSPNdy\nrqaGpVXJSwcXs39kNeMBd/S5CocHJiWOB9aIfWL4Z+ERwj+6cfUh59q+6/ue\nXY+dZUr1vVRcBNdIgDuCNygowYHAa9VfluycSFjFkGYvM7rQm/SmuS07ZOXQ\ny1pwNqIEw6GpfSNE3TLaz5OV5W5qPvTPZvjJu/Hf+2k5Gk9kh5FpxRbmcydY\nByeU\r\n=aAzU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c38d84e21.0_1578953639439_0.3285211330295006","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/icon-button","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695c2edc4d90b26884a95f373bdfee388056c65f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a4db5fbad.0.tgz","fileCount":33,"integrity":"sha512-H0ZX2XWoIe/PDhO68vobUZfW3+kZN6HMs2mQn3jmNqOBztqJSWkwlCAl19IzZc8202OryA55pNLERm5Ng8QVEA==","signatures":[{"sig":"MEUCICvuPp4brs962X98uSADIuF+T4K5XCHbH+5PthnwCb+dAiEAl6wc2EUU40C+77zbWMHsXdE4SPPbiqh64CDjVVTuSYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRPCRA9TVsSAnZWagAAh9IP/jj/b/fxl5CmF6FiX4zj\nOmlu6YIXhSBH9WTwx1LzNCdMdwYF47QwBl0t6RaqpblHVsyjEqxNmgduDTKE\nx7TdH40ihQiiSReoob0+IdodBNkV9i+CZGpN57wNHdLTCjj5tVxv6EZWJqap\nFbiskPhdYJGHNH25L5POR1JNW2jU8vTu2FrIoDiPUf/fsrCVaObtMmarCTAE\nYQCnFI4+BLfc9wBH6oxIpnYvYsgT1/uLKpoLxEZodOX84syqCsJtr0yWLUkL\nLJpz9pOvJJ/eMQyU/8muD5Uj2ev/tXZZPICG5fSp2g7ExTS7A1OJTowB1J8k\nrOm9AjCKHxiLrd2jTc1h14kuzXbGIa7X4bqtzB5I+bwOsnG9bUjwQEzPfCP4\n2rd024GTPvvYbrDTrFCBfjqLnq+vXgyKBeOphboRWkdryRD1duUgbFvbwim7\nK5iYYf/bpK+D/Yb69KQ+X9qRlsTryUT5ABGAqE2CxpVlaj5Ic80Rll+q6cwy\nfjGwo7H3hRDEC/98lIICRe4GZSXHnMLBO4pk4J7MHvPC11TQ5FdAZyYbH7VO\ntxaWBcfCNfR6nL/5GW+iYQlvE/Qo/lJvrjSAqfAhSSKcKIbjudy0pRspKPmf\nq26XTjUZr2LCq1vJ+hTM3JLWolBxmbfOcx+KvZaxUjyVxhiEQ+S28yoxNbfp\nF0U4\r\n=tHW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a4db5fbad.0_1578968143428_0.4834009894268736","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/icon-button","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4175133c8d7475eea281844f1654a16c6ecb0c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.faa9af310.0.tgz","fileCount":36,"integrity":"sha512-4wADNtPEM+6rhyFST1eAOIU/Wi9vK3XOV2SeDhhh8kdN2GgQ9lDVnLKPsnMmfPxfSSaFbA8hxaj04x26e2kO0w==","signatures":[{"sig":"MEYCIQDxXBXkSm76iWtQfV77Kqynwc/K7oDGX65G624N9w4cTQIhAP7xp0EzZ5AFlp6XUFvTlkCswZQir5wwXd2dyMXIpRci","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIZCRA9TVsSAnZWagAAHlQP/1xLhCtZ2LbR4EBNjq8x\nE2j0y19J9P1oZXPYEYEmp3Wxapqv+0q0hJDq0maZsW2/77pp2qD/XRO//+va\nHbJgHDyapCrTRV91m5LJT6AY0u6FqK69I0ZopSssyqcQQCJdZl5MxvAZAWjv\nB2Ob+N4wasB5qVjfPM64D5QtsjefvasjoK9E7fYXi55E8eyik//u1X1acrVe\nGAWk5QJ00h4z+39WwzUnGgfDeinweD/xRttO5TzwNfgqA2okGz4r3IQov7Z+\nGWCAPqDKz/t6kAaVZj34dPYD0aPPJ9J6je8B4vk17EzfturNqzVvob7kogms\nBnb7UJDNU4ImIVtAKk8GWKooUQ90ENd9+5xhLW50ZMZ12Mj58mOnnVCX1lm9\n7/aqMTpBFUNuwm7SDNmPf136TGhGOn6qlfzICWEpxkl0AUQAGeBiUYJu28j0\nT9o22SrYzCjNErMbLqr+s22PI2I1XGaGRQ9WpuSzQ7W/YHV70+yOlyeC5Ips\nyQSKgPHjpMVV8qi49jv6LSYZSQlYmkN2kVjNzCmsEumab7z+S64bVTH9nK4x\nflYWXMW/g6t1U1ecE5j+2Kjbyj1QSaPGUIiMf3YhI3cmboNAHf6OeZmRqhdC\nQeRPd4qOs6+Fyrji4NgXvXjvl7z5fHDlwCdFplpymKKKxasXSrc0Q6zSKorQ\n0YWU\r\n=ou3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.faa9af310.0_1579020824619_0.5719374611106733","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/icon-button","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e849f6e76f131bd1482e8a16e6088d9e6fb6a9a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.60354c577.0.tgz","fileCount":36,"integrity":"sha512-KLkz6ESf+VMCmFcFjgfB7tCOL9CkS11SEVVb/Rqw45CSSV65jQOwEANA/XVHeNCiGZeh9vBNfh/GZXl8zW/M9w==","signatures":[{"sig":"MEUCIFQsk6Id7KSzn8YwcNofsMk0MsGKLZDr+JEwSQg6ZlE6AiEA2QNX1E1EdWYaQ5+eB3mD9gNx/i50eeNbgMJUSDAqe7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkS6CRA9TVsSAnZWagAAcqcP/R1b6xG4p5RxdawWjyl3\n1vG8mZMzlPxB2HdddRtQpliLYD3xC2432Y6q47rp2WGMzdYv+ok1rkiT1qIf\njdqjmhAwzDXY9iZe5JypF0MmMv8drM44sXMSU9Jl2UXBz/kE+VwXmkwm9TaY\nF8iEbji2KoRk5+BduUejyZS4c6MF7tOxzEMUesIhyRsDJhH+UYn8C6HuP0SR\nl2NT1nmsmIGiiA790F9rPmvMkYfSSF6xZ7Ijc2KxwkFndxsDakGpJWLPF5ft\neRM5LsIae+kLcqEtCTsXcGWZQoumrsoAgEALkwthm2JUZp+b+SmmVGbN6vzK\nqZgVEtbU1VOCptzJqCPhQCozo+Wye68+eRVavQjERuTOvijoZAO4irRp4HU7\nTd5/+Ig5usFguCZrnHHwtCY6GGXZzY+viz3aatMcoL183tM8WxTfVQSoP8TB\n5DHm2VE/8JHPXsTMD+20ku5myAZf+HgcLh3xbICIKtbu3bhDttArdw6LvFqK\n6XU8Ww3J52i9JcDJU7wDfHQS4aWfluoW1Ji+jAL2q0hjHLSfvVNWZnK/BQXX\ntWcqHorhGzQgCfFsIwXAC7v/HBjUpzb+kYV4XOVoMFN8fVyyqYLaVUvHc+XQ\n/kLEpJUauM30IMNw32/hBOrcPod9fGfHkmY8+Hzy74fZ9P/iWVmzKxry8woY\nOSeX\r\n=OX6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.60354c577.0_1579041977879_0.17011641431166624","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/icon-button","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c58277fd6106a8b12a26fbd0f9a9fc09b39e9d2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d07c78daa.0.tgz","fileCount":36,"integrity":"sha512-8fFVxcrxxl8HePwmwx4VPhghBrp5djoQXE6J0MPeQiOw14Te2T/y5+wQXjKsvvjcJhW1n8WhGow6CQA3yTtovg==","signatures":[{"sig":"MEQCIBu2AwqKTr1Maru3EWvhblu5PcWR/p2GreR7T/s+6VV4AiAFXDGm1YCzoq3j+AcYUUsH5K15ArvGFeyGsS8QdCL4kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlErCRA9TVsSAnZWagAAT4sP/3IRIKeuIPxpvI+07NaZ\n/LBwiRNprZr4c5jqyeu3wxZdAg0f93uLkNQe5ptzfyXBXl/fSuxYQjAgJ9vT\n1QfoewcxGxn0nTrvUPdn0F4xuX8or8ylYr6zlsI7ieBIkWSc6ZpWpv0x8Ke1\n1js6c+6bpN+e4PUb9Jv/d2SL5hhGeWOydZaYih+bpiLJLjqpGLd7GYjaQbDX\no0GadPB9smB5zsevIYAYm4NNvhL90nuaoqAD5PBOXUtRYVBNvSYZm4Q9lj6w\nW9fclrOrs/nePSIgTNqqksx/YOUwI0OM+6WG0cO6A/saCV055atjnkmP+2zO\nfh6R06YHlAEL++8bSlvWikjmffSqqJbWqDzuLTEvVYEC+mGGCdJUo3dilIOh\nGpiD/GlTiz3Vw0dScccYbVyy9Npgp7Pl1RF0SgPwXp9Wb1IIQMwB50BMYewX\nvB45VBIEGwG+8faSEkWVrzllUw3EEvoRv9wzWCkqyV/OwEZ0IP/58HYSxmZr\nlP8RQpXhwspbmKBQ0SiziMG3YpoNN3FdQQPB45kNpBhX1KWM1XFK/Ho1dt/N\nTyXPzb6nVED9lExkkvn4Ketid3tvav+hicqPQHQ8IdV4d1MqdRRnRQ7WArbR\nhkl5AEB7DTifWPjKmA086hPH0vvmppoiTDyr8UeXB2oEnHs/bDteu/W4cCvW\n5Zqo\r\n=Zbb6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d07c78daa.0_1579045162836_0.4165770432365574","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/icon-button","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6da681711ea32956145ca599f579e8f47319210","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":36,"integrity":"sha512-5perRIOXFmgSLZL0GuapOPxxdvGQRCaHTAk32Y7ROQfXebJMSrd1ngbx2KIk9hnfRr9zXm4tuL2oRWVBzaaGcA==","signatures":[{"sig":"MEUCIBARdhdrxHgVmtSBLuH+/OtZsMV+CdbA0XxvSqEv+314AiEAjP+7Ih9JyRHMngbWdhJQDYMaY2Eweqv4BIr4laxNNY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm49CRA9TVsSAnZWagAAQBAP/21UFDzQN8vANtqs7D4D\nhlbOWugotwbccUrxb+yBS+A1cL+mSOV4wu5Qezz+32XQAGjyfflL+r9QFeeB\nN39Dpl1zB2BJ4+gOrnAzAM0LRN6EI3wiaBaD6bW7aKCJy3tfyT5oEEV89qxZ\nBCay3f2ZNphlxYvZFSccMVH7kV/bi1xbcwG0ZYPVAeltWT+3YUrBPlP0v7zd\nxNuLvpMFKzX0cYHrlLGEl4eX/TaEpHsizMkc/vjS9ixVamnoSjKDRCeKM5UT\nNJq+wV/PLM8Z/9p18YboRvR2M737oy++JGou67Z6ONZVbrWf6j31ILI2FlY1\nBJfjEeVT0GxZBPVcuNxFgLBIUyadE0OjTrSOmartgIoB22AxnnMJZqOB71iK\nDRln2r93+wCxVsf9O9U4dRDPviyoAfMpbTqVWgfCRI7Vu2miRh0CfHNdg9U2\nnhvIyuCss5YMfK6s+anCcJhG5F5aZfVU6KHHKfXdZusZPczZ0IxW6qdYAywj\nb1qCe71pZp8CtJmjXWI4R1n9XskIKXw5hCDInB2l7Jok15BNFlvLwgmufcH4\nbKuT3eUwx9XSL94Bi32T7LMFlcvmDAK27p6vXDrUCq4N58a5oZcgImjRzLn+\n6Tmp9rdIU2Og7bvznPLJUgFJKECfcfE95eW/B4SK43j870NTzeLaIbG91j4M\n3LKK\r\n=asP9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.8ddd5c6dc.0_1579052605296_0.20423897561302917","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/icon-button","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bff3c45f3fc2b573b61bbf9511723ed9051204a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a9511d870.0.tgz","fileCount":36,"integrity":"sha512-09xf6ZaKt9fMzZbWeVZIFwPmwEQOe4aHdpD3dq1oEFpRqDHaIE+bx7kgCP1F4hNQH7T8uOogVZkQDAInXkXgtQ==","signatures":[{"sig":"MEUCIDwQLh+w+Sql3+7p+FS9jo9tDSPVxrHj5kspK777H/XCAiEAoT8HO8qpjgDKISD+12bEUeyJW4Y41dFGj2rMTma179Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2O0CRA9TVsSAnZWagAAfmEQAIM0VXi03sFLCFilV/x9\nHiyMShCOJjsPxfbpGTr2W9BJk1vsCNWUrT+fFq1Xx4Jnhc/ymrijlDSU9LUd\nOnvOBY+J8qWWjKdYCoDhPL9yj7YoIuAH6SDOi3tTGAYHxPxcda9I/Sv+iQG5\nMCSgalqt9xhab4KbWeG1OUs8xkJnLKGbagl4j/D86b1J7YvAkrcldmFpCWjk\nCHuBB4/t9t5CtqWZM9OLkjfy5tIIZuaqZmRkkR7plqmtiTCgSUasmWpqX154\naLMu8AU8h5NeZ+6Y0uFTOBefkD6Yy+BuJyOLTP5+gu5xbA7FnOzIS/Q3D1yK\nLH0Sp9I/HbvTFyMPQwQXpP3h4q9L14b9lEvPXLd0u30dloF3i3G0EV6vEU0p\n93YiHe9m8epLGQd8YLfTQdgKcIpa5e/5TxEVIa5mSzz64TJWhjWlA0GbDG9y\njB9TnBR0Am8i64bHWMz40zBqZ9XtLfN4OfqmPaRRtIBRA/e2OZCXYAdRB/Cs\nE9LaYmfCcBfQoNy7pm7zpoz3USFb2vv4rlEl1m6x+COIKG5XymyE/vn7SBqv\nK7UlaqFDSQr6gGGnCIsSKbg77MrFpZ6VbmMoLwuZQALlsB2nkgplHD7yKonq\npjmvqgrx/WKKSC2dJiIEClHQB5CpO/0FMXOktVuLYQVOS9uZWIujmDSYYI3P\nJKAj\r\n=/5pV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a9511d870.0_1579115444525_0.9192233627167188","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/icon-button","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b05d4e620ce79ddde82f73f9d515254c3ef748f5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7c8583c4c.0.tgz","fileCount":36,"integrity":"sha512-p6C66XiB2zC5wAP+86mL1DIA8DtQ/xpuIFYkXUqDNfVgjPtMaw33RV9dzr/aArXDbakrECm1sf9i4oBCBYri4Q==","signatures":[{"sig":"MEUCIExbBDQzlpuK8j9Jq9QmWYd2gzALm1lFpDZDUtG6lEk6AiEAkRfsjPyoeGJC0MHMBn6RyPySffOLCPOhYLrESxcrmVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a4CRA9TVsSAnZWagAAvLUP/2DfjLtq0t9KFqpTvkDr\nogcXWD88Ga7xGJ38ApUzDk0SOxWDfDFFp6Yb7kJzqHoPbXrkS0Fip31eBl43\nnomysfzJvScsJaOeZ4cbpmv6OoeDyfG4spWizyRqFc/terr23G8BSHP6feLO\ngb+phDrv+hcQ0kAD9PEVu4QtwxfLe9QUBbZyMMOkAN2prF5v3XH3eJrqDDla\n/tFJ+2wZya4PjGofQVX9Mheq6RgSsEkn4akJS0XBtHM+i927JXa7kDvLwI67\nsxKwa/YSYsptQs5gHD/5cvwED5uGc46IszM9kImeXpSbXggo5ShM3lNNzMFG\nAiDrFVql0Jj48Y0t90hr/FSbjISE+RYu4YwPijyfNj2yGuJJvJTmI194ixgJ\nP7557i3gWI2SaEVjmbIbEF3HQ+Rr8b2+Mn/iDBPQXTYMHBDWUWyiKDjqP/z5\n4VzBo8LHy8sPr5niFEB134HS5uFBnKWQYt1hIk0MJpeHID3J7wrnUBG2r7av\nDgJnsOEH7utaEfTrnEwpgBZJYmPIKMS1oTbniWiKJHHVC27w5dw5OWqx/Iud\nvr28yG4jm8WD+WIwgMbJ7E0cG3T5UHuALgw4audkLviO6byDccizDDzg8PJ7\n+uSh7ynnsIG5NY9L6Mchnks3aG/jaBxkNnJbY/iX5FpemFPF5d6aKf2+tWMQ\nYaIn\r\n=14Vy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/density":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7c8583c4c.0_1579128504431_0.7849495904938486","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/icon-button","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaaa1a908a14453b11d0684b3684a95c314bcc34","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5d4b82bac.0.tgz","fileCount":36,"integrity":"sha512-PRAPKwmkFqK4By3zaWNC0T/zfWwCTsCqzbuOxMFmbodWPAj2nrHBWY6BiXp3bRaQ+0uUjOdlH+2rvWtrMBCUzQ==","signatures":[{"sig":"MEUCIFfWeWQq9afYk21sDCVNSvMSHk/q/dbAHDAnPvifH9ymAiEAyRvXgG9tTWa1xnF2NoicaQ1gGtr9kKmAmi0wb/0P1ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bLCRA9TVsSAnZWagAAgHAP/3d797nrMy7aLdcAnIiW\nU7d2F+pEN/SAeWPPSnyFATsQ5V1yNxxjzMQXdy0u0H9SSHurE0ZLVEcmTU4F\nTtn7LYo0bhoJ7es1VSA4j8zNy4HDiLYx3AbbVezm5uDt2jjka9uwk2MN9h0K\n7CW/R1wWlk+MfWFmo/ev9e/nlBFkrx9S4LUgtyqDwAisZ3G+a7APBjkYGtSF\nCu4F62E3QXrHcqOgqPSxc0MOFFfKONC30DWEa2D1UR1sAdqifG9TSXQDUrh/\nwVk+Wnd91w59rS33rxt7ugkwBzpQVd8QS2XC3ei3ymE4kN7BYcOgjJxQqyy/\nM+G1x4mhU4LcQJz+sQ6LcqxDl6fAv+wFTMNAPywQc2vEDv+Mpqu+dTB3o9eZ\ncQN7ndY5MSH/ENMXZbUFl0TNQmXSbGuYIjWPB5kt++C0gygTJc193knbV9aQ\nZpdZQfu9srKXohgdLInxEPQyI3AixgRv2apNGuragSdOoY9TbRxTxEaa22sd\nanB6L0d6dxSoaKEiXv5Z88cQCmIewoZ7PEQ/J3GCj4sXX/UVVfeJJfGTrxAO\nZhehcaFT6MjNn6BFuoQNr5uf4yL9LJfOQq5EF696Zg5+wml3CSDCaFVetVzM\nLI1GqcJ523OA5jpLHiwqqqMPlqrw8xer5oKrpNC5tWMf98xLOyn+63U9eb0R\ncipa\r\n=X2NX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/density":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5d4b82bac.0_1579128523136_0.4615288031663991","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/icon-button","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5ca33ca00ec7f12df7b6aaf653a2921f52ec561","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.57d0186e4.0.tgz","fileCount":36,"integrity":"sha512-Jk3JgVUa+FmToMlAYcV29BWlyNrZgBsPy4i15nTjUyoqZXU4GuebAoiD+eHPQ5n9ePWnimEIX3MYD7LIaC9hYA==","signatures":[{"sig":"MEUCIG/cbVXUBstXoB8qC8dmewHSEtzJIn7UPKEW55Mnr+0WAiEA+CaLaO2y5eARVX0XjbGlmleCV4DkZrwhoVBcBinywiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjOCRA9TVsSAnZWagAA8jwP/jcERbhefBqdhCWYmhD9\n5R/DpDcng8lbHoqcNlcoqLJsrpDuqLN1+BqanN+LSqLQoMbIeex/ZuXkKn9P\nm67KcTUFeE04DCVbBT7AH7+rbFXqV+wWNF5N0vrP3Gyk9EHEAFXYo13sY6zf\nnAmrScjLhfiZa7rQKqgUZ9Ovab5rHhdpnDFVvRd87n6U23U7ibiecSj+E5AY\nCsg+Ps2grP5GBIHg+8ji/Uzrx3aqgsr4H6qTia41EaTrwoAXpST8rQWzbgUz\nm1vcilXryLQuTAShrnepd6rYNRk1kgcPiOirNLZDwtg0Y0yJXZkmkdV3KfSk\nYRlF6eVB8Y53UEsJj5ikswbNNvoadBKL5/M0avqsctx26rp82ktSU5FyXOnm\n3kb2NejAvykYsRH1PnNH+MO+qqtArNMSDBTBxDVd/mjdtpXDbJrQr1Q+iPrS\nZoiuhLP0Iv1uVoCA7dEed4O68jHF49B7jYZRbx89NrvoePQQIRm46SWb3MrC\nGuwDsqp2bXdyicv0V20vDK3XUv9x3Cqjv/I2rDVJ2EJ5sXsnHo7LfabCXBI3\nEsF/1EK/uHpf41053H22Te3SyLWbnM8vjtUmEYwf2IhfOuBWC0PSBsVI4owe\nsTdRuiSrHwvyUfVN/1keGyioTdHyGIB7fI0FOQQ7PaclHRmMaO6eTemlGa1S\nh7La\r\n=9h6l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/density":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.57d0186e4.0_1579198669965_0.2913232965760426","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/icon-button","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7a932fc868690f3d8b9e0b8ad60e995e7995595","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.071a6ab70.0.tgz","fileCount":36,"integrity":"sha512-jhZ4/n9rA3u0JCBxyj7d0DUFds+4GX4YJWBBRqMcjwReFZ0L2BSfmjffT9yDuyGoFWH8ak5nx43/IUitLPKJ0w==","signatures":[{"sig":"MEQCICWZQPILt3ERNFzDD5s6ToUhPH7NK+8Hy9Jsq96zjQxUAiBE0AXKesqvYShCCfeElBPHdjWINcbTjurIZJVV/5I4KA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpOCRA9TVsSAnZWagAAok8QAJeEzM57Z1MGOMJIeM31\nwhTusqzOKE5BYBcNEiXu2HIepPWyodnaXEMtycNLrbJ217bhOF+YWx/DT+lm\ncYc9pQG3r32H5t+MIO2LwpQCiYEI3+/X/SS6oAgdtxoy9FrAiAixNabBiY+8\ns99G3AQ7/VfIM0pYmKX/UgJfEM4gErVQTZ5Wz7zutP93lUF9LQ/XGv+LcufB\ni3v0MUh5L0edck9D9+EFRv7l9onyCPk4X8lfOj99ZnRGfznS7yy7NarM7xay\nzk3pz8SMJssLauOGxfZXWmI2YxSyAwLMwlafp9lULyz2h7iO3atDzKhwJ6ya\nmcSOVd80Iyzp8srkXeBqtofKwrQlnDy+Ul4fjf38K8ZUjqJs8WebMAxvptiT\npOq1q1JfhZR/Zlo+SJNOaSyrY+aQKymMvb+QFcRVvpAS4l78w+mwHOUJ4Ins\nIWAMIAAncxImR+DB7HIa65NiuwR6Y9ZSZiIQlTmlR/XJNpcLTL0A+ckkOIlA\nniYP5U8b/a/M+prbq2pFnRa3YuP/aeQS/+djPKX903WWDPA9D0t/wDmuezCU\nTEBzImlY6in0XwUwA2BarwO1OO8Z0RM3R2Qjg+HKZ8Mjifd09c3pTAXSAmI6\nK2cYdwAHrLAYxnFGNmhYtp5dT1w3NM04qB8N1t/VSKMA2a6+Iw6U0Yo83IK+\n9uKy\r\n=Me33\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/density":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.071a6ab70.0_1579199053748_0.5044992545868969","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/icon-button","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ce08c6b1f6c95d1d3ac548e161ad88f014b92f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.22e0cb618.0.tgz","fileCount":36,"integrity":"sha512-PhaOnKBypyjYvsbe5UVXZLb98RyLabRQVV6XA2kLWExPER0Vicqut6LTZdXeXdHTTkyPrWyb1O9we9iex8eZow==","signatures":[{"sig":"MEYCIQC5TgjQqXrwjCiDd7h5Zk5ZPAZMekmQAcyMkFacLjFF5AIhAMtNc++fcoO3D8vr/yWx7p3roQJ4firCUU/0J4fYZ+Ne","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+2CRA9TVsSAnZWagAA8cMP/3v1Ubb9M4rvF5EYSWen\n2cczdXLYCuWDqHjaeNmMxmfSg1zV9mAWnxwkHHzAiDvz3bU7CZDx9DWgk9K2\nZFn7Eszy+sycbily9zKRGwFSZqpL9nH2WLA0z6rENhdAval7P2wllbcadbwe\ndl0okht2PDzjRiktEX6Z9uC0Y2UqkDmEq/T2Wd50SlgMTDMy2yKWfLuOM4We\nK8ksTKQLHIXUdXycvrtzIV4IQasDynSiXQpn+S/1qOusqvCgt722V4hKQJG8\ncqA2XEDUD1I5PF7bgkvhUKRN76XCmzz4L0OWm65XgjcA7IDeq6SJSHnHdcS+\nfE9JfsrNGJyjS7xLUZUxPmFLcj3ro3hHkVIbY9fxxlGpET9/mYfzwPHY0Bug\n1t0BHVTzQpnYwfiiubE4Xq7gqU+eX3r1zPle3KGedwRog+Qm9Re4VvXMhvhB\nZKReN2tLk+VzIoJ7OaOrJis990C6mc7zEfZq0XEQ/0xWGLdnflmp+QBhAMvm\nURscsHHuZiBVj5O849kB4736E+PkbT9p5yMCwKExt/4pibciWkqgJjAppzxm\nRjvOzb9sEGo1dGKUZMxgQDnKG8PDLr8pje+TSTllQU9dgfg6kb8UoJMFCTsa\nj9nqnHoOTJDjLrVZfpvCBTFM8pB+mtg2mHVXgS2p9GPLuiUmLtXHec3f1UsV\nVpDv\r\n=3mFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/density":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.22e0cb618.0_1579200438416_0.22545779297492263","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/icon-button","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bfce2e6545c4e744c6bb8cdec53408faa37a239","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f16f15b8f.0.tgz","fileCount":36,"integrity":"sha512-vJ5cAUKnWPcQe3WckmbId1kuqDhFld4zK9DkFi5Ded34zLR5xbog2fssw4qVjun8uD9609qC9swfW6V7hV0zeQ==","signatures":[{"sig":"MEUCIQD5+NRjOdcGfqCcUo/bULSRY4ZRiCYmjPxnMN3R1bMO1AIgRHHk2EwUv74guI3FuuQBmyKZPMw3047ofp/4TdFM3x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPq8CRA9TVsSAnZWagAAknYQAIBUs+EE5wB794PHeSMt\nNDH7Q11HdC0mcxDeyyCgYsF1nEFc5D91ulfiW/jortw+7fyWtbOhXJpD7ACy\n7GWDvhcXIdkr/BQ47fcI1R4NWz0UUhKqK/xb7c9N/lHy1/wR9O+cZaLYLV2i\nfYfDnBAfIdDqLOTUNiHJvaSTQs4izSrV2XlOra6iC58Wph+9U0UCjDVwNsTV\n+cwOUfiRNLXpVUP+k3sxKLoyKZlDAjdQK2TqaSH1AQjrkDa6uPJSvcH0MvZJ\nEhkOa8TF9jafbhMhCXdDpQyCXnVxR6Vj6I2FDpcYLnwF2cePEgoEljfFGcC9\nbzEGFAwZuvFbH88BW8Ks6Qsw7WIIi+dGqFvAp+P6hYwOU9c0N8IDiNmjNb7a\nI6cisAd5AARwtaxb1iJShisKW+rjO/JkR0TGjdf1nuGGQouTyMjnb/+mIeiC\nmIRCGXyrsvgffk+PXipCXN0Uyvtwb3Pj5zOt7xoLOwlT4V40Q9ZpF6Dl/CYn\n55jhwKnhkGSoAMfJ/svn5+U/gZL11TOFKxNWGl30cT23rT42AmKMMy1w14Rc\nJiO4LX80EgEcau+zEX9C5TuBSQFLZwJZS0gyyP9wZXgDT3k2KM3hR/+Y5qYR\naoShyOR1I4USIKFZYXAAYjvtDoZws+LVGXaNd7iiVsOzape91g5I/Oj6Q8ky\nnpOb\r\n=NDEF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/density":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f16f15b8f.0_1579219644383_0.3436096167927414","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/icon-button","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44df9079e8c26d736117617b328c511195e3a9c9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":36,"integrity":"sha512-zAsu6r8fUzzK1r3hdl6U/hv+6l27N6UL8gel6EAWI8Fj1NiVV+H04t/MuVmbxfcphNeJedRV/8fzFCUZt21qFw==","signatures":[{"sig":"MEYCIQCMRtBAD1z4203DLf6Q9jeLvvORmX0qbilW/YO75qt0ngIhAN+Z+bZXCPDbsh+VjkM38076G6LAgCwAW+S7VHvKmxph","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGyCRA9TVsSAnZWagAA4cQP/0yqbGC4ueysr7BUnOqy\nrUtQhEM1XWO6M/RD7ZqSlkX6cVKtgQ2h+LdltTnN8az7dv8mWICW/RNlXs3e\nKsm2ZMCKQoUiJFLguAK7u8DBZVrgW0drHyqGLebl4vTAMdLJ5Ccp3Y7JNbkL\nOFeKtkEH6THzTURgquykQpNaxT5mREPUWGe77F4e+0GaaGldz1JBRWCB19hg\n5AwDRB5Krnz90yncaC7woPliahBbXiV4E063pYws1aQpI0QmNVCO/3d6Qqk3\nPEDHFtZ757IwyYbG1CSfg4Du7slttiKtC17taVBWk3E5dEKDBy9xWO3eNV9t\nuTl/EoMgJBd5XGIRN5b2xG7KRbYC1LBR7Pbdf3j2e4uOH3SUmMhMnxjzfV6Z\nQcu5mL/yvhrvylYY3sHs5CFH4sQdnrTTEHNsmmtTxh8+qy/1lMldTD5pFzXI\nKuCD1mX5qQk2S6uCc6KF/oWt+HlUrKQo96nRdvbFo52UQsYzmX6n2pzi+3XI\nbQ+fv0y5l5qN6tssTbWnKMObxEPpJdmhrLjoJoKcIpMuM9SiVMAEb6bArJTG\nHU8unoimEfr/TDa7KVkhtdziYEQp2PlFxeOTAXqo2tU3Tv2+Z1Adql0+Vu6t\nW/v15SZW/Hgk/3CsGGefCTO7jnxL3ucwY2CQErthki/jQpesEkERNv2aJFQa\n8Ed8\r\n=Nqlv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/density":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.aa8e43e9a.0_1579221425937_0.8325307217974411","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/icon-button","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a093de37cfbadcee51b5a9f9890a82484359bb9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":36,"integrity":"sha512-2RLPmOaPmMvUufGYU3XmtZ12v+isHr+iC/FAItp5tssqh7def5bFrI+8ufwGRjNXwjheo2jNNNOwq7hC1sGk8w==","signatures":[{"sig":"MEYCIQChY/jGgaCHHuGmJttC91djPH1SHLpzkrgYl4WxyIS/nQIhAOJsw21XJiwAgdP9QnidRe5NeLKLVSj1Cj9syTq+MnLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQc6CRA9TVsSAnZWagAAe9oQAJYhVP2/qBz4rfzoPK7U\n9IC6DrCgccRBFz+4OOCrLf+d0ckPdpub5JsNiMZGAxpFGnrby75hNWz0S05J\ne1KqCppVxsTTnfhxdASNeFk9nDbPV+bUVCqy3HS0mG/ZPAkN9Cnk5rrZY463\nH3BUFrWfxsutZm1WbO2f0lOI71VbD2dObrfYaQ7f+2FCuG9mflCBdN+thZPP\nmBgFx9bm8941w4KHOSRuSXqpfX4OxB5zbr947GcL2klnsk0jChceOTnsYjP5\nJrqsRodrufkyWHjDaoKaBDYz78321WSy2nvn4FIclPUPNQ1govINmLM54ztQ\nGyD3AEORJybV9EtULM3fAMWkWnR88eAXeeJNIsSYRUZ2sG5JLcYC14d6acvW\n33sH+Sb76xgHuNOjUGDWszjZeZPoY39U9lePS3XiFbvMlvZ7i0C8aNhTgs+c\nqZX57IroRZXMalVaN8SiKcfSR6gjsfJbjNLyBE8qiFyMSd/h1DQ6pf1WYr4z\nYDY2FkLNDhRe1BNtOZs4KkNwxSa3MNdFXCcoLarJaU4ptoK5Eyd8vr2LOziZ\nPtNF9Dc5AzTCdiMIhI2IwqXk7/jlLeXR7QFVCb3596sjkSlvw4iCq9wffnJN\nv1x4Qk1RjwA0acbJTuQmbcWLTC0kN2ZamSat4tc/I5rG2I3LSWRQRX7BqEbw\nErWx\r\n=pm+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/density":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.fe1f3ca07.0_1579222841795_0.9245632427980659","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/icon-button","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"986962a0bb4368c3e2d58cee67a14c696eef2ea0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d405af26b.0.tgz","fileCount":36,"integrity":"sha512-gNjmHIaDucyYTduaVWoqQCAHnY9VydUdhw302TntCyHzjWg1uvNc4ck0sfV3t+xBsqfc62f+8rmGfmAiYtqYhw==","signatures":[{"sig":"MEYCIQCbOLWSAD39F8c3y6bMcTAVabl3xdHjcahXw3J4B6laEgIhAL+IdSGZ21KDLjo12f7MjOkp3LlbtQ4ahSl0oUJyTDY6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfo/CRA9TVsSAnZWagAAivgP/1qWQAYl7vVlAq008ap5\nRUVeRxCxsegGzKbv+owIEKiQR7CAykV7Zpz2ScHjTh/OYPohvW6D8bDbF4qK\nkjmQ4hVgShYjMZkHT1RT3LR0kb9b/AGrO9Z7/HLQHwpN145jbuTtpGR40oUC\nHndq3KJRrBEBsRDg+n8FmcXo9pQgnfbQR83xtlQO2EGkf33fxHb1IAFjRyVV\nRgDR7w0YofIY8pqNqopZxvyLig5PoQY5R0FNmSaWSIAehB7f3OJNJvsqIMIM\nJJ3fHJ88mlaorvotA3/HfEKmaNyQf5lJ/mVZWNNrh6ZqIaLEJVReAum5xyol\nN2ZOaGMT2tCLuRPGNO3JMwHaY7OHgJp1r7OFETLKK985jkhTftVH9CcrN8jc\nhAFDxAOuCLocMjrKGaRwL2XaiwkA5h831KFOrTOUnrw3o1EvS3tLcVLdXX6T\nzeXmroiTyke4oYKVT4ybPtKGwcVSBqz8bmf9gx/aBtbQDWYD2J8KrndFYmfY\nr9R9IuvCFTbrznK9UgaDgJF2y9efvKAUP9L212i8+t5WsCDBhtqDYqghwfKz\nxs3/YLpxwfwlf9cREF6zuo16I70CuOwPV23TIaNV2TI17rNL2M98QG4l2bLV\nOR8DY+LQNf8HSgrZqslaGwqN8z+RL5Dzica3OErCNuMRxTkmE18zLjaV5Ky+\nXv87\r\n=Mh/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/density":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d405af26b.0_1579285055400_0.044149903688776915","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/icon-button","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0af6f59d3438685a364322f62a5ed9610a6c65d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.6e857aae2.0.tgz","fileCount":36,"integrity":"sha512-DDsnmUdaJxXqSslt2x03fS1Mqks0YWKgS2ULCfY4YpIIoc1ABMBUuHHUHY3YxNiR9QGht4lyN6uMX/m8RaCTpA==","signatures":[{"sig":"MEYCIQC35i/BMAlel56H+cWRSdbbBwS5i1t4W6Saofsyw8d3NQIhAOmgX56KdEdfGK95Fzu7MzdaukNcG3jKUp5WrTA6cjEW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsSCRA9TVsSAnZWagAAUV8P/2bAv1ehc4YHztCZAg2i\nuucVdj2ioOrStHf7sSJbmQvRzmx3LKWY6ly1PjuyfpzYTIe92nvPwoKNfJrw\nO4MM4nxWfvaoUkvvNcOVxoQ8GKDiJ9yx0zlIdDydbILmiHZZ7S1s2RWCpcFk\nOBxwtKcTHFnp0d7H/1nZjsX8ZqoYOgz0Tp8dozPkMfBNQNgoR7t5FcvwYmPR\no/EgFoCJCLBt8oc0lhnfmV4pOy3AcDP6+pi68E+8uX7uBrDFRoOMALykCpcr\njynW8ltiKNLSlrCWtavJibLrI3MRERoEkqo4B6/Cr2HK/MVYeY3Jmd5weaIo\nuPOKJwBjq8VJnAKpbCsrpm2PPm9RodoscnXp7LqNX+Ansz869nziPyrb+rVb\nMUhjVILV/usJn/aUsnpAKxMAfrqFnF/x7U8uMyZsdAS+AwTqz/dl01fVSL0u\nboe4MMpRVzZ9/jr6JZgzAks+O33cMKsW5949XB6YiC3D/mPcAX0KijnZQMy/\nDi0WllNkao/NB7Tuv2OuZW7G555o1wGnF5dWjd1eMRPbuN2hMi1JkEO9AXMT\nelHByLzof9TpEkpN/mBolDFnah3Pz63NkDRSqTHF3f2jliNv6cuJRkitPpBn\nSnQPUgDptH9bmlhj5PWEP5Yd+1H8238NvbL2V1W1HqgAjucNiy3fbyvVUAQ1\nZsRA\r\n=6+lM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/density":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.6e857aae2.0_1579285265929_0.28732569489966053","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/icon-button","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5f79e37e84aa47eba42a9a4ca809dc79f37fbd2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.e2e764f7c.0.tgz","fileCount":36,"integrity":"sha512-W0FVJrdBmRdF/kqGFPzXtn6rY5daQ+6k7w5gPshkrNONXVAVCEHWbq6S86HiIDx8pOuFzBLTghf7ZAN49fWFUA==","signatures":[{"sig":"MEQCIETNStvELZbqVH+NFJMnt6kfcXUBmBbIMzfxvmEIdlgpAiA5Swf39fRW8QEdnyb4ZRqaomTxEDlk64GyzGgYUSn5xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6hCRA9TVsSAnZWagAA/LQP/2KraKzGcgubbivXCqm+\nHOVEtUBE0Tp6Yx7ZrTnUYSECkaah9QiFAJmvThDgH9rrUgF9RIWQYmCJ2PX7\nOFfgLzw4mUdlODBGYIQPwGIdu+CYH2EpMYQaRovzTVSU5ytVZ15F1dgHgA6W\n6tLFbpFjb/+akPk3o5h2BWmyERKlG9LGC7rv3h7EQnBimn1JOLkxbIwt+G10\nWuEcfoYESbY14QgZIXcDYSR/nlD9LCJgKfIVfboy4bOZzu2SxwS9vsyPGz7m\nlJGT6xLZRK3p/ykQIa+06jOPfRS653V/4w1EuzcQfDL8fgZ1kcMECr4N8XMA\nKb3rhLaSQ488gRV6efgynickHPSOMKGx3+/tAaxnRFRofEC76cVvLCd4R8i3\nLu3S5fUyuv5swOWQF61CwcwnW4OR7M8SwTneL24xbFjYuBIYyjDBBh49+1s9\nWLC9JTjtewZbcql9tLUs0gsyqflBBQXwsocXg0ARQIB7K4wU9MKhBAHvU0Fr\nwKPU32MidtFfgTjG4ep7nN+OcJ+Pimn5kaHWaJpnpdAPDZ6E8MFBRwlXCHGq\noK3XDxOXWUXVhRWX/fP5ekHRhVwz5j79Yt2w2RGKng7Jm1Fd1vKqWbXorZ7P\nSN/aydt5GvkLQGPrjNWdu1iGSSjzMmSiTH/3HD+0tfgofVsoUUiFVaCrDSWO\n6t9Q\r\n=26DW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/density":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.e2e764f7c.0_1579286177459_0.12822584707055928","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/icon-button","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"767af0c6249e81609892c7af94e4b2c5206e267a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7ef986a87.0.tgz","fileCount":36,"integrity":"sha512-GTNr1JU4HH0Jx+E9C/Fx9cH2RauFEow9Ur1l0kwvUFYw98kGcMn2EsWh2j+mIOCmLczaUJ7xv/7tS24m1Iy3vg==","signatures":[{"sig":"MEYCIQCJk8rELqAmSLWrIuS234VC2ha29MeA18NjJWqh+Sn9/AIhAOEN8cmkaLgWIPt/Xgq9WVtuqmcwwWey5Dypa+0ty5Po","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt9CRA9TVsSAnZWagAAHwgP/3dCSjBZrAMBT7AlSfj7\nxxMdpt1O0mCzy3LkpV2OBg5gtAKTDvDq2SYxmVZkrcy8ulkVxbFNzdsvAcaG\nQvJAS8cHNb8Yk6rlfjL7AzfKSwjNVb2J7XEUq2j1LCazPdr+SzDe8XV69y5k\nKTemn4pKthd+ZyMjEEt7u29pbUJLmIeR44+T+7dz9CbmsejgrB12xB7Jk1TU\nbDUX59/KWLEILZwDL7bd8RV1bJGUAGwc8HJE9bD5c9F+7SJdANxZm2l/fQ50\n4/h3Fin3tfsCr7ibQlfarewjcdTNeJ5cILcFU/ChS+fbthfptmbfdf0RcpyB\nYFSnfPUUnJ3TNKz516r5pBkxkZZsH/e7X2fM2R2qNQyv/1j0vVE9CORXGX/S\n+fwsns0jm7juFL7/4/WO47eYgUyUNO9NDcsroP1I2p0ImVFdggFB95F9zQeG\nMigsTE+blqC5v2FnshSNTqIdzuwU40LS6cNlXyp2I+vYnh9HmkLlfp7f4J1n\nw/RYA9RKnestNiBadG7WI5ksSgo9V0eLt6MjeQCCGdCYGtg6O55bveSqYDyv\n3Yx9Gk0stjp+sFQrG81/wju6eyvCbnm4ugYyYlnjalMZFLxg99E1D4u//rVJ\njPxqcThfkcDJ2m14nX9y1lwjnRtZ8kZ2G/mWJFaKSxmBuCvLeZ5dmxBbsbrQ\nvrO7\r\n=LaEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/density":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7ef986a87.0_1579289468728_0.03941824121635795","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/icon-button","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78cb631e128b2183af1f584561b2d7a357b65b83","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.29402e2d4.0.tgz","fileCount":36,"integrity":"sha512-NEofdBLJ4Hl4wFkgVcItq3kb3/O2otbX1JqkD/+fRX1Z1qF8mLdhv8IxObVmedcQlxaPEnENulIOSr5lJh7oEA==","signatures":[{"sig":"MEYCIQCq3NlZRkF0wgTQote2O5FkohpkCjtYRu33sD9Kw91CdQIhAJ2mPhP5koCx6nuYWPotG1CKPshXZfHnezk5KZB/243/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhu2CRA9TVsSAnZWagAAjoAP/Rtz91KWjS10HDoWuNSa\nZ+fkhgAnI5lNmOtp3f7oS7V2PXDUUw2vXtXeq5FPsmC3TPpNMiJc4EvR4OdX\nB9dK8keZk0KJ1AGaJ9nakk2onRTcL6QBddxS0SqzYPObj4OsT82NRR0iVzsx\n8E6F/DP/V+Xr/gDkDqlf0q0Y3iZPO2uM72arY+/KYTaFC06kjkXx9BTOAIhC\nt8EHxMNny7sJXxr2pvnyh4PPQGbOsyrnCBD8oCmy9MgfeZg2x6PwyBb9wVkC\nh9i3JW8qui4HygGPVQq7gLh+OjqQ32jt2Jxo1eydeSN2ZIqXWujRAjZUyi2L\nzIEHYfqf9zgT5U7pPrsozwiQdF73xkP6imrEOFNNAm3YdQH1adWag1ia1mhI\nB5fEy2DJEELeS1cv7CNiIn2vuKGb4e5HPSKUg54aNRzXLUQJLNA6BMCJnv90\nvP17/MMVJfLr2+DCxiqYyPXzHf2p03mXDtPLnFkD9XQjhrf/XKOQPk+vgFba\nUKQSGLRo+yw8ohPIUsXNVJ6PTjAZG+p34kgLsND1rNCvuxuaWVRKFEOidVwl\n/bKfbUtl2bVfEgSNu5lpoq2mAtrerOnZl0HuH/jhkkugvUsZTJntBtkLRBz8\nQZLmto5f9ZQ6AeF4hxov4xhvgnP6ftdT4YdSwqMTLPfeMpt1ExQzFnKWl+vF\nuKBO\r\n=4lf1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/density":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.29402e2d4.0_1579293621681_0.8039009898500118","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/icon-button","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b262433bc2cbccb8562b44a827f2e3873a503cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.2b3ec563c.0.tgz","fileCount":36,"integrity":"sha512-eVNBvFsvKMsXrDsQxYII7E4dHxCXSRT5ddwHEowYzdY4QiY8ExD/e/wuEfQpLaa1OxasM8r1rWgkaPyVoDxmpg==","signatures":[{"sig":"MEUCIQDu51fl1Yy1pgED35y0yOxfNMM/dmgukS1XIPwHcrYWVgIgIpVoif1oW1ivHllbaA+eEksulV7yFPf0xtc+Vc8ezBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj85CRA9TVsSAnZWagAAlVMP/jpA0Krz/aNTy6/jo72i\nSCel402kq1YNTzPbFtWXRSfK0h6l3TW/I3FH4owKIhUikPTSrQvtFa4RjnTE\nVY76VQ3RjTm45V9w3mzqvexTonlZjm4XZ6h8N+JidZ1A/hsHQTIggv0WUEwM\nG4m96qJralj+uT+fV+TmzMshYYCzBU1tMwz5c9E7jn+moOpVowC/TwqSwSn8\nSS0yMRoNF2cYsYeyAI4pSNq6oPNBE0V21Bp/R3O5AtjPBz3NB+I7LQolHHOM\ni8tZjSlnXh2oWwqrF1QTUeG+LgC1JK3T4PO+HZESEFARnRoN2gNcH/k+mm1i\nzLu5RsuyywvB17r2zFZg9vy4iYxcM/Sw0UUOZFmjmYYMMRtKL+vDDyaKUxyu\nGH1Ch6ck/OqT5JGiPhCOulnekMDupX7wPzVQO3rtmmamVHh+WITkUzUUpe+n\n1MVxcXpXVRVEhUjN3l2XRo8p3o46wetgv0MsrPBo3JKZItcX9aCxiIuVTq3U\nrb7qoBgSF4zcd23UbX2ODAFqF5BOsgD+QkasL4X426i3A8igDf3i/Oi1M5Lp\nzAGcyuDS1NFLFfSHnCy6hgm27vNMTWUC4HyprzKnbKLOHPeGuSeBIpx4C864\niZn/ZPQT3yxe6oUD68Lg82km5IKsPev2bvFgqlur1P2lDlL1enIKdDPc3ELF\nqmEQ\r\n=Khy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/density":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.2b3ec563c.0_1579302713455_0.3098615140117502","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/icon-button","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adbf50b0d4eb8be9ff286f2334cd75b5266be3dd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.e8a993677.0.tgz","fileCount":36,"integrity":"sha512-qL4xO4ZcVjpkuOkBi4xkWkRKLJ/bVFx2PTLiTnfYkwRzQv3N5kPrkRaLyDIm0cnJt7xIs2DXN+MAACPFQls7Og==","signatures":[{"sig":"MEYCIQDZeSTFt3DxbLqVazvViMTi+b+zwDp4eK7xKJzsvaazqgIhAJMfohcVAJ6LPEIJA1bjivZZgQsMfegSfa3EV2Ml+fEK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvICRA9TVsSAnZWagAA4cAP/3dw01khQRlKINueuZp3\ngirASegFkPdgUptkc+p8chd9m0mtC2Cr4Th61yDJCFpN9zW4O5VSRGqlKeMP\nsLeZUPBqFBB/usdH8VPpg3Vf1DHjiQc9IqE0ZVG7G3hV7is407inzHuUIFET\nxreIgGAITqhaoGA48WdgIK/2Luyr08JI9BQsZSrLdydO7xJADAyWvGeT/7XW\nZtEiYIrnMvifc0e2ydwTpqsK/R77NrEzsZwfPp2Yp8FIqk7u02olCPNf3XEb\n31aqqYX2gSL7GK1scByluPoRKvzQ+LB319EPEd9eWTp862trW2zc8zlWh8Tn\njrdV5cZQKmz2quo0/8KPskzKqGGiOnuvbajG2fAaHQHssjdmAKo7SZNO2TWu\n16fvf+ylEMsDbCC337XF/WjertLYfFT4zf5pDBVCotXHxte6U4rwg02DZ8ns\nF+UBjOW+a/RMB1RHz+V1YpftlFTS0g0/pAu8f0Bi+Cnj4WI3zNGggiKngUoY\nQLCOTFyyiHcc6zTpYho/NCEd67GAorOmyG3OeMd7c6FGnuzBUwHQ1oDwib2e\nm4AGx2I+E+rBrtrrRFAYJmDpDM2fMTt4H2nCl7BvOTwCmUcgYgSEB/4H8Ywd\nYup3A+yFW1jtG0H/RlDjLNM+ALk6E2do3SsG2LLSlwseXQH2I2ia54Y61ZzY\nvr74\r\n=U5zF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/density":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.e8a993677.0_1579625415733_0.4244777328575302","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/icon-button","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"890f14dff59a92032795f63b927f25d45bc7f3b8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.cd4903304.0.tgz","fileCount":36,"integrity":"sha512-n9s8E3RlH54LpWBTAak6a8Nij2CJGtlLCGOU+48x0GOltaoDbC5sjGMcdSCB4IM7tEKruKZoFmqtOGk/UMjBHg==","signatures":[{"sig":"MEYCIQCULw3hKIpJVHPbfrBIHU28/wNB68F681oZZOdkt+Nq6gIhALCBhLeAREwjlFiIYMIEYyk9Yxxo7lIcyhour7ybwt7A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28lCRA9TVsSAnZWagAAEeQP+wbqMoIPdeTASBtK9whV\n2mmMPSqUoqY2Jgc7xALJpbfRDPK8S02/S06jzdJfL+lUdDoAmq/zbAIJnrj2\n+k3OjpsJ1Yo9dD1P4Yo+9y8UrWuLxi0U99ZV4457hny7sEhaBV6nudceyjpI\nq3eDiAG59saRZiIiLx/dfUX3ejVMIqA74nRK8s2+k+1RCKA1U7lfG/AarRMj\nawnIDrW7KnnhLwYOCaa9o/Ut0TIuUhJydkZ4BOtu1pIOFF2Nl0Ow0NOOuK0l\nMp9ZMcHAMBa5ZptaNgGHmS9PM0ZsCQBAN/B4bayEe7LBbQmWiB/JIK954DD5\n2JKGT4FzDReqQkVZzUc4SWYBF7E5D7fsTYT9q9PDgYd3bgTQSF560wygCa/L\nQaVXuhlgrC3WLXrCloe1uKdtVTI/X2O2MULFDceutw8zxi90CJqg46AHOpD9\nezVd49glJeLAbPf2pgUdpnanJzAmtZGXOVOYKsn1fTLvcrndzPBZw6OvTrnR\nf+BGuiYEOdX1Of4O0l294NozPgYHi2SJfYjh30HIn+hh8BY5VA2OAVi6be4g\nlFOD1fypRdx2hY0lwm5c1ihuAxEm17t7sYvIqIuq0nMZmK6clFSsfGGIwSor\nNSZYp4pPBYJ/1pvpYTP/BDw5hnzpMGX+M0HUBfigmZZaHoyPngg681Z8HKEG\nTkD1\r\n=nmMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/density":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.cd4903304.0_1579642660829_0.5263599111920023","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/icon-button","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"854216ff764aa43af3e02f06e6e14a9416e420af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7e4b04b25.0.tgz","fileCount":36,"integrity":"sha512-wfBo4Ln6iEhuGw0Cl9gTrmSsad/A7i8nLYa1Ixmi+bdjQghjZo/QQeJTCDTlcozCzypQgISP+JkQW8z7dQc78Q==","signatures":[{"sig":"MEUCIBzT69Jg9NsYCc2XFpIG4MLqiqtucSTrqmrMKBGirCgnAiEA4w04/z1KsQH4ktIQQyOMwLJ71OBXQ4uCHoZKXnGVDAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39RCRA9TVsSAnZWagAAfYgP/0GHAklC6PewILORlh9p\naeE+v3OeUHteqj+OiOk+MAtrkM7UkMo0rvnPRTRhNjwht+0aHc0GuxLovNMC\nR9GSOgPDG4d3LEjXpw5mwQDMjyuYmKXBa9R3x2MMXNzu780g/OJklfXJO6WC\nJoZkcCB5jJPXcWR12woK7Fb7iTggVVZXiDEOLH3DcAul4m5Wn6pCp2sZZCQf\nqm6ohgi3eQagE62XnLm2E1glabQOyCMJsM5xrDOO3KRemUeR5BSCPvLD19kG\nRHvTf4mq8CUfRT8vo+Vy588RC72qTRg8GwCHEOSy5oJAn5A381hBaUlhnnJq\nxYZn7f4QrewKXPayFme5kcvcF71il7LAtQoS4h+Gu9qESeDUdLUVKAcN6hqz\nTiX+GEDCo0Yy2wAI0NteWZvpYP4P+DNIt/UpkUpYKoE8LqerEd0VE9AWYsj4\nfhXeRmEtS8X7JDfgIZLwN5fz8UPizOYhHqgNCMKCSddYWxbVUjrwXy/v1GsK\nYWUEJMbz7uOi7u+jVpBG0C58Cjx8jhI5Prd0934Kbyjooaxg2lAK6DtZ9W/3\n3O3wwGpBxBp4fVQiqwL8XeodqmV/IgUuW8Ql5VVH8pGkPCgbbUgHrwrSaWhq\nLjTpQbCn850gxMbXEh4//smHby8UQlIWgiWj+O7hLdycsLnFiUTvmXzK9nwg\n/h08\r\n=jfam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/density":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7e4b04b25.0_1579646801477_0.9240244575589938","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/icon-button","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad208aaa175abd1df6776572cf5a1ecd8d15f114","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ebc296937.0.tgz","fileCount":36,"integrity":"sha512-CdIjMRdPSSEn48Z2r13Aw8kpGXzeBVImhjc29iC7DKF66xqnGaEdyOuT1882u3vh+rFLBPiMwLGt9a6xDdmMbg==","signatures":[{"sig":"MEYCIQC8jbkGdrUGy+Cba7Dtz5ofyoTTnli2d+Mw7f41Qx1k7AIhAIOyxm0bU3jNgOhUzCza4/sj1iAZLc6QLZ0ebqnZbjxH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40QCRA9TVsSAnZWagAA91QP/jY+X4cHhmI1XlY3LBdr\nYFu/ZroEkTgDL/2SYT6xfg4G2u+t+A7YxfSyIhM/MxdPdvMlVNLdysD+SFY2\nkXsmjnSQ+wNIr0zROKBv6krETFs0NEnijsVPBJpPaydCaUzLrlpEEkSYzW6T\nKuOJXzd1g5PWI9OBQZTARzFvUOBGwaCDWe8L+HYKlDSa9f32geupQrDgnnuK\np6/dtzv/r2P0aB5gf+IvviOMpTlKW8JY4Ey6upStX9x0rK731YxtGgg9BU17\n7ebwQLz/Jyt7hACELqNUFr2SqQZ4VXl2Bu8+MWinqubi2zJo0w31yYrznJZ1\nelRHiRquEk718INGIBtaJuDir17Pp4X+AEU+U0TFnQuDgGgQMikoxAZUlRGx\nCMtDs47Ovf2sBuE1OIASa1SHQFAV1dSSZnjOfjSRFJ21KPbe7XY1xkw6OBt/\ngLkjMr72BckLPX4YshSwRqrA58cqLSk/61z9li/+P+MsCF7zuoHBbUmK/DKu\nqgKH1e0XZIbhQwpJhswTSdR+jxnvKIBMzPx+yJ0b+XA/yRaIDC/tVdBEY7rV\nmNHO2tq+DEgyoTvgTW7BIqQLal4fpGwr5jCZ1PQO80UUaa9VHomvugD3TTLU\nucbjtkf0Ht/DSpi+AY2zqsSO9Rwo2tLTQ+m+ItdNW7tZqLLCpg3GZtkc404N\nwYpt\r\n=s3It\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/density":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ebc296937.0_1579650320475_0.22926611503557015","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/icon-button","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b37bda809d4f5d00b8c94adf5db00e4b9cc4fba","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.cf33f113d.0.tgz","fileCount":36,"integrity":"sha512-Sh30Rsjw8ud4R8rCHoe6yZ1xOIVMnoSRpeBfJ42dmaGt25jqaOnL1uOPvzVW3++fAcr356YF+Wp50NUN31nV0g==","signatures":[{"sig":"MEUCIQDFYVrHaLYrVavv+nFk/yjL3hViBPN/hQwMgTKaFrmbIAIgJCKQLnlAEmn3jEAKe7gUvTUJB0bomNotetM8pM1GppM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PvCRA9TVsSAnZWagAA/OQP/jXswDTOh6wnzk4g1XDc\n7K7DumrLVh03jC3C+gdw/9XfeC/fFhvTEHdGj/r+pzRXJvBikdsMYjOW+YOg\nXhAy0CQ1kQhmU8FfLYuejpN4uFohnWBfZ9nOoC/LeGb7RZAMha8Nyu1g+Na8\nMTjeqSsUR8xFZIxKEzVqMqC6870ruBZ4NScowW6XkcyxPrvQzDMx6Z4wQMV0\nQhVnCNRzuSLtSQFzozcjkSqNpjZN2fc5msHDkfRvX8VRWDL7EMr0ffyEXphA\nGNJlWLo4SMD3ZaMXHb4S5M1yDelWSIsVFvz55Qm5GVwFXvTfioKbUsFhUrtq\nxGeoVwVI/wfiFUQwpFrNQgnqdoD9rIVABel1ca4f1Dwu7HFcwldardrFjc8j\n3NTFvEk1qbJYxYYx0Bj7+MuqkVjSlrZGpcNvRNTIWWoTdLp9q5Ai0KwYnCta\nHNt+Zx6uET6Jfcaeyhdejrunssb5LreKMN9uXtvT+KrVjpKlsaE4yD4uz1r9\ntEfaKXjl3ySyOmMAaAv3tXXYpgdFUbZA4jihK+B98p4rLqRQvT5EsjHrmwKU\n4G7vqjpbU5kGKqGdUzseZc/GyGt07H/SEHSx2sM62pgOkGMz5hFzoVC4gCww\nYriB6NDOe8gaCqXidfbaiXn2LIrs3mkDoxeoCXeMranqIldREksV3RvYyyXs\nQo7s\r\n=auP/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/density":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.cf33f113d.0_1579656174802_0.39298647639391926","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/icon-button","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe07ab6e4accb1f40083e76b2f75b1fbf5e38bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":38,"integrity":"sha512-bm3l/9MAXCs2panbiJKbLy0ndyl/2lGMc9vfNzj0Jev85PkcQLnVA37V2+y9a6AjBk+B3jHXFKkJTNAM1RrnBg==","signatures":[{"sig":"MEUCIQCzp5ThVNl7EhR7q5hSOdvXUdVdhah6SDEVadGjDmcphAIgVMf9Kf9kSyOu9hTOI5JGSEDw1MXa8ab+UOfDYLD68S8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6bCRA9TVsSAnZWagAAcHYQAJF8w58J4dTJziXYr9FT\nfkQqUExcAYqchnfZyA2am/1iGQQJkdwVwYx46r9zp4jFvBEP7DltFALckI96\n/4YKJSm4a4Is47oNHm3IeIjpAAMDfQ30KZ7dhuaMXHFhqYWu735MShBzH+Ih\nfW00D229EaNqt9c780mXB+rr+S7STnHAYwMmqeutowh3jVHqUub2oDyd8BqA\nb1uMUEsFQU1XpzvYAzxN0emYTLwnIdjX2mcyLgPA1gO8F+1IREyZ1T7UAtot\nFP/H6XKLUgAlueOCjtqHNMGvleJoE835AuBqvMqKWw+roMxFBwmcrNDlnqIt\nj9fhAUdlmmjKARy+rhVPHiMrOBfA2F1l5QLlUoQoRF4uddmEQGAnfRxFJ+o9\nyIW6KqzMs5COSzTS0CNqkeI7Z/fFVFvMz9T1sXuuvJw+5/3YGyzF5sYYrCze\nhYACeROZVvUq3r5jD2S7jJ2h8y78SIsIw8tKUp2GdiGmefMpsbMjfaoSe2Tv\n/6u7VeZJ/yhILsd0Oi2nSy73tFOTYcVcUD3wse/uzKy5sW44ZKutP8qI1ZW6\n3AtyI3kvYOsJZLgnf8/2GqdOZWYZ0aRXz70ilY5X2KIvuRJblKngLof81kXa\nSsQoVh9FU5z7fi8FmbLCOJMAilhhjvd4UPD8cU/Z1A64mCQTTPK+aZp+yvWE\nY2Zf\r\n=liJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/density":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.e1d5f1be5.0_1579712155560_0.8310980823942402","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/icon-button","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47771e459bce1766adf026de4663dcc8138646f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":38,"integrity":"sha512-sP3YpKffFNhHiZ8YqgNgJLbOOf4DvqXI8x0lxbGY9RLw2Vm/urLfLYaq0RRr++LCuiDZOyryIoxZ2eGA7ub22g==","signatures":[{"sig":"MEYCIQCbPtopUKE1zfKhB+7DvOoOetyP8YE6ebhWG3SxD8C7GQIhANUXTVPlOx4I/dfAP5gh1oMXjSGqqzpSHLLQ2hClxryB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0pCRA9TVsSAnZWagAApl4P/j6/PEGOLoNOGHeBN8dP\nKxNIO9mqtfZ7MKx4/WhfOE6ZzM0wQLNccApez8HaU7GzxrkJzqcld4I8rmZH\nhsCvX4ppSE+/G+v4Rg1bvx4iFGVA6P0BQ5IIrMMNdZkEvRn5qs6tAuiEdrXr\nj548HHNn5KqhwxEfkPj4W5N3ksuTaxXBEQwXX1a7TDMHOcFHLmYUJ6XIBcod\nC/7RzOW+jHrVk9FZ9nz3bUGOpGWc3X/wz5VzpJOICkhuS2y68QyVrilDUAps\nmCZpzz+5TJ0qc24vgIZiM/ImeBYXePkg6+FNzjJdbUdPIRqrgxIhcPrUrRan\nvJUBf2xjGr20a5bNXUpGESJTK831S91wbyJmPieOIsHWviODHU1jDgqSraFz\nju/9Ce6PvzXCqegX+xXop6hKHOVSPrw+9zOmzG/TpupmW106JYxVSrvFMfTF\naVEwmDQ1rWXbLO8TbCcok4zwbAo2gxJ/EXGi+cQHxqPaHmjDzCcqR2XSLDjj\nrH1HG8hif8ZD79Ks0EeUuykjJnrcrB831/R8EWk5RwDUQKGpNSAG4/mz9aKO\n9c+qdA2/aUjvXUcVDjT/b3DcseI+hg2d2G0du/wklmVnYgrltgtI9VFxasib\nkhf7UhqmpeGd5SSb2ZZOUKhQ+pFUZZAy4MNsu9l6GEo8SYGNYk+oAk8urcpl\niffd\r\n=1mCn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/density":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.6b6a4ff92.0_1579715880912_0.9724048289932965","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/icon-button","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ff91995ab2c01fbf41c33af19d39856e6b3a288","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.6092f71ee.0.tgz","fileCount":37,"integrity":"sha512-4FJMMBrlF3JMnbDLL37av8lTSN+jznC8dliStyorK5v3FyHIBRY1+aTZwldaDrwb0x3Dgc5+IX1dIqN1h8rccg==","signatures":[{"sig":"MEUCIQDK5099GYScKO64CG6HRdlBIhZ3Fpd9jKp1oKygxF4Q2gIgIOrLxWqOot4GvCBHAr+8sr61boQC+mxTfZVH58QZbnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvgCRA9TVsSAnZWagAAJgUQAJEak+2ZkTHO7OxUkzHy\n5xp2gZHgLwhyjYlKu1+W06JpCSCJ8CYbAlGHphKeeDc6Dowc1/Frc8gFMNYv\nBJeu+YRbCPlmY2D1GyWxNcW+55AleW+IopqaKtvLxRwHdEbG5Ofx5jc3+iXw\n6vLurDzbc/j1P7Cd0mOIST6HCthPRpOgPUTcYzr7A2jQSvcRcc0a2TdVfX3F\nWKfl+C7D6+Uo2YiwSq5X6umo79nVipwgZMUz+adsTHb5lILcsJmPpk42M+O8\ngEieXLJNE1+0je+Gb/GKbKme21QrJ97uaMkVLSMHGcaIUTvDPdcWk3y7CPI7\nsDNvwGiBfEhm10GBpp+ehXD2xlsL2BAeeRliQBO2NtwX1GxrXygBgUxa8jrR\ntsBVvd8J8MQ517FHXZCHUSih2rB2hUnRFy98TfrHBKRs8r+6X+Sv6eg1v4F3\nqUXy/o5kan1qWuL7NgrikUU95rWjDD7vwHS1QMeAAqJFgmxJiV06iva5lJQk\nN/i7sPcm8uoilJD9NLF96U/7I7lXOo0CNN8LSIvOSCaORBDedDEcAiTkUvrh\nDjMidvqWpk3YmWpLsy/z1n7JHr4mRTp8Yvk09WIBfuonQcRBl61BGrQHPAmd\nNgFRzDW25ZM2+0XzOd+eLq1ObRjJM7MxL51eoLFR3LQ7/hDyFcD9YeCPkLV1\nULc0\r\n=lEAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/density":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.6092f71ee.0_1579727840300_0.27899162011558","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/icon-button","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445e3a1a1085bfe004ed68fea2d1b4b83c770385","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d8d95020f.0.tgz","fileCount":37,"integrity":"sha512-z0OtaKDhxlgVUgw4BOqcSM+18wApqCDO+RUwBC5kUg1gzfZf/xPcsI5Jr4X2kt/HgDVTXYF0Kddvm9mdLJ/95g==","signatures":[{"sig":"MEUCIE8jBE+TvkD3OdisnumbeNi9YJyqYlES6b5gCPyHpSu6AiEAz09hJOEqM34csJTYMdGieVgKEu+AgDLO9Z2Br9ioxJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNY8CRA9TVsSAnZWagAA7zsP/1olctS+TTT1CEGmwzW2\np5dClmdSgBDwjI3PmKZ5TXwoa0LCXJf/ie0FeUDiHk0EvF4wbhsV1eJhjSzI\nuLunz574hSRfn7rY/on9mCCL4GM/qB+jht2h6pmXYTBYOPlmUnx2kV8+hlcF\nxkoQaUY+V8cSgztFlQjOTHDcayAJF4WpcidxrkQtIQ74B3OvBN3alTKl//Zx\nPrNWS0AxBSGzWL9iVzOOmvF2EyPPyXq3cwHWnDWEeWzHoKylikl0kd5kJK4L\ne6Oyj2/kEhjoYjsGmV0oLFJWwLfqAbE9Ngk0GMB7D3QfKgnwTmPxTIxn1JhK\nFtpBJBnmxvC7bUMHIdxcmm9wCuFayKDa8pHFa+eRgnwOdcu5uZlX3rw6dMu+\nEZcR97UP7/yf8ENKkyiI+kLqKrdAw+vLXQhcTALsTEl/AIgrTEgiuqoiYtzU\nqrXfgNVm1zoUbUa/vjV/Kd+pxOA0BbK/wJUo4HCUFpvFKZFR+3kj+mT1PfF+\nGhcxtJWq7As3swlIheYrdK31fi9P+5MTI+KI8Y9V99pIkvFDBbShc+2gXJiU\nq7yd2bdWpubYfFtbgjLDpGZ+OXlbEJkDvDbONdS+6hjSNSKEfpaUY0CNTH7x\n7v83F+9HdKDyeh9+au9WaPN/ngYit2+4+24HCGT5mVF7IhLiCt7Sl5Htvh2V\niMzw\r\n=hWW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/density":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d8d95020f.0_1579734587384_0.05651589680359259","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/icon-button","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6e1de4070417a977c0394ceddae7851923d270","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b7facc628.0.tgz","fileCount":37,"integrity":"sha512-AMH57zUqwUnvhLDMzSbHQujeMHrXLpMfHtjL5STmJ+5m8ef/VqpySBOiho/3LuFLnv1Sh9OUI47yU9kXQipzCg==","signatures":[{"sig":"MEYCIQDJJPJO9hgogGgJBlWl5hKVpSWJUyVYlwxsaiC99nBIngIhAKhaMa/dn9KZifYK0Or/wb1XyZiTkkiGDCijnkTlqsXD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIrCRA9TVsSAnZWagAA3igP/1QSwtaL8djku1R0BrEQ\nX/JRr3d6k1mwUQjZCjHBwfusKP5NtLDsh9bYTnGjvJlyhKamMthqc8+Gqwtg\n0ZPYngJI0HDZCcw8vpOBCbp0wZ4vRWDD8ItZrFaZy76LdrjN8ezqCzJuQYUn\nQ+B6qvKBo/Q8uJr4dWyGhbnZoH1iTnVRtjfvhFs8SOcO1bYvPAe50/fAFoK9\ngXgWokmz3WZRfAyyOzbbjedAr06FFlzpD9vowotIjBIeTT19N4f029x4eStD\nBnJReLlbuqCDkTZvqhijlFux2z3UiohB72aia1wNnzRKWLdH6hGA0qCUYBzm\nefQ5+pnU0F6S9M+AubRfmhETU5W0MBBX3i0Km+0M3fMlQ78IN4ssLP1DOJtE\n4NDIwg+CEOivWGdHz7PEN0f+5RDjPzYTzi386sPXSMvuCpT+48x5FAMsO/LJ\nrvFCujImsHiphhv6rv45/fYJE1Y1hCBn/x45O0P8fYs1XK/EOYHbnfE5Mrqo\nR33RhzqcJskAtX4NrWj8MQsme6WoxMWG2mKgNCq2x4hrD5bIbB666Q9aopd4\n4eGEe6xiikqi35WQdR5fIfu2dsLiw0i4Ww6leFoZwfjlc8i73T46D7wEccpI\nCwSXwoCOh8iDWS8neWFy4zCWOf7vyHi1bvKk4+iUAIN4GvwsMSSulVrmy0R9\nHCFa\r\n=0XYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/density":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b7facc628.0_1579803179298_0.23588742925929806","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/icon-button","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f8c54b8e7473950e3529623d34246e411e17893","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.63f357dbf.0.tgz","fileCount":37,"integrity":"sha512-nBy2T89cYF/5/eGw14505sxC04+x2feaqz/UtxADZ1eXD+i3xRVoyYRKjviF985/QyeqHUoMMwVYjkdQSdNoxw==","signatures":[{"sig":"MEMCHwRh8+3hAu0UHyEmKkcxG0UPHCNbL37laIui2IqKQ5oCIBIPFBbvpkyDyPe0/9SpLkAQ36Kt8WXm2EZOH2UR5wcL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZkCRA9TVsSAnZWagAAeTMP/00hEIPeRfE0uo7J9XR2\nkX4QtzQbi844mH60NLeD340Otd7hvpPJu7UG8JuyCJ71cUkKim5RBm30YycC\nJix+6Evhw4/GK45kyfzrsDFgE7hmz8bU5EeHCbeadaZjQka5UafAcfggLFpz\nyXbNAPoJrNKeLdMT/+qpqoyzpmmI30vLHCo5Kszw8vpsWUyEMYAhcvhd1c24\ntInUg0laSCIZy2H26IINgMQwbpAqlfoOetbS4AHF+rAlBlpU7shVib64MdNy\nIFQ2DWoOzsi6zmTudFUdMgEI6JIDIMWavLD1UAyZp5xkvMTPuaP973mNdzv8\nYziE55tKz+Jw7PEh++vTIuhn4H/KAu0qn5Mb7QnNeaWUgKdfFPRuF1U5B6qj\nI91GdniBUfkIb0wG1fFbWegZAFHAYJs4ZBlHQuPrKAiQLqCLHeuGTUKwNJ8j\ns6+DzwcD6cXzm6usl9V+Au5NMVSVue8W99Nl1FWqqrjQ1FrtZmS9ZsJ2y2R1\nF0Peg9tcEJ+GG13sJNybhAFpDtlWJqV1xkHBZvFbIKC/CKOqTQGElx7dFSAF\nNnxh36ehHaRfLhVCZJ3CUpHG9xFTCT1IC59nbGWdAJdvjEOQAdQNsWVIOb7I\n2kk09vP5XO+upFxrSTsHB9hVjw+tq/cdUP6mTrYV25Xbnrk/1PbL7lmWHOwZ\nO02O\r\n=VvYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/density":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.63f357dbf.0_1579816548422_0.7271796811327507","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/icon-button","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a6be733940766fa09f0a2859440da09539557da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f2426d26e.0.tgz","fileCount":37,"integrity":"sha512-ryWu7ZJzge2WrrurRniRw44rheO5IVLSB60tnCP9vANfSMndL4EOyYTLKkPROIK6rNo+UVi7WAfaTogXtFrmeg==","signatures":[{"sig":"MEUCIE9D8ddmw64kd/MUuc6uOSjtfXBNvlvyXEk5/nmLrcq1AiEAjt/ts/R/vhKOuj+o1FCudnXlP5PNBWn7tCAhRPufXLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJyCRA9TVsSAnZWagAAp1gP/3AQjxAbJhOiSqpGthJ/\nJ+KhkgkhHwycVM4Zz356FhBaPowgC+OU5erIBOeL3pxLij0Egx/Uev2MQX+d\nHxlXxxPVOIMyerBQS1TkvYMPzT9dGYbU/c27BKhjcDvA8f+AxGFahEOnocjr\nLWuEqet4U3pgw1LH4DLW/x9RWcBgHWrDOQX4cOnJjRx/B1n+K1+Vl7NszFn9\nYzwJpb0AUhcATMCdU+GSVeiDBBDf1zsRwdlLfGQaJhLroaCc+wT0tp+rP7RM\n+fkwNKBWACByJsaDhz9AJ9gmYyWAEOKM1ofBtXe7dqjvL+5AckTSBSpWOpcc\nJor5bx+Q41fwcZwMjkpnPKeRXV5bD2dqz284lrdYzuSFrrWzQbwhPxxMHAnR\nNKnKmO5uxcR9vYg8vcHbREQc+5o8CyiNwiyI3wk8llDQUur4opIVjOF4lEY8\nh/Oh4j2jZa6rUrh+wMP8pkjj0rcoNL/x7Tyfv0xQl4v9h+UVlLRhbcslwtZi\nKGG10g862w03HT4PGbrfJfSGGkDfrNmHAsT1hx0LAWmpMcUy5pJYudDGrj5V\n0e0eo1hEBj+m1u89pDdgMDR+MrvLVtZMU42dwtdB9ub+TsZ/TwC+gpV/OgMc\nHrGBTm1EduCWBMvqsH9VwxIxMG11XQB8f3KWyGH5bt/A2xXYMIaNE3aGN/oq\niVgM\r\n=gKaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/density":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f2426d26e.0_1579823729896_0.26092118619471716","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/icon-button","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d24135090001e63554a575938c3c9f4ffb908b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":37,"integrity":"sha512-nAL6KJE+FAZytTp9juxccGZF5o2mByPsMEOUjWpzgRL+/p+yuf8UEEuXevmhuMmN6mftUmoRfN0FmC5VcEFmDA==","signatures":[{"sig":"MEQCIHWTfqej/DQiO3oEpYLMXnfAEs2t4skYz1fRTKaC10fOAiBhUxxpLPROJDLwxvd6EMIhVkRucYnho4Cr4PJjFH5sLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+7CRA9TVsSAnZWagAAXmkP+gKNf18hPHdtuzafAHDm\niJ9VhIGligh03qBvcObloAJ4KyyK9lKgnQ9FOEcA/H7raCO0A1hybTd4ENch\n/LtJL3F2Izxtf3QySXVV1u+SEDYcaRgAD/YwUKkAtMroqC2HzaEAvBUFiifU\nRJXzjGo72XvDdVWrzRHGecHjf6G96aVJg+Iq8iipIifeeYD2QZCDpQi7+nKj\ngxcV1mcxJcDoz/We6FCra/HQxUf0eL//yBZOf8In0gigueZvK7X8R6Vc8VAo\nhGyehEy84U2tAKOENrKDBiUypoODcm6fO5YQyhQyrfiYL6kQnfVW48wnmMF8\niCyOO1/9HNBUZIHAmwwu/a35vaIhMJM79UkC9CnsehuCmTjZKFqQH8k8nNTE\nZwgmWuOPgNyaJsbxcCIFrqPiToIyr3KtxWNexMt75f2GYOpSNI7+ugKp0wI5\nNKpb7kBZCyBZjj6yZVIm9New5mHB5IAnlLKJ/cCXfUkOFU0VdAqY/1sQb5Wl\nbX4oM7TbbLrpHVM2O+c6KmoGsJRlPKVm1vbD8CfHuYFmAncPakvBscC1xqaK\nhMOg42kCF9nF/cOeWvs1oNCGoENc78yI3QlTHLJHZPwFyPcMChAT/0NJ+ZwD\nddPGEib6fzL5hOFMFaNALvPFfpYETaY2tZbPAgFapUcpfABA7VkBPSh6rs99\nUmce\r\n=a5kw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/density":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.7f5e0c23f.0_1579884475080_0.7340870595858058","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/icon-button","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f856bc73402cff3102e62df78c09fbdc6b14fd74","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3fc3ab520.0.tgz","fileCount":37,"integrity":"sha512-d/N5rCvgJOUWP5EwWw/T8WWEx3vrqJ/C90k9jTxLSlgx/+Pz3mGoYAqvU45Vsm+jnbu0OLjhoPq3ervPw6AFJw==","signatures":[{"sig":"MEQCIETc2dA2uJDK1Q/w6nW8EC/BYS8pFdda4N/u2MsjhJ+FAiAlJlW+xV/05efVpfPuaKVJwPcBJSuOilxFrfyz7clEcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeVCRA9TVsSAnZWagAAiSAP/3A5j4oztAbXXG5s7/Z3\n4PTBQTmyMmIZObVO9xtOSRp75ZTxUw+UpHrPKxCHIiyMcesBBtJ596uX10UG\n/BCHPY6mjjqR18VvhCfULEaC9jMc6bZgvUlSxeAG4PJ9PzC0N9UflD3qlD5V\nwnOr9bkYOyTTBvjFDtthpvzeFrVqsu7DJ6Gda75So3/16YSTpDQz3r/8W06m\n+p0N9SR8RbJxmr9AkeCiHWzyyPvAQ+vNBhf1Jm+CUuanU+GAtsr7hHOJf3Sv\nS56rDNam8tXBvDTJkoDkA2oo9hsqTzJ/aiNrcNA7YxVeQUX1Wx4sg+rdd8VA\nYaG6CzALxJJAeaKSt+DafXjrbLF4UlZz6yJLHpkSFJY4wxJcr6Cuf/QJ+Ha7\ndbx4Q97Gj9AXvmZeJv541GxZkoUMNF+h5diBoNC8xtawtuWKosaLT9FY/V5a\ni5/6lBQcb46a2RzQ2blOljjxpqfUHEEM5Dr38wWNXgU9JtvQg4Eyx6Keu/tx\nO1fMFxj8MKgEdyJOIlUiNUuA1bRlgsZzcs7ZAV9BvCMT+IndKH5INtbgamw9\nVoDjzkoFM0XoUSVp11Kf9iIXkq/WHt33HBYv4Ti8WftGXJv2VENQxEbWJp/o\nKg3Ul+fMOtQW+TaJBtwkL5kpg5Pc0EExYzbzxWf/raB40lsu+PaDNJQLyXRA\nhTAD\r\n=4bvX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/density":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3fc3ab520.0_1579886483498_0.46343149896286717","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/icon-button","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb05b0bb9a9724142f7fc22692edb5ef79dd6ee3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.80a4d326f.0.tgz","fileCount":37,"integrity":"sha512-pEe8BHnMfKFSbq/v88g+2FC1LcYLGYl8g/IBizjOCj7dlQMH3FvlH33C2NRXngt5HJmq+KZg3v1BRHiIp5WkoQ==","signatures":[{"sig":"MEYCIQDTgvyEjKLheDJQyXhqEHGnAoq+yvn15GoK7tqIIAiWAwIhAOVTfpixe+TARaaPFoOXF1XQN1TcJkG20LTq6L4RwJwO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eQCRA9TVsSAnZWagAAf4gP/iRXYYz6k/tlEYxD4zA6\nHQcUBSPQf8dPUU5uvBF7dJHC7BHLcGqyZ5NgYeYHNRaMtrh1JoxEy6wBvyQD\nLSxzoHClgW6To4hfn+Im/s71uz80hFqDJr/bYd435oQLsBFXAfS3EV99Y7mJ\n+tcVzeI8pys0iYTfXx7Ik+IVqLmY6G9R+EXObtIsriUdFeLH7VPcIYaj8k6G\nQtbz1HFcIr7Sbeah2psUw6i/29ELEQFhoAbZMAgunHuhP1tG6ndtgzzivO3m\ntwwIzWoJB3hkLieL5Si6Y+FqaTfFtI+6j3Bm/ErdBQ3G3btvK86xVzNbJdue\nZxPJk+7ha21Ta5RALinHASsR5PgI/YJdhj9qOtwcm22iLm8kF+U76vH1jG5u\nBBXdTLrSfEoWWE6N7wrFDE9jAa2UKKg471D3zm1ND6wIqlPnPwYhQp/+h4Sg\n9wKD3447QlSILsS0lO/vyW8WyMkVO0N5rdtJcSBrisqEXKOntPtepqOrbU+X\nFXLO2IXql10G7VN+HGdlYbCVhHSrpmReO4GCnkenJ+c4/nIdaIJNW+Jh5EIO\nnH36d8siqXOMRiP5HrHc2xPIIJXl4O1gH5LfZxpM9gIeBCSJidEQGNgep8tn\nO0WQf6rjepXqHnkZG63wYIf9Mfd9WYxJyzlfnr4Fi5fSgRdlWMQCCQbEEAxJ\n/lcV\r\n=FIX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/density":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.80a4d326f.0_1579898768457_0.0018458844172803968","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/icon-button","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfc2b30437a22a1fc910438ad6dcd73bda79e4ae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ef7de4def.0.tgz","fileCount":37,"integrity":"sha512-aW3+vowHXovpKXzarYLfTo9TyruTHLwb4yNe7v6hmaWGW771sUUuJD+97nRgEiflo7nbRcWOPMQehZojbz5L7g==","signatures":[{"sig":"MEQCIBpv1WMoYr9NPZM7ZjxN6zZ7dSF7SDWfCTXvRAQJdc5eAiBF0c+d8wP2c/7wo1W03dU2SM8ULFwgyRYdUQ58OVrZfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2J8CRA9TVsSAnZWagAA2TYP/2Zc9n7TA5hL7pInwEtL\ni0W0oEZMryRRgGMBDoLvpFXPcHB0Xetv2M3I6X0mmlPIH2ISMkDViNLhCFf7\nENBgJSzN1dumto0q1pNlDNTbcKlujWmM5RO+6RVPBqRTgAhcf1dyqNbwUAGL\n+EN5+eG92kYvg5OwYqympea9ApCgFP+OkY616YigGwA/fIzl0W3ivdETYzFd\nDHvFeYPGbCF4wULX4PcgP0fSudloIkkqeX6jOe2L41modw8DX/LwaiJh68Kq\njUh1Cg72VJQwtUpd0Jf8OEFvH8/noIfThnCTN20nnJ995YAAph6uRZ5AnU/E\nl5ZEpKeXTQml5j0C/46iLf6v2hc+mYb34cexG3TS5r1lStvzPnrI0+i6Skff\nGtUFQhDANy6hoJZAFOL0eMKpqRG7Xku9iUsZsOX2DPFoIEqIq4qVt906F3Cw\nuLEPTRo4al+OTy4IohGNEuCPXG90CcKV6NnrJ31nF2x4aimJ1p+eT6+MvY/F\n99VfE8TDevy1/ha4A0x8jWavcGsEZHJiL26ediCSr0Q2Mw/nKO/QOpzfG2l1\nFXH+hf3guIjjZon4AZHcbfIMj1PK0N4hmQt9/9iW0EVxVELQVxfY184omJ81\ntrC0ugKnBOnCo5d2RWmQ931jgmtFljdzmhpGvz3rq7FwJHKHYCvrE6tCLaXA\nKABn\r\n=nUVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/density":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ef7de4def.0_1579901564548_0.34955618109567266","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/icon-button","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44f8a542f588fc105242c52459f33bb7fa5fbca7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.93e2288b6.0.tgz","fileCount":37,"integrity":"sha512-0C329ZtVIqiEB0b540lmobHNV1j3q6/6Mgpx2zdxjwKzzC9cNpMivaOJAVPbSCLZi4AmDsj5PcHEynH4TF7CUA==","signatures":[{"sig":"MEUCIQC9jNetenEJklOzR0i1XnnlBhsrxrsv0oG7b0GhiY8mZgIgC3/M+KpKYXoERuJZyRCY8/jjhRNtOQ3ifw1T5PE/c3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGe2CRA9TVsSAnZWagAA93EP/Rym+6YXYmhRVwusRyLq\nsEaddQDmIRzm8KIgaEYx1fWFHZn/+pEUf1mimDMaSCWkjKUnRuUL2HdVSj/R\nAhXnAdd/YiBVRmnPX4Xk1Oc/C+ESOdvIQ/ReWbYNWE9EGqo/ztlG8Vh6K2uI\nT1fQTFMBc1tKiH1G+R2uPZz/DApe5D0tczifnAQKx+Fim9FnRViD+2joiPRc\naQf1fJTGigsFnIUmimz59NBdnCoPOBqLMRrDudgADp9szmi+ihjXQWea8SD1\nI2dmkpnZNkBt0LwvvTthu/KZgLj9tK/NIEBnCt4v1R52NBixlC8r+8tpd95e\nSirN6tAL+iKfDZQ5jzUrtfmlKlF1EDBtL7QqyRy5bylpcE64BFwZ8dxaYg23\nON5y6IYZgX2sZY7tnerhhQ+h88U3oa+hYCEsfw3jzIMcB06tYC7foyB0CvOZ\npEFMQ6wu47+BtBQvDZ8Q3D7hfB2nPR1Xhp0TBQdz3loA/jEdkL6KNrOeor/p\nypbAiWDG9G5f4JZeRgIfLFRIztzX09rB/pKhd33p0eL4H6oA3gp21y+mkpvX\nVHZUzw3TmoozlHu/fPZfdN5PDGy+lw2R6/mhxy5jVpCNTkdRk5iFAhhkSkJI\nMUccEWQoOMFYTmDduYM8aDBkuZUNKIrJXVGG+yckr9amuxyiDSoh/epGdsJE\n9fbm\r\n=NC7y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/density":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.93e2288b6.0_1580230581839_0.1832912082574154","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/icon-button","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2676d608c46174b477fc169c24953d46b3e324c4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.34ef15f67.0.tgz","fileCount":37,"integrity":"sha512-YBvinu6KIePoHGmKpLa4wC/E7bi2FCGpICHZFWiHE+NY5NWM6Cv9QGlaFdA+e/cpQR68QDUAUYMhjlclvhwQKA==","signatures":[{"sig":"MEQCICYOqPeMHY05PkaswCUAgVzQBRX4+tvCv/UdUwK0rQovAiAdx3e2CfAHyKipT7jrAfSXuTNpSX5Zszo2Va3lM7DpwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5SCRA9TVsSAnZWagAAqvwP/16M6yhrSJP8/m2YIdwQ\nxt1FnGpr6hsthlW4hspzL2Gady0nFG/E3mkCw8bHRrXLxbv3FPsmqpb3n3zq\nS+wI+Xtsr9PnueziUnmARcWDxw5FtjNogz7ydtDrs4HUP472VuLuhmdE/UFo\n5Fg7eUBGBdC7GBEZ1GsZ+DJ/kYxghKby2OYRs86W3cpmLdym3hyYruMIRxph\nUIDd9QFHPuqwNR8ap/77v5bQ62xBq/QymYKIQQi/PwwFvNqVCYhi7iJ83/eI\n1UckGz4io4tFuZSJm8R8tBEztF8ocmeOGpnSuxJpX1ARlA7mBSytJenZz52M\nidiveXAGlrLPGvxyf9P8+JMBjgHQZgc9FNIbiRK226SCu8PEakRCAYLW/LwH\n5oHh+AbNFXtqVznG8b5y2XZ5MLlerhcQPsTtfSnWII+DbuxzT1Eh7p2gCGgo\nln1qwpFKM1UrjPcXwBGrxlDC8a841FouLGEOrTm6wmXqPdxp7GXI5iGjb7Kv\nXgRIK0dtBUSKQx/ogdzwQ0TiRy53uoqWbDusc4QB5ZRR5dIM5wdIk6qDWILJ\no7aT2wsWhdFHjqGBY/ukKh4b9bjVi2ffLmdhzC/ehDV/M7vAhcI2k7P9zG/M\n0BHGO4konBtl95Qa2b/dcyasOdKdfFjvlJ7oZq+nSV3QLa6DfB3lhImcZHIA\n+/38\r\n=t2SL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/density":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.34ef15f67.0_1580232274454_0.14161375481774297","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/icon-button","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa45e880e9ef7126859ce294ba0471c6e33a2a50","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d3d176ba5.0.tgz","fileCount":37,"integrity":"sha512-n/2Zk1hVgmYz66i6uof2y8gpmoEn6PtMQqd6key063am4HKncv1/CDyvJOeHITz0Q5wIm/t8E899VlsfISqdmw==","signatures":[{"sig":"MEUCIQD1Iv89wq5jYYDaQ3fnXvRSH2c7C8y9c1179lngTLHbsgIgR3I5WdoXWHH7pZ35kWCnxnCqktLaN36Lp7hdqjeL5vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+GCRA9TVsSAnZWagAApW0P/38ddwmnFwTROXz/8wnN\nNXVkhbpsHcXSLqeZw08o8Y5N2C9BIN3Wm5+y2kg4rhl7PXQR8yOVCyB4utAV\ncHYrwh74i0yr6q6650cYfeoMbFXjzDefGmo9LzvS9w5l9u21yjfnoUCbNidu\nbRgttr4GkjG0GI0Y8LsBcwZ+9f43dfACxlJyIhbtzPVW+YY0tXYeszLmC4hX\nwbEH66UtGJL+EEbP5TBAM+0Ia+bY2YXrrem0u4M48V9zaQBTz5pnHsH9fcTJ\nBwFbdas3cR70vZudF1cD1aGFwObHMURAWJgKkZpi9JOBKF7eJa8riqdhnaD3\nHj0FUkrGXido6RMZxuzZKWcawHO/Euwv0YnSeL2pPuL3iPiEnJEQ49ifJHbx\ntjLKTLW/sQnDgORWEl+aAtalByFXPgj7FbTL+UtjdXk0oFFwWAE/HtievGQt\n7C+icN9l7ELYj1j88twYiP+Ps6Nj8uHUZ/2gp9Z47Ea4GhJCEgIKY7is+9QS\nCahFIps/9Q/nKKNA3bafyTElUUyyPCkdQrewRKNkhHkP8hXhc3pkUlHKSDGT\nx/slWl7NrzFtE+1bUGSa6MbA6d+DXqsaHMXaRnsDRsZM75Ky6hLlUfWZpnqg\nWPcHlls4OMStrQuAi8EK1ATMyzo1hNiDezIFg67Nh7XqtJOzU85rP0mgcqV0\nR1d6\r\n=ZfZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/density":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d3d176ba5.0_1580232581587_0.20846059640867298","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/icon-button","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff89c0081fcdadd53c0a18a49598832beb47056","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.32c1df133.0.tgz","fileCount":37,"integrity":"sha512-zAbJFHJp6Z8p20vHmT6m5ExUStLF5rrPm3ZcrVoB/1ZuHNmiheDb4YYa4ihNekEmdiVXj3SxF4THgoa9pcZMCw==","signatures":[{"sig":"MEQCIF1PReDyIIpLkwRGL9CDIcIkFDRM8pZXi1D/grFNvoEMAiA2Mz+2Z7qas4zSeDhivBUyf63kEND+AyHtzN4xkIRu1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7uCRA9TVsSAnZWagAAiT0P/RjwPrQVol1dBk1JQCgp\nO5x1U+pMRkKBPb7c8Ob/VScHp9q7MZ2K2G6d0VXX47+daHU6mWR1xie/zee3\nN/7f9BgNalcsHUwOvroNiJaAbyDVciCS0wDxuWjd51LLLfj5kIJzN/W1Tc2E\nDQXv5Ii4wu2i8RKxQ3yS0PnU8zefXcO8IxD1L1fuEVsNGvbeGr7/FSNKP+Om\n9rqNfGhHPT1NatBlACbggCswGja4o8glCJMEQ3TV2SJgeFyx0tHsQVHKqJ4U\nIEuZUcPTyacHQcp3ArGXO5RvWodQWh481aJXdeT1GdhQeeCz+4GhE9K43E31\n6/GXhgGpRIThCZK37wcuMZrbvwQ7JOGqYAvCCaQhnidO9M5ozd6uI0eInEQz\nZWbyQsth5bDbkVRAUEjn7vSEjpniNUb2YGkXrCpMYlU3ajVSCXhTaY3xADQr\nPgyrQ87sxI1R/9Iu0ETCStOIFCAbNWtCB2x82oulXPVswWbheEHAYk0Y92lx\nBlu5VmXCCps45jSS0rzDshgmIh/yws5GhaMfLbHZFcP8mFfXSjEAwtyET35+\nX3UmQQAFg9IRcqYuWMQGVawIbfFe8MsZxt26kSD+1omh5zHYDyY23w3LtQK+\ndPRgwMJ61KHztTARxG0EXnb9MMrtxhepehX96soGBi1Z3rD6u/sYNq6fyVvh\nE5m0\r\n=F23A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/density":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.32c1df133.0_1580240621750_0.41149326771950334","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/icon-button","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e18d4d9d553f5225653d9687b0576b70f1180ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.f3adce86f.0.tgz","fileCount":37,"integrity":"sha512-POCarIfEbJuzLPetFf7yf1BTNXPtb53h5Qx7Gj56IX16Y2NFf8wtmdja/9ZgFKCE6oFqDtUmki7vaNEa36j3JQ==","signatures":[{"sig":"MEYCIQDN59vnxpcZBlJwffQ6hAytzgsYkF4Tt9r3ZmT46cr+PAIhAIxvqa+jf2u0mmE5FB4R4A/vY45uE6XKNiEAvyJBY/qD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxcCRA9TVsSAnZWagAA240P/jqv1GBOykBg9BKke/VA\nE1SMglNdkBf2Y/dGlNl0pQomRf3EiOEuw/S76BsDzviqn4afgAC8oMesvXEY\n5cWqe6YBzOFQ1Sv9TyRXVl03HAQYcbeVeGPtTcGl1L6t6G32u3nQnCxkLq17\n6ThKNEVt5daIMV+1qcN7xGtPZMvbkFIckJXoRpm9sWK/lKc/YSTuWLEw1E9/\nRQ9+IZ78SFIsEDkftHs87NdwwszB1pumquEURGbtCJB3tFj3DpMlsrsqCKlS\ndAbE0XwCTd1WjEAeMCwx+jeFal5DwUGithZsufCX2qNkScMeXND60Tu1jmvx\nILXpx6TWxnDBKZQzkcPVVPzzBVOyQBibMOOYgDHrK5jJ+JjUQxk7fY2Yiy0d\n5fB0gPRh4cfRd/KOwnKHVKbyn2f2Aye3qhXuPjPfetf22ZFuiUopRB17v7Ge\nEMeKuLuyPA3+Bhf9gXNeYWOzbLisV5qeWKN9Ny9XUDpQwM3HV3qnsCRAJVL/\nfihUcgPa/DrpA3m2Bpd0FtlHFxJ+13WG2RmTStCpBVJyQTa/J5UbCh3fwNXY\nA6gmtvhkl3BH8PlrTr7h8l47dhz3UnEhKifh5IpQkUVUbwSqsqkuq2a+V9y+\nYEVp8PsThncIzh//2KuHXWKT63t5ZhIgeaQB3k1PVHz3wl7cKFYENBNyozOW\nw/Wn\r\n=S7Ih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/density":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.f3adce86f.0_1580248156467_0.19589024801698507","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/icon-button","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e4c9145548ce4d98668208978a024a36785e12","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a4423f890.0.tgz","fileCount":37,"integrity":"sha512-3g2oPY/Qjp09X7ltW7xP4jytf5sbFmTckISBGfRltKxlPuwRX8i/vyG9rTRYOdAuGlsuG2y54DzOZGsxJCQsEQ==","signatures":[{"sig":"MEUCIQCSAgJ3g8RJpHnRlAsQeGOQK2w83bQl45kx8zyMHzOC8AIgJ2ytDMdw9cb7xOMHP7AH6IiDMaZUwRM99ar5L78ww5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSnCRA9TVsSAnZWagAAB84P/09mM8in5vM7Z/v6zWuf\ndpQkyVfz0w28Mo1rnK150VhowChfUtYtAx2aRC6ulPR7OWxxI5ubFIK73UVo\n7frHPHTXwAxRsludl3zGP0Bixr8vsDRs9mXaxvGH736EKHFpnLHLyHUvNgSB\nWVm63oFi09k62KWp2NQtWQ6zEqxC3CnOVtVObr9gPI3TSoGoCTj9ofljAxhI\nO0pKXCryo3gWnbJD3p7Sp77R61xXjhW/tgRM3CJEdzmKV2OK0WuXJUN3GIAI\nVKVnB01dDZXZA1ylktZiDkIn7DaKGmmyxi3oG5h4t1TjdnSH1nANWSkDJ9V5\n1Xu+nkkcAkZR/4iAT6XRZK/hJ93kZlDPrmagVHojjHwULWQLkWKYEn8fL5Ud\nwai1ic2+noyt2KpPOJAFF39WYpDqPHzhQYTqLgMOrRnZGTzZu4y1JACLtsdf\nj1rVSvsfHymK6m1/UEi10S9zILFkxX2jdyb/04E9hFb1gEb75eoXITIE5sSs\nyU++c7xdXen6v2vTMQaXE0VJGfoFlFEdcntzUFWbTGrTbpKI4u4R6Qddv7zQ\nkYu6dOp/ntcbm74dS0mc8PzsQnk6BBLfHiM23A83MXl0zC4cBT1jRfrSM4eh\nLaG7PPGxG+/kBv4zqqKOIAoFpJwQsavacSJW/4lHagmSiZUGSDeIOkr14hlc\nJ7Ea\r\n=F5WH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/density":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a4423f890.0_1580332198587_0.7992505052411905","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/icon-button","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f215824a4adbe09f5064c3d38cb8dce52212e552","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.9351f167d.0.tgz","fileCount":37,"integrity":"sha512-blH8YOjhjvbzBpdvEDfB7SOeR9MZ09hi8FndKCSpPKUQMF9k2myyzFo/EtSKVqbsJFYwS8qInCUDyCfC9tu3MA==","signatures":[{"sig":"MEUCIQCfiYANDBZBBYSrbSJrFMUA08mg5CrTHxCSB/hLUR1z7AIgF0r0NmycL65Raucdgj+PpuU+Y0+RaQ3sfW95OVY/F/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9xCRA9TVsSAnZWagAA7GYP+wVhp3tlhYH7kyhtNhQR\noEtDJ98K9iN3Ub8l76qi+frj0i4WU7b/B4anEzD7TcQ8xxhHbZfqhwrtuXtl\nLtUVJLxTzQaxAyPi5+6AY+59aLRUYMiJrapk1ZqEYwBdV04+h5XUAs/Wsfcu\nCLIFoH9B/J2NtxSwZl63RmRUk22n8KMqkbc41YMnxeOZMnF0/hejptFisIJ0\nR6vgyw8dS7kgJKfISnEDcHUTJYvmpEQTPugsN6RCsvpZT81ZUZ8GHehJDV9Q\nHwn5rQ5ivw/v6WBugP7lyqaxxflk7yXYFtFdY3CVA2vN316dVkUJrlN2vsxJ\nt1T//Mj1dvUgLLuHQfx2PrXGIV8CbFIrr8ewUzAGZxTfWS/piqVfLYPpvfXK\nYwL9mmfDMMx2KwqeUZt0JZobwwTLz8MEcgEY8A6RbOaa7D7Dn6WxdLytYImF\ng4VWKU7+CfmsqBzsV3ttLQApXa3QUfeIfm1wowYa1ln3iU2MsctdsjNuz0Vq\nNUzvx29Pc/SDZU0E36CXrlQFbxJ+8TQ64CUyYh9Xnoql7+5980laejRH6jaK\nHrVWr8VKptEr5IgHkK7yW63rf3efdS9SFZBYa0c80gamfAtcfzoMdxXLxn/T\nPpEK6bJUbiJU1R+OKa4ryOvStTk+Ot9W0nQFpflOJ5+kMbkhv7tz8GWEB0CM\n4yML\r\n=3CPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/density":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.9351f167d.0_1580334961157_0.3056991671823861","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/icon-button","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac4bf4b228eb96a3a9d1bfce38c625d776c5d4f8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.29b89dbc1.0.tgz","fileCount":37,"integrity":"sha512-t9Uai3RTtIX0zOgGUG+1MUL/kdJbNfcgWBsO6GZuZ8Q01SzTPIWHiTgCkovzuZJNZaarzBgi/45mEl90ciV/7g==","signatures":[{"sig":"MEUCIQC3rToLGPvrcoKSCPw7hlWN7dqeLGlbN3eFNLxzyFN7SAIgGIbRSVIV2pWzpWyGr7dxTzwNz2BPkY4w1fTjDZnfiks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRYCRA9TVsSAnZWagAAe2YP/3YKkIbzDTce78jlF/4C\n5/9MhuFQSzeuk27VcsaJd4XcdupDSRywBBngBKIhH4L3BasaOSfpPLx6CZqU\nYDO1TSiltbynwV+/zOEdX2Cny/Rbm21RorCYoQ04zVaV+Y/JyAWtATymMuZ+\n1u+IX01zvKt7DgkT0dNWi9tU7/Putu5nCjmqPvz8S1H72386SNIuoUr4MwYv\nfZ7jGaPMbK6AkGZi8y9eTMdxN0T/AAM9oh2ZriwBJ9yU6CgPgcfTmpzsQid0\nzRurAIzZcx6QgQJaBrDNSyiaNz6wBlPYYFO5V6NCc5lvm8P1RYl4qq8AFdnf\nJ2S+deGceTF7zT0Nngt3vbm3DwiULJBtCHQ5PXlMuPqCtoKgVmqswdsDvFPU\nF18XJzxwrpXRt1kmQGIA0S5YTXh8GnOAJ694S8YvBOrOTi9oD6IplZaYNMJz\nv0boJM/1P57Dx6lwduSr/qciy7Lc/5rvR9CK+HJXQkjxDe+eKU+62ZmEUXAX\nO5/XHbt6KNpt0yP8fZQztIjWq50w0INtMoJob0+DgTCQSpVi+7kNDy54zRuL\nfutvkHYMcnv3+zXO8asFrcZ6/1EAsLUN0j5G2maRn7NwT90DWrsBzvfH3c/T\nRfw98RdOeq362W0KsRyCPaXUfIDN5p7RhtI3dd4hohRIhXCJgqdKz+2gCacT\nONiH\r\n=p7Km\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/density":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.29b89dbc1.0_1580336215603_0.6607315420116053","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/icon-button","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732f959d17da0a0a72a509bd42a6682990dbeb1e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.45985457b.0.tgz","fileCount":37,"integrity":"sha512-mgdfeNU7RGOQUapytOszSvOgW9GauqCZkwoI2I6hFqK3MVRecESDoryuEB2GK6JI74U2zDxk2ubhT18c++G1bw==","signatures":[{"sig":"MEQCIGEsvdWH+E+A7VBZu/qQSgrxvtf+BEa9/UFERLg/K1YYAiATWsVdZtW7237NmKFl9Jo+ROrn4izvyeek2JvNwMcsng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZACRA9TVsSAnZWagAASwEP/1Kt9lGgmWTmX7M3huBD\nyf17RvaUo6lVaZDLB+/2A/kpgAXJr45MO0VV1ZlCw5Oz8ahi2Vl/d881uIWc\nBduLHHVZM986lO9aml2Alx0cnPqDbt7yuQ3JLu4/vZzxy+0U9c+76TEYOsr1\nVLhr/euCzqlOtDkze1Oyu0Q5i1lcn01lk7bAs809TOg138vU2h2sz/3V6abT\neu2xyC8+tTDvEAIx8nhCarRKf48OpnkSGBSxhrC1+L9JZ9K+FHq8tmXXP6eM\n7s4dOTzTUOeF+U9yDx2SfLtHDnJRWT8c5gq31LJ8n4UdaCozRbF14dj2GEw/\nXO5DOY2vJWpSRsYbyxXL1/Ew4Q2HZIuBksIfGCEggJY2G/1Qe9jki4sd6YWy\nh6op6DXW1wpU7Se64uuBDCZ2tCKvqSe8GdDYp4uK33U4GnaQ8VCz6AfnJ3Y6\nCyak78qey+hu782E3w4ej9tVKMIJIoKhbHvJbwi+WVo3EIy3hQBGYyjHeK8k\nVq+EUiYW/CNPtxrXwHsWEs7PICkkV9I3FFL+wSO2k5UzOX9n4gC2IrAXeTLJ\nQFz5sjpY0vx7Jd+tLcr8+zcNpKX3thgqMCjpO38Ol56lwJl1pDR+J2ZpWJFQ\n9y/7VePoM8tn0AFYBYu0o2STHW/zIorUcgCK2O5S5YsRyXKcc0z2/p0cox6M\nJLlh\r\n=Nz1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/density":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.45985457b.0_1580340799927_0.364689336576808","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/icon-button","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b06f0d3e924dc2d6d178e3c6e2cff571a25949b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":37,"integrity":"sha512-g5lN2zVovaF2w4FYJatcmsPVYLO42ZWLWXYzu5EbktbIOxVGp0N+NYOUhb6HKm8/pjPnqn7ZZGoiqC5NCn2JRA==","signatures":[{"sig":"MEUCIQD8NGrLbIGcHXa2zbxAFfc4yXHR8FMd5Q1lD7KeUqrLegIgSl+FbzphkblDVkom4X6Pt0LchAk0AIJEhpkKNQbqE2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":314285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRjCRA9TVsSAnZWagAAi+QQAJAlx31W7I7zilNpioVN\ntSHpc6ZrUjJf6y8TMkCDBF4MuBOz7m+fDTucTHbsjvigeaWUUZakj6SvfVPb\niBmdYekeqaRe5KGmpKCs35PzCAk11ajsbK+hBO16prnPFh8ivAfA/+4DJ7II\nSUB7zf4qRgqSkRHtuYI1UcJMXdecBcE3pqiLf6GPP9qu4PZCiy3BRedyc2J4\nNx7szwv7659vGw3eCiFJVp4JUK0MpLpPqzaHZCZ9CjwII7Oz0O2Y/jyLVJLV\nYthDJibfiFZIQIn5Li9lGUUzpRuqEjHT7FAO03mOyn4gi4oLn+N1oGCOaWou\njeVmtDxnIqaIGV5XV4GJqR0piBppqm0HrtHjFsNyxxRrO5vacov1dzHbSrcK\nj60wj5PvXdZvhl7Coce6ly/MQzYUDSqvWndJedwJUyoz4ii/x2jec0NWZhPV\nSoTAvc79UGtpY7e6zlx4sqdmfolzZDcteMy8PlWvKW7MAD5r+0l1ndlC1IZJ\nTBllFYyuaC0N+OKt3dvdJ25nmXPsvf9zNZ/R0eBHXeT8OtsoOs/xY7QIT4zz\nTs0tenr34o7yV5REs/vMS0cTg2akEqL6PZFMZ4xxNGuTPqRfr/MaZcRSPnl4\npLSzGi6TEbrAMKxW7/JktSkgWfHhtTGJVhRUsUSpX4qBtu1+gxoEGTO6IQF8\n7l6D\r\n=FaG5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/density":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.a1a0deb3e.0_1580405859002_0.019113873664092784","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/icon-button","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e024f01ff7091191f8433084f0a29d697ddcae1c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.181486643.0.tgz","fileCount":38,"integrity":"sha512-Jdvst0eeOMV5496SM8wpLlclydFkVFdSWh+8DOkoiRvh7bh7e3bNoAAFKSN28iTMjIeot0Nhoj2s8URTA9B84A==","signatures":[{"sig":"MEUCIQCdcC5U4XeIfTcSinw1SJYgVjpM22HBhWcTWST9LljnVgIgFE38kBNx3lO0n6sXeUid5kiQNOcnwcSQO8++nzLZyfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L9CRA9TVsSAnZWagAAbOIP/juPalpJEv/KFUMUbLv+\neFx3n5dUvq4Gw9uJYPr9OKSquthWowqYFW5vwCrDeDIFQkBB3+6Yk8fCRCmi\n+fYgZSL68/ah2/tyJ9cP/DxF51HZyxyjSkNNusy7Tu8SKeulrZeHa+biLHUe\n+RAnh2ibiYVINuPA2ANhhQqMjcHsz6orbLiKkuiPeuN8iPEA+GgPO5EpP6Iu\nnyghhCT5lx+n6nferEJhwx2pzYtss9o5WJbu9APJua/cZtCSREO5Z8ayUU2c\niA8o7djHvoL1QRt+4+Rgcx0MaG9Yn1nNxhWi1JBYq6VbpBZdbT1yjHUVKlXT\nI0Pba+N9Cx5SJ2YcQIkL23NCa0SBleb14Gwg8kfeneAkRp6+gCYGzKix78+v\nXW/AUkbJVZs1Vfi5E2O5XXAIws+jLh5vHsaPckY4noX5jieeiVcJ24yYOrF6\n28chsbp1vDTWEK5OKCC9ET4EuUSLhkXr3QH6tFYurLaJqnp6btXps7d5D3oL\nzPMCJXecp/ZFpq0R4rlLFvN2RObPLQHFCZI1rBKFfE5bVLFEACNVzKJUE6BI\nYxlttj/PxDxpe1TYDHmSEvbK47QaLHK7NqmBmXo0COnM8Mw+4fbvYjC2YzN+\nJlB32+9qUkcLNSowJXJGPtpnFMf6Hr0BW5T5TlPK43Q0aoqWSSaCMYLBIk8Z\nXdOc\r\n=Cc9A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/density":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.181486643.0_1580417789007_0.5292915521079182","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/icon-button","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44034b9643129078770031b23e5ade5fcb248747","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3a85313ac.0.tgz","fileCount":38,"integrity":"sha512-49mU8x10ZAamOGthLE2b7ZSkqTsHxTcAU7VLBKS6uXJk8b1+9lzOp1A5BQSu+mrD4/9HICY3gpd30AzEYfEEYQ==","signatures":[{"sig":"MEUCIQDV5G3Q09Wm2p6GGKPhQtAWU5LrpxYpvikGrghUifMiWQIgbNqqvyZZypVMy8o3HM1pm5/Hl9qQYr4ONiuB0akI1cA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSDCRA9TVsSAnZWagAAAYkP/R6v5LwpjBCQcHmcAGaa\nlkWXj5sdPKlvk53QD/D16QWUvsWJeLhjshrWaEwes3NGApJpz1Zvezl91R8q\nEUd9zDuII4WAqO8dL/wthB3psBRv2gIQM+0J6oRw0fU5c4cZE0G450xBNC/r\n6ScvwNErwDZSbr04cHWQxgE/BRDWu4VVUE/Oys46Gil4fO/Dd9FL6fCa3kn0\neGPV6eZtCl+ITSOTU/fBYIQ9MbgD6UG4bIf8aVoK3W4PcLYyP45nTCM7Gsbx\nOtDgEJ9UvjmRCWzvv60GtvVhYRBTKLYKUeh7NVMJIBV97ISKsouBdb4p8TAh\nl4f45Qvch8y4mBdxaqVYkwSeCJo0dcIwAs/ywUsCOEB9O3QVwY+MKCKVV4NJ\nFvvwf6AOaI0Sx8rNuGUsZiGpJi5qB3iay5tgKIaJgNSMWUCd6zdkeNob1UMg\n7SNilYIfsPghR0URD9C5VpcKn1AW0g4BIdrcdchphP8t2Qi6fZgXsvSAqFJV\npAEPUqHZz2F7EYd7BL7y4q5SO3uspTmBmPIcVw33t3MTJijYtDhdDEIkp2In\nHVPlMbq3ipF/UnFnTkqHXiPanjYFKexSYZXOZdnLO1rkzZrcfnh/uZBX+0Qs\nWPqz1DWWtM+SVIFp5E26GQYmGVHlX6MxjbGFTbsy6RNEwFERxwASdwNPo2dr\n9+Em\r\n=2zsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/density":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3a85313ac.0_1580487811156_0.7292757967503034","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/icon-button","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313b51cea8ed2d7d913040452bb45827310f2f6b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b6c7f624b.0.tgz","fileCount":38,"integrity":"sha512-gh829YIVLUC9f0VWxCHJVjJ5TqTLd3gIwHIqCsm0W5mXSbCCpjp9+FpkyALuII2FqiXipIuSB18HJh+38QA3Rw==","signatures":[{"sig":"MEYCIQC6XruCNZDiJrNXGGqfR3uYLlj91Id9d+NeapyM1S2VXwIhAOqOmNMow8XjFlpGkSlEphA4uaS9ldt6xk3pIF5XKqwM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3ZCRA9TVsSAnZWagAAq34P/3RKoo3iiAzesBCou5iy\nIRcl+fCOppt9u8mlSBBymf5F4tO9sUN01qzf9gkxGnB1z3jRLeHGqkP69YX0\nwbo132JZeQiuvB2B5perKPwXxLDOIPbsQesohGJIHZawfqNbr75sDWHcEGIF\nzra59VmMZrEoXTyuKfuRedjsvbD7vGrUqjvCAWPtc/4QFRnVcThPR4ibxRCd\n2j0H3DmUhVJ9/kGMHobVsIWBuT09gQrIrhNjvAIuot9Qj70yPFSWLMkB0Yai\nIiPzvvknKgUj5Nx0utm45gZlq43AZLgoMfj6yyJ4FKl7S35kaVBCIqrNCzek\nHASsZNfvdRRyKh8UmetBF+FLR+amoCAR67u/A4Q3tUS2z8kcf8h0xvcaWm58\nPHyfR/CCGZK+sMY0nS9P3Y3xQHuRElfPwANKWMmhF+PWBvrOGKBecaWkNPdi\noT8Jtk9VeY20sgYasiB8HxSbgfXOlSqXaWmruYEVM4bvmtjawB1Cl/sY/AYA\nz0NrrpNL418ZFG19L57jtt7p0fbfK28/xmCHQHK9bY1L9omM1L7tytZL1xaS\nmvZ2y/zMe2TVvxIM4oMLdLReF5gxDDXk4IMua5mib/bTE+m7YNn2DvJ/hWPk\npDAYCU5WWTPNQFQRtQKUhUoRHm+Q9KC05lhnr2X2Cb6OmOz+fFUsd3EVuRjB\nvzZZ\r\n=l/Gn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/density":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b6c7f624b.0_1580490201083_0.13909813264197646","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/icon-button","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b84bf1c482e51c977fd9b91da1e28406c813fe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b3f70ebde.0.tgz","fileCount":38,"integrity":"sha512-YFUg8NWpVBe8OsHDnUl6M5t6QKHbtX30bSJmClGCTJn/JeXVN08Tbx/FrvykqCOFX+vZY//tmnF1vu3f3hkS2A==","signatures":[{"sig":"MEUCIQCw6VdYij6PeT9/0jeim2V+Sjkmc7lFYqZRF2TuABxkKgIgDH8Y2Ov5RkVGwO8W47vVLxui3TXzpsOiSAtGDKtLkcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIm6CRA9TVsSAnZWagAAjt4P+QCaDE0kqVhK1y6N/z5f\nD6juUw5HEY0ktAlmsgU6tF6oygtt1CUDngP2jaWAzkXRVWaAR0LF3gymnPGP\nFeNjSBDupBQ05/6fhj+jkzc7Oww83a+rSG+lmW9ERQUX2A3rs2izAYlobVZP\nSKAkMvN62LLdD9VkI3EnRh5xQA7WAK3mVzJLEXa8kqMlSwQY2K+Obrdt5VXm\nEQgZrlzO8Uka+u0kPQimSWkPmUUp1wBHDEnm7jz3F9FsWT1wAQG/PLsy4fp+\nOzUXFK3ue7nrCCk4uprYyCeJ+J7/2/ABszlL4rQA7bHCdZm0fSllIGK5Z+8L\ncCsvjZQBG6BeLDLuRskxN3LmFiSPsLh1pIvipfGJwtQTo3PcjrDm2upFWpVZ\nrS81/Sz/vrPcIuxk+MFOJmjrf/eePeWEgHUMJcxiahZAmte9teSELAzYOZP9\nSTl0jlf5bcBaLF91dg0FNXRfWWyKNIUDEkUW/CjOO17CH92pvoZPLlL4TCOm\npHYZK2WcUIUd2haMiaz4cWawWxYzETdaAjUwVIhd2UT4SAet+Z6H+JT1QiR5\nfzJkEAypPYi94bcPKbrGS5Ea6hl/3jggRQZ5RztUmcwmshSkQva1dl90JSh2\nPkwEcfw2644KYWw17U37XZpWX//fLb//CNDUtMK7xk8XufDSk3U04gO1CPd+\nXYIy\r\n=xEfg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/density":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b3f70ebde.0_1580501433783_0.15999359359908683","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/icon-button","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"147ff5901236dbbceb0d70e5a05da18372347dc9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.3e782d8f8.0.tgz","fileCount":38,"integrity":"sha512-OZsruTo57Rlvr4wvWsGSWw1g7vHv+PDZAi8/3+eNFqkR6IcNe7/KD898PiVXfJwoxFMCnYWtUkWn2DlopcbyrQ==","signatures":[{"sig":"MEUCIQCrEpzmVO5dCRtva2rBbY35Jvu37oNhHUhQL5F6SOzgYQIgBpBZDKqFjL/0j774mdnkvY3tmvRSRekwfCtIahEdE7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIYCRA9TVsSAnZWagAAwpgP/0Vmd4BPGn4QX44RtjZr\nse1O/Csi9SRz3j43IjTmpB8aTiFqTg3UWigk7xWEFNoA2elx+mfakarjPPFJ\nk4cmp5lqpWUja2HSVQTplTzW0g4l/lRtnEYIXutcmxnsMLWuXcK7Qg0C6nnp\n5zvFywVxejNn85Fqn0gJx0DJ26uz9kqYZ2pvIB0W+EG4IhbtxIkLNdMuLhrw\no5/dOfUIV93KswhchxzwGRZT6Xjihme0unKU9ia2ssDDNn7w/ZN0HgQ6MxzZ\npvTLLuRGYNO2HHYIMfHXzHOkcv8C0SB0iWOSNK8PKACUSjh6Knva+pJ88SxV\nkw6ZhkcI7KlzhU87NUqMHpIw8ZbGPCT206PEVAl5Uv75iXms2k3TrnP5B1Q8\nVrKLqU0ff0tTcFnJfJUABRNxrq7j85JdzmD1vjccfwox8/TG/owDDG9PFBaq\nAVPE3cTcTtWtHn0wSzSr/udzo94YJG+VCYPMXJctomeDlxijgLCXcUvtAAMv\nXGzo5SpZhVBloK1EKiqx9X7wPiG+hdLp/Cy+I90/eAxi5kTDX1JisVEzXU1C\nfFnqqvIGDOhtAWOvGKo3LCIbLGWqYdG5Rwiw15PJyiDIcWf+ik45zL0nOh/1\nH1AtxxQYYY/3/abObboIlFOsfkM02kds7byMVH12Y6lP2eDdktz3YSqylW5m\noA/H\r\n=8Kwd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/density":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.3e782d8f8.0_1580605976058_0.7907524504395327","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/icon-button","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfef875d54dfef24d58e152a55710b005948b470","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.535398572.0.tgz","fileCount":38,"integrity":"sha512-ymZf0rh7AeVvvkcCpffBd8vgxIspgGObfrnhzhJrvYQ4xr0sUHbV5R4JPUNP96bQ9eZ0HcEjiJxP/dswoA70hg==","signatures":[{"sig":"MEYCIQCDUq2raacM+wJCK9bI7RMoLkG/FDFHUOtks8wLvNkIBAIhAIiLKKIXWpLopDpcpxgGERk1m3DjKvq3JK55opUMTCm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJ/CRA9TVsSAnZWagAAGLMP/37BhG8KqbEdTGX3eUdh\n4z8xihPbm3ebH+VqJZGNQ4YzwCtPV6zlJlKhdujoMGq8oVVIou6NES6mUA8/\nxs0QX9KJMJvaUrEtjboEYPNHvSAimt0Rz9QfaT2ksOM6IGpEISzFrOS5Eodg\nX8P3IFEuar7DhhTFrKjRc2+cBrQrFHuDZt3LDMF8dzYTtHceOWCxJQ2aO+pf\nt3XM0nwIXoPIYrOIsYtef/BTABCQfGPE6bDsy2gV4TCY5MVqGt4yNPqK2F+z\n46yaU8yySbgLCZsq/fdOhh6xpOnQ+XohHe4/rP0hMqnY9KHdykMTi114mT3Q\nXxAIohJnyrZNCn73aw2CMrCPndREnIfBYyIsHeSrzc4qJsLBHz9dQKfF8Bgh\n8/YgHcxd7g3klNfcnGklRPPUF+TSq9Vm7jm5li7GU7n8q5lI/WO/42BrSEoD\nW8pVpM60Z6cYzdMLu9n7TlILyIVwl+9SKiUaX5DQqsJurFv+mTOeuvT9n5Ed\nMWBoBpb4aIjUrN/iHd5x92CnA1SzXGWwrzvy90i4AauOD+p6wwdo5+S7iPhj\nOYtFRhtnkMGS5svQuZGeg2yB0n42phq4bA8fJAwGHD/07h+Ncnp4ZbDlzXaA\nyL6Rv2v1NmVZMa21P0TOBLv46flmz1hhmRsv64pP0MicpF+QGw/TQNgBK3ma\nxCAW\r\n=UZ8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/density":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.535398572.0_1580753534738_0.3493486167221145","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/icon-button","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a13ebbf7bf2b367af85bcf52e7dccfaa527bf56","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.5ff33802c.0.tgz","fileCount":38,"integrity":"sha512-Hy7KMnGE9U0jAtsNbqKtM/ct1nrE7GlZv4GRSLq1PEhO/ypCV5xYxQuljbpTHywt9FxhmgKW1nHocUynw9qxfg==","signatures":[{"sig":"MEUCIE3uIf/RboBe3MmI135/vWp45TzhH90hC2TmI3Hjdxg1AiEAvGhRXbMXOiubvWdVWbBuC0b/wTn5A8fhrfbMcaf5zUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIjCRA9TVsSAnZWagAA8i4P/2drFQv4x+zU54+VIGkK\nwwABzF8Vej8+EZwXqkG+9K40v2jRapJtAcOscoIkssUUK9AgjlkoZVyCS3Gl\ntqpT3fgaHf0xFJ3jP6LUX8/gzVsFcaKaZxGCjaAgFgD2HkrZis7LiEAI5RAA\nFNdvc5x5FGEmP6cXyz4TjsJNXEKtA4fP1YQRVYX87YMz1eUM/gUfcr2wm8+9\npHMzTNYZrKbHW1eP+XcU+BGlvWSUclZ9et52amj+0ZNGTzfVk6dW6N1+r+wO\nWLOG/sGu2s+fn/ORvDjtQby3VBY+LjjC1BM9YdjSJPeCC03w0F/yhMxm0VK1\nj64CjuxCVngYN68Lh/elI/BWsbIgDdR/ckx8kuy5bozaKWB2f7IZSNGIbmm1\ni8mlDBmMebje9O5KBF7B8pC8j6F2KMX4oUd3GB2yCmjPYmSJa/O4B0PJ64AY\nqOSoGP4l1KBbytzsTceAV3iZ4pVmVmaMkpKbgs8an8BfYviDlwx+TH50QTHm\nfkLf+9p+geJmKpXlliG4n92d+pcc5KRbvMqcStGKdU/DXkFOi6XZdjfiMbWY\nYA4tY26JYZd0jOM7ychfsgs9u1lWAAoT/1b1zG/6zL0KGtcdo1MHzL7VZgST\nQXbg8gqf5YWodqBY/2fYChReMRh7ihadKPiEki0ApnNTaigY7A6a/rpCgBRF\ndaBQ\r\n=Qyt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/density":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.5ff33802c.0_1580839459505_0.43527689433051964","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/icon-button","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714a97051d07ef19524c26a099e24611a69379d1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.1eb29491c.0.tgz","fileCount":38,"integrity":"sha512-YisH8nwVpIWXRYvjYzMVxmOBzxW9qjfwtQqpf6fvoMWeieEIsXojTj/wJTDXJBfu7nOKKpyWPs5lY22SdYOF0A==","signatures":[{"sig":"MEQCIGyNOD7DbvVzvm3HBydnn+pOiN2PEerulwgcZFebFzF6AiA9kLrj6oijYT2CHKFB/Vb21/WPvp7EdLk22JgWRoYClw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduLCRA9TVsSAnZWagAAOnMP+QD4g++b530mu34dFCWV\ni6z5e2eGKngQ72+LSx9mysuI9fHn+zmxAyKchM8Dm295OGJtxhCQNzpq6+E1\ni0vW+YydqhA9WHijUkJ9RZq4Q5Qm3twS/BZjxOYF/Ej+np4EchGZmy4xwciZ\nY+YnTfMez8d3NKGrzlmK3lKHIfQqq0ERVnWlq4Uri2Cp9Hj2IdoyaY/tV0/F\nHVL1Pg7cjztlDKqQwrdmFnTnYtrYZrtdtmtW4E55Cr7/6mkGYEh3qoqb4SC7\n2ocAf4RL9E3OFRpMgk1e77ODyq1HtvzkxHCXOt086ihn1CCe85oRq6Z34wxy\nqJRxp+AhKaIqWODc97uN90+jdUtUrrlj8cAFmIIcHxJwADA4jJvMwogwGmlq\nalhUSfRmdoKpv52fDoiqTjR+KxUdWwzSSGOiNriv+NHAZYB99vjF0igu/vvc\nVC2PeOqCo1ITEDa8W5s8x3rTvio5bWpbUa0EZnVTS0ctp2ZhFqycQX0CQFYI\njsEiPbzh6Bj5P7lhVlVjPxwikiUIyTVWRHceQqq5lame7Bjbt9P3H2ykwEiT\niEgGUjl0TyFf1WdrdXuYL3MafmZaatwp3kFEPEF04/oemV/0jMtsN3igVewv\nm7sZcphaEOnw9HPbZndYlPXdNfaj5j2UGHSX7g73ecP7hZhpuPDRNJyukFbA\nkj5h\r\n=8LfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/density":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.1eb29491c.0_1580850058390_0.1674153845017472","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/icon-button","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68fd972b919c66d2cf7006fdc84898fcaf211920","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.4c7154b26.0.tgz","fileCount":38,"integrity":"sha512-G9yP4Uhi6UfK439RM+yY1z280s8/0gyODBJKRJzSVX38GHWdtc79nFhW/z58kMQWs7tJT4wJb3zhi+5HbS3hUA==","signatures":[{"sig":"MEUCIQCxWHLx/k+2MxirR/LrsWfUsYrorOCQ0/ewPyy6FBnB4AIgSyRAM+xtbHOxQayVHq26E1AMOf7NNGtcYB3tOH4aruc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOud7CRA9TVsSAnZWagAAQU0P/2iP9PigMMRL/hyhVmJr\njzzq19JyTR4ZXhNBVWs2HoqdHFmqIDoo0dvQpvlMqhBRfvId+3N2Ddbtrvyu\ntX4qnpOLmFwD/YWETD4fejmVur7BJoB6QQbko3pahqnE/ovEvXSyuALm5rEU\nkDqjNvjXiKvSCyfQup6vkNG/ml4anwgPe201GCfRfGUM+IJe6POzR8NPgK5l\nhfNSXRFGcCOH5ELOIc9PdQs0p8BXWrbMaTmxOdu60Gl1wZZZVoD9gLlFQLn9\n7hHdhCcvpURo70B2d49vXfKYEwaFuShCyNKgEiDjXpi9pujjzTUlqPwO/H+6\nJE+XZie8cQx+p4HQPIp10dD9jKZbxgEEIjRcaPuGf1njqzeOh2uftWkDA9QJ\nhSgaZxMPhixZw/c5e+OJ0ugbFzVdDx5MaDAFV6InJTQ5fFYiESiMVvKUB/BI\nFAeQW1pWsyz25e1Er8+Yr8vaCfFtGM9Ejlhr8HS2WwzmizlPFB9EoHaBVGz6\nwhdhtW33qXvs5txQl+fbrltbMWAcjSb2h3fivN95LJ6cdI6ea5/HCeHL/3uH\nzt2E/pn2Js4F58nsM0j9bFngXRFagbzpt8rQoXREAomrz055B6JIsfbS/xxg\nQhs4uTgYe48efamMAfxgPRtPdjfHMKMDIPOd4ZVHauYIXDOExz7+qU1tqmVZ\nI8Cl\r\n=9mt9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/density":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.4c7154b26.0_1580918650823_0.039182055384860526","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/icon-button","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a11c0a62a294b113d39d712ba7d4dc5c2756055","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":38,"integrity":"sha512-236iT3ZML9RC5+nD6cvSvDuy6/9h6Ozxq/syM9ocb/AJlMBTUTiqZXSNzN6K8lQp7LK5A5i+8xHNryuwJRp3QQ==","signatures":[{"sig":"MEUCIQDzszzOOzPpx8GNNkpKyB4qpyCYVUw6/nz5OMW4HJ7Q5wIgNkQ/XjxFxurzat0nlxBKCgiiLk6dA9puoVPCLAiQvE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DICRA9TVsSAnZWagAAQ0wP/0C0Yx8wfmmQcAhXVwl1\nd0fkc4sjGz+1n4XM7jZYuIsuG7oSBXcl3HMSE7bC/yG+lQR5oC1BS4lbdJaG\nSG8Qq+S2RToFIWlxjAt1hdklBKZnN3//e3CVBRZu32MHCpy9r9SMIqzJe1Of\nwWj950auCFpR9RDS8KLcZQTRhNuF1yc+8n3ph6e9zkSNS/wQeMugJwKlBIXw\nFoHHZNgp2aG0/ZgMZhDLB/V0gQHuMeesIG8+q15GpgdWUdyEtz7y0khZ71C8\ncVtwsSyes1xisjxxSM45+7ZdE2YtBKmP+o3Pgnd3t+LIToY9naalpiboc7IJ\nvPiMJrf3LpKgOYOo17iR42e801DDxAOlHI14a1zJg+yRLJf8fp7arldTUgNG\n5JvYIhalh6fLTK2XaahwsL1fVfkEZNmXzBR/lp0JlmrvYUcEqFVZU7mahA9P\nq8OC8uEBjz7XiF6Vwx+zzJBU38ht0o0m9xofzW5rDqTXthLO7yNidO4uHjUK\nz0ToKZVQVuCulI9tUYFIMnMdSeKSkJLxZ50yhp5d4YKTWRUpEnfTLcb53iUf\n4KwKj+8ma28efJ4JH1V9tknXbGqyNisTfptp5OutjJxv/DrY5GGx9x9NXq3G\nrDXotSxDPQggDlFCYCOgJ2JhcY4FtoSYGf6Y8ooO2Bgz0DaoPODwbwltZm8O\nGwgL\r\n=vPef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/density":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ab5f49a2c.0_1580945608444_0.12815260612448576","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/icon-button","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4e0bc76be7129311fc6667a889a88296ef87c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.c541ebe15.0.tgz","fileCount":38,"integrity":"sha512-lzsxdhs7p2vbqvY9cSY4CvykGlBdbzTVQC3kSSqGLEyZizami83V1jJ9q8dM1VRpW6ZSgtIRB18vVp/F7ePSfw==","signatures":[{"sig":"MEUCIEoiTqXK6agobBYf81eIqa6DpeeNQxgzKu0t9e+hXjJDAiEAi+NsAdfb5dGX9gOqRqBtoqxZLJWxVI+13sWTRNeqM8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNwCRA9TVsSAnZWagAAJ20P/A5cknUH975E1FSBUTeE\nZlmRSri4qjnSinkwG+v9Js/+XpG2ageQ/TQ1aPOxCN/DhG0d7ZclkAUHIe+x\nUn+sE9Bjcg21wRKJyeMemE4GgknlhymoGS4layRBA1Ok2qjI+HXnUKoNUmPX\nggtS2XYpYNB+5V6ymeui2MynAKQb8InDpIRIa7+KBUnQHV14JQlRgCdghbQK\nQhf4knBSaf7bbZ/hujx6mRnNX1QvSJQiickR8LznPgFv6E1KpIJfHxp5RTcF\nPtEZFE934/By+HlJM1YRY/quhFIHq1znd821hTDtUe4a8R+KBq5R8AV0C2eO\nZ4eBZWR//GC9ibI7XPz0GGWx6Z1P6T+rv5mrazW9kQagIZZo33qKqNYyU2nt\nMKLwjwd8hZ+TGmoUbbGuCagGOrFQu/Kjn6vlYKLdv0qOvZaKkCOpSVYfMgPc\nKW6SDSYIMhJdtPOHI1TmNyZGMA8ktTmbuCxRAgp9UAJoCBS9R9m53UIRtwBK\nstuh4XOGIHYTv18dIhFFkr58UDIfSzoyuTjTFn6WyE+vNqnxSCC79N6210oh\npzZdl8MohK3QmCxcXNi1n4Gj65jjC/AFF5stvg9FiLtFQd0oAifBMzBQBf6P\n+j0ucHYnt/irGU2Htv54tT8ZrPQzj8/N9I44pKyNiNfrqZvLcVS2qag57cRy\nuR4Q\r\n=HkvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.\n`mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/density":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.c541ebe15.0_1581028208207_0.37004959613965505","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/icon-button","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f435279b122e7265ae657c8cc761d4e590492f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.98f7faa05.0.tgz","fileCount":38,"integrity":"sha512-puTWB38ApTONax+T35TTnSEKMu2t6BK+t4s56pne22rnZdVcxYa8UYUE+BD4C/3/dGoF4iT/zUADXI+VmkpbOg==","signatures":[{"sig":"MEQCIHPfe5ZHXvTcEQm63ILVM2T8z58G9H1oBbNYVMnSq/KJAiA7Pi0OAtlBI9wBQzcGSYb4/sNytJ93CxsGOiK2kQgkHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbi8CRA9TVsSAnZWagAAuX4P/3L1TZCwHIW81LOc2F3U\nkRdNY8uZEJvl/qtjinpw3/VyglOPZM/zJ6PxGd642P2QmpYj1H+z27cy+QjM\nYgPFMvsxCP5HdSEe3zy4XBXFC6c1/+t3Uw9Ydq6M3LHwsckgilnU3Q8jcEZg\nDKATtzoQren0IiTjotgSO+pPgy2F+qSi7eU7/klUTsvWURfNX2ETGhuSBL+X\ns2WJF2EUix+9vE466lnqsqX3mfdx0hiLd2xQMKcA6+QYQj0pv82/AUhx9prx\n4oEmb6Jh5v75Ogo7N7aWvJfFFHUV4GAJgTXOXULtu9WhDjt/KpgyphmuzeZ0\neC3q526YVj2TCVK/YF9+n+04vaPZnGtrtw2d7umH4Wclvx6TaUrIwb0aJhns\nVarPu1GXSt3RP4VbYuOPaAtW3EbTxYMIqX0+BCdswwS16Jq7hSd7MCH6n8pL\nAPFbdhgKBo4kAWqIXWYJMxeozoLcDaLkzgK4dGq2F3P5eLfMlRZreZJHSpql\ngecLVlm1E8p/ORiAsitrX9VtUKWGDCbF+LzpzfYvr2eAJYl6Q4gztsiXBwo+\netPXdYC3VFQlywPwrD+SuFV7/nEGoGw+eH3EOpt9w5dqJH7z2ehoE8iDKz47\n+I19O/MjtYcSZ+dkeRUmNFeR86m9GpZ/sUrbw4xOzPFfCEQDOMBhfxzGW58y\nHwa/\r\n=IAGq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/density":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.98f7faa05.0_1581103292061_0.676568298577922","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/icon-button","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5231632f8696de0dbb03012c732a3ec313bbf31b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b4727e43a.0.tgz","fileCount":38,"integrity":"sha512-WDo06w9KfM0jszPZrxr3MdkF5mbSPrNzEE570TUUYiGz2dOl6yls+yHPBFNBOx0J7pxuZeaiY7xcKH8p5K6D8g==","signatures":[{"sig":"MEQCIGQhwhLn5PTyyvEN8pzw7wQE1A1VxUzloLwucEDgbl0/AiBsUgZueDgewHkoPtOX0bXMDe438H0vICvNqUJmdJG3zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDACRA9TVsSAnZWagAAL9gP/2oHkP6S6bwl07MBwEaf\no2yln+RQoa9rAgRepmqsxzoklNrPHHRFbVZmIk46VwjZV715jRzkzRAKLxEq\nhf+8jeCkhAuF5q3Ooolp56toOkS3SsvlgSLCUwzMxC/yZQIlYhv9XX21pDAA\nIC2Y2IvBNZrcJAD1dN8VXvJHEzBBaDf1IbeoBvMJiGcIfD2blyLKHPxQJcan\nmIC1uX7ekweXDrO4m1HezK4Dca69UO8MQRsvG8m8jxRF/W0n2DQv465M/K0/\nXn53JfADCBx8jgwdvNZ41ruDJB/ebfCnaM1uz0TRw2ED/dHImsJOijc3lW1Z\ncTyKU+G6PanltPkZqbdMWaLLc6mnoNXMVDka8KNWOFc2QcMrkxvuV7C4023S\n3JsNxK/vismBJulLhXssI4FOAaThws2nuz2THs928n2dLPICtkuElQP0Ihb7\nnjYylaeByr8VeE3qYhHuBeC0GeyMi+/w+88Ast+KyZ4eJIIb4uYK3AYilfVm\nB/4cT0sUScJL55BldWMIQ4htlLzRNPhxTLdnExF3PFAXQLqzBhRSX5+njlRU\nZX/gbbd1ygofTeKj1HGRmdvTmitCknBxWIjoWi8vFgpGbXGPm3jBzP/BcffF\nxWqFeL8+YdgC2qtlmGwDmJpzUHo1rD8FPC5uOeJB9UcDa1F8+Yb4QzLtJyGG\nL+ie\r\n=l/wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/density":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b4727e43a.0_1581105344396_0.6400142987925579","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/icon-button","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ebdbadf3342fde664e8990a3fcd364c97a367b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.91d9d5a65.0.tgz","fileCount":38,"integrity":"sha512-R3Nw5hSZKyFZmeP05u2Bu0/mHAcHmGW99VCeB5J0ZrKUgML8JUzHXXuZk2OGzxP98FwgdlvjA8IMuqTY99Fidw==","signatures":[{"sig":"MEUCIQCIEWFAdD9qsHyAPKCPYx0Ghnuz4It6LlemJFFRS4/KbQIgKa9Yeswr6TJ0gpGtULFRNnDMMCwFaHMszELYrqp5KN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevhCRA9TVsSAnZWagAAW3QQAKDmZGZO1JQH+OQidGtg\nTNOUe2NX5zArimO6gpMNuAm+vVtN4NDhbb+zumzaqK9xR+ef12UXo1M9+y6D\nUS0lzq0C6unqHFGoypxSI0/U8h44qcTupoWkGvgSUxrej1CiNQoMmSNimps6\nQAk9idZVhfJ12gIyQuOCBwxVZhd+WCcvTnPGvcA/eDHmHjzOTXi8zSoVR9dj\nw3yruXJchvjZt+cc98S6U5gEJm4IQkPJaX3abIF7Helx2KKE0vBr8WwkVt9K\nAzHdzEkTVbDEehzeS/1j663FZNh2N6pghEQUvHvTizaonh60GZUMfe0L18gW\nx3aTobXpAbnL6ibSQGt6ptIInEgEoJsS24OI5FzGkyyGkoHlQKgVTSY9cGKn\nqQvzzhp7u7Te3ex9/ku6erupx+n4qdujNNqyZqOc/dmFUDqB6aSsNsiLqeM7\nwiw0WMmBJVEKIFozM6o2C1nKjDGZZUNLcd3NnhVONZZ7Ch2Ek2nhGdj+MRjN\nZDZSo3jMa/YzQj5FxblDSkgAddeDI1Hhc7+9GxwMGUvdBY9jAruByPjrbUMZ\nRt/CH/nxqmgRnBCfbsCXCYW1o/WhOruJrMI7RAPLZe22RKK6tEKE0OXtaFIN\nnm6nR3aGQESP4S/hgVY/AyKDk/drFXj2RKVJb6JaI5tWN36lhOdDIXBnP4Wy\nP+wT\r\n=KZur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/density":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.91d9d5a65.0_1581116384701_0.09794379691577348","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/icon-button","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f31e30d73c9e38101e50dca56ea83fd246899b2e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.d5c006ed1.0.tgz","fileCount":38,"integrity":"sha512-7YQai6G046EU5Wy1KausCgDfAuq+LY1hjOX168U1fDNiWZuTJAuNmEzD3xKlvKsko9LXWrnBCuZt2Jjwn3umwA==","signatures":[{"sig":"MEQCIF6hUnfQeTE+OfXvBtaLbze6YyzYCrQa4jBbql7t/wVgAiAS8HZEuPPnzoPsL5X4vkvBRWB7+FX5T2y6WpdLmA2BeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmBCRA9TVsSAnZWagAAqGAP/iSfDRrWs4UGuuza1lni\n3235HOs96MRfwdUJTQbYwujiNljEY+Q4Q2pdEhQ8q/WtH7gZA1T57HZCc3w0\n8IEPhsbJ0+vg62b24VjPaY/VF6uqB7dFgL3DlfGEOh7nHkY2tw6BFr3OJzkT\nyVLUiYCn0hukVWF/2OGnsWtJIPSzLyLyQGTcKHQaC0HGtBJPb/a1J7exBmJ3\nWtbtYT4aQp1Wj1yxstAR7ZjG+k0aGVH8QcWMYXzxLIQKANjIIMrjzceNe6NV\nsdJDxD857Wy+qvGwr1gAUq72AVo7Jl9kg8Uett/CGnK7FTxgt4CjmY0illDv\nuqxb22bPcYmkruIC+nCzXLokLPrTjInJIMlplEfgAnVPIqQsdALXthlUc+SE\n+sc5p38mTvPbNv4ndPbfBYU4ooBJSvY/g0VFj3mSql6Yxrj3Xpw4q1Dak6yE\n5duJHqA9yFlrv+ColVj8Orig1HV/70TK+rQPt3IxthXkjLvN+jY+/ioyH3Yt\nOpjU/AbZneWrHrqKyHTdkjzm2DT5ElcrSRYR4XFdJC+Sk/sgajPs56NWMmUt\norI2almVALfjVIc3Z/8XV2FDc8hnJk6t3AV0d8UgJRZ4Rgl6fexUnv0KK8+Q\nEJ/w2okR1D6fgWX5G/o0e5iv4zRcA8MXN+Iv9DUZXcy+xTwkigwd630TTs1M\nwPrM\r\n=sQa5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/density":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.d5c006ed1.0_1581353344437_0.12369226558853108","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/icon-button","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c28af036d89cb651029008426f08d48a7140222e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.559f1a570.0.tgz","fileCount":38,"integrity":"sha512-bOBL86SnRHpW4kalmoo6awYXYqXTJNnKtCceaKzPe9hK8nEoPiiZp+SLJ/LMtwkavHMNr6+/eFGtOIvpJPcW0g==","signatures":[{"sig":"MEUCICa68AP9U4KJyHXhlTUUtLaaGPruvHFkTjHy+BtZJNkqAiEAx6W7meYwoePTe8/V7W7qE0LwOSINB5bbGFYKs0ACvoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIECRA9TVsSAnZWagAAKX8P/ja6ebdSkSRopocORT6H\nZJcW8V5GGHv10+ZgqQh6wuVBjKkdjOfkkkiMQqFjr3g6TnBYXolBExoSdv9N\nB6tnT4BMhg3Iq601zI8690vKFA2sIXGW6dL2FmIdrwDQad3tSuV0lO/4n7+8\nRwJcXzOG0yU0zgP+BrO07ACfon7zpMRtieEWMYMFzB3S50lAWGP3E9LBckP7\nqosexQMzXgUF0CFWcbTe/GzRGXuyF1PM90RET5YT1D2VbwJJtFl0yKxgNNXx\nsQ9yi9wyifpYMF8UT39HnoUhR1+TIre3+4f461Z0I67MFxJOgQiOpxlLgScd\nREmDENtmZLHWf2kZ1sOq9vBbwVDRazmZUqN8hXUiMwPPeMCLaovqayM4f9m8\n0aIPAsMFPlcxOaAW19G4YlXTcFW2BXSzAzYRGr4Ig0XDyKT5pQnNEXLqR0n6\nMK8QAV9iHolPkZuMCCGGezkc+2+uc1O/h5If7XYVbUcBoiNVmuWdBxCJiElV\nkHeaDk/q1HEjGF3XmLwVpFkRJSPpv4MGqeDx7VMO+S1GS/Av6fuKYf7JCCjL\ngSG8FMrv1m4TtxMzn8lkuqflXOYn0KTPuDzJQmqdQ6RnE6EamO+OfhuFfxWo\nXooCEKCIeGz8WM/WSeRMf0pDZpdTXcerdcZK7xyMlEAef1RFOFLsHV5uR2TX\nMr8c\r\n=C9r5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/density":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.559f1a570.0_1581355524461_0.6292044181848999","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/icon-button","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"031ff620e9a27022ac8d39979b5bcfc647269039","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.ad3bbf782.0.tgz","fileCount":38,"integrity":"sha512-e7S+dTFlBwBuTqOxWMsc7NM0nBU0eqiLgEoEHPrjtowJzTtynW60D2hZzXmH/UiCVP0TDElxrIXeSD+P8Cu1eA==","signatures":[{"sig":"MEUCIByEwlMYMKO3h8qFVOjkjLKQdwdZtDwY+Cacw9I+uHM7AiEA7KEA4SlDEsge6uLZ6qJ3gvMaBkiUg5ZiGdMbiipiLns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQar5CRA9TVsSAnZWagAAlA0QAJofLgIB0yBIbq6NHhLl\n8pgQdfkz7qeAWOGmK8skckLXrbXMdLfx00hoikP6Q3Oe/jzFyqVP233Z7Sa8\nB4UDav/4pzwabgQqemHFFO+jFPbBrWUJE75y0Qfq6W3xBvT0QNQd0gdleeHT\nHy4+StsPXbEaW0XYmn+cXNNQGibNJ97UZFAxe+bNKM9M6f5GLcHMAaACpJ6Z\nQDfkoFoTuA2mxmmJ3qdlVNNtqb4QvKhqXxHVRkfg3abjXGVudlXsiKDlWoJE\nYtnVr231zydiEshRHJFeeIrN8UZlV6vV5VQ0VmTyjtiTSmogSXH3kUfGw5HL\np9FqA1i4D0bp2bdqIGx9dh4TPWLx5kaUdJgcumRhwiat5doogf7dv7kQfORW\nsGAz12jmaKma69F/q6UlyQ2W38wImlCbsY/P127chdH6Fi/x+pR/LPnP4+ES\nHMwi6hPh+Sc1a2Aa8qx7GBxWlQOn+UWqlHfP2c6+kqgSdlYSgfuJiA1ROT9a\n4MJ9Ue5NBkwWDzjiN9HSY1bjF2Ucu6vTWt3SjRbCWVBEG/Cxsi9UfWhEgd/o\nFJ2zh7Or9M3dWmogk6NM/8G2VT4h0+rgb8Z5lWgqcC0FDaKmwOhvz92+S6kC\nN1eNWeCEstzlTQ56whYqeu2/2JzF5MfcVdkW3HAK6Kxmhm0cUFuHLj7T3osP\nUTFC\r\n=2bOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/density":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.ad3bbf782.0_1581361913182_0.12286134957738715","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/icon-button","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71cb1e43c12fab788adeca44f2a94cefcc3404d9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.570d8e49c.0.tgz","fileCount":38,"integrity":"sha512-/FiacwqcKxEQcR5i69ixP6fKU3rvePmhaEgBbZ9mriiaxOJErLkTJqoKkXExhVWjk91SXH/v2OstuEdKtdb6cw==","signatures":[{"sig":"MEUCIQD/z3HQnGVy4fAe4Eqm9UNhvW5BXjvwgO01gLmQpXAomAIgfUIOk6ilYYdNM66HF29t4SJni05o0iSg1CsM5f4XLj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcB8CRA9TVsSAnZWagAAz6QP/2am/BAmEqKCSpQFlp8R\ngTeScL5XiilRfSKPPV1hSocApAB0066EcddVtDANctablqsqcld8mCqxzjVc\nUo6ixyA8KAIkb/+fexTRzXyMJ8Jx5h9qPk1vpt/4aFmtcXI5poxd3frLZADB\nNVH0xcwvMBKwIzRPoRTdGH4NYe08y7yn+/7kxI4nZYYBvXOWsDrD0yLQjfS8\nB/u6Xl6Ujzl724x3ZSqq+0PAbPXBJfgHmT+eiPrjfalL1wiwogP+IcGBrOCj\n+WCkMSS4JkEm5M5qow4snK+4gccZVqOudc2Q5rMjxXOZBIWHLpSbUiFN4qVV\niLG0MxouQUhzUPp5sUB+ondudhtyBk94Gbq6cCqz1KmehoxAQh8iPm92RoOf\nGVUBbkK+lItDiGrb+HvuIrijRn7hxBCGLmscoY49vWE6eC73NyUG3CeNvd+R\nFKhdvHR8DOcfopODgn4I4LfYDdXElNIsTCYlDyxqX45O/4Kp7oEcuAZ/SGNL\n+W/NGA8OZihJ5fWrrkj50sMLT6rIFMerp+RKLtyEq7sLDAuggyWt1UUqVqBc\nheBrd4+co3dsLyuhkVkFvQn0/WHJk7syHEzs1KcEGSAqIa6HddvgLN9Fp/F2\niccFjWPafwEMPI/xRnInRZ41WOZR2OL/ksk6exRNVRXiJE1rQF4bmdvu4nor\nzirU\r\n=UPGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/density":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.570d8e49c.0_1581367419941_0.2943529935204334","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/icon-button","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a736da753c82d02b456db2e03910b24fedd81c6a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.48b06b89a.0.tgz","fileCount":38,"integrity":"sha512-k7+RpW/BAlrgHvjSFdWy247BWzZ+FMX+MY5qlrDidTSbTSChvm78nql4bwthoZNMiqopPG8c+UusOzXAV0+xig==","signatures":[{"sig":"MEQCIGFlkKUIzwA2xoFcVJTcCz4zdiIXRAwz1mrFquY0yDqyAiAj+G3aJ8g9i5+7Im/DH702KFJUwTCNp0we5Kg6MLO/AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXPCRA9TVsSAnZWagAAwb0P/idAgtOUatohX1Eb/5pD\nLl924rQbeu0fdTSwenvVq70Rk88BgGEaYtjMi27L8p5Ar30aINlFGMnIqE1q\n0zrxsE+PRpSyxPjkxaoerUSI0bkhy3gKJ76lYbgust5pDO6zVNhpZeLsDmMq\npfs2X0Tc/Hi+Z4heulGIP2n4jFgrLK8LsBe8FQUauEBka2hEhaA7cddoF16f\nGODL7gkYn9MGVf/yH2ZlUXJcQ+YGdUdNk91xoAl3N4sxbWirEF5/DzRWN8zY\njy44rArFFKOR066NHUmPbj1Tw8m97JB8dyMwAjE/2dSTUjUQ48nv8vSCRBPo\niJM3aak6zCR3dQPeq2RutUFN2Gs/B2FavxXLWjSM2+ar0uwbfht/tfo/m8aX\nla/R6quo3macm4s+Ifj51Ke1eOSvbMdXtdAGjGMoN0IGIMmwYKrKZohcDMRu\nQs1RJmAPklWRxCIiAyd0fV4wfJPD008iJX89WpEWYxSx5+WI0Lgpy1RhVdcn\n0E9jETs1+dT4FH19a+En0bmYG42OlHtOViaA9F9qv7+c3uCQRi2aAlfascZl\nQUb8wt1SSwDmxUPj0jjMTplCdY+yuihflX8XcLOWQYgGgAB4Q5sY4g6v8P7f\n0LMDH29O9IrJYxQIh8B/GAsANcYblsYrLH0yims34jJJvKFsMIYVXZ9s+2gf\nIfSS\r\n=uub9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/density":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.48b06b89a.0_1581446607267_0.47178089682111257","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/icon-button","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"941a3a9966d08e9b38c5f5683896e69f9182cf3a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.612443dfb.0.tgz","fileCount":38,"integrity":"sha512-EiuHWjMnTjJ0Y5Vw7F60X8YaqVplFSHYcVhFfELDNBhxd/5AId9hHD/D+Hd4oHqKSZOupDdePCW43azafxemeQ==","signatures":[{"sig":"MEUCID6Nq+5EkX64B0ynsZq1zT89HwFnAbr2rskF+QhDzudYAiEAuRq+839dJFi8SnzD/OKzqgUOUTg/x16C9t+FmcfoKFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwVECRA9TVsSAnZWagAALPEP/1d3Sn0bvc/5C5jgbs/7\nWcKJv2u1XaLYLYS3FUB0GnEoNhX1pTSvTlNujH/3SybXyLg1/0pDlctFwKSV\nM7qA52mYvyla+IfYp0Ei27EDCHp9ZjqqWzMUIRh+epcOxmSB7UC2jP/5bnHk\n88rfmmLn1eXk5jcNAApTiEAQ3OBtCNLVej85XxRDLox7TETLtUWfGIDL591b\n/YgUhv72vVp1KxwIBZHol0/U/F1wsw6J7xz+5TreS6OPJxZw2xK8T/QajMt/\n0agLVqr/2aAAvCiNxlYNB1aKb8fUSncxVhEABUd8bniTA4KegCYa8MbJDSQF\nlWtjDnTU2GHyu0hgCzpElavhW7x8R/KIVm/uMqgSMtghafHh4nhBNj/S8/ia\n0Rj41U1hgGx013j2tdWKZYf+qhG17dicgDEayXaI2zn5P/ySETAx/RC+4Dht\nka3R0x0nCPrdHQFjiUGkXA30zyQgAxzgbXWZa9sfss2lBS/FIxXBgpebf3nD\n+49YAKUR3LJ3WDvmO4C5zXagGJ+GVWJvIFG0sA9lNuF+3Fnt/S8LuoL0N9aQ\nfKTK/JyZ2WO1arZXtQrEOrR7zDCqBX8h7JSnfJj54JHUQRwqe/02I/xVAoED\nD4h6U0mwadvtxF5TBLXM5Os5931y0hfUnuxGtU1wps0/IgMNPjvXKZFqBL+w\nrc7Z\r\n=RV0I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/density":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.612443dfb.0_1581450563726_0.6030638422835961","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/icon-button","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4865f2992b20f00c5072f8f1d7f5b2c1c085c9ef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":38,"integrity":"sha512-wcJZHqPLQOVL0Fg/td7/oWRYNInRa4p6IjYXTr9JCnyN1C+I7TB9YNNR10lmEXfFqcxu8lUlMkxVPwEpfu1Lcg==","signatures":[{"sig":"MEYCIQCiqrErVRViNnbA4WDiGgUvm6t6A6qq70ucq3d8wND8wgIhANV1i3ZWe8xiDyGbJp1kTcKRTaNJBMiRkbAMbpZZRzmY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yoCRA9TVsSAnZWagAAkhYP/0WhJMnANw5SFRi2Kxq8\n9Lpy7UU39+XjnmC3FWZbkQ8ze2BCAmSttgzBwfxrod9O3mrq/Du3mhLwyns8\nnqVoXqho0wWqS1Ugpvrc/F5PQhUNRy/f/1r1KiYD1U+GtViggl0Jfa2uKyO0\n+jcDAksbIrybEW5iwBR5LO+rmC3LRjDGTKOULpB63fVUxKq8zXdLTUyKyatI\nIDCmQ+ULgrHqgLmncjXOOgk/5VN119NWH4Ixb946RJ8mbv6WaD7G7iC1iCBV\nFjoB8Zm+D0zNON+5pF++Dn2f080dH7Y+imD5GNMi/SwZi/T0jOANBPC6lc37\n1gqo7SYDVDYA2+w5EUg+AGrXU++VyFYSJh3xT5nH4ofwwTrBB0ZPYk0RbECc\nkv/e1rCdt3J+oR6lV3CFshgP7vlysIsjIpwGr6+mP78bN06oHzQ/5DfFrMKO\nTzNTI6bN7DDSK9i3FSpJH8rlbx8fbb8XyANKzlQ+qrXNXl59X2CdXiXMm2tM\nzgw2QGOaJYgY6E9QkjHmH928xscJ54VEjvssqsJJ6I2HZ7ISkGvzWRkIxlC4\nektCsSWe+U/7/5f5Y2GiOxgf6pk73BwzsWrMxXqztMd1aWZGmBjKFskKRj5A\nWUQiSaI9QjBwZdNM6CgqrDQW6mqPOLlA4S17zNrGuNC+yqdnnpyXgcifX2zV\nKv6I\r\n=vtHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/density":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.8c11ea2a3.0_1581497511604_0.14547314010186296","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/icon-button","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1233e642309d33dd4419e8ad5488090f888161b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.b2f3d311e.0.tgz","fileCount":37,"integrity":"sha512-9unu3yE5Djg2OfYcGiLoaPT1V446idHaRuKkmNCJECtgO7xhxRXQgwHeSh5WnBAZ3vLGtc2Nua2LPZnyhWBxEw==","signatures":[{"sig":"MEQCIHHN/SsXDNO7tpxaoTKfeFSYNWCGJZb6YY9iwv2t8mhQAiBkDdvyRBeT1FEvSnTv29t1k1vDVwRE/EFDeXfWRoOUDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMgCRA9TVsSAnZWagAAcDsQAJd2cVrnDlcqYSxYqgJ2\nZ1+Yj4ARW7ENAgHCbBcLyWYlbudlOtTGsal18qplmqrwlQle2XHsv//bvbRn\ncamPc6LhdsxXa1o9oL5Ak0vmRgM1alCXugyHA5TRRvYXMpjF5bs/24PBIsmS\nPeOjxRdznFxFRr/UlLiU1UwNHAFoF2DKOvGIGwXY35mqfb87Q7ythzP2cH2F\nZFOK4To2fW8d1AbZCPjoFMiVKF2a0Mm9QSSSBVBKlbDPBur0AHIlLHrrIAb2\nBW3HFsw9pPM7p9mTR2X+659IQrPk0OLkhnMCo0MRWYCmsahDEXh9Y7IzkHth\nTEodnSHoa2nUdz1D29wSswDkjkkkT68MOSpm+ZjFNYbKgvZyH4bBrW1F++/A\ncUh0n1rngyYtNnZW/weB8Q0vCWfOJnfCtZhdDBbco8LaXouY02jsguomFJr/\nZLkflV1pK+msUQoF2W4NxhAf2r+9IKko8vZV7Q9iCg26mTJZQuu3Z1CylDt0\nTQDTYq4mVPJBGAm+RLXkQOMFZtbrg0keLbG1ugZZsIJC8FfdxC2u4U769Crw\nM6hQXGD/c8WudOgAjSrNEath2DDL1jTyBVf74qhBOTk/NyLBZmAtiGipjN3J\nEvkoLvMXGgIglH7oJKpaxsfhj+SQKoSMOIiq/GMWB/9YInikOhSCPd+uMmkb\nc/Pt\r\n=fx6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/density":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.b2f3d311e.0_1581630239606_0.5675393896902496","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/icon-button","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67d218fe99b961f3a8d9aa84ba954d4ba569bf4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0-canary.4f488d0ee.0.tgz","fileCount":37,"integrity":"sha512-+cD3C8C0bijSr0fSiiT7WJ6nsKlvFqiG0OiOnjvZhUhvMbs+xGLDeYFMDrwtHg2ZvwG54mw3PDqSlamPJQi10A==","signatures":[{"sig":"MEQCIHQBkfQcXITBUw1ZB7UYE3Nfnf8B/dL7Tg40wIw+h34FAiAD2qaJ/bhBwub9JkiPpzzW/inASXYEpezSfQI3NCWvAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZ1CRA9TVsSAnZWagAAOacP/2nAs/FN/Yx7mGp2kJlA\nVAgSVY0YPMI/0YvsefbU0NtqjAHJR5g36dgh0j64pPH2NhJoeSDa96YU+Pwy\nQALIQV4BZNayyu7WXUWsf8ds5n/0hurkliH93B6cuC9DOUqB+9o4GumagrBv\nHut0ANnxEEPrv0lRiuW391n4z5tEMgPmnJPK44frpOMRA8E61UiQcCqGMXai\nvv4s1e+xjcNopTuRwt0xSZIKkQVmZJDwooioa0ZrKL5DtVM7Ek5F/LZwSduG\nFMLd3aNTc6Cs+425/64RDI9+AnhgCeSW5NfVVpEB9shaVKRSWnY3Oiq1QWld\nkH7134vZYljgcHLjzCmsiHbN1kUwYpz8SPtcmfojilPZS14Hu2RqDrkIlBSv\nSRgJmxTbjBrTEyzeV/DTmWnAle0PGfcW9HeP2RnIZ7SLb2fkso/8JMxmwoRT\ncrEZdkQeIErHg+scWzNkhBcsxo4gBy/WKY5HuAOj4i1zzajKohtRYE2cSXk6\nruiMzA1wABbAr082oF8/jlC0bFnhlchT3pEvXrAAqXJ7K87auC5cr5t4F/G5\nWNCk+2krMDIm0HqRZ4P8g0wzfLtcCKskc79V4KWkabz8kTJ9Ps/iHX071TPT\nbdsiBZy145dhj7DYAH7Yl/m56ZwfAI3NEfE8l8BJHCmlQ5KqaUS2HEN604Pk\n6uvW\r\n=sfI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/density":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0-canary.4f488d0ee.0_1581635188675_0.35635584887089533","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/icon-button","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cafda98373d742109db17462c96c2d1366f4f7a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.fe79de07d.0.tgz","fileCount":37,"integrity":"sha512-w1k/iMBGZe5FrCdo98YnR3Pni0zsOtsHHQiTiNzHqJfhqIisWZSN0iVmIOIMvANVPeGIQ3xqfs2kAk4qxu8iFw==","signatures":[{"sig":"MEYCIQCPOF3oAECbEJoDhZ8dDe/KZmQnB78VenwkB1eLQ+L4hgIhAN+7U0oko7QuNLlbel/vthRHgPjzYoj5IaccxxTFcgHO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqMCRA9TVsSAnZWagAAZQEP/3tZjIcZPe/DnOdecKnL\nOD428Nv8A265IUKQx7KnDdI8L96pSgN/P7zuAtIz5X0LY4GkMR4yJ41ieHXO\nQsdJ5vaJvopHObg062z+YwLn9OB9f6Hxjg8NO510Dk3b4m4y2LO9G+HILRxw\nJF7VRXvg5WVdzESG4mNr+R7FPZjCvnIhtNwLNawdaKdTF7DgD7C6LfPWFNYf\nc0c5df0HOLAhKWMCuo0ZttjBcTXOOmV+eWZhwT19l3/gzJkgHETMjlh4CrSG\n2hXlc5McAxDL+JGEtyBnOAQr5WAbl/KcZH4gJ78STAW/WEw0KeVyYnje2cKf\n2LBhY9TdaXOyAHd3zIDH53qNoIcq6ut7pIwO90ecogiy/Is9RYVLHo0IrEcD\nxFLw7w+sco1oGqfQn6rX86XO3PcMbvJ1pjFGSSv24+aDx8kCPn4CiaIfwNeq\n3egY85N7U6NkrWiyDUR/5oZxiTWzFk3hXGTKCn5k+yFQa9XqCkhj8kyg1oeC\nvD7gM3w3ojP3S8mdyiYzuA1sKz1jaIRulooe2f+9B+8hRB+Vy8fnISclVRdE\nV3BQ/1RWZ0pBTOWyG2qkfd4PZgP/W45izguIYslaa1jEwfTyX3hO2pwYE6ZL\nrZ2PKRCEZB1jrk8TfyskyD7RxhKcqhpzTuTaox4FgZIGQrm6QqMf9tf3SWE+\nA7e5\r\n=3tmR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/density":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.fe79de07d.0_1581636236176_0.5099017340944332","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/icon-button","version":"5.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff18a5994322da21b9f08b63106de76ad92a315c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.0.0.tgz","fileCount":36,"integrity":"sha512-sVIh2xJ2fVrpMQkeEP4pnFX9m7vLo1FXXtRVvr2b6lXsid4kfx9BXlrMhGIm1bTtFJFf0Y6qJHG6QXuzl7S+yA==","signatures":[{"sig":"MEUCIQDHv9o1bXFunmDE3qJKFwk6ohAHOtEjVlt38UPP+ag5oAIgBGg8CuBTgN8BazK9/Y1qH+HLdnmHbDG50tmU1WM5JlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUnCRA9TVsSAnZWagAAzasP/iwgJKGsDIPFtQBwEFzr\nJ9ABnR3x4dViHHhsnumu3amCnmS44E6SNnXk4mIgctaGB6D84HXC/q97AKM+\noxrTUeuIXYR89PtgV4oh52qG0UPtasSyFEAwy59q4f8rfd5BVUV0kLwZQ4Kr\n8XAqjnQA1dIdsFLn0zw7lCMh1I2KjW324x2r1HLZHfhzdstjwzt7p8eUEYHu\nr/x56VuiveU7+rgOrYU97/8o6CcZ+JKIRacfG2ePjw7ZYADyeTGW5Rbiaapp\nE8vlE+Mt9Gwe7VZZBl3AWO8ISdVGUn4yg6gUGF64IAvHe6ylsCDdk8JMLoI/\nrUMeVCpYYVBaYLcY3IrBYp6YIvOBPQ8dzudMDiSEeS6qzILYlkhswvpPfjdr\nNwqdahXphHbmgcllyTHr69VuPW6WoFTCsXo8a+LsMA2GWN1xvTC0lD4alhx4\nzuc4aewRwjFM/MMuYFbc7oraDJnYeNS+dOhT42COHwu8rN12PcvhAIX+eauk\nTnviSWryEcfnJ6x1L7wdO3wfTax/ImwRtLJrkXLjxbg+ZcSg8ToarK7UViUY\nO7qNEhQUZfBAVJA1RZgw0g/66Wq60aSpC7kfXkO5tAANSAtwvOwY0hctQgz5\ne9p7kPUV3aQBsltCEdz5NJORxjA/94gLwfEfmQK7sLHVt4rVRqce9dYWMg3a\nneia\r\n=dXDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/density":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_5.0.0_1581638951179_0.24707629786237284","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/icon-button","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"468fd1ee39b4af290fa665fc6861177535071bf8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.5e313b1f2.0.tgz","fileCount":37,"integrity":"sha512-ytDGFrLtktmuNoLnL+GJynqaI3WY/Nk59p5wROyrprHP3eAETlG6VggJA3zH9jma6Jv5CJmS4sz0IZwxyILwuw==","signatures":[{"sig":"MEYCIQCQZWylOAGFlN95Mo8MJon2RBxsrNIkxxWTd2zJhHKt8AIhAK/L1iSN2cPGjem5rMpyeL452VN09AYwSmX/Jp0/bgUV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHMCRA9TVsSAnZWagAAHgoP/ifcxi5BpSQqRP898Pg+\noIBkydYzn+k3seJ1QNGpDFldxkHdzyZTQRDdxZvtE5eDgn8sk1LXRfvEYI8o\nweRt5u3M7s/phWkrDtm0PDulI7ZUtjCFVonu7rEJgivKd7OiPO4ljCDkhigD\nJ8KcU74mQj/oXYXP4TLgnBYRvrP5v3peoVAaDiBsxXm/7UOIMsxw/1F1P94C\nFmzN8vWfGGHT1uA+xpy8ke3LhP8bMs5UcPw28xCaE40sdjILpSRAnfM0BO6J\ncXGKOYaKkR5GG/P85Ebx6+mTxa/JPZwnoL/KXhKVhZhuG2IHhsxDQLV9QtJp\n4Mi11z5by4Gm9v9CbHWju5HzkuRTrA+/V5uApEj5MLsIHcmzvIiRgGDe+2+R\nIcV4+/3T9QtImDX3uigTd5GsF1FKMYh89uQK2Kjjf27BiA30TJmdaMEAzjBf\nEdivSZSfI6w1HDIn2uDHWyyjE4TNNJn793jYN6NdEhFzrDAfLuoeVl5QOrMR\nQS84P0p2QWAALA23gbJjMOSZjE+HszHWXl36zlQUS2f8m4XhBaTbL3tv9gKs\n5RTG80na8wGjwX2xYOI8PR9zxvXiZBZdUs+R6SINxI/tX93HVAGHWPiOa0Jv\nahTJ3REG1QZ3wwq5PpT6rbZLjr4HxcEFGjLZ/bYZbxtjUObQ5eGxdee9A6Yq\nZLX7\r\n=NE6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/density":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.5e313b1f2.0_1581724107578_0.03459480330588671","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/icon-button","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd28e6d548071bc9f3149a515893ba90467a5f8b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6a56f387c.0.tgz","fileCount":37,"integrity":"sha512-+nEb00wKo224REuZdpg4nO7HaKg9qVBz5jUNKQuKu3fsk1zh/nA/JiWoHS5eZCHgEu2ach3emGMmewMiRzhxFw==","signatures":[{"sig":"MEUCIBAUNOVigqdDcYfVrG/FvhIoKFO/GXLdsu31Rc1+9pyiAiEA9Gmah2TAxaaYhp0+pfGRyu6pDuNH1+z6iV/tAI3WUoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5wCRA9TVsSAnZWagAA2hgP/iXla9C5QaZn92wIOMA6\nu2JI2QXsX3I6P0CbHeWj5/VX0Lhg7JFlkOJ17OADDLrJDO4TX8hrp2W704JM\nfcmhMZnGU6cBd0RxAg9wHItkeXanuHiYCpdOFKy8y6xyURKkNk8tll3C9mkW\n6VOcgoBy/f/L6Nz6do3mzSk4RINtpPO18dvUdrMmOTF+t6OIUWxtMWWT8Oc5\n9eNZ2Bh2+DbZ/FB1abGHghuebcDh7BMh0wSiYvXeAcjrw0yAgyUsFAvdaLfB\niJE+t/0yijEKHjWtVMLrXvTpurlmsQ1fEO+R0wf+lwmkg9cbPKppBxKcz9Y2\nItle4OMc4GfqttzBPEz42zn0aUiO1CdXs/BK+fD3OOVP4UjnZrOtEPotuA/q\nT1yKidF2ErUlbY/wM9LHnj/6W16KwFeCFChNEYywa9JegkyKC982ZDG/15pK\n6A2rqIslMXQMx5Bm6o5o7ZGClFYNlvxQ+RkzygDP8AWL5JohYYfI//x7SnHM\nP93/h7PGDx0o8NzqEmgdGgEoclMaX+z/2lsJ0SbNCqoK1PTWPp3AwtKdsDz0\n7LhpFghNgk+Trdn6m/oL7u22oqcbcogL05rZeDtYDUiVoHVuuJlHCHeaE0n3\njX4k1hWSP2sGbAI0TVL+F5QS6zlcwKpqfOEZ0M/Masta9ewkPhqWFymgdyKO\nmj+j\r\n=1DjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/density":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6a56f387c.0_1582055023643_0.975240879680527","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/icon-button","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e181e2ae7267c0cf1dea496a320ebc840d1332b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.bdfd52632.0.tgz","fileCount":37,"integrity":"sha512-NhzvvTIram4HeIeVEN4zFNqxS4M5CMln+YKTd3jtNWngZOgp4Au7r4iZ4oG0Cdb2grDsq/mGeR9rX0Dq3f0+wQ==","signatures":[{"sig":"MEUCIEwKRqVIbCX/ODpOTt3bPZtoUWGVivbDUGuClY0K/GnpAiEA0aFDwo60tkc9qgdMLgKUIqouyyn4B61q1MP5Uy4Q5Uw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkMCRA9TVsSAnZWagAA/qQP/R2IM8IxgEs/dXdcf3+j\nL997t780eK8Ra6Vbx0AVJCSfSAI3majYGGD/q0NVLgsL3kdSpmbCpxhN91Gl\nyQ3VsRbqfJcrsPlF2SEulR4rQu0pFCuIpxChmzDL/8XLH70WzFkg5rPAWAE/\n1K6yrVudyRmS9j2dOmKKgIKnf9KtapJRFmb0QEjp2/8mB+VOSoNzeh/quoML\nMRC7UVGC91GBrJb/viDPf0hadG03GJ/XXTKdmMCYxHohjLO0K1pNaauAHBW8\nRXl7bj1nKnyegiig3PwImi0dsS1qRWWqwv64i0lS2LBzLWwKC3V5AHsV0Q6N\nDREtP2mMrI1BZjYZCdNBdlZ7ECZKjkDQxl8q4QoDFE11c0089P0QwVScLc3G\nVr76LjMtXqac9snA2JwLxZaqScwx43kI8MSR8JQNOKlexerIijgEVMwoyu7C\ndcPGUrXyOw8zNqbwlvkK6xldO6FT8LoFCHT1bSjIeJyWeRyFimROLwBTUzTH\nn3wK4wbWtcXrGwofo980bYWpACLT0Xtfzu+4gbZlH76D3Zh2eb+BGMUBlaUT\nWYuFQcS4zC+fZIoegL1NeNHuVVBw2hh0q2bBDH0HrzfOuCmJg8HLo3wKu7Xu\nFnjLDIbGC7svetaAFXCUKKjVAQ1g3r4dVBiKMXfhGbKyWcXWlrQDcuVmiBwo\nYf5r\r\n=AZNv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/density":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.bdfd52632.0_1582143755544_0.31579013346043605","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/icon-button","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"104c7e21b4c44b498e647e438975a5f2b89ba73f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.ad2e4376a.0.tgz","fileCount":37,"integrity":"sha512-NDEVVHoe8S3rFHpUpm76zIT05T/dA5PQJEjLqW95B+3l9Z1VeucAbJ8zveuqG1l8EG8mcPDHXloxTHv1r7jBYg==","signatures":[{"sig":"MEYCIQDX081zxVo+8jP+00Q43ZVYSx9mlzWEkabVXDrumJEoVwIhAIOIL6aAZAwgRUh3OgsAX7CzpUt56b7QswcBGqB1msL+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxM4CRA9TVsSAnZWagAA+2oP/iqiNoCDHaz/qXz1RdOp\nZdmffT+nvR41sNZq8623dO+TCK3GJ+CA47UWTMeL76Piuw9H98oayZ2p4pih\nxb/vnEv7fhCQMpd5uoMEAFtFoLsw3xcE9ASx5e6/7H4AtQ1ilINBCR2sN3/G\njSc8wUqu0BZWXTGbDLBn0HAzC/dxu4Ttu+u9BOoKtrxN9qs92hRTLPjEO0SR\nKPWGxmIYVYLsZNHKW+GLRchCt6D5wzAm9qYwj1estStuR/MMx8fY1N5ml86Y\nWwtC2HEpXyuBi6OUB/mfQSdjh0lI+XFAj/LvGHm4+PIwc7KKXCjgp4LfWIQT\nuKTZsEcCVVwA8W+liA68GKEScx4tampYvnVK0yUHJVQ6H6sUMsYWB0GoZvtf\nRUZpzkX0XWb5LWHwktwqERl2a67LreM0/VpJX5RtweWo96Hef3Yl/FBZqJhI\nyA7cVC9Ihw0+WW7JwPcwZvnPVrf0I/0Dq4Asatfkd2XOh25W9tq4jU5zIuh0\nzzGXoIE5e7oEhCXjW9b1W4C2qBqYFokTJ78hoPtbbbEE7H6iXDrOXBR7FRCe\ncGFPxeD7ygt9QN4R+PhGl45hhigJe4Yh97mPwNMK2POP0/54Ju6gtDiv7XS7\n2dGJnqjruZc7hr1br9+dgqHJhNegVBuJRkeb3YGPPJJ0be8cp4d3BoeI0w0v\n182h\r\n=C0Ug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/density":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.ad2e4376a.0_1582240568143_0.9034230881878378","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/icon-button","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f436e46c65c0049266d191341948334045df125f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.765caef18.0.tgz","fileCount":37,"integrity":"sha512-oPuw67maTOW4kclOA5E53X1E1YI/g6t2Tcg1ekymtrM05kaFrNSZCIllafis+VMu1zhmwmEnAgoHDThtFSWCyw==","signatures":[{"sig":"MEUCIAEa7dL1R6ZK2O4dwU8ytrN4DytLQ02qRT5n21jFAZWaAiEAvIa1+lzcCAcZtkheXSI0Tj07iGn1pY6L/wavFjFDT3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRKCRA9TVsSAnZWagAAlTQP/2G/Kv7IJUG8TCAAjrRT\n5NkvSOn4dFa2jZBZiZXNzefn1GzCpiB7kRuBHsH2f5yB8d0dt3jzg5jql56g\niN7uUyEE4e7mqQRkfK3q10B6gnvKk9JCZ1klGSHDNOLqgXoPuLXl6tH0VsVY\n7LM5xwZjKI2G3a4wjZy+Kmv+lSawsIP/CFgia/Eev/IpKy8JixRN7jsGkrFN\nG8zw+5G+kbFdnG2rdpf9jjIOoLHgOdO9QK0hiDBZSzBb5PTi7IvfYDFkyPK7\nb6fAfvqp5oWeJWF1C8PKl5cdbIZEoYXHOPvLbXhgDjdsys3RpdjX+iHD6P37\nqsVoIslzQf8xa/RSK8FlV5zDI+AicY06nwS2x1PYIhanO4V78uvfsX7DRGlx\nlEO0jdaQD3UxiOEX8WSSwhlp8RJ/Ln9djnpjWVMxvEwWJpqE/JLkvqTcQeI7\nFpEwleug2YTUCy3dXvnqcwzEOSJvX1Ik4oxgtsJwr9XRZ9a7LjgV39i/LN8U\nOI3TGkhakNl54todN7xvzusMJmCCkaIn4pcKnSisnC7ZOUYnCzllhIZiiE7E\nooaeNwQG8ogC8KW5fJJZXZ2HWAbBRY0pbwxq7GSSwBe4hft22Isb0O2f0oid\nkMCOY3uR17cO0XKPI1iNaqtwou1Rk0DVeij8/aGEfPCsb9Jn8ami3aR7lUA6\n6cXs\r\n=4yJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/density":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.765caef18.0_1582306377985_0.15970033099391778","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/icon-button","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2beaa637d3620f1eda4d5de737d5dd4a75c4d255","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.949562303.0.tgz","fileCount":37,"integrity":"sha512-FECf7zMDgID2agtvi+BApNLpHF8JEGcqhiqCePW3aHykKUJlYXqOCl+ssp8DEAiNPeq8PI8VjOPD/ovnlTSmsQ==","signatures":[{"sig":"MEUCIQDyrejVT3R1ndvUe5cNfg5vpcA4N8YjzSLsQUiqec/6ygIgYyfVX8ZrVsoDyPSSW7TUhWJEKZx0Gl9RuJzW2HTyfZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+ZCRA9TVsSAnZWagAAiRcP/0uRmj33hGLfVnNTfcR0\nQGux5rBJvkvHr0Zwr1I8UwatWip5U/vFN+cnUl/mS34ngoDm+bDFnkyw9kTL\n/viWPa0G4575FNoTVmPYa4IyFDZqZR/GQht1dgwnnOzRX8fMCJ604ci3sJTl\n0yO9K8ppSqs7GOMrZzmth96JhnVGIycqtA7+vbhT+b1HldXZ76g4cSBiUrSt\n4PSRSJIfF2oHouEQIvLeWggHxQvLH2TWvAMkMNzPNIcY0D41KK8qcMQAWLb8\noTTpFRg7iitTgzWPKT3vvGQRayINFmaj+ZceWakntOmfGwxQD2YReSnwpJF4\nCW7Zy8VVKipry2PMIh+HZZcld3XyAoj59+9ROzhHeUtiDBb7d9m2nR6qayRR\nhl12/H/D35CO3N9DNwF8qIDv/Qeuta8tEuiehwill0WRIVh0DCobBomC8Ojo\nDI/fKSAyqNCwzEKikOpcDs7wguGNliP23FP/0Lk6PXHWtBVz8ebEYnevy6ka\nU9Cz1tZKTDJM+/qh6VXdnZa5AeLFNnh5zgk/8rCJF73FhP/w4We8ZTMYi2G2\nhAwugBHu/Yyv27MIS+nEq88U88XI+/UqRVcd0QoBg5crzmPVOQVoBZ3FveZC\nXq2omQpBqDTGpwnXo4rCeIdrgS0CJ1jzBUp0YMILjYgKtDqHWDm2U9CmY37K\ndwLb\r\n=Za2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/density":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.949562303.0_1582317465353_0.6178614882152971","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/icon-button","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97601d537e0a9dc2437e88a63f752675dbb3726b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.7ec96974e.0.tgz","fileCount":37,"integrity":"sha512-R7S9HxkTLsfx7swshOQ3Y2OFGkKZNG+mP0Sw6C1QxM6d3ZlcgajH9DAsOahpgigreBisQ6g9hxWxhrUBSvz9hQ==","signatures":[{"sig":"MEQCIF8MbtblVfvL/8iS8ME7VH4a1yNA5U/sGNiWFZujPbNWAiB/OhAmBcz+/n1R/CKO+EvnHHTV8oHlzexBmcISI5wHNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBy9CRA9TVsSAnZWagAAo/YP/jBomHgNbd5yPNSZjawH\nGFnAzQ6t4m+LTqrRImD/9UKPsBnR85GyJY5BkG7w/FOtRMYiWNbvA6RR4ucC\nOHenObNFFM5o0CTPeKnyF+ZnP2No4N/k38FRZd1xwz+t9qkOJ5ZAyz9P0VKK\nS6zbWL/rQcMxNScGwXHf3Ddxn+H2JOT3dSIR88NNHTO9w515s89ocaNglxxN\n86YsNrratcycWiXZcTvB/3Z4FTtXnJ5FkutsHg9LCVK3qupmEaAYHeORiKHb\npSSxz4bStJJyxioEb+U0dMyrV8t6JITzXQ+PeZoMlTh/rw9PA7EhCAxGXVcK\nWRVfwzzFOtHl4BP4t0uKqtslZiGt3iyxCkvZUjinWGzJJ+JDO0r4+hUrPABV\nrEs1c/EN8SnVvQqLQN2ep1KL2PJcOLG6FaeQwA2NxIGZxD18jgnoKqw2G6Aa\nnADKCEHTFmXeTXkluciEz+g9MO9/zVM7NtkaRZOsgOSfaU6uRZe0XvI5swqO\niERo5A5UBxfJV1ivUXYI2IHiSe9yz2/t+1+SY2iE4MdoBcCaAQ28OJOuAzWG\nFgkvMZ7WdenCoNz/2xXNJlPLUEZ/mKajY/uocpQmc1VVVNvW24jJ8lw0EK64\n3n4OqFnXvgbgv+63o03SOfU0hr1BSa/8DbyT1vbwytMioNB1lmTjMVuNytPr\n5hkV\r\n=bE+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/density":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.7ec96974e.0_1582570685507_0.3561835612422817","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/icon-button","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89047bc904001d3cc10269d2799ae01e3fcb9e55","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.265ecbad5.0.tgz","fileCount":37,"integrity":"sha512-8D4GhGAomuotqD0tugXTA0Y7PL94nGgLruupFLNXPc/1JPR8efJagxs17EQjsbJIRN74RnQ5EDevSWQAFmJzmQ==","signatures":[{"sig":"MEYCIQCDDijKP09OX4lBoTdCsOc2u07GboG1duZvS+sycJzPbgIhAPrMi5A1CncMYuia20+VidSEGmeA5HDJgsK/xVru8Tf2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYr8CRA9TVsSAnZWagAATUQP+QAXdLQebou7P77ojsvR\nTj96MAXVzajsTIcKZWBc/neBDWwTfxuynLrq1kIEdqlg10smzT3e8Fz7Ww8y\n8IBPPPt1QQOu7NQCaFaAWNQ1SwlfdbOuHrZ6Y9E3qebjlly7S08fTgQwYoIh\nGLAiGeunHR9MdPfkQH+HMxE/7df6kmzz1F/4+l1xy+CPmNeGl7X/ezzamYBG\nS6yZohxLkuQuUHuZRefH5UyiGNCkL3mycp5G0T3R1yfaZXvjH28VFdWI9LRv\nCW01aVQMLVXRcvaxZQ37UFZfHR3Y84oqirtnkv2nXWlkVBUJbJe+pAVMx7k2\n+/+T7uBfyE0xsUD8qAoAyXvIH/byjb6QDJ8trw6SEPNtFSEfeNy5D7fgLyn7\nCkdFf5eXYry4VBiUf3KW8IAEZX1GrNIDofmLooSwtB+RiodHcRKQqR7QbRt0\nnp7Y14IV/1SErOLo4d/J/VH8763C/XoPP/ZcEgtp9DAS4uqSQy6bP9H1PvyS\nlGL1F4U1s72yCce52yPudA220o0JYTF+vSfyExDAFl3m8ORZwXrwF4klj0Ts\nkUJrge/MulEEZ1ZiQjhim5eJVLNJB7y4ERx3CfuOTuSfQjLdVLJYVAMKMrN5\nO5iZjbaBVLJBMIlZzMJ8C86KKt/G1t6cVwDbzcSVBDblfHTWyyRARy6Rg0hM\n5TY+\r\n=gD1F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/density":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.265ecbad5.0_1582664444267_0.706229373455439","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/icon-button","version":"5.1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224c5607ca272feac41ec223816ee1233fb2b018","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-5.1.0.tgz","fileCount":36,"integrity":"sha512-HLdSkqDH1wx5YSBHz8dGEL2BKv8IDqhRul7wea9i9/3RcQz3hb5+OYpq8iiXqpxcVPVlWNud2w1oyvmEXRTdZQ==","signatures":[{"sig":"MEUCIQCCHDA9yCm038SPNyN3MRP1X+xE7b9iJZpVjAfB/YdIRgIgdSbfDuRK4isZJs4Na7JXwCO6xQo4Vm059ozkqcrPEjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZO8CRA9TVsSAnZWagAAX70P/1Yaw2QyltsFCcQvEiWZ\n1Tn4haYfsf8mxu0iefBssP7n/DSh/IO8xp5DWsczELsKWlyMMlQDEgZDPQLJ\nbiLXz72QQ5aI92P1v2XCol5mxTfZMl2Upg5jTtxn1cg0AQL2KSIuSFnSouJb\na0ErT+NC+NM3+UJ9shejSXNFB75ycHpS0n+qlwJJJoCLWWDURAC/brgDWZDr\nU7bONeWm3QfOR14BytETAb/vNMYDJryb82e0gVdHsK15DrrBhl/UhL3hfzSZ\nXOyzOwctzUYfjbpWTlk9+6i1u35ADEgtBcJlRQ1YbRD/8uaT1niQqzMPFpIN\nZdMAJSdTdCXG4yduIOAT9tSxK5NqHuR9tKm0gMuHl7ecB+QYKZ5iReuDfJgc\nNPd4QorZPt33QHpM5pAu86z1BXP6howj9/VQyGLddSEG/P/On74zXXY6n8fR\nycKEk4r9/NmEmX/EdIH0gg+a4Z8cpfOOCkl572iKsJAUuXzhRughITdHXQKl\nLq4Sjr+njqN0ho/9IyDuqudEg02ocuaS8KI2IN0+NPmnyBqktYXbGGieuUfN\nAKZ2XnnSOEegn/k9QosdmeUvYerl+HmpuzOJ17RXYZzr1QG1734JLcOJaE8f\nRlQC/iWZuvDMH2LPaRqpi/aEmPLIzWVGkkrmNzcWiChkGwgtg/ofjA2qoXsX\nuua+\r\n=vcYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/density":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_5.1.0_1582666683743_0.03822408581574299","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/icon-button","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc804928d49341e49d0b5d9c041ba9f751f87ac7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.2cf87456f.0.tgz","fileCount":37,"integrity":"sha512-mFs/VZlfZ/1Pl6gpVCHM9vBXPPfFohNXqK2WMbrXOOymawh50NX2tkPnpQVSIHwPKy99SU6g2d8P/IDFilRlxw==","signatures":[{"sig":"MEUCIQCP6A7SAqPpp096hdG5JbkqY6fFgFq1loyBJ7uKAq33RQIgCT9TrlKq3dR3wc4mJDexwrNBEv+Cy+c3pxk4F+n5q/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPeCRA9TVsSAnZWagAAiVcP+wbUxpSkoQ9qbtA7sWZ4\n86T5q/dnGJ87+7NaKoosiaXB/lw7T9c/M0iaUAWm40nvIMe9v1jrdS+ImxW2\ncMq7DwhlMfyEGoYOSqflE05hl1g+oahS2wkxldaquVkJ15KRQeEsVnMnljF1\n6cGLuqrz5ivGt6ThJ7mTp14AvQP5pywe0SfYvXcFyCsY38Oev09Dn602PAYb\naX51kgq8s6zoZhmx9I43Q1RS5rkRYNj+dCu4QZCk+4/8/cF96/fJGMH7mSua\n1dghezY5vddM7U0lxXnd7sqn9Hsxz1pgKIbFgKaowefe/TH8e78Y5B7BS4Kv\nBmvFvHSDo6vAh3swmsLiLGOB3KhABhZm1PlSEhUk2CQMMMWozkO73efUrArw\nR7GV67UesNd5lrwBeJO/B2izx0wnr0liljl+JEmwL3lpxD0UOa9Ifi9KF4E0\nOFqpuD01QutPYK6k9dYd8kI/fCLht0kE9qPJK7tu9VwA/cULzDzMgdIdz7VS\nD7gc7GZAIbDDUbk+Zmd8Xz/eidK9LUaBs7uXJHuw9e8uf2Oxlf9tLFqqEvIN\n7msD0UcSNzbYJw7MhLLFe5P2cF8zcNIsxxmZ3ukgwVXa5x/qPvt3plbiQ3xw\nTjs6Rska55OyAkuPVhxvlXZndW2F/p2zH2TgI5pYAzMRxqDqZFFVwOQ+RsbS\nm/HH\r\n=udCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/density":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.2cf87456f.0_1582666718346_0.8850302633390654","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/icon-button","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d8fbe03831ded1ce0a32c72ee92ff08f05f7917","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.781434a92.0.tgz","fileCount":37,"integrity":"sha512-5iBrnMz9PoIi6wKNqAQ9kfZC+Mi4YdfLWJTLFXAuMO4adtZ7FXrXp0SCP702VocqZKQWibpjnGjyb/91sn7vGw==","signatures":[{"sig":"MEUCIC/vx11TjQGGYKoDXnhOjTs2CkoouQWXeiwDHRfet4gnAiEA7JGauGMg7MohQoBU4251r0ZILWyMms8NylQLSmR3Egs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1+CRA9TVsSAnZWagAAjaQP/RP3BgyaW0U1VS+l87Vk\nVoAFiYErTU+jF2g4ukNhc4hOwyl3V0iFVwWF3Wg+FVIAz4jj2+dZs9cD21Ar\n9m+XqTJpB5s0+C5Y1ZUtcu+ZVBdfIWIE44q6ldnJQbq8dNX+074ym2aocNXG\nC6K3RIMgVS0dvjxpq7QXsqozeBrdq2WbkIiTaHzO0IexnjcaYuKJvLdOYPyX\nuVs6b69+QPprClkky3/75M659OzWIdiBKbFb9nPnz1I7awuuEym7PW9TYLiL\n1PxGIdKjIc1e2zNQ3jcflTBWcG4Bo5Ik80f5I+36mutdcGG2lqI/cPl4r9Ol\notutmjtHPLmuKeMv/0NP56z+ex8Zqe3bKHSej3nJpNFMCZWXLNetVxIRKMs6\nmPJJ5prE66WQs8eVO03EMnYoA7vdAVR+ffDmjxIuDsi3hYb7nQJjFEy6dNji\n8usor3AxnX05j1oKVxXviw5AD1vgfWncFnHGe0gynbxC7Y2cq4KfDNjXRoL/\nLw6Ubui8quP7x+/nWsJGgsFDt1va5toDNK0eFz+niDtXjKOQuzj4ElxCvfl1\nY7wLn/cYBymqVpgl0f9LEUkmfxcr4EYu0cPQfUtHSCtxVXShecEhyL/JdTQW\neT4yWSeVV2xDexxVOEFNYj4/B2vxPS1StHPI2HaobqoLOMWnAYAWrz60VTK4\n6BhN\r\n=SNin\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/density":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.781434a92.0_1582673278515_0.5352092928109149","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/icon-button","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc091c9f1863caba77263bf14e5b9ba3f0973f9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.d6f60c98b.0.tgz","fileCount":37,"integrity":"sha512-Z1xykwzkDVpsk0rR5rCZtvKfTAibneoADwLHmZp9zy9jByzgqUC/ZfkWlw2lcnYHCPv0gE3qEqhtB2zvoNbcHg==","signatures":[{"sig":"MEYCIQCPyNm/H1nTFsAxwiAtb9haiYEhttckKubFIS8GA52jJwIhAP+892CdWzl+7f9AJpekAInO8evV1bNI8ohd9WqI9Rm8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4yCRA9TVsSAnZWagAAhaYP/RSHl67FjEreSlSB/5Ur\nu4vrQ7KKZ7kqBtun6h7ge0DP6ekAk+QLcgsMsDf16HN+r+q117OzxorZjEoU\nhR1/HwiYmq/pq4Yth08B1qtNq4srIsRmoel4rfBP6Qg0uzA/s1Rai62ArlXr\nwA3gd/d+z9UZwu430gNeYNM7IazVI5RHkhfNcf/9Oo88fdKTXuJfO+i2ptdy\nGUAXDz34RIoykW9I8oRvD0OsQAoovvwyI0zoRIKpKHMR/Eu4CBgGHRdFCq8n\nu/YWfq3A0S9msrEYwlSggcOgl1vcRuf/hK3AM8rDY/SK3NezmIjNvhzbD1iC\n8B+72uSbNYHJkBkbSPsdIWEmx6+q47w8C36Mq12DMCXnqTuy1zLKfeAJGubo\nuqEh4qyvqoauYpGvU8L0ejqYk2Okvy1u2QT2LWXRprXYh7g5n1zI7/+fh0zs\nCse7IU5m2qn02rpEQ43qKacyMPx8m50Smun92xHFrHm0KcC2qeCa8rxde6by\nwGQRUmgwCaS6QCEjW23H93BTIE/yVKoVVp6SboCMY8DjL7rtxSOj/26c06Jb\nrXtI5UGVhxVKFZYhKBtJhpNaB7VuVFPSJNzMxQB4QR0TkGw7aUWVqcZHZ8LJ\nXarYWNsz/4PZ6UsTAUp2ygc5C86qOtnvQ4esTGPZi8Sgxg1txZWP7P0/IJ/j\nNa/O\r\n=v1Uq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/density":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.d6f60c98b.0_1582927410190_0.7496720382073112","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/icon-button","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6909a23a66ddddae7a47afe0db6dc1ec6772e1a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.69edc6e28.0.tgz","fileCount":37,"integrity":"sha512-apJCVBjQT87t+atAmPMDwEbpASMCJsb17xpIGBxK79ggaQi7W0VbSCpccrvX7w3211WgeQHePIRvfQxkma/lew==","signatures":[{"sig":"MEUCIAQSmOWGtmeWwEnC1NLMeYwalp4K+ak1L9yFiwzY3gAQAiEA2uBXol6phCkheBkoZrkSpDebC2kDg3frL0tfvf6oiVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBDCRA9TVsSAnZWagAAT4wP/1ylyV9akUXmFRMhxlqI\nIuzG82uV74E68iaVYsQcqI9bEOBPVW4IM/WY/f7W0PG6yOAfQUvgTe4kyojE\nRWZXt/XW2JRWrc9QNrnE1I+iviFzeNpto6HiMh3mUiySf9ZYXWZDVG9hu7ff\nJwNXC+pIUE3rxuYEqJld13pgEl7GgWBOyr59CRt79Ddz+2niJZyLSzZJwhKl\n+w5yet/bdUEY15N9oe/G62K5pEk4BbePgarV8YKcedHrwOrkCHyvFUga2kqw\nlf1YZl9PN6GoRJxDrQZzTSVj4kgiZOEp6RqakHa3FU6H0ziIp+z03z8DOXgW\nlpV5RmfkXz7z2Y24m+/Jb9lzP1SwS77nbQaia6fJ+8l/Fy0OpxpAXRwA4gf3\nRzQPNTT0wyjxhgXQDEWGkUWflNGYYgXnIZjK3bguKedjPc9frWKCrm2s6HC8\nA/rJv2tojm4rdv+lfM3AVZsyEWuZOUnESIqu/NsTO8TCl7hSr29PKaAR7ZVF\n2KEWQTuj4o8gCu8hYlKv2qakJjOz90gz8lid4wjr49zOdrihE6XuRRDv3Z/5\n3KWLE6faCzk8enz5CJk4Z7GbuoWNkgPclonO4gm+C2sXsyYdjOubE2us/uKE\nNAid6Tp8o7e2f7u0yS6fEzOQTSuau2nb7fyo6rCNewY0KEG9m3WLzr5SVQaV\ndHY9\r\n=iuEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/density":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.69edc6e28.0_1582927939252_0.5065634349784562","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/icon-button","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5dbe9039d926b2ac644d9e9e03065726fd9d369","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.9372e4939.0.tgz","fileCount":37,"integrity":"sha512-Fn+vfR9sVj7y8RBy8GNxYOBUh789Y6qLdrBkrYCOhs/vI5SN/DBqZbLAerHEzagqxqJLOLR23vBbd8le0qqUYg==","signatures":[{"sig":"MEQCICQclmHdp8TpcuYfs44SK1ONbw1uXSnGzXRoAuTmpRQhAiAdBzAiYGRJhiXlna1cAgcJc/UkipaP58bNfJ1pniS4TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXquNCRA9TVsSAnZWagAANDsP/0EfJigTTLCEYdI70MUN\nDzyMeMz51D4urqIxfbG/vhN5uvA+Zqv1J44MZzCojKyyO6K3NA47MouepH4x\nVLAVzmwiP2Z16KOLcX8nKAu0V4e3owchK3fBPAmQMWQ90Qte9eCf2Qmew26q\n4N6SC30zkA92jRMDqP4dmFS1pys7OMQlhBgLeJGPxNwCi02f2TkN8zu50NCp\nZwke8/OEvdtPUDS4aTk0idRzno9ioWgUUPDeMV4b1DAIDlwAR/tW8R/pFrY6\nKnMo+RxVOEldjSJNalK1WZJ97E/BycKyYfnR4Nf4Wpn/QD9M3XNJBWh+BHMk\nn38iUoEI7jNQ5rekljbeelg2J9JN86bmhFbo3Hk7Lh6ZMxCfRfDZCwGJF2bA\nJvf/02eRiWtE07/OWV8taUhc7P51gzfTA7oQRpuqf/L3MrHEKMj0aLIDNKCu\nwziiFK10FyYFqwIrFxTL1dRN3Nq8BkYgdj3X1A9sQxWG8bkh77Gu0teQQbZW\nWijjrQHngzN9Olhk7yiOqjde8bRUUavUxSQb7cij+dct/O3BVXW/32VUC1rX\nhE7nsrqV0CS6h50IM0FAMnlOXA1bF57ZUK+OCTxaVbN0t33fxBrfX1DU78hG\nYbbnoL9Z9Ijauosm9iUUD+vzxr2/wVUnEtFgexIr5BHRX+jiIH5oc7Zp7fI3\nOrs6\r\n=qFs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/density":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.9372e4939.0_1583262604859_0.13167722022954842","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/icon-button","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e14cbbdf95c26617b67371db278d821abd46d4a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.9cf5e9842.0.tgz","fileCount":37,"integrity":"sha512-oPHYMmEPOwHgk2MqVEd3fRK78fq+Ud3mc/povV7nh8eRJwTzrcMob8bJl9UdrIiKal8pa2qhjuYv2vaQldfPdw==","signatures":[{"sig":"MEYCIQCWz3L0KUyCkn1IjB1aBPcdn+Uzd7a5P9eQywK8dN3W5gIhAPM4QUDyaDCm8jwPXW86L7fY8aJEX/s7TuX9M0uVrRfv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXud6CRA9TVsSAnZWagAAWzcP/AxPUeWg8KXbWX9oIqYc\nZHMwJRItYVP0xEGonI3EX4WpUCdwayANc5+lq/dsNtzuboA/KkK/CnHrlKoQ\nDWiajFGQmCqvTPfdQU5W2yKWo24wucUUUQsyU9CipVUbSWhrz6EHJjCCIOds\nnLJWcl3yp45Vt7inkLxEA5IrD3SJn7euBBBvWkw9cY+G/R4CaMAzoS6fNCEG\nGq3+wP8B6URW5erjVY4XHGAr7W4sdi08Gg64FWKag/sWHHGOiGWMyY08BspW\nOtixwmrBiEojKWDmrvnm8J+Rbd6nN57Sl2M5cyw/MC1QeKrPL8gPsFuwn5dk\nBXHv/rb+TXCEoU8Wjkp52bnTxFcSiOsQTt5p7Jz+Igf83BX3RKbVNzZ5orGC\nPrbrzfco3MkYtAWDto+lY+6iGfK2hgay8haJdPLo7Zvr5Geq6hNfw0AGQYdm\noPqv2EBFUu36Bvj7fGZKvNGN45l2CCHJzJIGdbiwFZ5TOYMm/giY/SnIAx6w\ny04CTJaYqdkFkKwwhWxD8DqJubFPLHH3cVd9mPeAj9T8FnQgGdgbeqLYd3Y5\nMcusn7esxW8SDgWLmod2IzbZ5jaXMwqYP69z3o8Dggwno3Zb7ggIGaPKi0zI\nbBRpbHSeFCjQ5M0RSpDYctfVS+eOCShg/Fzk3kSPJIfTSYS0dEZLP+wcJj7X\nnkOk\r\n=ZiH5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/density":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.9cf5e9842.0_1583277946344_0.25223195830705314","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/icon-button","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d170ae8e37ad9ac86ef91d2f035f01aead5725c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.3657f8863.0.tgz","fileCount":37,"integrity":"sha512-xWM6axL6TjQcClHd6Wiszg3LlmZzwGT9F0UDh6cpgRraRkecW4sJUAIHViIGtjvaPMBNL2K4sxNH/K7dP4UbAQ==","signatures":[{"sig":"MEUCICaw1tZhtUI8fRQ2ikI/1A9Ye9ivlb43YTtS0PrBwIbmAiEAuUnM5uiTaMpyCCoAWa2mMDuS74JFdQrs3hsLSZIWM+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jqCRA9TVsSAnZWagAA/fUP/jE8F18NZJxboAwfF9px\ncAuVIL/nkVnEja6fs0a1Jk8lV1hWRRWbFr3nZ5C5ckndofc5ngKsTDBO0zbw\nG+C/1+lzGSTv+ot+URET+MaIapzGJSu28dmstoMd4StKxN4qQUfBNvFr7PEX\nw8EwAZrsPtmlvAgn56zx53uwbPKRZR/16NMMylm0DP3fFzBTXzBdNOcNAEi0\neQI8lUaHgOt1hRp/CAmgUhMAPHdElC0JY4UXpYqMBSdvPuuR2dzCIA09ml3C\nhwogAK/M0hYYIej7pW/1qMfotwsccuyqxnxcezm7WKmastP6CwIdB/xQq7Eq\nB1TzbdH5RVKQfpiszxqzQTye/gLGLihuZOppFyC92lynkMJL/7ekp90uTiJL\ndJYeEpaeZQq9xjLiO53t4JXhKdwg8OqW4QPwjFw+jiP00X6WxLSsCbiIG6DJ\nnOfvxky09+f5AkT8Iq2Dd/NssfRJf1jE17ZwpbnL4dldr3T4VnRROS/ySAuF\nDnhsmNOdFtb40zYB4ZbbFK97tOerVJa9kFsxGzzG4NkSDfChjMNE/UQ9wdOm\nXWVycpiu2GNrwcazUtdY33Ltc1/yGwOFiqlYCKwPfWVDRhkMD9yoIZvGeyV5\nUzh/fnrC1Ujd7dWOgJR3CLeZjHggwJU0LYjkd0uwoIRFSJv12aO9JQHXaiDL\n9cwK\r\n=SkP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/density":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.3657f8863.0_1583343849606_0.21919307449624115","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/icon-button","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3951a87ef3091a5987dd4d0871451de952011b9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.98b843417.0.tgz","fileCount":37,"integrity":"sha512-GrkdQ6W6iwextQZ0F1XqsjOsko5UPcfgL5LwOye58Xo3O/YhVbzixoBwq2GU4S5c8mNR9ihjzwBwhEGgMTJpjQ==","signatures":[{"sig":"MEUCIDcs0PkwQmDJEMt+fqfouXzNwBCJqP4+d3qE/KmmB+reAiEA6pGbgh8t6/Ff6G7JmKuntbjN3uyIMwcnS8ZHjH0AhU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVoCRA9TVsSAnZWagAA5YUP/1anDCC7NAGIajTyvyxd\nIaIz+g4op9ls99GUsUrx/t8gA5HiW1OWtQZ0Wo3cjZRFAGAQ4x1wKABFYkxx\nLaOgy0cJ08jjn6DQ3ySsozX4n+AGwyW9g991SxHoynU8K+/yYjeI932TU+Rl\nkmqVkbCEuFB/lz5ij3CZ3pY5DRXDtzj6Ec9aHWta2tIhEEH+GV/fdc9XRxFC\nFF7JLdig42GsaElc3+pwQHbmFafqHAkwat3w9Mw2ATyojwvJNBDzC5Q8THeK\nUaiVghQFRBZdA/eLCoMmuOPPBO1drNPaNYbjVJ2oS/jbtouQArx1yqGqwprJ\nnyOUCCcEMXp+cupqFcJRDm16ezlv3JtN2Kzra7MZ2l42ts6StdmARDnolhff\nxGxpWghqpEU4bOfCHfGbVAtfShiCVP0UEdF+B+ImzsnMim+imPjBV1cLuS3A\nJsxLQoqgrUX3ZMBZ3Hs5EbE+Un7vYeyw0bTLqEPd+bIRtMHALdi8Ygd/VMsD\nhnBltQTT5fgMPCsYH1/Cet+kT/76UaFTUdcnYvcD1y5SeZaZHBdsuqxwoOjU\niCNy30IkbZioqtaE6fW6lPHdKZbxhJT7OSqkq71Qhn7Kswr0sxTyZs8DJEt4\nq5TvEqeDNW0Y2l1vB33U04Nb5rP2kigpzhZRyKGXAlwtg/1itIYMWnJ2apln\n5mrO\r\n=Clmr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/density":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.98b843417.0_1583433063689_0.7428369898320037","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/icon-button","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3efbe12d29563ac73d7bea6411b2325cff70ab4d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.17b9699c4.0.tgz","fileCount":37,"integrity":"sha512-lk84kqjnpBJaj/LD2GUSjHXvziq7ew3Q+sn033mFrpOfsMg7xK7pD0844SzKKGsNZMGjJItRwNAXoVdkBQUIiA==","signatures":[{"sig":"MEUCIQDgZ7oSmrt8K4lsAZs5xscJDg5PaqEFJlpNN6uxm0a8aQIgZK2jdiyGccFMrsXcHH9lJS+W3haKLshgSDOs9YEdhf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFqCRA9TVsSAnZWagAAjlAP/izGa5LBg+jSAJcwblXV\nduv+5sfUMRR7h1fz3dpCVvIozUDv4Fo9qwszMr+oltZwowObliVHlNCAsISI\nvYeoGYyNPwoNQVhGMd/qmvwgw5uYbN/pVXRfdQWdPbjOtgGhoI4fyjiLBKE6\nDnygNn6pzCuiQaCJo2yleQrCHg0OkHNSJr8NcXYQ0jJH+4d34wLef1OmT+S5\nyZ2B2lIazF8sY3DF8nw6ppQr0nmpthnoZQX+4C7rQNYRbgDGoWgiYQbj0Knn\ndfxeuQlZ8TQFpKwDXTYd5t77g82qRG+HiNgHbxok8LMgBIZmPMvp8DZx5U3P\n+iYiW3KnIIUasXgnCzYRzB7U0C1hmDvwlNI2mc4OrpFR1lB1X8FzarGeI9Mp\nAvg5/0gWzrPHj3crZWT6fj1D1QNO6qj5/RwKLrQcdZmWUibz4RyD6epoMGP8\nlGuw7MenbztwPf+eeo55Dsi4zqOP6ZTD7gNTAj1raSncLsR0paX1NcyHL4kG\nOc0ophssM1IpqDnw5x7vQRZ1j93A8UIZu0pyv2HFDEqHEYx2Cn/WYBHI2G7R\nsomPq5RUCt/FkreSNaOGXIrzh4C4fjbHyOP2OCG2wgu916Eks4ixsYWzYbTn\nBoWVlTskOrqGg0dRLQEq17iIpzL5UKIIFq5iC7k65hRWb9Fft5bJ2R/F3Yir\njuAa\r\n=TREM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/density":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.17b9699c4.0_1583436137758_0.9677188463004383","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/icon-button","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98230659456494e6bfa63d2d3893354df3c95aab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6ee035572.0.tgz","fileCount":37,"integrity":"sha512-ut5zt4TFpOzxn4V6/Zf4gxaJxNOZV0LguOU1kG76UkV5WrEBU1aK9CP7oeqIPXwB3woJcOwz4pmvM1TriI5gsg==","signatures":[{"sig":"MEUCIQDqky576E/oH42vVZmhpxCCgSxTre0fDAN6yObIOdgKsQIgG7txXeIqb82OQM3MuhsXMXb14JBNfYg2Tj+YcOKhZlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnL+CRA9TVsSAnZWagAAkYoP/00gQMoEFaCPO1i0HFYO\nwkrxOggg8Z3OdlZuxiEivffjTslLIBxmhI3cV2nzrQaPftG7G0Q7b4OrGVHX\nQDM8HnxNEudHBDXC/gq0xr/XfjY6r+8wQtijQp6h8rECIK8xD5DM/0Ghpj4y\nnWG8Xjt5PKh/+hzCjt1G1aRoHl+fpLDxmYHIILTKcvMvQV+qUJcA6Ns7KdYy\nrZJVL5j21Go9BUjF1pfJpZRVzAOf1vEX3fNQWgnT7BCk/yvTe3e9N8+1rsGD\nD2lr5QegL2nhKepsk27OSiQmxL0pyMuAbWRONDtdecdTq+5gsTGDLAkt1k+b\nDh4hAW3TH6SzcJY9XNKIVOrR34GIqasMX9dN3+MO4qGfFueZRE03Qz9areex\nJ9h8B3zx9Jcqqs3EkvGDBy3vC0vm9FanBhYo5tAIKyit7Fz1ru7jPLi6TrlF\nsGM0AyCxF+kGYSZBaNpLBfqD3raQo5UVBjfRV5ELZxX2NQj6reT63W8kjKQs\nFxvi4ninJKzHxblyA8BE9ZNxSgHhvxRPIH46ivRV/H2BwLOxl++rMfFDXz00\n0PvDl8QrkV4tiAekbTeO45eMcIdzcbyeXrcqOcc30q4bJwk4FzQJV8ash7BD\nDh02g00g9W7+LuPDsXCC9AZ+//4QBLIsizl8mESZGTsMypg8K3s/bCAyTEpJ\n0CTJ\r\n=G4jK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/density":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6ee035572.0_1583772413768_0.6011389662155389","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/icon-button","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"856355b5a9b8c3c983136b21c5490dd4611461a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.bd33cb56b.0.tgz","fileCount":37,"integrity":"sha512-CNYH7OOD6wN5FdKitfGzWN/oeFRNj0KEgUFB6r3YCIgZUvtw17nqczncoEtPKAbisYp8aGx7U7WPP1PsQgTWsg==","signatures":[{"sig":"MEYCIQCVevTS4mplmOLz111mBYQ4hRSlrqemrQo3qji9N9C+wwIhAMuQHUMIkQ8ygw9oupEhWUfriJ0wL0hQ8BJmVjI+fEPY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZns5CRA9TVsSAnZWagAAd2IQAIK3nI4W5oAeh95uJWSS\n4tvq7G7ZyUzM8TgGWMUARFwebS8HfqwwVG2S2UobgS6n4CY30S3qv9bLJx8m\nBgCob4cchkdTMLcGXzBVDnJ1ZwM2hsC7KKBrAfETucG4lX+mv1FLorZx1aQF\nPdqd7kCP6T69unIqtSY++SavT6oD1OkZ17sP3QnpSLRkW9Tqpu/huDUVKd7F\nG6y43Vvb9Vs8+uBpw7XO8CjVB3Cjgtwks4MlFHjvJueKtkoouc7ZFG+xte8b\ndbiDUTYG0HMX5IAoOADEMsls8mlsDE/AYNR9TX7Y/TrQCnqZ+VTvUCg7UC0A\nOgTVXvvkfQvBNcv/1JOMN9fSc3HvCFO/mC1BLc6zWS0wiN9soGqNcyb61hUH\naMMRYNUN71iDOdncHLtAGtEoVTiwU7d5r1z0wW8JVnYRA9NfYZANevsGCKVX\nro27USIzZ5+kCe+HwLacmDHRN4z5pN1HWNTUhmKmpFCtHECNMQ1baARJoKjj\nHYUcYVz9vrnJHz51YmUUjFsNFM9MRnpamfinbkMzVyUDZ1ywgYI217CZZpvp\nA68yOSxbXAP00ekv6Y4+hVUf9NuOHGX4SdzUWMnbR2+9gHHzXUPj6hLDEfBY\naJmyrgn1J/vRons3/m6TER//NwERacJL3Rb0NG9CkK9EjZHneR1dNKU4jx/w\nxTc5\r\n=T0zB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/density":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.bd33cb56b.0_1583774520479_0.20257628363519853","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/icon-button","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"678d99cd9b53995f51a384d888458bd819265933","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.26c049afa.0.tgz","fileCount":37,"integrity":"sha512-QWNHt/ZCFzemFN4m5IyM+0HFsNJoiQzee2/oD5TN2BB/Fsh0/cANtvThhJOw4OZEklVU0PR4NCRGPj9avaJFbA==","signatures":[{"sig":"MEQCIDizLXqsG8CRTmbWHJS9Bl9VKfWzTapem20JYXpohFivAiARZbro+xwGS0oa9vyD9l2KiIhguYMorCqum57CPC+PzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8geCRA9TVsSAnZWagAAcQ0QAICsJELJgEHQ+C960CXO\nu9IRRWNmrRGXLamVqCAM8iALE54Uy8AH4LZwFXmcOEYEscHQwXsVd01aW60+\ntviVTV/xOdA4qJWnhNBdj84+9j+zLVcVVJkxALNip95KXRyXowydbI60Q0+X\n32sfBMdPwDDQOLjAfPmoK6WJFHp0nvwyOW8+VT4AB+C2u/3wte4jnSHJPShS\nJgfWOmw0SPY7qFenzlHCKxoDYzWW9eYrn/61xsD09xlGf0zUK4exnrD+2IA8\nqI99VDcL7YbwK9RTsNk/NzHZn9FY03cfjTbKECzdoO1w2xAHkWz+Umnocwia\nPM1Y0Y83zSzzZ6RFOsrg9TGt2qq5eZ6Rq4Eeg8W5ui7H+BeKYDG8SNiVSpLu\nOHzUelN7j9rjQiOv5RZvbaS2h7dN0khsqbeft6zrbHm7ZZP9CkOn6oV8TT+s\ns1xMyy9Out99DfSWtzsE47h2xiq53KyIc1p+BYTmRkDfK8FVdgTwm0vWJQ1n\ny4WHfpX1aq+eWjQmc3g8ZGmZs0lgKDdkbCnqFA0FgO0L4iTVCcB2QJOAT1Ko\n3PE32VnAW2ksxt0d2GQZ6x7mG7ovNzVdWmDC267cUxfWOWJseWycz8rfAtn4\nL3yFXqLOW5dj5OZOVmMOADTsR1z23JI9N6Ynyo1mgLGzewOXm05hTASPg8kj\ngax0\r\n=HtcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/density":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.26c049afa.0_1583859742271_0.6434322386853137","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/icon-button","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f746c029250ec2e77743b04003eec7046e4256a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":37,"integrity":"sha512-GBShH4OhipbF6HwJPUTkg9Y2vXv0ZOYZQsdRwvc+H/gO2U177Ky9IjpYRmCSqFpN+fLEE95DXlZZyMxeSIjZFA==","signatures":[{"sig":"MEQCIAe2OJD+ZpxdIbbkq5QmfHO2967fjADM1EsWOAKKCh6WAiAldExHZ9nhVbZ2mvItj/0w5ldFnPVUhPuMsUTkyCSI8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/pkCRA9TVsSAnZWagAAjtUP/AqwUVKkLEzuSYxIMfqI\n8Nf6RJHvx7bPm6Hbp7WFRwBEOIqOO4BPHkJjVzfpruftmhG91qY+80bAJyu3\nJDqsQW0LyLl9dAM84+77MrkyBuZ0S4XlyL6H/hCii4YhU0aI87LIHOkeENkP\n0QOUjCmVwUMXvWo1h+y5wp57y9L0jWNCnRe6mBEn+LgMh5Ub2jIS8D3ThJkV\nOHKYXv5MXhiLke3ek+uZFbHKQis+5x0IQHTgn1/P56uVl6YcB4jVtz2PW1tC\nhwGfG1iuX0tTj1KRlawHh57T0HEw2k5lPYka+dm0AGbfsU4Y9E5OhV7P4K6F\nz7d9ESpV0HqGjAxCFqOu9MtmoeUi1A30VlzWS6/3BJC6hZZ0L8UVVelTn7v9\nxxwmmCEzvnwoxFnWjlQBooH3tNQTBpvvyeNMHtUei5cGqhhZmYHhJj6wIEqn\nxoU8Z9bdBFz2UDtk0Q2qgt5jSJzDFAQsFQUcEKSi+qZ7aPyXlnUydu0MwPLO\nzew05l2BzU8KcKQe4bN3xFgUrSV5TuJuN7o3EDpSO5LI0oQDICntAC5B7Upp\nomWvYVsGk0X0YDne4R9fZ/50IVNWRpTezDVX5lJNuLyYmsOsik6daWxGkuyR\nQyGbYEdyhc7M6Ii+3N9EOAChPsQK5u12yGFYGbz68vF/JEjf1vcsaFur65Jl\n6glI\r\n=BYPh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/density":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.1db5c9fc8.0_1583872611486_0.896241563426039","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/icon-button","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73bca91e4d765f84f3dd681334fa0636d58af5fd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.4971637f4.0.tgz","fileCount":37,"integrity":"sha512-a/Dwg/p8+Q2yHAIwAzI2YPsQvqIaPQ+W5DGVwhAR/O8PcALoSt4ELHeDra/ochM+mhmJIO8p1QZwfuCaM9fHtA==","signatures":[{"sig":"MEQCIG1WSj/NA9yziXNgTTDTS5qmIWZAlu6/Fg+ob3obt9nwAiAnYc6/AQJ/g0KKOMk9wppvdqwy4VSj29jC0GANQYWBcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuOCRA9TVsSAnZWagAAjx0P/2ZY9zBL7TUm8V1I+OxD\nTt9iB1YbQ0zJc1Sv9oxsPzxJFY5KOlD+kewCpCCh25SCrTA1uY1cC0bd8WWO\n8VSrlDpw7Eqh8kuXf8mZ0qQL0VZmlZomMxtsnYsbCCp4TbaiGszBYyxZL+V7\nsO1JGyQu0ViATTD0D9WJIzKX/4AaPW8BN50oRgHuxxMySnHOBUiYgUC+tA/V\naFEFOrA2NE/B/N8i1YUysnV+AyKY3ibi4iZnrYjEHP2sTOBmfcmIVSjCLLxh\nj+JNvaPobSo7l/ecUfsKmHb3ZOaUxHoEnEPsrL3OLkr2rFA0Q8LrsBj1+wl2\nSS3Zna9kliZjhO8IWrRFC3HalDf9DyFGVfGTPpBWOZQGgbU48bscaH54B1SA\ntWAuU7VG5qd1SnVmXjqXqEiLM91sGdQffRgfXTeTJZKCbMNq+wp6Bv/fS/4m\nzw82bDuzS+0oQdendL6Gp1PiRtubTLuGXDItkOsa2b2ul3TmbiDkguGYMntS\nE33A5eGMgYHR4K0fw2cxTWcKrTQ1dB/EAnUnHDyoeHSrzQDLjJBcZja/tWNp\nhyGcJ+FATXvc5wtGGqOC/WOhxTW4BxWDJIFuYI/U0lOBXwjPCm6Yzm5Sto3s\nfPCkYSJ7jFUELYlxgQBN4CzL552N4Ki9ncZ4hHWUVTZEdanqNh5HlWIKiRJz\nahCs\r\n=+Xef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/density":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.4971637f4.0_1583881101869_0.8785545484682826","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/icon-button","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b794432842229d96483e942d3627f99d2c2b5c22","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.1ae8130ce.0.tgz","fileCount":37,"integrity":"sha512-2UHtpw/V5it4sc+Vq+aYW8VLoY8e+Oq1zy6qIY+TORAz7s9QWrNTleb7LEa4K41h+tyavaz2uyHVEzw0pJAqfw==","signatures":[{"sig":"MEUCIQDuXOmBxn96U/ZpR9dg+hgzZHZEsRRAL+za7XepsR+7xgIgSUUTAF2j3jc+p25muuf4N93AG6R3ocyyg7Wx9Oijpx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB04CRA9TVsSAnZWagAAPVQP/i2GMXsnD7OKOUQgK3co\nlOMlrdulYD+33SLKWz+YtR2u5fhr5h20n6x2+VqKRyECZx+bCMJPWFjuUQuZ\npF3JoMyoa9Hu8efHdT3rMTQ4cE+LsYRY9ujF+mvey2JRiZqdBm4b95Rxssd/\nLWlO7L6hNl9ZIYWb5qA650pp89uVo4wnlGJHOHvq3f2dNlYp1o1T2dd1Fevc\naGe1htRI2QklNQpcTWuZqxbml038iUP6pAvtvUWTRnq6wiJ2JBDiCO3iWswe\nGEveOrbfAniS2xTXKwD8F7im5Wooy3s2L5TB00r8XtZ6myVHUJwy9VHADS7I\nl+fhfR+xw3j/wrDpsgmsdtU9TUe/zN18lN26iLi+1IZyTKvnJgjfYUmznPil\ndh7s2H/xbadO8VEH1dVwMVrdCkOM6INtc+Ajc0oR51jZVYHom0BB90xUVqlT\nhCU5CPkAptoA8t0uYnMkT+NP3xWQAIdl82omndvjTSjZmfXKqeoZ72+aEA55\nhxBtArFHx0Eo4nsOX0s1Xdye185mJTpXtjClhsBXMh4zlFBty4VE9gS1Gy6g\nGHgxZQjK0HetKO/xT1Vpp73PTEyJTy1yTjn1UxMRM7E2XVAt8HfHJeqBHj0j\nYx+1Itb+Nx7DXtIE7gx69GL5IVnlrKNtJB/vEmfoAzY6iqweInYK/IwZzrGd\nV5aD\r\n=d6uL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/density":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.1ae8130ce.0_1583881527651_0.3470573935349277","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/icon-button","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532c701bc7cdeb315c827691eade9917ef29759c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.8639c2690.0.tgz","fileCount":37,"integrity":"sha512-orrixvtknGIrG1Jk/uooQoEk11xCBDmyIQNaxIALFJGjX6aPMY2a5eYBd8agZo0FdAu3EDJJMNGbEaNU7aj32A==","signatures":[{"sig":"MEUCID6BGiswVNZR/l/kKiAovWXWgUqtS4QoQV8tdDgEu6UyAiEAqPR9S7U1NxPIqXfyFzD19LCweJWbK+zd2cQ5RmDaFY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYwCRA9TVsSAnZWagAATF8QAIV/Eh9NrHoaBHQCZUb9\nyXk02DLIikO3j/C5ndcUk4s0UGcaVZlS8Ji4ufR5n10iVHJ18EERG47bp0HQ\n35KIUKu1YuDDSyTqt/YHZcmfCYbc4AAK5mMXlrud10WpoUiXyhsfIGNALzsW\nHsHOh4UvvBd8bAQVUNbwo1gqEUibxn8TY6xz81GnRVJTE+e66noAPlFp3NeU\nEsu4a8kAAaCRaSkC+fF4GVDEMnIEIzEdmRvaqQDeX/mszeGbgEwAMSCgqb70\ngBzKJBpbkn/e1P/pbgxqQVNqTZVXhMvuj6ouOG+b3h5tKl0qvVZFWVGgxelz\nwNYoImJ4fGQkeljXY8yj42/xteURAt0XHeHFfDeQcD90dJlVs+fjx+hFN4om\nJ2sc8fj539ZOslONz+fsptZX/RbqX7/oUcpkbzqY/wExNqtas3RznlPGxfUp\nU0JKdnSApDbThsBsTXT4rYxmxch4IR4alsudr/FSJqnZCDR3F+tBHJN0O0go\ny9vTOGB1fl7tVmt7GD/hkDEJbnmDbpsCrZjVx1bM2fjOtqX2NqsIlx7BAYMp\n2oOPhY1sfNGn/kr8Yyqc972PG/BZieTPhQkz0ZmPbVx52T+g6D00E6H69xsT\n9OdYI9fGdXoIF7W6TqGN1vfi7odctpHlgmPooE0ETkK52izasuMKuZqikzdb\nY3/t\r\n=x/sO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/density":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.8639c2690.0_1583908399618_0.8325717030516617","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/icon-button","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732d8a37f55b12e370de7a541e821dc6a500b94e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.d5808057f.0.tgz","fileCount":37,"integrity":"sha512-twayAzfb28d53o44W7N06d1+EFTy6TSOm2ZDOLGtI/O5ZUa0SmidK1aPlv+Sp+SuGapbAL3jlXtnLPe3vTUNcg==","signatures":[{"sig":"MEQCIHa4Ke3a0aelcT/xvH1qHuccTe3GoXkwIC9/bUfRuUxaAiB54D9bN94lLVQvl0JNMMG+yW7SGmEoEBKwV5VWvgLaGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD6CRA9TVsSAnZWagAA2HgP/16CnIyjbSNzB7tnut/l\npy0xpUqP4aC9odClnNs5oZoxOHh24AH3osp9+Ht5lozp16zaS+tVvl7YGrAH\nkqZ3XrcA2f3FbfGymaU6W2ucW3yBr825RBk1hyFyVQv3mgul6eOeLfF0mWXP\na1KykAq2WOXKjX05CawDetJlP7uHdMgiDgcuWmOmXqq6VBc0qoZIwVOlMuKY\nbtvI+osL7Xkx/+DHMesw7nHzVTMQ2NT2nii7R9bkTIceAjP6oDdwtJfPw/cg\nVHrbG+mpsaO7BnfPw0cgIFAOKeCldddaZ0ZkwapHYOfwd//N/ddjrJWlOUZy\n3dx2AHqMfB4uPaHN2HxymUIr0IoBKMA1YBj+zQHCdpEfuXMpRpcVaQAG/1aO\nR2GPrlvEhSWwnPvezNZVS+SsTJ2W2svhb5fuuxReYG1w3vWZfE5aKsyz1Wih\nqp7cRwKELsM5EW/nWuIKquhG/xu5wMW2El/lNhAnuTDH/T/TDN/R6z9JmUbd\ntO+178WWM+UcX44YcGUEeJVqTIGfxDP3IyARfSbCWXoiJaCb2I+Nfsu9mdF4\na+vvFnGTdemGi5CjeGUbDJQxMVJufvwBkc3ayRKd3uKDXocOjmxnBgAOJlxs\nZiww7gz8YOz9RlwOfxVc1rQAbvDvGlhuZ+p+OKAx70bJQ3VgvaQMd8AQEtXo\nda2x\r\n=frYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/density":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.d5808057f.0_1583943930335_0.12610144718644167","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/icon-button","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57541fe5da7c6fbdd1b7f89801d0bee289cf689b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.b3f58203d.0.tgz","fileCount":37,"integrity":"sha512-0LRuBWrs2qp8oN3vpsALc98sbviURFeSRo7nOIWUZ0Yif0o1GxCYfCWrLhwVexrrloPYaZOfhv/2i3lYSxebqA==","signatures":[{"sig":"MEUCIQD04TpjXRsfOi4Yap9nLGM6pqF35ZlmTxUDaEZFsdsBMgIgM6PjFsb1xUOyI+Sa881n6ZbpttqhNQ+Ou/iaGKNJnQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4bCRA9TVsSAnZWagAALkYP+wa7v5+8VMoz+ZAcoJMN\n3W3dpUUAyy9I4Wc1gnbgKXW4BUVevUGcsHApoom+j2kgCbUEm1Y3DnX+d6ZC\nanYFMQMEVLiZtfOK7Ge66cEPFQuulRPVHbDDVDZDa9mFO6xJrBw1jt8kzgPy\nKeAEOUI5rfVvYtgyzrZkriV4uHkvLOE3kWuMgOIWfnOAYl5Hv0yOF9QLBSWt\nP/0BjuUtboR+Nj85IGgDqolnIrp+6ugMfpw1i5V5VegGoC7Ph5sdMHe/+ATY\nxNP4NE9H3RDJ3xazqU6Kt+pEaoC0kwK4Kzv27ERfsi68X4vLy5+iGOyuuy/7\naZ+wFWgX5A5lsCofmyyMtRN9L4dZT0hXqnBWss+iQw0QHfyCGi2j7TBDRzw9\nrauHECBgVgZfAGLwxZt8Pk8/4WmvlUVcm0Sg3XgrExsyAsgxUQC0moE+Tb4L\n8AJhxouyzpMaZAq6yjmOdPO+cKl8A7z4LPBOiAlh28qjk+SPDfQJHx9P64xT\nLDkLiOVY8HdSI7onFRx15ZsuD72APjEsQKURvAurphmL/jlFPV/bSKDnoZjW\nKZIxuzwsjIBKXcZLySOQEO9r6MUHh93CfIITYCokoccWloU4GrUFbmVcFiEV\n2kNTE2gCnjDPzDoQljJynVW5kZpQIU9Gu9mJY2NrVmWad6mQ/sLFZ7DUCQ3e\nr0qJ\r\n=0lt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/density":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.b3f58203d.0_1583955483228_0.24534866547278789","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/icon-button","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1f3b9d95faf591c5c013105ce5bf00a725253b2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.bec065920.0.tgz","fileCount":37,"integrity":"sha512-53jt39GsTM3jy6h9OgVI2WrODAohxL0brTNRjHG+l30Ti3xEnbDnz8OxN04e1Rg1WR8nPZTSy54x1vr5k81ARw==","signatures":[{"sig":"MEQCID9MAZRTB6NBSeuLXgWGjw0q0H2urSlpDAKFQmTnXVR1AiBb1biKY2UAVB8d0ZJdjhWCw8w431/QRLaFYAFMH/83Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmJCRA9TVsSAnZWagAA1+0QAJwznVBpU5WByo20PAej\n/ZVKrIQ4NHjHk1ij1d4hjejzqaia5vyFiqdNRyMcDVbnTDRmH4YNzG2F6MlX\nP14R/ZUXaBlOXnDuJJh5h5PVv51T55TPsz3xV0torFIv9d1b/hL3sNpASYq9\npAxgNuG612uWSQNtsix7SPhrGVBgW1TE2HoEJI/61fK7cIChq4FMqOPY1nse\nQ/c1sFMn22FGZJyf8UTcny/oWd6XIPEjVVU7nTwkwUKqOhgEGUox+2+ZMkmF\nM+mrrGgYMbHD2lxr/Q0DO88BDhhRbxGG1lKDEbGG/Xc/Gw6r7b8SZirJ53ar\nr2MqNh/TWClNt1TcfdAeV/Qs4QCOlhqtzl4t7Gl4w5mh3oOIMHW8+mTc+GFc\n6jlXBSrKT7QmWEwj4stfeICBUCmiUxxpShsS265JORG9rTFNwShfTlVmvP7i\ngB6QxZY4g+YkIfqYWvDrmo8nuO0WYQwqQectjTjDWDjrARzk7ZJpr6bEQWSz\nfpjjVwudP9BmxZbn6pqZGWsbMhK4CQTJLqO+kh4SCGlcrbutDaRnS4HQY6Zv\nyvPp+lbDcC/+ZaCok8+umzy/oQW9dPGTgUzY10TmA+w7HmIQTZe84+2U9rpI\nZ5e9UgwHNA5E3rEOQtmYz+hvzPtxHSS//iP2QS8vxbigiSJEnap9GYKQ7Ho8\njZ2j\r\n=7ry3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/density":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.bec065920.0_1584044424940_0.18234837885944466","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/icon-button","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ddc9ded69c6c72d4645925efcdeecb9337e95c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.776291ef0.0.tgz","fileCount":37,"integrity":"sha512-lyMPFNJdXJ0ftwfF+iOlOdM4InXGLsbqBzPoevwzyQCUawuKHV44tp/9MKnSf5jTZqV1/jh/opEWNDeTpL/E9w==","signatures":[{"sig":"MEQCIHu1DgMhTPWVDRyVcq0WzPVcdt90calkKkiDsUXZj2FFAiA5xcsg7r/LLbQLsnh7pEjFYDwfRygs22ZoqWasQ0rpnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMlCRA9TVsSAnZWagAA0YcP/0MrYzcdxGRdBcEEjfBs\njn1qCfHKyx/VN+9Js/v2ibmOCtxKCPUOssIEbjDk7mAjS28bTGTxVXF6G1sG\n0Y2voY8c6G5vs/H0nlEhfg1liMfCtAIpJXdijAVvinQu8DePM7yrMM8mUPv1\nz5VCTzmZSTivOO0r1vP+ne2Jp7iuFAsJYphQ7ZmcgnQYHYT+03EUochoKyN2\nZ2V2JlIDurokglQmICOjaVB6Z6KXxwcSgy1jSEwdoAx25LN1M/8Lx6S5l2XV\nwGtpK7C1KgVOUHZlgAIGYRqgqbXl3Wh9uCHiBlJW2H+tcW7t896QbJGFg9Ph\nM+EiWjbwfcqAQ/UGAJaUAlG9DiECFlaIuTrLp9eH3uPrmM+JN5vTm4uLVvqU\nIrd2mnKYFKWfPM0vIK/yKSTSsSEAWfqh6WGEthWsrmUG6svJZ7Onb2tkqaZQ\nsdIIrOwfxiQHozK7BO64g6o3W1R5BIov5SGO+rpw7z3Ps/TIYj8f45LvYw0U\nMeGjNhukbqkP3cRhqnxlLrcGcOzqKPIE2m0YfR3FCWu+TrdEMhVaDcLH99W9\nUu+3ZQDSA4YQW4ZssQTFPLaSQdUn9WTfgyRMlm74u0LUhjlfrxydDkgdkOYF\nVXXVOO2nqCA/mvmkwQbDsOamS4meTWbKNfebmfbCKNVx+kXX7P3bZgKyOzeE\nb/mt\r\n=4j/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/density":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.776291ef0.0_1584472868975_0.6680248862547826","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/icon-button","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f32efd88aebf9725b74dd52e8b4acdf17e775a6c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.ece19f3dd.0.tgz","fileCount":37,"integrity":"sha512-jHc3ekLgpqd4WpuOkYQ+vbmbOInDr7T+Eg14IvWc+iBjxK25+9ICDzUW1EbcWbywHNH62L2tw2UKN33di1176w==","signatures":[{"sig":"MEUCIQCxE4NXidPlFDPVIVa6m0IoqxDKLmc2Ww/wQLwz7HRaxQIgP6UGVYjqmSGIi5w2aU8UDrAeBLIagFwr3Ftei36/Dm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUirCRA9TVsSAnZWagAAaCsP/Rs/UzzZ4tIYU6cYV/k1\nHMMVNSfrFPIRaM1eFj+7W6C0eGJogouCtrNT09uYFSMbWrYu1HoY2Xp2zQ9F\n0wNO2Feo9Kz6r5kZbtnGo2jPpE6MiHaeus9+za7lMGeWjr/wCzLh/hOxkcu7\niNo1LsMHiG8/m0w/AKtNI/YFlntAuogpZ8hdBYRI2TY/PRsYXIiayMYQHehE\npTxb867/Youy93owsTuW54PmPMysfM8cjtmu8lw4NI1ElohsMn7aOK+g3/Xg\n5KOLQTSMpkK/UTXAfVWAhzDGmxebUXs7m8oggeIyqAlLnU7H36bU5ZcFVFfe\nr3d+lVZe4OqmMdQ7/gKW1pvqfFjrZaQS35KCiWqMKYUBQ3enwMoAAPlXuM1S\n7FrmlCQwYp3+h6kO3YD6jT4KbZ+dSIEdSu5okmywHxGQyxNaYfzDAycJPbAA\nxUHlKR5H/n8e1G2j7m90+rQTMKc/yknHWqa/HzD8mUkpIgGOT9yV+VbqGGJt\nCIssPoCRDYEOsQaKWfDBI+QAJhRWnpHFsC4e8znILbj3UEMv1iIOkRoCm2Pr\n6CbiYkvrNT2qS1G04toChb2LUbZYUQHXGQdBlD8adiM82PZNsI3QVMpLPjeN\nuD2gJLuwcWwI0PeDVnCPUO6k2U/kEAuyvEC4G99I7/3+lJ9q8DkFUIxXtmaj\nSVaW\r\n=1Nr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/density":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.ece19f3dd.0_1584482474860_0.3491981177710095","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/icon-button","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69c17c5d49cbf204cffe27621df110c812fa1752","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.4dc45af6c.0.tgz","fileCount":37,"integrity":"sha512-s3snANSs/hExe1voSQKurwncXLFIVNKogNBalEhbMU9wSjiNmK5sfl7GwgwKUAGJ0WMblHCwposIOKt6yby2Zg==","signatures":[{"sig":"MEYCIQD/2vM/DaF7w1tIowLolqx5aHtfUwloCOIA0HDRQSNS2wIhAMoVfBF82mdsZh53/Q/80EOdbm3rMzs3DeDpbWAMqUBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3OCRA9TVsSAnZWagAASFMP/iR4z2URH5etuBwizANk\ngCV/UDtsDbOxGu5TRoRmMh1gI0Tr1+PSxFAR5LC+PhERz8IbNSzA1puf8jnd\nJ/3jMwbti4M0w8ABcSulsPl2sovdSvPYjJFdGYrPnWJVLN0Uq5bv2mygWSuz\n0ILjaabQtuDGe0jQw3NMdC3DGMcwoD85hA81WnoSe48e5GBof17L/Ypgpet6\nzfwrDxDwiKBztvgNcniE+znU4IlpLPEHRL/8qVJhb7DU5SYaeW67mx/4CilO\nB30bJ2p0AMQ9MyKZlmdAIBVycOFeGHrXk7MldiGcXYLYJoBdQf+nlq1VUHqw\nOM+JBQR8AfnBsaKkB2J/WFxRef/5lc+g6FiGWKsufUUOzOkVGYLB5CQPrpW7\nz7MThTRIjkw994OB5G7+iY3Rjwnu6EsrSKKJvl8h8TYW6OA1tTLoeIovebAh\n4eqKj6yqrKHdfz9shuOAs0a8GRlZcGEyoEE4xlJ6LAKcuLs+KU3I63+Xf7sO\nedp1q+xDBuMOnGsO8pktY/JwUd/M88NClu29J1rHRxqLHWHURa/Fxieu4ek/\nrJDh7O9Egeu4pg66bI8T6f5SNRGpc066sQlN9lU+IhF2iue5ZiPb4dJB1fM8\nfOZRh56X358C9pBgXgUJY/mn4+HzPLBk5FQVErPPG9ljKS5bG3J+MFPYV6lG\n66UC\r\n=YoQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/density":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.4dc45af6c.0_1584496078254_0.18592196540724903","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/icon-button","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d02b6bdf4d1e4ef32fc07cd6ca6973687d4fdd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6b48781bf.0.tgz","fileCount":37,"integrity":"sha512-hTn4fG1tbXdxg9o/GZKImW1ZuukH0sHY+6FdvN5dGY6rPF4zTUj/P5pXAl0dC695XRP6A32NvI63JApV9FwVQQ==","signatures":[{"sig":"MEYCIQDitf4r8HuQ/odXtE8kCAAILFDKnu/Sh7eA/3Rn1iQ+lAIhAPD8GaS6iIitw28e6mO0JCyGp1hyNcqRTgk4Xszjtp/g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+WCRA9TVsSAnZWagAAWw8QAJNmeazJFGWJTr7ZrZCy\nmvMa4mOb9LdK3HUfx3eOJS3CjlogMnmo4WCCStIaFo8l3M+MlhUhJrbJGqWQ\n2bkYVLcL6UGvlyklcUQYUhQz7WukkI4PKKi3rR5I/T/KaMXDgLjyU7mnLLA1\nLlfCDmjz3BpsbZID1Cjs/1rZL0/NH7iH46BXE4iDtEIeVsY0sg5dx0qr9Nq8\nkNx+FaF6i6d5xCRSjbtwyVpg9VCuCIn/JlQfocECGTgfaZgz5RCPJKezjHiU\nHYwCe2GpG1bO8uqrDGRdey3TvEU+1KlYaMIMa60tKuwXthcXl9D+hFP9A5u1\non/Re+HqLhUWkrceYQdpTr1t+n8wKoMhWQUELyor/oADEaMlSJi0eBZb+901\n+mu/zuNjE80cmY0XJVfYhIe4xMtJSdbJ3WKSQqr+3ldDyomXlShM9z72ZIxD\nps6s7tC0vA8X29JgYzCPkcQoQePsLohagkKW1/ZHbwBnfHfIBtV9yaRhIxMD\nN84LRFM2ZbvqfiT7gb/btugiMI0l95fpz97RBjG5l0yvA2CuRLxmz1HguhZQ\ne4fWDml0sUJqxBehlry2VKJzTO4vOcDdhvvWKB9VY0JocioeZiBNygv6U2TE\ndn2gYzG2cQA08VuGHancyGxNY4u0BnK9mVoSc2zFS0pEVb560wBReRaJVn6s\n0e1O\r\n=ZeB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/density":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6b48781bf.0_1584545685811_0.7856615571789778","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/icon-button","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e627ff4f6789e92dec07eba1c28673efdf74bb6c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":37,"integrity":"sha512-nh2iZV0XZ/81AgKJaoBS/l1WMvrVqR2YGZRGC+kDUGRKTqTwSyqvT+JZlZDOHE57KBVkONXgXovbI5nvAdMg+w==","signatures":[{"sig":"MEUCIEaRxBp2/zc5C+ir7IOPZG+taBZ7rffrLHYKDuBPGEKyAiEA4LSA8RldcADGJM9+6IJ1GmS+oMtivbbs1YcCcZnF0sQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec618CRA9TVsSAnZWagAAfKEP/1rsF3oCpRmNQwvMz7EL\nky9cfr3PMx34ZP4YXxGQ/HILvEunYGBAocZvck/OLQrspo8sEKlVoSnAe273\ng2Yg2r9nQF/m9PHpAmZ3ELirCzy8rlqT6hAve+oIt+1izPwnUQYbQFY1kIBH\nIeJKSLjPAaGVZrdhb5rkQeM696POYjYSixGJ3E8x7a/b/j+BdgH/x4Kh5a5i\nnio8czvebIHZiBdujwg2qkveRyVbCo/FQihJfI+YcYAlaRQZ5Nqm4wLZ3XN9\noOLBggtH4CV7KYz/StZLhPgVokuDTfAQ5Em+hy+MLxiSVo21N2aebXoxu0/g\n+1R5jghgUHS8v4NYu80ed3J1IxgWW7AriZDZ0IkmEF1mC4NSbW+JU0+MtR5p\nSmxU5GNu2NXInmLGdI4cR5bxUOyIKXMaTPFyHa1CHxO2FzWXKDa/HnsRoWxC\nAin/r+Bewf2lXrW6T3VXCAAoxpXSfwiKasXqggWc/LzFhc65UKAIO1CPMPGn\nZSg93RXqtZAMgEWWY3NMOIV0OiqZVQcKsYKJQUZ36GLTXTYbHFZR5c+mUdc4\nV/2c1l8b6TPhGcF3rK4L86rZFEWHk3WJ1Sn7DJyZ+TqPl1lp0e0K5cxM62gq\nFGYrjUjzmZo3sc/8I6sfLOYVwHAi6FCM/zvjJmP91YF1ituWS3x4DOlWqru0\n/9NA\r\n=MKHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/density":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.a88c8e4dc.0_1584639356166_0.098886035675259","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/icon-button","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b45a5f7124fa8d9ee09c11d85c2a92f9c99f990","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.cafe18860.0.tgz","fileCount":37,"integrity":"sha512-1cZiniVUODw2tvV3WYi7pS0+GLuuVkCqu5mntGQZ9S5Q1t9bdKC5+gcJGqpAx8MZuT66RyJmimHRmbRJAldj5w==","signatures":[{"sig":"MEUCIHLi/8ED14e9Wx+brUR4JXQWRp+evQOwchupbuMz3clhAiEA1RFj83tHYbCouhQC7fsNb8TbQIQR40wZfJtRtXZ53Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjqCRA9TVsSAnZWagAAPkAQAIM8Lg3sC3Y5EnzKMZzQ\nwgV/mvOOrmXQTalD3IIp+dg3y7QPifq9dJH/cpBxNAgmn8YNLGBC8SESq+vT\nFFcPIK+g1zGR5L/EZnm9d4YdBR8kWVY2z9XUivZoyzN55J5wuU3LaVH/Ugqz\nr46cQLswFzi9l2CVwJF6USrUfDAxHIlCNvSWrjD0BLQWaLie8RkJJ2qX/dxH\ngb7VMoWYLkQ1oe6KGd1T9v+RTY1t4inkIOReD/490d2gv7CgMqkRr1OeeS32\nZiflP+OaScEe/QFow4rJR2NUnKxJ8fPheaHJPKGhr13fBVPhPZRBYUlpMyY5\nciw79JTncjcho97do5pQ2TZ11Z3Cdz+yIlE/Wz75t2xiYeRQAmuj6D/aHQWL\n02MstP4ebFEfI9wZE22PCOFFzPdYCiz9xrC32XZTimI5jS24ddLh8gVgiQ8V\nzYCbdZZZQLCp5h7BYHq+EYlQBnfIpQFpEzMdLE8BTQuAuF5VffdUQTwCevT/\nvkzCsVCr+EeF+ixj73I2XnLsRmLpLR93m5j0UtbqcJ4WwHZx2fx9V254eSiz\nv8reEt8K2tZ8YWcrOMArpUljOXcl9em+L7du5ftZRCtcmMv8d/CWessl0ZtI\n/DP0RbkFrr+2Z2OH8lGVno8CFoScsZA/Wz99nFEd5tklAjjZHc22zylAKIgt\nyFHG\r\n=3ddy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/density":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.cafe18860.0_1584716010000_0.6858291155345413","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/icon-button","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ab7ce21ea5a042ce9a5a8446e59b6cf94776ba1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.35a32aaea.0.tgz","fileCount":37,"integrity":"sha512-zBTSVKErBgpQA9/3fZ7rLPj6IQtfJpt4pj6PJl+65goOpEWzmk3r6mM5BQVGfZ61j8l65gAH56tAV+X7WlQgCQ==","signatures":[{"sig":"MEUCIEqx2x0bg+RX+cBsaqqR6C57hSgM+EYIN33hZykz07NCAiEA3O0PF7AyFzqhdH7RYCNf6pSDTfDuAW9ytgE9joMWx4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCQCRA9TVsSAnZWagAAddYP/jNqHaMAsuqIj/ytX2Dt\nrUSi4LDBkqA4gJiYK173LF5o3WmOYAdl+SwSLANDjCpM4qIbbllxxb2XrU2t\nnQmtGZCZ1x/ePUd/5DNUbOVVNoMNaqa6bmZVQdFTydBjwOK+QggtNtLsrj6b\n+Os0v2VDfWO192NRl2twDqZLb5SGUYrwAr3lFS1OetV+LAOISmR/lAluR7DA\nkE/W2js6ugdGCg8bdY7RmUhmZqbEMLQamsUK5navjaReNQzm9fH2SEzJiCbQ\nOT3NV0cQKQ+GMmNY5EyEqRWo5UP0tQ5q/wBwvza5vceCk8hAywaU/sfgrYO/\n27tkhia6WYcgPh3/xe6j+LfwdYxG1niNKlRTqAZocR0ZcAwxj4KjoLjTY+MB\nczsLhz7jBK7pGqHSDkw/KdfUIvuwIy4M1KarGFdAUonL0Qr6/NAKehJXBLdz\nLDwpb483HCl4HLh/C7+hn+T5Taj05KwOgUSDT7AO790eMvAGew+oSW9BTnvE\nxhDkUsFDC/k5coUSnoa+Cnm4qT2HgrkLQRdV1Sa9R6h2HUiOnt4K/uEh6s44\nNDUW1BXKGPYlpyWIUL8/cBP6V1gkTotC4UjZ0zRmBoq+yhnri/DQ05xHurGV\nYrWXDnkfkVKg26LJEr0S1jCSRx5QAiWWejCu+ALBFVa28GjtoXg1PWvSnpEW\npuKM\r\n=bnId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/density":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.35a32aaea.0_1584734352020_0.9102490557973406","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/icon-button","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78538984d1f3f887b0c78d2c31e3c5683b1c502e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.e75deb854.0.tgz","fileCount":37,"integrity":"sha512-VF8mFSIjqk2D90tx0jfEdLWfgzFsrx2l56UVvHuO11ruSMeHEkm6YrEaI0PQdp5kF73mVb21/N+m5NvDu51QJw==","signatures":[{"sig":"MEUCIQCYRnnkOLeRYAph/sV4nVGiPFSmcAyoBTvsRcFSFDmF5wIgCfOQivGM6W4Xk4xuolGzLmcJCnJXCrhC+ZRaov9WyW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUB1CRA9TVsSAnZWagAAh3UP/2086VdBLXYeWYtUHyBy\n0sazcyGdMVmNG+W7/ufZnRzKBREQIF771wDk0GfBQp4F0jHA+TcyM+FRc8K8\nSeN9LhWyzbwBH4aBO5vIeOSGUbncuAr9Msy15qQc46tseMg9LQgi9V/OreDT\ni2Rs423wTwu/rlS/ys8XLfH1TNP3jfX+S4EnE2rxjfQVTlHb9j+Glcc3QC/0\niSwkta7W7SylOV74ldqCZKEn/vZDZa8Bngvm9eqMRXHnO3zQJPHIEBqxxHxj\n3iKisee9Ye709+oODw8q+wgrp95vDVoGR58XzPRCodyr3mP+SCE4qY3fE7pD\no8xK36So4/U0k/RdaCQc9PtzrpUGv9sbQQjzTGiNVefm12AAPQvvM6gL9JX5\nK1AKRn4vUge9HQoReUH3VNiJ8i8ROuTvZKYiw+E1+dQdkXqPrAYvKTtkgT7d\n0egLdqL2iUnlCQUYuD3zWGtXALGuKgSGiP3Pddqg61akgaP1RwJlJsPrZUgD\n9yoO6FOQzqeuaFl8vMAzCRHR/uZagR0M+1mwxQ9Kbh/LVQucGNmd5Foeb5Sd\nZ9ys4ZcslksUzx2R2wma4Ju83XvPFPBEx+S0PGhNjTpEnuVx/KkZ5dlM2MiV\nQPHpmkhzTQ2wr1Kq60VgqFd5XDfdDr/Qf3lGp9AtMwuRZb0/fJ+H3tOdopLF\nP37b\r\n=VxND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/density":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.e75deb854.0_1584742517043_0.4195742981899031","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/icon-button","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef21fc7eb1f206cd8f75a9abf9ef44009fbb166","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.2cc6966f6.0.tgz","fileCount":37,"integrity":"sha512-ithEM+ta6vV68brHsbtPJx8E1MSq5q5jNPO8TTXCKGOP70fL3ErC4wOCDXPdnX3UIH3QMqKrRgL8LKWquDO1pg==","signatures":[{"sig":"MEUCIQDoM++J58VpbAv85zdMHO0oDK9Ipsm3iE1Efo4ZUJAKRQIgWZsWPf2EXzm+DSwNZG8gNCkGQ8KmA5E68jZLAhmcRrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTPCRA9TVsSAnZWagAAXnkQAJIH0IFC6i9hlWs7i2et\nbHkNwoJkumqOimTf1u3a7F86nA52EpYlW7S01sUTq/r0CluZWjTslVL+TQbN\nh7jsQ8Wij85DgbMCRUyuqClxQxqNlLpJhZ5N3avRCO24H2jNtlx0WQM//dj9\nrk1QErT2X99C5uBQKxyLtuUiU+F1wARr3Iw4Onm53JvURmQ8U64jjSLxCpSg\no252KVIZdmenxFZBpidBOrhc+mvFIfk1IMANp4eBkj3Bfqp5RSvZ3hVlmo1M\n189SqrtECkOjIbZjflOW/FzrMdJvahioXO5OYAEpQFIiTrFD1oZijWygOwjb\n31dHDkIlZ1UAoJu41ghk91hcjFRW+6+uKjQa8aBtclqdHgaWJ3gI4JcX5crD\nJoZlzkxnxVvWAjtWMBkhbwvkPEzFKiyYmZqRiRvA2cV31bBMdfC1fWDVCqsF\nlENKNrvIddikxhNUie6mgfwhHIr9w1HqItGsBk4N8mh2MYRtAiImi6t3x3KF\nYV9iqPO7wEnnQeOfUZAPbBJLF7HZm/8PzTab1cD90WWKydSjKmIaL4ESTT3F\nGWswaXQdMiVD0VXyOv7DKSZ7/9a5F+2+1URf9rDo1Nekybd+fDMXS1DnuPKZ\ncwksGbZzuXMRmgakDY4E+IlAZzqSPaUVE6SREswyOzKh8NXJq3MeeUUJ3Zwi\nDvF4\r\n=U44B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/density":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.2cc6966f6.0_1585075407207_0.21928197433456353","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/icon-button","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5a97b50dcfdf88b66315f20efe2b8adcec304d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.8707953b6.0.tgz","fileCount":37,"integrity":"sha512-evjUiPjOWSqPT8izu/8o0/PkWXeraLEFLk24uPpjcjXrobE+HZFqgAFd3ESDsnz/mcSflITmXrvuI6Egbq1ijQ==","signatures":[{"sig":"MEQCICRg49qNuK0l/fL+DIFf9RHa6ZIh43jrqWVjNcN56sDuAiAkLVgwZ19NP1a9OH+Rnk0igYueSoHWtCQrkK13l/lHwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWpCRA9TVsSAnZWagAA/z8QAI+0d8lv27z77ZUyaQ9l\n4Iw+x5jtxhfJOSLaRTSM/mMyCjJ8TaZ/GdSEZVeWzje7ydP/Xna9EgEwZyRF\n5iO/fT7DCP2xKIeMMK6iUMpPFAwvDxrweHUuxRlMYFiGOtiwrCI84x0Ku9LX\nnGlT5cWs7qrWO71uAnRVWS9Tbs6/rFcSyzuuP4F57TmeMMIZDeXkbRGZotgk\nltJnoc3D94yCuQmtnWZ04Yf5Z4dtXQaIujDxhhf0YmnW7LW8hHPTwwBw4Oni\nIpn/RvkkpPJedmsBVtsCyXNdoh3HeEeFWi8cSZu2EDMPRh4a+ZpTOMcDy6wp\nFxgWEkcqnv/tYyI1ZPdd7OpwhEbpHE/89orjAVAmMXNzyrJexG4HQ2rmnoNj\nWJPwtkffc8Z/reO9zNRUqg93cwF1jr2H0J4PFIZ5yg9O9nadMT1b5hwhqmP9\nbqaLDipQCQBjcJAazZBoLFN3NaSzHHImNH9Kh6eOF39DHOILMXlJIeQ02mda\nilW1SqhgIXiUKtrivuTL7ToWGLjt7AQtI54Aw62nW5T7wZZQmeISkMPqCFxk\n7xSve+ItWqrlDh8P791U2wfEdfjt1etkao+FoSqO3Kqmbrcg0kl34GG7UN//\nLJ/wjREB9/egOV9kvoFExsq379PRgc26ix7njnIhm4ORjT07/E6G7kiNhcq6\nNyzI\r\n=pFfG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/density":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.8707953b6.0_1585075625131_0.31460122437372506","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/icon-button","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb365878e945defa3c8598bd36594c844b33cd1c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.10af6cf39.0.tgz","fileCount":37,"integrity":"sha512-wRmNbyblZ30K1WzWBNztQIEXRG2tgE6XjBZt/qzPvhZ5a1kKdWs1QNSfWahGVPaefuXx0L6TyZAwTKdSA6HApA==","signatures":[{"sig":"MEUCIC1yxd69DA9pG89H3CIOdVagN2bacujKnGnh5///2OqWAiEA2z6niMMEyhaSR+3spfzuBAF/7ISfQHEZbBCEH7KnF3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BxCRA9TVsSAnZWagAA7t8P/1/LFqlMwQyfTKT/kUsG\nnyate4y8Hn62m8aCLZypela0D8iqDUPQ8tjkMLaxv0EQaSPjscbkX5R5915R\n5wwvOtBnbMYSby1QH2Mr7nxHcOKU4J0l/icSqrpX7Jkjqlzg0UM4NLcfMa1c\nRze0n+CYiRcVClZ3KrxsU2Bk642vwLnRsjtlhqG9mG62VWuIcqIo+Oh3GR1M\nDINFZskvI/OvxoTIT/j1xx8LtiOzTtzq25JExWxzcnrv1Rt0DTibIJf+3e5p\nZPYZFWkIIqNHozYifMu85EDPVv46ikhfQLaVnTe804EKUgm2DBVgR9xUwmtq\nE5i4uQVyXGa+wXK/bLlWmAC/VclEgPo/yCsEQ/twnEKC2fQXIqdPp+oAoQx+\nyXCe+IAcAtwNT53TaR0BBYOhm6mppHZKYhzZD0UBbc5iNyTbLFpnVWCkWWyF\naka1AIrvUUCixj1GTELrBiFKAfox75sfJbOwHOstDLoGApzqfhhsus2Bvh69\n2IcN6g6r4FtBasjBJC/mut/+oieLjFcvFzlGqh8V5lQ2BH6wZseQvLiDe9xi\nyJNHb1ckKFbm0LirnOb43BDrJ9wucqlbKXXYwxnGNDib1g5SBg12a5dJlbkj\ngFVWYplaKIbVmrgffx08oI/aHYsybOoq5rPJoKCwDPCmM06GHNdqcD1lRgI+\nXIqq\r\n=gFEJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/density":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.10af6cf39.0_1585160305283_0.6625052061530667","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/icon-button","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4bf3797355b5cf7aca2fd42214e3a4ec059df6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":37,"integrity":"sha512-TCaUdpTOFOZDdgoQphzIs+CW8lQm2ON9QJr5ret0Kv6gJdq/BTCWeKaJxLxf2dKnBiDhVMGZ8QYX3frYNxgnZw==","signatures":[{"sig":"MEUCIGafz8X6WS/qXU029E7An7NJNVVsjPvCH3bKo+UH1vJ2AiEAv43e8ttiGkruejNYx8TmJCsnyGOAyPZ1HQrntUrp22k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBKCRA9TVsSAnZWagAAp88P/3EqwYbupAT2Ea7TDCAv\nxgbJoTqkNChrNWau/opQdd2GRYVfZ9paDTJtw6Q/gA1PytJ3RGbqu8FtvK91\ncE34Xs/FEfnZfUj07yIomhCf0iQUfFhV1opOpdb9VhHmpPLY1YVomzSci67a\nUHtmM5Xo1tPs5CPKo8iBRf0YlV5++IPE4uV1Q66pd9eDKpaP8pYhfI499/OG\nWluwQR/nBu25P2P2wIL1IOgJ8Hn/BZfdmF89M64Gyb5sKvkH5rTf1uq1zZyt\nA3c/1ALtC3nn7xZaee7VAClo6YEzt+GluKK5rV01xeco1Q/8IMrIjyN1P7DH\npZC7WpXBOfKtqdl9Yx6dOAP4N3XlCX2vuxJBwFTLkJ8m1A18CPXPCMia/ZMN\nwtYAgM+qs4ywswdrZS5QEE7V0kNi1zkuSWm6Qcd54bmrz0tYs5r2UaLqnPOA\n0Qwq3yCea59YTaXXYCT3pw8ls72Wq3ZxJvIwQ5hGFqzStiv2cdI/fmVjTi5h\nhyrDmCiUd2YfME2BdBku9NwrJhMrBk8c05DIYrQwWUOmMN5bkxX5h7e/iJSp\n9Y9E76TT1yQQVJ3ssEJ5on4lwxYAOlyohkZJbNqwUWpieibd7epi36qEbInz\nbTIGCbXV25pCFKDwOGfY6JZM/uSxSVp/fFLoN8w1gBQGNDzbikITHAbM1paN\nF7Wa\r\n=Lode\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/density":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.7d8f9c8d7.0_1585332298039_0.07997417477307023","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/icon-button","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6569edfc285a003c9c34b348b033f490dd42ef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.d6315efe2.0.tgz","fileCount":37,"integrity":"sha512-66/Dqvc0Gi6b1i1YqZN9SJ31KLuYNBfht593AqXS3j6t86+U2J+Du3BJafnJWg+AKJPBhSI82hJKXyZLaVL+6Q==","signatures":[{"sig":"MEUCIGcOkmHrdWdtCNfGFdzT3b7Mc96pzQCoU8SDmFdplQA/AiEAheVqT66lZaHHpVQfsMKeaTShZrdd6j1UWdR6/GyvKAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpwCRA9TVsSAnZWagAAcBYP/0svkG7izPm45yWJHJhx\nD61Z4HkuoVaiJ/iEJ20CkXcl2muZDrII8CEK4+2PG4HC8P+LtzPaXNj/hb3j\nDJuu1YpqkLgkuG7oW2Sw2/1P1E4v45NMRAJvRzEAVxUoEMnSvQ4ILluxV1N2\nzaCuKXokyNj0WSuWXj/Y3z9d99AXZ/dtoW5H6mx+YdkEnTxF+WAqT3QH0dKl\ncPiYUBZL5lfv9axFVyz6/bVkDww1SerXYA63LVZZ9Qf/VTFylOVlROna3vvs\n8lRC0nxupCKqQswdamWF87EIEvZm2xsM72Y0sQZ5bkJMhtakD6B1eTa9PnFK\nx2nyJP8dsMkgFTQKUkXvV+3qS3ivIXuX4+soJLLtgACjqit7AKBL+Zo/SOtS\nISyXM0DnUPBKn/VU+r2VT5zoUEi1i7Cg3Ogq0fiKPCXvDmyG/hjJWoeIg4IR\n7Rhs7p1QESYQu2iVw7Rv8jAJ74eaIhrWNNPb/gCgBO7cJzxA8yW4u9P0q/Ak\nnhmaXicPnv1KbKPL4C1dcKQR1RTgCuKGmIENWYGtKPSrCXvDw4JtVUhfyC8k\nX6UI09r5X6ZpnkyEJ1n4UAccD+/jzOFrqVfGsdnrsax6wQ/4f1LN4H6qzFa7\nuQKIpX7ugZMZ1TTcf1b9ndfBWWWSYgT/xfdgXy/N3NrG85Yez+xyiWxEOUZM\nI0sb\r\n=THf9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/density":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.d6315efe2.0_1585338991346_0.06709753675184738","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/icon-button","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba81555e819da80937f569fc5d63c87d96bbf089","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.a3016368d.0.tgz","fileCount":37,"integrity":"sha512-hmsT+1A1xCwkoWmftQ2vZlTnUA2eKPUXGgZQOBYSY1jrXQjYKcZ3T/MCwl6n4eOlWdNLhOAQCzBo7l41INKGuQ==","signatures":[{"sig":"MEUCIQCq17//3eVJ/nNh38KIRiXZD0N/Cb+bBKhC+EGbV/UaCwIgNrvivXguVyMlfuASc/7vmn+1V6B9eFZJ2c6ugxrRZME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3nCRA9TVsSAnZWagAAmF0P/2IftMeLJNCz7OtYzyWE\n/QIBeS41HHYS2FLhbSLSx+MxXwwkv0SlQsDwZEdKANk0xWcCmO/XGdbUWIgy\n6ffk8/XmrJ8AeQTNn5IJNIQBRgCWCEk5sSaNNz5NvM5SRfRXpdmuWgwdZxuh\nrjpOq04cDx2k1IGJl6BVXA2XdJZAJfIsKwRz0WOHPhnLMOaJqBfzEqwzkx31\nwzCOSZNM6/9egIQFwI5ZriIV0xx4J/YIHJK/0K+yPPtW+HfSFjLgqE1lKLBe\nVXZw4KG31o/AXflTtbIbA150s6fFuIO75RJYRtKcP2APJlURy9EvGkPGO4gF\njzv8iBvZUWcTq9JMV3MsqtK7VL7AxJ5qwEjYoCKFkDw3vlX0sY1NubkrfUPU\n0Aah9m1eRaCRZGpONPt+o88MhyGAu/DPeu0s0tkKN1Gdb02LRtxexNntsCL+\nMD+FHyXFnoXB6HDhL5Y/GpcC8rOYKc+ykSaARZKCxqxnuiJZBkyFPF004rJn\nzUm13Y0hgPt3a1hA8yhao4385XaDLidxaWemE6L/UnjGLfi6ss9xjvkNAM98\n6Qbdmb3XjrJO0gRvPOqj1jzPaWW63Zz0tz6pV7eexnkGOFaNrZiBUhwV4VxT\nXDFYzgIo4+sN5QH8AYVFWd6f/VRC2crCkvBA6TZ2lXeJ1bND/T6Hpi3EjHK3\nbn1u\r\n=ulsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/density":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.a3016368d.0_1585343975176_0.6334805549879281","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/icon-button","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07187f5e6561835292b2cc883323cda4d2a17aee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.4b45b6620.0.tgz","fileCount":37,"integrity":"sha512-XzXWuUSbRGllyFzqJkxYqc7LVg0ow9/SwJpnrRIzIgwRGpd2vDdMnXBbOHaM3kdVRqcN+CLLEOEOz7J6KY2bAQ==","signatures":[{"sig":"MEUCIGYzSKC697mrzexrFPWLVPGCPpwpqFxHXt1hPqzibmOrAiEA4NWyvh6k2iF0/agurgVzZ1NPXw/ZClokMGPuO7hrKfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gmCRA9TVsSAnZWagAAk58P+gOtXf6FG4RcXDZO3Ys7\n/0WWhx2T9Bmgf8CYLVmhlD/haa4yXIHFqb2tqkrRgzzC18zOf7izdzUBihpb\noRlMTshR4TDDtet1NSRwmvHWZYR2hm/Nmr/3qR/PQ7qAdudaTtEZQHLxb4Cl\ndyT6cAw3uRo5hLXZNDhEImyTL/8beR5q4K2tWZGlyQoxQSe6UnP84hjzep9C\nfcAxuQ+tCtiBOVW4p6QEw4xNQ/E6aEQBYc7oIQXKgOWhTBP54lX7koQ+7v/U\nbtzJ9evgu3xMg2Tp9oVrZxQKh4BRtaxWI7MvDgfKOLxKckbTKMFKT1xjW5s4\nAZBX6TZE7sMIyoocdagOrj/LIfF/bOAW93fQb4Fhc4Kxm/S+HFX6EEZ8jv6Y\nZ0L4oFmNxRSS1Le1Loutt7igypb0iR77I0mlKxYrozUsSQEc1btzWlb/v9Dj\nY4QspJUnRuKWcQ3icWmmeR8OpVEI5LI5KVez7W6h5+BKhsuELfAwutPWP6Lj\nVyhLpTwyqosnFNldfawcY2DpGUgTLTmtXmhgKPKhVT8veyMX+GMubjCWFjLq\nG28GywS9LKpPBzzxHY/DnhqPzA2M1ABW32aQhp6zJbQ9O8de5quyc+F1qite\n8VdJ7f/OHciDXzZnIeGU8UHQ2IA8wNlRRy4rCZRY/9DZNXKQEIToSOVBItCA\nHelL\r\n=DfkB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon Buttons\n\n\n\nIcon buttons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/icon-button\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> Note: The MDC Icon Button can be used with `\n```\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n#### Icon Button Toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n#### Icon Button Toggle with an Image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Disabled\n\nTo disable an icon, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass Mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n## `MDCIconButtonToggle` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### Foundation: `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/density":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.4b45b6620.0_1585670182340_0.5987794665886359","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/icon-button","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c53ddc347cd50c7e8d39b05b3da5e840e20e39aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.e84b9c8.0.tgz","fileCount":37,"integrity":"sha512-2qfVDv9XCjiaguwhswR7vIvaHYRvloWpmhqO/DXjIKNoThMGHwiLXKjnPw1bQmpR6bPQoifV4yql+aH/KpqOMw==","signatures":[{"sig":"MEUCIQCMObLrvXit2QyZqMHQ9tPqa0f8I4GRe7XN1Xq8tYct/gIgT3HsuRy/BtHqYAw9sHYcRysa1KJSdCWYGLy0EoR7m1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMefCRA9TVsSAnZWagAAVnUP/RG+DO4OkNROXPcX1NBN\ntP2FnCYasyXhKxy9HOOaR8jZ5OI+9UpLGpoPs/80Mi+CGqndE6E75/ijl4xH\nTQ3sAp/xDMok7vBH9+f4R9Q+nDzSGzlr4x748fxvIFGs9Dj92TCMYeI+cwiP\nBRnLVSXxFc59NeA8EethXBtivDHyw/vQ07je1YeCYSfWXkAcS/l7mYYSVmOS\nv9LcONIEiK8tocNYmaX6x2f3L76/6qSLBM3EA2R9rNmnTZDDJBDpYzfQDKh6\n2n62/ur8ONDoLxIYZDNhrWvO9B+zIAZKtSvRoKbFZaAzPz0703ur2y1FLk3v\nr0Nb+jYT2wTLR93kk4WUJmj3fDofKPua2brn1TKXNAw25DsSnJhfNHNfdEH8\n42/V+RdcakO6LgdJje2qHRbe1fMPZq6Kda5CF3msbrKG3XWf4Xdy0BeLRqKW\nJ/2hqoD2e7/y/c5hLs+7ay2DeykoClKuVMpLrO9Jd6hNW7Qr1TTVOXLVEy/7\nXnUMHRzRZFtr5mKgxTbOPhDOS/pI5715VBxI2BGadn/gPYYyiIhUwm2tmrdT\n6h5nChwONvr0aiirH3Z7xeLqlakyTawTiFUyyWvXbgGPgtyG1aikMb1H238g\nY23tDH93NpgQsVVUJwO2jhMBgqbZGlSb9BglAGArL9qp6wIx9v9a8cBiKa+p\nhPoj\r\n=QH0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/density":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.e84b9c8.0_1585760158892_0.9015616830000441","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/icon-button","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a58b92d2c47cc28f6dbbd4c0a37c79a59e3c8ae4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.e33c49e.0.tgz","fileCount":37,"integrity":"sha512-EhctyXKAS4exy5ChoNdwecW93bY4Qq2BV82XfYveO9LEMElb30jdissY2cogKf014dPyXaE7poOgTVAdsD3YlQ==","signatures":[{"sig":"MEUCIQCDZdJmJDX6imAuRno7sIM02o2etNS+S1Z9JWq3qbNWOQIgFrabE4BDCCl3ASXehXdQarSsHN+MZIvnu8G8GVFGw70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0+CRA9TVsSAnZWagAArNYP/18CpA0DF9niHhisrUr+\n0mVGc4mFzG/h8RDbWO+/DZNEl8b5EJ5s52Kvhw96skgeftyW4nZC1IZFguiL\nzq7R0ntn/BKR/is1rS3XkdMNI9sf67eSAyQdZokKgtYxf11QlA9fjclVbgtG\n3bGrX1oKljd7LX6iw0bUWFmQJtDRgYJtgIOKCBYaA4p41d1/znzvE1X712AN\nxlxxbOey4UaFpRLoB0LAStzW7BAmI/HOY7tW0wqtAr+m6viSiAEHj+YUfXP3\n+Loj+Cw8kzhxNQi7hihLvDyaxRJXVXJ1jMF3f0OubRWG1MpteYHPB9QO62D9\nV2n703D3pDAOuPCAMx15gZOI99PRp0TlfSrnoNqVgIQBYXGhPdNnY1iaXvc2\nG6zZDEF5j/rzCCHiFGTXsMN8IaZDNl/0U3Mpm7/7NrRKAXCGfwyDzA/QirgY\ny2JEOsQj+m+1FTazUOueI9XugaXwMMJuZ9MzEKOXI0ZvDZdfUy29crvTzC3V\nQZ4GWSfJVS5+skq198E36+CTdtWCmJBIqhRBCao2cniLS3Bx7HcGZV8atdod\ngwZaqEIAke4BM6cxF1AyXZ1COZWm4TsSRJy44rgI/6/55oj6PxLK7OGMNkuX\nTT/cs43k6RDvR01P2SiRoS29DYpvJ7Yt2fmYKXgcqou1Dt/FiF0Ot71DGVzi\nrKhr\r\n=aF/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/density":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.e33c49e.0_1585786174320_0.6313136038831892","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/icon-button","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24086cbe6629a9457e5372c8c0f33dcc781d554b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.f1f8e60.0.tgz","fileCount":37,"integrity":"sha512-yV66JATvuWRY8Lv1hqmnyhQ6XpuDdwc4UZL2NDgxaM9juKBBTmL8Iks5Ka5O3uUrXylCSVnsE2A0hT69x3FcHQ==","signatures":[{"sig":"MEYCIQDl8LeCOoZLgNGW9PpwM8QWlBYi59Yj/jPJ6G+g/R8bMgIhAJQbn3Pu1+jVB1svSKwTX7vDyCgr55wCqQ2Lsm9+prnt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlwCRA9TVsSAnZWagAAdFwP/jCzbx4ID5euPQQ6cmXx\nap9MrzN4pZ2/ex+XQKyNOXOk3gaU0kgl3/E4yngGd71szPzapaxm1nzqr6OG\nMuOZH6s9ZmtI72RovvOwrprcaGvolOEIXySRBjvy0Xfv97SzAZtHw6JdAhn+\ntThnoAcmLlogjOApAIIwQt4hQPHKsQK4/Iaj/nWmX6hmL1YN5KTzTfW12Y4c\nI0iWpEGpVPYS+1sxFU59RvhoDhLFF9rZdQLLex5DhWZLZDg1vjK7ZuHR/DEi\nyb/j5X3C6YyLFvPRNKiS4hIMQHZgzABQT9OSMongcON5F9m6NHyFaTAVbFuA\nrwcgwJRokKqbAsD5ckmj2PTj7G4wb6gjwiKS0ibcA2n0LSLjPsyOkfSTgHqf\nL8fiQsLG/oYba9hRhRXJDpWtd988Nw5LUeMsLhw1Z51++CP1bB11O67tiUPC\ncrosMult1nJxRXFDlkVZqOYukUjCqibUUTBF2DosM+Jr5xWZv7BI20rCoZHR\nNmZPUHubNBwxDCMwLamTzNmCFstFNhOKfaJZ+c2P5ucYgaGX8NwhuzQ1OyE9\nGBlkV6UuY74S475rpzg0Q0oaCP9e6IwL/FRz3Dvyw+ZzuFfeYXyjxljIzpTU\nwGatt9MZOve78k+cKLTpZFCb8ggYoKw+X20qjhWR6j1GRgg8OdjL6pO1v7vR\n5KPW\r\n=Rw1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/density":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.f1f8e60.0_1585854832187_0.06707025247226062","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/icon-button","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae197db7dbb5f0b50ba2eac5d0403aeeb7df69a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.1e17c49b3.0.tgz","fileCount":37,"integrity":"sha512-OozFQlTQZQAg6Gbigi81nR1Hdmq5HNRwB2TbLsEyN/qDu5PMLQmDgaCxybmqYesK/+zETotckNa2PY7/wZImEA==","signatures":[{"sig":"MEUCIE5uOOMIAe9Pr8wvbqOR4Chf4vLaft2BV+FwcxiwD+qdAiEAlXsu+RI24tnmYmGiER6Yz8eGOlsMxauzap8Lax/gg/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qUCRA9TVsSAnZWagAAZ/wP/jY5ehN8AMZygC2Ukrvb\nRNZ4/XzEV0/3gxwRKsRvBM4ouJBnhke9HSPFw4srKshGjj1weM9XdOx9Fa9t\n93s5HDD777hCkFGx0Ua3xJcFHrTs7FUOZVriolF8wap4i+kWcvmrIeOGne2Y\nJQXYSZmXRPOm1JdBQhD/9MElDVhINtJZA/AV8wV4IAmXfSndTHC4lgJnhokA\nmmH0mFk6BE/VNQ0KjKlruoOCil3p1HVpiVOY/vtb6KPG1p5uqYO4bOiiXLQu\n4RKGqJLd7Vz8JfpzrzEuoS7FJCmvOa70zUYGo4J07jkp3rxI0deF87EKPo5b\nu/SplurBAxCBiuvIWeqsWBCT6ls+7k5z2PCrghO/FFKfuqdH0SzXAYpie91p\nApt+gTRtgoK0h13hutvCQn+0T4Gv5TEqJ+24Amgbd/qJu7fUExO+K3HJw/Sw\nlXxH8nJv/mAQRM/t/sfmue0TbzWOiWgW8wvJHPPLrbkidhHo6y6G40sVzvUO\nAdYs8o/QPVeFWMBaqfqtpJQQxuQ07mi1Li/0BZ8QsUSSBlGixCozB8cCQb7k\n1UoYqBl8H7VLXK20LdKSrlf9iUIxLQSVkMyq9nLnjhjtat43gsRUwyKxcXfU\ns0g3hBfp4vLi2JRViLuKLaXundAhcYDo2PlJ+C5mRAhyvNsRpYnXxYGPinjj\nEspq\r\n=FdCt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/density":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.1e17c49b3.0_1585937043560_0.041358190016430596","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/icon-button","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a544279d30871e2fe007399ccb1f45d6669491f0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6a40ef217.0.tgz","fileCount":37,"integrity":"sha512-Fy5nQA2nH6Ygi4qoOTZWrL+5ZD9jxiod9qV4Jhhb1MZPe/9C0zCoXCyecv163RQORpjqKEVlJc39ENx9wGy17w==","signatures":[{"sig":"MEQCIEvdqyrIcDttosgPLD9Wit2qGFgecj6Ts+82n/iX3KIEAiBVn9iz3PzJYBYJ/8t3aJRG1JOvgqBgCN2ie3pSkAQfZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh417CRA9TVsSAnZWagAAMNIP/0+sOZdPy+xgLkm6+C/R\nG77ue+mMAt33Sa1aQ11nExpJbBAWZjLf+3RVUpio2l0Ze07F84nPlQRimQ56\niSnBXvTew9l2qWIHQHNLJYDPC1o5yG/c7FQ+hYhvRtaRwzG6R1+g6r+QRvOQ\nL7X3cWFChzx4ZQQjg6YcoPKMd6BQMdkpzpKy2YZkWheMS9ZoWrcNHaMQERPY\nBow5hakwbTLMm+0Uz6VN4+IpufBInxviBrxpyrX+Ck45eN2PaR8pK/vGAKCB\ngOfY26hYoRHg5i5me+NsDbvacxR5UZhpi2BKDNJKpXfppST0RcGRN2WJUx3U\nRc9n4tSdvoqCaaqIjEueYGNAkS4kjLS2x3GLlcIhYj1h3FMheK7Flj36ukSV\nYPdIO40LHBpR10b+Di7ouJx1gGdoHHU4vC5xTidNtL5zbwQZCpJiBZTpeaQq\nuubfZfaNN5qq6UgcRzLcHBHTBwZ4bBzMluUD0eA4d6xnJgiZE0ZP8gDvKhF0\np1clB4OSxPMPYIsHMrb53sekxoPlXy1FPK9x9ShdNVPQhBzZUYNxLoqqs1pZ\nnrAtd3e+tZjxKPHpruikYT85VpDGfTHJfIOPirQz9UjucIeQJo8iSdKjNgbR\n/BRZ5ywaJKMB5ytRCoNmjn3wsEZ7prXpwIlkaEsMeBicDFYfy3gfBfyKb/O+\nSCe3\r\n=JrXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/density":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6a40ef217.0_1585941882756_0.5432617797140618","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/icon-button","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61ca19a6e5e647b85b12cfe6349361165d96e5b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.5f24faacb.0.tgz","fileCount":37,"integrity":"sha512-E55lPFQJfb/P/KhQUmtKiCuMzhaXD8C6clyQhz4U63sgxe63DzYHUj20Z8X1YWbMA6fNdx0vZ0xcBr3tfCaTwg==","signatures":[{"sig":"MEQCIEJymoqXFKuoBsZLEFV0VJxm3vijpXLzM9d3V+ElnOeiAiBx5wAiFMv3+ki+2HS3dtbrd1bs/l0amzDktrWtm34J/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje99CRA9TVsSAnZWagAA260QAI5x7M0T9Nis7mYxdgrJ\n7KojMAZuMhDm7GtcIJpn80iHq74yWLPiSAwO1l25Ihm1pIIhnSth9YJTScXB\nx+y5YkiwKU65IDvFw8yMBFsLjcOYpeTLMgZ+Ogkcj05o1t8vLXl8DhFV0U64\n9OqGi8vCVUM9TF9aYubAsVHmZiuNyBNRMwhASZ7pgjM2rCGI8gWzIf/gaIeB\nZt/F8QNAJPjLivOfylbRbO6MVxM7hjl2qb3Ai5Gi4gj/EfXY0rkVtQwhcjhA\nOlxrY1xf5eIK3JaK9l1qgkAMdf+IquiyBcyp0NhWUnt7mRdGtK5tX3pMMe+p\nUtfQW4IbJmRlNHcwH8khhIDTuGYEdp0JfeH8zIzNieuGsUZfhLH7gYocODwX\ne7UDlPnG/4gQU6IBJjM1CGxj4VZDjcSMRvSHxf4sZK1NU7QlFNl5xAQJjwgz\n0J/H6Em0azmVBgO9DQsOQqh9XF/ECGcxjYMnWCtUBnkxb0boK9ur6NjMDzpy\n/DwjpMAwWJAPy3DomA3a2arcwAAUfmQ5HA6ZiXlAmsJvb9IX+vQ5IujPSsLz\nyZTqG9VKB46AGnabZ2TY4yZ/ritc6BjCmwFAVrdL/Bf52SBCgl4x9iTi8nFb\nK7fYjQI6GrIaXACztHRrcYBoBw1KbA3hAsfpGa9F5bTn/b9aSQMd8arKNB4e\nnxhY\r\n=Fs7F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/density":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.5f24faacb.0_1586360189327_0.42056558521060805","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/icon-button","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a165fdb3fee19ebb5a8650c84a364410854b09","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.82fa986b9.0.tgz","fileCount":37,"integrity":"sha512-9GAnKRLrHSXPcIuYZg2vmEgVYWFmwiYq5cZGzbnSZM38GppliBxmbtl8o5AchtvOr+ULZylOdXo7eoCm1M0EtQ==","signatures":[{"sig":"MEUCIFWRZN99/IfdTm8ad94jT5+C/5l+lMbMPBpU/LLj5R1xAiEAjV99WLpVvEM8iRFrG6mF6qLzhbGPZqc24mV/qIlYFhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfC7CRA9TVsSAnZWagAAqCYP/16LO3Y8qV8oyqrG6AwJ\n4T4trtnMa1T9XWRrKyF51VhLjgc2qrsE7ZwMIHxjixjVmvQN/joSetdOJNug\nwwyLxZLdHXig+/Yi85KYdAQQUDyP65nlEFA0+ko+wdK8tK8Zaf7mQ9u1lkYZ\nhcda3qY82cwNrCjarmRjo5Y8nJj4IsQf44O+902jnWNq4r8PNC8x+jZUroxf\nIIDfSzZnBKI+ys/4nBvwXmH4XxTH4Vdipci0zBfOa88wgMfD3iblOHra1sM6\nc1soZI9274ReQB000sESRXvSVbd2o8dFhxxYB/wpg3ogzeO3A0blOH2VFKhx\nXtgeapKQ+weFBY8Zp60QVnypo1np5/aYfNJ+eda98Y8zZ/wMcwxVRmEtH4Aa\nDIK6QIugWXiE+Y7wWTbEb7VXgy1WWmZfFMHI6eJM8nZ/Dnd/+RDiLTy3H4Y7\nIzlBQo86nXWKKLrVd6XiPQupMDto2l/SwAgZGP3Y1bMIeUzNiYhL9x3g8O2P\nlzUhWB+OmlmCXWpTCoEoehxsN1Gdd8BmNyKhgPxA0AkZLSWL4TBX7laFl/4O\nb7CT/LjscV+5KNQPPNS+cClJh1oqSAifrJ3pgSwfO1VyhrpdFiEF1sAOn+PZ\nV65x//RJdmYowKztqBx3Vl2LYzjpgENcvHrhXTcXNNQlus1Q8Z6Me2w6YaN9\nnFEY\r\n=AWCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/density":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.82fa986b9.0_1586360507041_0.7494685223655699","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/icon-button","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1399cf1a2e91ba34564b7652f8d5ec122c34dbe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.9930d9cc5.0.tgz","fileCount":37,"integrity":"sha512-V3kwkpH1iFy98oMXNzwHb8BI24IE2QJ2kZ9dvHnffKM4qEo1UbABtQmWK+5x5F7V69RmEoR4gnhqSvlGt0y43Q==","signatures":[{"sig":"MEYCIQCujxcEUZWg2F/nFHrNWvWu5Sy9iFuCJDFzfVMkudeNwwIhAOf3Kxd7cS3rI1MRieFFgycHwmPLrXSJPCuwFXIPj1cF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibSCRA9TVsSAnZWagAABxoP/2y0bknaoNWMz9DL7DzZ\nnW0AYErnhaYm9R+glHy82R/C4/B83Z2ZOzrFbo8Tv9gej+RLX1xzeFLVg/1A\nMegv8f8Kkb2SXkrHV+aTYVGtV76B8qFCgN4rqR0DiJ3FeRknelIxAsxUktbh\nVcLWBsk5CEneTtVNyNVifCB315x/LSlaWVaL2Hp51qY8Jdm8F/7gSoe2r9kJ\nSruAoQUuOiIlTnV7+fgV3u+0zXgUSlI9HGDaCw4MS5LWBbVWYlsQJyQBvj6S\n6mVbpS449AP/MQbsi2KkJ0N2QnO6E+jHJ3crCxQC0FlqjELlAirKPulQwa76\nXEcnduibqv/8Exrgj0N9u7vIzkaDoPjTzN4qVMOt6HZj/EtdMJXbmDyZnhwD\n31LtapfRMQuZ7TIYw1qadK+GVHIlqgOHWJeJJ/BKw9xQ/19R8mbKBa4gAcva\nkbp7BYrCmKXAA7FgYeDkHDsvrDuL0uenGFIXT4Dk4iWl6LVBW78wdxRDI6HL\nkcuKz3X6Pr2JC6s8NOUPbQwDvuU/FsKMPJCkIRUmy9KPNpHJWfASAsW7BKLa\n1UAte0VEdvXqML8VzJTKpt2VN2EEynzRSnnTwE8SE2XafSRp53FgjdzYEV57\naW+xNI5dBMneldUHevOjS+NgTEo08Eoa3rt52evDzuDA670q1A0+knMWmh8P\ngCxB\r\n=LCpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/density":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.9930d9cc5.0_1586374353387_0.6558167176797223","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/icon-button","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b6ed7a23a6ac899dc0be599f12f8fbc388dd5fa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6601d24af.0.tgz","fileCount":37,"integrity":"sha512-7AKCYSnDKn+I8/IFSwZr2/aJAiwvxLZD6UYq3KjWrXdBYcEDF0gK9c23WNQvgPPjiGpeC8rE1SbXEXSYm4zc9Q==","signatures":[{"sig":"MEUCIQDtQ+2vvBMeqGk2f39c/4tEcfj3FJTWqCoUoU7wuc//9gIgNPGA/CTc8Og3XAE3F41fmR2kDHzsalBKYlnnQxN/jzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyGCRA9TVsSAnZWagAABCMP/jNVmsUDW2+oBpdgei0H\nwtMSusXeWCUbkcTqTHYZ4ubTcitqaB3+UYx+r/+ns5fmrnu/o1emHHCg1vsE\nnME/hoAm/dazD6sMciVaGqz9RlsLxHh/S6r+qIRRivzBv+fmePQZ0ZGJykRV\n4ElM2ruu3XtysGLiNEDLdgujpESsbMs+HHgzQ1TCKQLzAOjAq21I8BUvKQRg\nPvmdzUr6mryXjQ7f8bhLcBwDvKCZcy/Q4zHWH4pYKgJM+HoddZ3WHwSgXjCd\n4KS0B+bShb58WY/DxVVccTxNUwZ7ANZ76KXMTQYDGyUMLc+z4rboMmSIPXUk\n1CaFdWw8TnRXWa5tJHZGaWiNsYaUcuiazzxVwU+o3IK3nTKyUeOVkDo4914Q\n6909B1hK9+lZqGT+JUM/JyfXKy+HZqiVJi+MxvjQ8vPxmMq3h/8LeGDVzSML\nGFbrU7x9rHLN83Ry+0SWIg+TniohEy85UoiaXdWn8XCTYIRyeuQryW0NhuZT\n2vfZHN+3FcUbsDlStW8AFhSXA1uCwjTVn48buJaSNwidIQreX0BHJJjOx8oc\nZn9Y4Ml7lu+ju7A4An9DML7itqomVwuQgz/3/1sEhROUBc0EOTncnTXLaciu\nnmgKjhgpm7muWqARSamyyJn2GaIEx5VFOA73gblgUTpd2/pvX173E+wdikug\nTD2q\r\n=18Io\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/density":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6601d24af.0_1586392197747_0.26257042547228293","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/icon-button","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de796f2753c94086f6ea9f63d6201842fab8338","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.05f5e1583.0.tgz","fileCount":37,"integrity":"sha512-1YgJ7UWxGLyLDxZ2Yav1YRYFEcmwYjDiJ486i4/EWkfoOZjuQGTJzyzjE4vRPlXylC/ZBN5PYGK3dOV8F96Gdg==","signatures":[{"sig":"MEUCIBZ6+ZMki4/42apli56r1qxArVLUAqfgHwKCb+wyFr7oAiEA7tIjzfb3hfk9D2mh7lpvorQZmP6OShlZ1VJqLBwH5es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCbCRA9TVsSAnZWagAAX7QP/3lSPOl+5mhR5wgliuaR\nlcwe3N0FGJHqtD82a7XgaznTixDZDlBgT7j/8q6Jq7g/b4552LK15v/eiLpB\n1RztDMunKxvtQr/DtdDk9ylCpTPgRNjzR5wp/ELS0gWbklFBjL/kzZIG29SB\nBfFrb8K3Tzqo/0p6NKYbxAGJgk2BvG6qzCiEvJqCN4lm6yRRONZK/Bbhi8GW\nvQtwF96s8OASBRGrzRRdPTPMiNDGd6RX5m4gvZmAc7H7s27Wb3Hr924Ns7D6\nZMTcABWMJGjSxEHp1B5NnUWvvvn2Aiz1F5RxvrlTWTizsxmMEoa3WFk4d9lO\nFaFC3OaTKPJ8S2ZC2ffOx2d7tQZgMHD5BqrjNKWfKPZtreImnidoWG20PeIz\nrTWnIKilzcIh6kIIHed9Qzow6Ru+R7RRGWIeSD3aEQi9iMetbc0UR0QeuCqo\nnVNriOw/Nm9jMUxDP9dbwbVh3cCMTvDvCMWY7CEYPxPlIowxQM7rOeGOthF8\nUWQ/WofVLwi6dahjVNXg0+HlZLhAiVdDPkP1aEoht30OE572SqNiQ/2rCKIQ\nfZ/skt2ZRwraQEJcIiJJ+SkDRhZHURh4EL31wxMSd2wpWo2i7TVW1tzWdlLN\nzS2nssF1eCY/7UyHSmFFc32RYuroITIGIBuNM+erD1N5fOWA4PmdYr+9qwsd\nF3hp\r\n=xtmo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/density":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.05f5e1583.0_1586393242533_0.21729197350176133","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/icon-button","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83e09933e2b40fe9a499df1d988862777de219d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.bce00e186.0.tgz","fileCount":37,"integrity":"sha512-1tDlH/S+mFu1bS4hpv1k4GgHtq933h2dgm6uL0oZPRlDPPw7BQtPdPnMay7Fnn4WYSIvg76Vl6ilxi274YQSfA==","signatures":[{"sig":"MEUCIHpkFU7TDZlkfkF6vGNvnxKcQP7U9S8OBhmjpQKh/UM5AiEAq6rQHqkQZJPxKCJ4eNiVwCRr8psEiP3lTBh+Dkm8cp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3PCRA9TVsSAnZWagAA1YoP/04uCSIZrMet9oh8JuhS\n4iwCicsNaXAA8boSynFdddQ3B6DpapTkdTvx0T0qgG3NqNOJO0QrXaG2cwmP\nw4Yi2F07X99Dkynv5TCXDTO73zaYy3lDvRaHSLHdPMDSE4hiik5JklurxXYK\nZTQd+BszupxiDgqn1YGFsR8n2Oolk5rg4NRSeYVH3LK781ETrkbNowSlCkdD\n5SEuPsXGwT5vKzfwUQk6OWC1WHfPJHnbpUkqi6gHKZ8suaAfaq1f5wLN2Lu4\nmGygOWSB9V99OVGiyEtKHe8mLXyLa1aCiZo2cV0mmer/0/9xXdJomZAsuJuC\nIYCirbuNJn97b6+wNcKT5s64Y5haJVEexAAn2CsdBKqnNd/V3bwyxY2cNO8k\nYF2uKOOijtic//3U+3vnw2vSyRbKv/AuGsR6rJYDUIpaF87b7JrAYpknxpJa\ng8bcYb9MK8thhG/bZXUkVgJRjvPyMf5dbmsSonyIvQUorbmmPSrpojJzOwPB\nJrRVgADKE1Jm/5YMQpbEYcocDNHaix0MTOQH1DEn1Tpl6z8c2XD54buygYHu\nTZ8Pc9Zxlbq0SniOnL2bPCxst9klE89t85CLEaqnSTOtrui5LqSrqXAfGnc5\nATnrHeqZ7z1aoDn38jSM74QT08xg0SGJNJ2mJl1h0pCweOHIkvX2ALnDvJNg\nZI/w\r\n=xIua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/density":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.bce00e186.0_1586445775184_0.5955506138519626","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/icon-button","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad3beba6ac4470beaabaf2f9c1fd76370b91f1c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.927fa902c.0.tgz","fileCount":37,"integrity":"sha512-f1qaMpaTckMVe71LcGx5Lg/rHX+DxKOoFkmZSQv6Gahd5QOIZh+SpJk8qfuhMdbtLeHHJvqXHxTcgw3mrw1O1w==","signatures":[{"sig":"MEQCIE087ppm9ZqGc8JzB1jCZLAGHA48mGK1J2KXgyxpfGThAiBEdO+yZZ90VCg0cO2iBNsfQWmq6+ZxENxmn0cPDyFqRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22ICRA9TVsSAnZWagAA62QQAJThn1y4GkSU0qQtKd7O\nvSugETK+28/uiBJD8LwgEa6vWGYEDMttHFoIFj2Hh2XimSlqbzZ9EPGGkM87\nViCCUs/If9LNG0sv2Ywgpe13ZTRPjztxUgKCPwy2qyLFN/12xb7NVNE7bLrr\nD0l14QQ6bLcnq5ccj5SVgSxqn/fD4qD8eOyZro2/KXO9gpsDC7rsNrGU9sl1\n8XuEuUxLwp5iph2F9tewO0lIZMOTOqtE9JIwrs5D045ceAL3a2Zcyl4AxzEm\n4brRUa/r3gO4Liw/jGiHG3L6oDTGF67U0rilvvHtTtzWrEDhAUH3B5OTmIkq\n8uttY6rC9XvqVgD3B2tY1eYJw3FnAA3d57vq97LVGt52crDuzEzlkNPSugn8\n9zOAz/U+jSrO5lrsDnqDYE3G8x6Z/olR1wKok1BZYadR/BMXfgHr5nTWUaN9\nGbO00TEnGwdYRljfWvwoLTVJNnOwxusoOJlC/yN9EnZfHKLfy3m99hyCdYdj\nflmoRJisIs7FfkQ/RrZc4ZMJPzz9BknFLZfjjZV9yzPmGCCuG9NHP+/Pvsqk\nerDGU4/h/ULouw4ygO/X5ChRzAhR9pp5KySoaHK+ILLHpETf8F6EkcdOdzxw\nYpjuii0Cj/THEBiw6t19FvuBHBDlI6+MAU9TSGT2FtQ+vB8GeOGj+59PeiZe\n2R+R\r\n=VVQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/density":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.927fa902c.0_1586457992133_0.1324462584677335","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/icon-button","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914cbfbafbcc3b7095f593f4c4fffeb328861fb5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":37,"integrity":"sha512-95T77LYEsspHbGDqbcfIi5wPV3N/GHcLDWnQlPduiKDvOAibtAFbIytRFRzJSPsngc1S3EGEmGnM/Ek80MvN+g==","signatures":[{"sig":"MEUCIQCdaD7rZBWEJJpDfG8cR0HeqkMEqPEFYnOT21fjSJHchQIgWYEGjBCmYsYPA86KSvoaqIKTnGuiIQdke8hu1au00PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMl3CRA9TVsSAnZWagAAoksP/AwAZ/5JGwAZ3K7wzWN8\n5zumedv3UiF46hpwsaKMyDVno8LjkrBMdNP9aFxcjiTSCAiW6yOWy+SMLa0V\nMCPudp7Vkrer9tgtaqPU926xezT229nrpkLu+84oQgefa0U4bfTfyAeGT8Dl\nYJl672x+nCDDkkEBP7ksYykJhuzaq18V/PGXF4u4n78I3xIL8GZ+QCXhrRj4\nv361TeGFfa8Gi22UUe/YEBIRVw5j4KSTtWiqp+5TPHjTyBhbZJPL9gEx+iRL\nXCTSpFLthuAtv4yhNgbv1qW8TVQX/E6PDONjTaeKsuNdvCU+MxDNV0NNOFUD\nAsYzX6cZ2jX5X04PD5gp5mrYiy+6i/Ljs8YyC8zDYkf4dayLEoxbiNHkFbzw\n31/LY7Bd06jrc4IVpkGXV7JU0vMi8bTj9kWkY4A2eZdqcx4dV91sVXJJk7vm\nToEr9ZF/ESW9lCwRNfsg+ogj4nWjvu5OGoytXGK78tCVWJHN3aDhqiRZUnRt\nKgly0JW/pVI5NkxAxjf7KkdM8Z/hHEObWCZaL9QSLWfNzk93fJUyGvl44bCv\n8f219nAzUw0DORFHdv7EhnqKj0EtwsoaLqH+eBH2yPLYV9b8AFh7x0bkv+sa\nbrat48kYq1gLDig2U4kJ1nF80tDCplmwMs9fnlMuLckopBHdGTcDTgpjZRxt\nnj9V\r\n=rBHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/density":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.eb28b6ecc.0_1586547063203_0.14955821148910164","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/icon-button","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4496bd8af4ca6e27db1391f0508c650698bbc43b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.816a43b42.0.tgz","fileCount":37,"integrity":"sha512-BepPVGunhrgGSLM+MWvW6gclA+ekq+FTqDJNhCKFrblsreBbG38xtsr9wJFA7AqdeUcXJzroDlUitKtPXhwMfw==","signatures":[{"sig":"MEUCIFjV/DbsdBKiesSIlyBn7D251eBEYxqmOrb84GzVG1ftAiEAuafZmhxXGyanRgWqFsJiEQNJRAIpdZyuPsypG6PN97w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyfCRA9TVsSAnZWagAA5poQAIHappofS6CiosMVD+1w\nNW49fNBx/2r1YM2XhlXIfbjaOJoP3jB+WfhEGkdJ/+0cL7YpeIqd+pCeHdu6\nCzZ+UXQT52DRno/mbCB6x53dODC1ZDUwdx5nADf39MTT3Bu1GtFCFC2H2zdV\n6wd4tnziYLluJiqp9IGIgSIc6ypierMvuRdbh5sfLkcXmJqbvAefYQT6ukVM\nDg3g5t4AatEqZyeq0loC0Oq/H8TKvwN0Au3y6RMUzJuUCHuoyDJEmWiEEN//\nlJ+HBkgl2HRIsalt21fBb2LnTNRqroeKC08YT9NNq6bCLBj6jy+bHCaGIrKD\na0mT/DKFfF4pP4QI7Uye6WfK98v1hr3X6rdDUCvAymMht3lWuB0457HdGmSj\nVLPAKUdyyr+38OonEHEMw1AG+eYjvLqbieedp/VNL+yHbXNDESIBIsYhO/xu\nn8fjYFggpUyp1ngAum22xMLoGWcwQVOrsg971FOlnBbSI6bLC7kHFUSBGUVV\n/+AdobNcausMq8l0SOgPp7q1tzLBF7hKHNMSLeY6kyE+KSlfvc0szfRwTTdS\nOtuwWj22FPN3E4fcN4S2SkICWV24bePsL7HGKnsaFE/RVwCmIuZsJeq6AphE\nePgwlCpqkQMrXt0GzLXYSqCI/82LFn7jDrW+usup04EW2Of7iJteOzqlSAUl\nV5EY\r\n=NwFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/density":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.816a43b42.0_1586551966748_0.4436733338854608","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/icon-button","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e157796e2f40b09ce6e1569fae56c7c9b00879","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.008c4d319.0.tgz","fileCount":37,"integrity":"sha512-fONhFGL9WdLWR85rYYDQCaiec5uPtGVOw8bEYh0e3i0CTZj5YPOxl8aN8/WuCIlcxynFcMaYxm8AuiAUohrMcQ==","signatures":[{"sig":"MEUCIQD24Q3fwunjFEMmrE5TZVXpqZdz+eIJsP4MU37v0YC54gIgCg3okG6MMSKrBr4nfPVCxfb1hkIF/QUjp/NzKyW7fXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJR6CRA9TVsSAnZWagAAWbYP/ikaKr3p+mrZQeVG0VT8\nQJMl0Od3jwVT1GwYMWFySFupp/RzkFgizuA7Op+UZaML1STjL9UPIgrqn0bU\ndcnxg+vB2cM+OgJfnPpiwW2v57k8Bq3gO4yZ8UiHkNBPfQXif3TZCPEZt6jL\n1woY4rPWq5/ORVwHuxsNga14emO9l80zRfuGmuPaJYM6QERlVIzHIWaadLLd\n5SmGaxe341ITLJUee7+qEhnyhnweZ5F5J1I8H17zeLAiuTIUzVkEK8TAyLkd\n0HKa4+Y8jaRQKS9YhihJeixlLA8HcXUfqzvFPnQlXIwpttiZExbby2KXfBvf\nDOuOBYYrWL7AJq3xSe3/yc7Oe6elQBLT/2efHIiln67a8GlGVKcm3QD0dZj0\nTdOSB3Ml13t/DHQ05/5b9Yb/ohV78Z/Q53MaJkplmTJfiWyQcS5p+iFkixyf\ncj4JfDM3ofc7xIgt6USWmfYIuVwjNlyGWEa+0YbK4mLePmf/KCqImxXqXeJu\nIEiNP8RTMOqDXsZgbn/OylESHIqHme8s1pf+6GovoNGc0z6z+81q4dei0eyv\nadKKIOSumO9o2ruz2oA9Tq3BOn4Drp7MOFVXq+q3p5drounmRFz+gNe/3M94\nzCnNgM/RPshSHyvRQW1h8ocOuoC9Cf2VPBpLQ2B3E9WKHIbUFrOB7lkK+/3J\nBh6P\r\n=lGNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/density":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.008c4d319.0_1586795641835_0.36947493200852244","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/icon-button","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05976aaef9b62dc7860138210e38f04270a87bbb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":37,"integrity":"sha512-AzUPZP2OfgEtxfw4yoQkdDOmL4unBtjiVwJdzBUaCcbbqVe6s35ao1Ji2MApWYsdU+s8crjPmqRnKvNiWLz+Hg==","signatures":[{"sig":"MEYCIQD9isovn5P8EdcD+z3ao/vYF/WGPgO8CljyJlxc2JodKAIhAPivYI4DpYNooIx7Xtdl41261sd55/RRzApaZ2uVGtVe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUS8CRA9TVsSAnZWagAAA6kP/00aSFXTqngUgluV6z4O\nhIX/m9kGwsVuQ+t1hlQmI2tLhgffcbHOF3+Uu+zjnJCb9/wTNl+BTEyHoNAl\niuQFsUCrZ2gELp9fEHzTtuDqKUQu7Fx+lqmhPWBSsvfAeTg+ZFPDxop9jboU\nVzunl7S/MSoccKjYWIzuDLhBV5eo05pBgBgzL/Y9uK9O6bKBMfCN3PMkxjD8\n5yi+BFCVyrpeUJc+mhGy9xZAYjOg73FitkFOhb73jrM9jGouB3I2t4tZJE8+\nvrD2ooTc3deyxjTbwUQXWOzUSEohGEE39BihQ+j9tdksE6cEP/xyZWHGCMLy\n81JIzhg7sxfDGbdvoZMg8wEuh12cvL4TpeZbrhRIy/Dtdr1CxX/Tfrcyrywt\nLXQoqn48w3gwvLw4n55otbNg6MI2LVsns7UOT1gFeeYXH55AZdzx6LyfDU/S\ny0FNdSVGjXUcfAJT51PgR9BBTZLpFZu+w2SMx9unPxpqsrPjXXC2WvPucJZD\nzgEOn1NYqAwENiL7fEIWa2XCm789/b2+HsCU8BoPo5sZAJYm0Xygu6cF53s0\npgRvB93PBgL/KCboKwWFaV+KInId7t+NlU0eYp0MF7AJnZoY/ZFdV2x4Lbpt\nezkI3hhup3qMTuOoXinQtyYWOAPRNQUvf0WrcR2YHz9x0SuJKygUv6y4mdJB\nHzer\r\n=Ib9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/density":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.cbb3f28ca.0_1586840763626_0.5405771849475369","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/icon-button","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abc8c86a30c8786bbb0eecd6a6ba5748f4264a36","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.f172b0f90.0.tgz","fileCount":37,"integrity":"sha512-QpPRhj+xFEvpmKvNIZ+VjKtqqODt/W4s7hmbkgq3K7K8j6bI2y6HeS7Vvp5Z11yw0t0Jk1PXaQ5b8HkGQx/bsQ==","signatures":[{"sig":"MEQCIFW1CypqLadvnTTa71XMuCPQz+AX3TNBi5xp2LOJTz+sAiADwVSTTxlemoV+GSuAT6mF3kSJcgzKvTxSIR8sbFMjqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLkCRA9TVsSAnZWagAA2g4P/1IpxmrpU0RjGzwQdftX\nrfyovNackZLmvkbYWCAI71ZSdJFnqqGg5Up8B5jJkFUA7JAPrZVmm4r3PyvZ\nvM41GTXCbvSTiIYS3vVFnMw5NYghjou0pLvLS4pS0T9cXX435SiZPqnKyLHs\nMAYOs6e0l3ztggvU74Ta7RDMttC0NVs24TIg8ilHfDpF8cX0RK2KOPqFPCuS\nF1BBd/NRZQXmXcsv6B4zxyyMiskYnlcoUYdzpyqrIFNboT791e3vDi/jYBxo\nbMGm72wuvsFYegTSyMcnoKP621Z7iGaJYJScL0tBBZLeUsr/LGy3i9PsEJUM\nNljGOtvrUjmg+WVF1yxLYsDS/2Vs1llg/ULydQv7SmToh6pNpaSER9d5V00n\nhbWVyfCbi4h58dN99Ma6iEvknS7k5ssvMoE+ZWmJ5V8Gy5sjcntuENMUPvMh\nMkFLpwvg4c/LiaKADO0LpupLY7wx+0T7SMwl8ovgCJ0sKko+wKl13cS7fu7H\nAymXheN5x4Cqo9jJjrFLP1NigGmqNSnrulL6svRRVZXqVCCuo3DnvBFSwUsI\n2f3j6OoOoRjc1NMEx2qbO/PYN2tNhzhj4+TZeKxjoOpGJH8bWnYZnnOmaghE\ntGkeHUAytyrE4JuXKcj16shdy2QgtM5s7IcFPHNZqw3nBFYflQqiQJ6VmBq+\nssTn\r\n=dKH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/density":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.f172b0f90.0_1586905827908_0.586217854887612","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/icon-button","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba998d663a902d166d35103a3d2a96dbb343552","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.c02642273.0.tgz","fileCount":37,"integrity":"sha512-I0uQx4y2YmaM7YrUk/oBJIs6TbBY3Nnf0QzcJA08zrkywOB5Dyjv2hWIYxLHUhtKJcCK023ledcRL38YVdQMYQ==","signatures":[{"sig":"MEUCIEoI2tIZ9VOO5gN8Ha2JZdhsHH3i9zMp3v0uzO8GysXYAiEAuJliiD5bj2w+0VVNiAyq22nfdOBngoB+H3P4KCx0LKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOYCRA9TVsSAnZWagAAJiEP/3ab4pv0ZHBJv6BKY+CB\nq0f//b8FbO1te/2bI52whMi4vpoROwvy8i8IVpDXj5M2bHtvjvalAMoesQBO\nMaV59JFfM7SiZn6pVN1fwHIJuokhnUPrwIt2LqSpGJuVsDb+Y1T7hBV01Nbo\nD+VZVI0AiiEV2USIjr7iJjTeML9vPLL7Q2j+cRXisnwhoFQH5QjbXFPPBWz+\nqz6L2MTbuMSNbRSrItVZAZzW5pdpRTqp6oObU4+miFF573qIwSDAHtAmcgzB\ntq6K7Yjsi1Vvgmv0WsjeCRd+CQdZA8aZFLu0DMZPGELFyOSJVrPiqquamzoW\nMBHupOIbSfikXypoFlyGWqAMXG7gsZHigiMbEIy1ofEUZLIIdtiUkq5nQgzo\nMtegZKVdmscT5iD35nYM2jb0f8Xkgf5gplKOaQ771GVtaWX9GOMIvp1ZlsZU\nyVTOXQhZEWH6nT+l/eAbTahxiV3KZzxeUoKcWg9jBa6gSEm+0S1bVJpjwC10\nHUQN2EISe3MQyXYgbtbzpPMc2Sh39vQ4TR2Hvy2Y80XwdVoImuZcFkm2iH4b\no05L5R3SyBC3wQhph2rqOiU3CoQr2MXuFXWqhjpBRN/U/4Clk1cmx3OaGLCa\nrK808C11W4PPPtZ2Hya0HyX5qOZCnAmApzxg7lEpU8I9nYIN7z2AyJC5nca9\nbA4C\r\n=L9Zr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/density":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.c02642273.0_1586967447855_0.7886526907172207","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/icon-button","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd981835ccdc9ccec2b581ebf43c10a177663e9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.8a299b568.0.tgz","fileCount":37,"integrity":"sha512-aT9cW1c8xCcldt/WUJ8SVTDgqg9IuZ61c/kcQcvkmbfvrF6xpC/YrrTJHleb2cmGiItNa6gnw91oAp2Es1Wzyw==","signatures":[{"sig":"MEUCIAbT05CIhV/HZoICktuDurWL91GGWctJpfEUF/AqMCtjAiEA15v0iFo0faGeT1C94sK5CxYjKRE+tM9t1q6AMDm17/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44NCRA9TVsSAnZWagAA1WQP/i/K/jVWTJH9X9RbV6nU\nGDDrymEpgTVV6fwcGhFXFWWQKsMBF+kFZdqLmXmJCpU3x5UxCPMJ3KIuhrzd\nH3tpgWZ8MhIaNMxWeBZjo86mhQWG7qve9BXvRzX3GSrj6oa3cNFmY7hUU5UM\n0akpVnudJGx4TbM9elTSGwe70CjChuzj/kYoLtjSHGou4ykiJ+SFw14D9/7p\nPTnIyIHk/xLIrpeBSlF7luwpbCavg/qHV0jPGUaa+TLCYYywSTHhTyOPNcoJ\nSgXCkg7ih9ixZHAOUV3efxYvF2aABSFCrm6tqXIMBLobu+EubZ+tD6Dbf609\nm9NrXM6Wt90PH7bENdiPtFrHHaktLOx1rHRK1BLDqSzq7bpkS/Ka2n8pWw5T\nwZY/vBdqnjY/xSyPMDiVGJU6BI4QyAGuczvRpu87C0pZKJYXQuovOGnw350e\nRzLw6CPxo5pzHp+MS7zrcz2iACLiRErSa1I886W+WmdCFzJ0gQ6xJG1TMdEx\nnl9GBkz1ArPWC4mCXVuXgjdgYxLQ185+DY3QyrmfXKoekH0CHHRM/VLAgfwg\nZaXmyq3zjY6CMYj2VtHvwoXXGF7ZEXU/5npfHtcgd+86sd8C8d09mrHZOHt8\nefiMcvQXWBvJGapBxZfMAyggI9T5K04hQb7QefB+RzGAkoHc49qpGTs68Wca\nfLVV\r\n=2+AI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/density":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.8a299b568.0_1586990604835_0.8166366794308291","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/icon-button","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b20f45c9bdd8c31fb9d424a36957700f99fcb3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.490fbdc09.0.tgz","fileCount":37,"integrity":"sha512-sOFvhZU3dLs4DxDlbphF5FniueLNtJX/vjCYLGzRWQU3xurd5JbPCDATtlvhgg8s/9hP/FvQ/Xa1Dh0Pofoe0A==","signatures":[{"sig":"MEQCIFVOqYZezzs7LPAcCSyALTBbCeGmitJzePZxJIMNR3Z8AiBNPip8frLka6z1IMuDK6ib1uem9qSjWDM1KBAVWLj3eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RXCRA9TVsSAnZWagAAynEP/js+SsKQQtT0sqmveBuQ\nk0MjTu9mVAhmGFvhS6vP0FsU+lxXA6OXu/+T+Emkch9pSPYlW7RR6pN+rm0y\nF+Np7JvlL4MlZUArnCGiuHC8OWy78sM7xURs37BSVGwEDe0PPN+vVCqA/L7i\nZW83LriYATt9qzmx+yIUkU/hgKhHKmdf65bYztaIUrJ8cMg/xrhdx1Aujdkv\nM1UE98G4Buhmqouh5NwORAmCkugrighbAgOu0ofQqu8z2ObHf4ClRx5HmVuw\ne2/bf6Vm+p7uac32TAf6qaUugsJ2fQ/404cuD3ykaRf+CT1+WtvmcJLHGEzf\nYM+4xqfndIcLxQ2ItA6V7uemJhGU/ThN5BGAD3pBZ5AgZKczPjjcvdFFojeV\nNf86+Lj1j6L43QxBit5FCy0sRX+yET6fBMHq02uqkLhlcgUattPDHWKLBkus\nSHKqjnpF5/PaJcbLPXDP56g0g5/hfP3Xmj+KBKXHSC3iHtL0chhxAwIeRe+5\niMXPS76yreUhS2LYrv2kUfrpJtuV+3uxqS5eFZprtmFl8uKPk6628+UtQKl3\nRfU8YJ9zV+d/3qO0BR7JXMNpx8vswtrE4ZC/McBLOOXwue3qnhqCUUNFf75+\nT3n31zHAO7wrAlhWb0wfxg1wI0KARU0cHptO4rYPuI4sMpB6/4eWV/lo48FE\nsLZP\r\n=I+Gh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/density":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.490fbdc09.0_1587016791518_0.1930157299390578","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/icon-button","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d9ff6307ab3f307e8bac9ca5b1fa0e5cf888d8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.f838c6e55.0.tgz","fileCount":37,"integrity":"sha512-NnnXgCn9txwyRqxPvB89cqrGGte/zCSKPkrSX2GI1OzcxODVGLY+8G9TcryOfvjjJkEvauhp07NXXG0f42bAFw==","signatures":[{"sig":"MEUCIE9JaAUH+pkIesUUiobJqTPrq9HiPz7mpqCFFQRE6tAMAiEA1/A4MPJV4BbPGGjU3J7d8qyAeLoM+RPipIVBjSmbFWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGspCRA9TVsSAnZWagAA5UUP/3BmYNpifCC1ENaTTpkY\nZI7sswpY+vLAWQR2pIUTH0DJUZ7hyvN0xYtN+a9zwi7v2JVbHbo1DNkUVTtz\nCC9lQ07XjAf9NOrurrPGJnhqT+NLxxP5b6p+r6nAuNYDYRAOnrmp2WBdaE6F\nQhqIXkHlhkv3MJFxGe51WbT9j/1xT5SZoxdd03E5oGgdSbiwucaXe/Uc+ASd\neWfKmYXPxhnZ+bBmptQBy7DsSD+Pj2zy2Wc3T7Gy2CkUptQkqPlpzBaDYiV1\n1/tIcl/Fgv7H0PwoHW3RJIeqiRWOGGd/YC1i+43eE4/RZ0sKPpuLgh80/6Yb\nyfX2SHpc17BiO07+PG7UyszCgM1j4snoLKoH+MFr6YOOUyC255WVgGBNRQne\nNuhjxAfOihlnHfGPhJgM8SHD9MJS59npaxeMqVoPP6INSng+Q6CmANmn8C6C\nxTyUlSX/qBWei1j7HVWn45DBV4ySSbThzFiyFaz8SeXwDFmKqrspxZTAfKsh\nXRiRJQMCQdBEQw9wy1atcT2v3kIHS5LPOFLV+mM9HG9EIiISp+K6wu2A4P8Z\njelgOzLdrXblsS8T0kcpcuu2Z2rvNWKS/uZp+q79Dyye5qklGhvUJEDMlZ3j\nRX5g26h2AF7SAAsdcATH1jJHFyNbVJmL2e10BggtnOjpcrBJiMrQgh4qGGO7\nWqt7\r\n=Kscs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/density":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.f838c6e55.0_1587047208755_0.8948532845979962","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/icon-button","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24f86d41c125e7bd8a9636dcc2b3f508d7dfd09","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.ce6cb7024.0.tgz","fileCount":37,"integrity":"sha512-i5GgCo/tH/VZwlunXUb6bXcHqQCrgPRG2pVtWPfdNVsuctbnMYOugVygpbp63brdR1wgzBNGYpkZZLYU+5PXqQ==","signatures":[{"sig":"MEUCIF17biBWqj6gty9caT0hsjgzMgFtjwaIp3imU3RYGH5hAiEAuTjeFJpSI7rGNnIdm0Opcoba/X64d5ZbbXVh4pqoxuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOUCRA9TVsSAnZWagAAZ6EP/0QI7xjIzqmum45s4TjA\nfulCtl3FkJifxy8yu3LuIonDiptro08zafKdTp50gEAd/yj2wvTal9n56ufd\nt7hAxBqzHXxXsrOs+0EWwJTONBpDPP6f1jnxTuT6keOKCpUrzEAG7xpR11uj\n5zW+/U5NgopK32Jt0cjoIEKSNNKEzyrfl+QjbpWw/WfTUJIjAwUmuixV3y5f\nJJ2QznJkm23DQNsNwzBePrZlEZFFgmHNZ6t4g84Wqq1Cor5TUjWWZ1QVG6dN\nQ8/l7OmCtbhwPGaYOOiuLTCA9WFIQOSYCudWFHcFxq7ivIr84YS6b+K0uAtO\n1ZLX1qrqjXELoszCqQamteUqRmHUmTOu03L6R0ST+IYnyNxqf9x0P2suxA/K\nFgeniJVBMfM2GSSqdxC5JxqTNCKNLzuZgZGXUgNyeM0nSkKbYfWEPYqC6eqw\nYqKicoeE4TdgakLcvIAe2weAvq/VMk4cpyWPeYpiOL6P8yxnp4SfTa1hv39Y\nan7zZoXXZ68mQMWhjxlHtLAIsEmfgvWsUISfwAqSHtqyp3WGHOGOyjtubruz\n/5VsV65fsOahlCBQ/R1G4Jkif3fB9YVhEciTwofvtA7FyycNtu+Y2ilfH2Ql\nu7aNKvySp8hfIdBXW/gc3LFrU/0w/ceZLI5uhemNwXNU7+0xIbDxfeTSyJng\n7sAZ\r\n=tCdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/density":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.ce6cb7024.0_1587057555589_0.5978505568097181","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/icon-button","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa3f42beef407e084fb9b3c40297924e2bd4e7e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.0ab62a65b.0.tgz","fileCount":37,"integrity":"sha512-r2d1qW7o7k7trIOf5joaFhNb2s2S9KyQgXMj0m749yN2HlDTXUs9lTmKQebgHRk+CoxHgur1il/B7rhYGbnETQ==","signatures":[{"sig":"MEUCIBCzy1E9NstXIflCHc38WXjw5grHTGX7+eLe6AOn5BQwAiEA3tXPR/4ryMc4pTW1XJ7gumW/lBAVOyrI1FreVXu2zBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnmCRA9TVsSAnZWagAA3l8QAKEqhre4TVkqeFJYeOpb\nEaVjIi+l2it+Wv5GyTPLRZFVEtV6V1W0mYea6ERERMbNnO5tEHeKCKWtNIvb\n5WmIZgPuk4eEHDUjDPK4P/6YChyA1IMoA9CC7iDRzqigSphJpI1uFWGuUjV+\n2kw38wl/6xqiGMJD9Fmwz38ormNvyY8Nwb3jprAWllEuJenXZC7Z+FascYX4\nKbg4Uwp7JPFKZKvSOj9vvYun3qTgEwFvs9F5s1Q/lVfwQu4FMt+6iRuPAabk\nOHKsBhhJZckF1ezqOkqBJWD0LokVR7THYvUUzGy1frN45DfY2JHOnn35K9Xr\nVY5Il2K4urPfp/OSPY1oD4j7erdQpquwnrBrDAj+iOxCnmI4lgpHVQ+OErkO\nOPvjJih3/RwXPKGoek/Z/Haepy1ZkXGxHFr0dX3bLTVCp6N1zytBfzjPEOR1\nELNIgXxext5XXdkSVc46QKfmGt6ALQQ99r3H/bg3GazDlqhXslwYyg2LbWM3\nxCkD/nMKEM9S82w/I25YBhuHm3S6ASpjHpKpAkX76psT7DhEcIbVjECGYjm5\nZKomlpWr0n2f0aepYezGjnZPqUqZk4M9ltau4EjHY7xWbOkgxR2EnzivwOib\nMHYCpG+iJ/1pv4d/QZKoBwHP5+pUzGuRtDaSHG4rVYsVTWe1bzZHVACwVRB1\n/m2e\r\n=HtZs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/density":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.0ab62a65b.0_1587063270077_0.4871188075454773","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/icon-button","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81a200b5e71f3b467a5c2314228fc5ff42c7b29b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.ca61b656f.0.tgz","fileCount":37,"integrity":"sha512-n3o8KDCNZ/4IcIvM8oGmaG261qEeIPR/Il25No2KUp6mju0V5yVLnkgJPIFY5IrF03QWUfG3H8pA9YmHrPYbqg==","signatures":[{"sig":"MEUCIDKqufGeE1DphoHJpn/uCELYGQh7b+3c5Ho8i6vXXbs1AiEA1qmYBDnAIzVU9/TKWRCO06GFodz3MtCHQ617eUi191U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlGCRA9TVsSAnZWagAAGe4P/jTJ/eKhWdDf6mN3txSe\nCE71PJOgXDj8u71RZh6AYOl/rkYA6jnSeUhFW+8wtD/hvWoVvGKqJumB3Sdn\nq53E+oabdrcUuC/RVdiIY1m2+w2FXvZhEx6DegW045V7ojgXvqgbqMx7dnBb\n/KwdkBkbJnUSEbWZQt0fDAox435nwDM/XFVf0MgGgBzLGD89euC4ACX91wWC\nGhSLJghkA4QkySSMRhoHSC4qMrbZwqO8aT60u2sbxwv2mhbBXds6nTA0TnLs\nwZl7fytjXB2bxt2Kqrq4pnM+ygriR6G07n+ytZpJZJVrK7MF2WywN2Nm1AL3\nBHO/jipH1kL3svSgX+kHwz7BoGib4nRivUI2bjgr5pgNH8qm6+75V5XIIJYi\nB2mG4u1GjUNOCkSsg9fwxjy1OOxBWqFwNxM5/YYoB/SJDyj9VCzhLKEyhip9\ntHpTm9nHOLggEy8dA1usMCwC6LP2vZowte7TDLYgLnQl+LlCnF30wxiLeXt2\nobBB6hepftpRGRgvxrtd4TuSP9NeknqNW5GTVjjsfGqgO+9VNSisnFVWMgTc\n7In6L7C40Q+Vl8JW8C+0YVBsfQowV4lkhZ1xnyiQFUTnX3SRXQXlRhRnBSft\nuIOqyG5QsXeXHDBzfJ3GEvOmH6esRPHLkvr2glPeKPOlZtaTKpOA14XXAixG\nr6hn\r\n=xGEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/density":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.ca61b656f.0_1587067205861_0.8225954541372988","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/icon-button","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce4c26629510e74c359730302e523eb2e82fee81","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.45a6615e3.0.tgz","fileCount":37,"integrity":"sha512-bmRKc6sNEpumpIswQMc+hsuyDHNufVmml42cRuFWCJA2XBP4z5M7cZvbOUGsjZw4uvVjQs9omDHPNiIAM1QWig==","signatures":[{"sig":"MEQCIAGWGq327WM8lasw/rOn2u13JeWviODg7ilP3s3hDegYAiB96JtCkhCUQ4P2wlwvpTJ5+OMNP0rnEfnbl23NZQwkxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMD9CRA9TVsSAnZWagAAc9gP/3Q+5DJdAemlPvuSMAay\nK6atwijr9H213BXbS4ybTdMAZzCtCfhczd0hnkYfXKG6/ZIxse+VnvwBhrBR\nRhxAfn6JuVKhfQvDTPf/einMQCojcK391RZU/v5nNNlnxtrQDLejH4lM4ZEk\nziTPHT7eCgf3FrCzoVvP81YqZfh49j4v95QAC+Zfm4GpfxLYjf7y5+fIW92a\njIFRtekdMG5tMuPs7k2XrG3OjLQumCyhUX2pqzp0iaZC/mdgpmyY47H3owFk\nWW4ctN/UWCazw+GGM/CwqCrX42lXjkEmz18eLdGwct1+dkEhIOVSGybwDjgs\nyr7lHOb87PsBB7QtXjM7eTVd/3+BvsgYqQah6sw/9hzSd6b4JSUc8Mh/61oP\nC9mr10FljFVZMM5nnhOFdrV6B0V/mhMTlYmwDainNJpEl83jszGdXl7cvARu\nSjfPZWsgTs0RjIgzzdVtC9RdlEV7oqr+aUJfrl587GwJIHOqgBB48GUiBqrI\npmuYRyb4+eIBDVAz9Afcc1GROvtrrNlaCaX4M9IPnvdOmJrgMJCLIaqAN16L\n2XV/iy4oUyVfzuCdkJ4ejaP2RFGZ8Jp01t5e2ghbo3AjJw+L391IYSelCw0m\nRqyF8MW97z51qWYqtsFO6f5wamCZIkvSjVAI6AALOYbG2ll3bsWCGflRwMw2\ntKaj\r\n=5EIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/density":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.45a6615e3.0_1587069180624_0.4981821063428311","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/icon-button","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50957f542d2ee448896e1391ee477982f70df8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":37,"integrity":"sha512-Ue5cIk344RjfLqDGI6ztdwRJxySL8xExLyErcwV/FoQJMvgfQfnf1nWRlRnuHy0ilV02dGaqFhpgH6O+7I18eg==","signatures":[{"sig":"MEUCIFa6A4Q9fdeB/wU8O6Beh+pn2BJEb2W8M9EdaepGhFwFAiEAhI9AHcd+Xy1lmiuUK6Myd2Jz3iSX4LzGIaJGkaxb+zQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo6CRA9TVsSAnZWagAA4ZEP/j1u5tt0j5v+QA8jV79r\nZTCyOp4PaeLMIZcueWZ7x1DKQeWo16tFI+VyGlVTGqbB5gT56g8FamoUO8ng\nKFoy4Z89wjunMGt5B4ww4zf9C9Ip0/K8X7Kn3beeAvh6IRwnPx2GSIf9igU4\nwIt64bNC2yhUu4EH8gpfSg97Mz+Xa6Wac1nXYBa0a5e9nY/dRaJBgA6fl1DQ\nltkfrD8lGv5Cz11Qoz2CTwRCtScbhfcDbgU94cif27EI8vZHCMemo2iNI5QZ\nyPP2cl2uVpOmEcQP2SPQCwrpKeZIYdVeDq10D7m8662BH391UpmZqo6s6vaE\n+02tOMlS713xXoI3c+mXrsalk50GMvCV/7eQrjaFCboLkLBxANTADjKtlBq3\n+x7DV7ezbszAzmm02S+IzFjjQtnCYlWI1566qmH6v8f4XmiblBOmRvvqKYXj\n1KpQCfacXUvlv0e7YXakEUDiWIHW6S1VEt4PhntFczTqrvOo6nMCFiq/C5EG\nVpoz8FT9kCYp2VZuepo81hFDwxhHbCTM/QjethTfpxbAexnlqOkNDiFgP30Y\nhSHTwv3uRrHD3bE0waK347XxLEpSOhZnvPmIT+cb1NbL3MV9S8VihAy0T7qB\nWkCOdCjBnKarLFRwo7YxQTyNtM2ctxV657c49YZWOWYJkwVnjUCOqDDG/asl\nKxJp\r\n=23Pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/density":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.4b04cdb0f.0_1587145273468_0.9159904309621025","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/icon-button","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdd54898bf23bc915b27fada42f3d0274173041","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.b273afa93.0.tgz","fileCount":37,"integrity":"sha512-9jaoRFbvNC6OTULrji9k2Y7j/m/s3oSgBfO3njRF+8HJhCnj+NxqvxcM8q6UFSmiGnp5WG0uhP8SIX+oHZbsmg==","signatures":[{"sig":"MEUCIFnf4pV+ixP494j5xoxSJiPDEHzs+0l9E6yG5Wf1Faw0AiEAp7Ikm7IfbkRJCJxNCxIqe23QXK21rLtFwWQ7oX8Ra+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWmCRA9TVsSAnZWagAA2JwQAI0Fgv79olUBrO6HQG1D\nOj0JbWcgr43UurhoRtZaWZakwHUEcqSx5zKpsP/0rDPVDwxgd2vAdHxjR4Eq\n0bin9Hqw/D1J5aM5nZGerY1jHo5oT+0ZTV8YF3uqcjrE3Kf+pP0YR0BbMeeA\nAiiVM7I2rUhGyReYwoAbjBqaGOJ/Ne+C0P54f3G0qpx/DNX9VrihNaLyBh8h\nSA+BRmRrArrD0erZcg2DBfa5GTgva4B2WBGmCdotbm2TbFObS3d6hQk8SYB8\naKmD3/mfnCldgi1dR5yto+ZgycSS+gwqvWGXVhnqPtzMtM7BqR3ngsoXHieD\ndyEw3xORblJdcwyDUb7Ph8OOIqSh8kcP/pHuhCwdfqj+BQhA9L9pWpzo+/tf\nspv7Jke2T8+sqVqaafHd0F5R8ahpa+lZleGKFNrwYJG8lnN/cEVE3g4ckL0v\nFibKAjqHIuPm0ADy+WqlRCdvNynq+/EWnmnhz989pUtWK1mtQ3YCqR0XkRfF\n1COnG6zH1GdsFIVMMrPvqOpgf7+wg7cSRI/HZAZ5vLuV4vnpT0Ph41jyDcH3\ncAmIDoBPk6WQElrJyDVPxtcJWpVWSlAm9FxA7ShcbbiOqfqO+Q/NIceh0j18\ntjfwHFBHVM3nUh5ckdSSEGP0V3Bf3tlSCdj8lZtBQ80kjMR7kPgI5HFpkb2P\nWpEM\r\n=AxHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/density":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.b273afa93.0_1587164581919_0.6310287187577293","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/icon-button","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1a823af5d44ce2dc587b702189fc688954f5db5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.b70bc601e.0.tgz","fileCount":37,"integrity":"sha512-DUAEo06g4zERSXZOgeEZsAGDgEhMrzZ41/TcWApHR5WalYuJ1Iq2qTvSqauujQR6a2AZfku9piVHnerVZjztVw==","signatures":[{"sig":"MEQCID6jBBCCm7RIeKjxA8Fd8p35TJyZHpxu+RwFWgs8RmCvAiBth8i6K1/gs3RYY7a/6aLldTd4ZtNWzOLM6yIKb3J4FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoBCRA9TVsSAnZWagAA0GoP/1CBd72TNBE/QvRKxz6l\nH8ZJrLPMAnMsUON1Up1dfkmJUsPTuSJk8i8OEcQoDDSQugB4fsj0dRQkCYcb\nsFpryFoYkVXzRRRqClBcRei2JmDv9Db9aCpWqDBqrwyHB3jHv4l+gBzbuc/Y\nc0fN8z/nkupFGjsbWpWnhJaM9I0nQLd7q4d6hjQovxUYRj1h+p6IqQ5HH5q/\nK0Xrozr9RuStYNjvY6tj0p8udakSd5HlgcZ0KCNA2sVXpL0VjBGHe9X0j6KJ\nmh8XKfHuxRbnyoGfY5FkeZ/alDr9uVPs66Ia2EZGX5jpXJOU6Aq+nE/iWxn9\nFs00clyj7Jq34Qw6O0pffO33AFh8DceBg/DckvndvxPio49EFC7Ma9cOLS4z\n1ZXQbBW+E9aWxflweiXT4CBMoAXAc2w0G3YInRzGsIhBQVMsP8Em6pvuZEmp\niV5qBuOzQZiug/zJgRnhj9sKAPRJG9bcbq5ML9DB9XluO25t4vSp9PAHGAnq\nGy9PTeqNMgbDED+ylCEIkn1L+05MiOKdL/WPSqY/Rn2QQNXHfiLPXSOyTxZN\nNRZfe69pmt7V99h3aDAQeyVcJlbrcm/x1dvuq2H4CQ+nJkBj4TkzRBFCE/PH\nmQSb7E3RPQ2CuLr+7aZlFHmBspMwRH9uGuveKK9rdtKH2+R72nQmGPOa7zCh\nJN4a\r\n=su44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/density":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.b70bc601e.0_1587165696911_0.5522418074825592","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/icon-button","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"236d59c27f8b7674f4c291f9440ca5219651852a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.c4b4bba96.0.tgz","fileCount":37,"integrity":"sha512-cU7lzxuKCkCTi/Vffa4ArcBsKeAA0AqUJlSn0m7oUiaIn4IvsCJ3BAWf+uD81RosrH90QgIkoM1IG6y6nyHoBw==","signatures":[{"sig":"MEUCIQC+tIEGpV/RJ7342NUcgjbQBpqLoU66OcgLub56DmJMXAIgCBFptKELmbzUnlp+xeFmwJsD55/5cK6JAdq04kcUwQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc9CRA9TVsSAnZWagAAhhYQAIkKYe1UmHm/rvWseN7x\nNl7aCHnyVCjXXRfjs0kTyQSEMJTP1J4305cSqWDxT2hfuk8HP0UvGaNUg17V\nwqXHpqEiIMd/xeUC3vgjWvze3KuSCy/Xkf2/9uUc02jgp8Kz3pvJSsbPwOko\noqa3vJGnccfXQUHy3uhyNFGtQNsFC9UZiZ9jeGffW/C3GVijFFvvLzdy7Drn\n0lBRZX1j7IVnmTl797JWU1umYYZlPtxnNJ7tukGlydw2WQ9QOcbeYuDIjqOB\nUdhEVGhedXZlG6fjfQhnJsxa1JP8JQooIBh9WUVzGGvA0bByKktcd0epu1hY\nONXO1TETezCXtClH/UUq2JTbyL/JHOCc0qKs8FjlaX+Zn8TMC75hGTD0LZl6\nS205Zfrhh+QESvHw36+vBIyFXHF7YqubJfmQi1f0I6jrTKUsUOHt++oRdEYX\nirn4YJIGGSz0JDzbbefTl4AH1+/2SougHgR7DWecBwFwGSzZgXbFZev8FqDU\nHdlukeSIkjif0Q8sBii0bg3lYptkHh22JeQc0qQyzNrW4UhfBxaHlF28yk/K\narqwTW/tuz8doCD/5xa5EiN+6wIXwOl7KmYcUutn5rpODX7VisGlLRjx1zPj\n248SgswpU5A2hW8hIfMFsrrJTn9TJAHjZjprBVDaGuwifiBxBeDUeNFyZxju\n4X/F\r\n=MwVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/density":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.c4b4bba96.0_1587169085395_0.4399288222572144","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/icon-button","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"998e46560ef34af5a90c7a90a6610abd33a59051","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.6c1ebc721.0.tgz","fileCount":37,"integrity":"sha512-z0N7WMce1OOg7/RWAMPDJ5Dgv8nPnbmMD7jRiq5iXYFRQJOJFWfxtiHoSCnXbsH20iFc7nF0L/VLn2zAuinFxQ==","signatures":[{"sig":"MEYCIQDIKV3RiM4RX8Tnqpyj5SlUz5IMgZEigCPxyMb2a6nNpQIhAKqx1aDp8C0Itu62YEAtwBrA0WcfgKH3DQftLwmW1KJv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7kCRA9TVsSAnZWagAAb64P/2PoegLwSm+W0AMEoHo6\nictWoKlgnLKObFzDBPt6rfSOIVwmdJIdYHOsx+4j+PHZxsQ0pgDU7hWkU4iK\nJ4R5ooQuj0fd205cwqyxU6wmhfsWs3HgNwvksKoDtUigdJvOG7PMK01IMzy9\n+7j6m0ZZnOfkHsmP156WxbiTt6q/8cC7O4bCXRdVA/2gGPRrTd163LCS6JIF\nzL52Ts70578wr/zErEVRhRJXP/VOn84DYNiqT+HEMQ7lts+gUamS8s0cT42u\ny1niJh5RngLIFnoQ9XHB2+4upF62iI9cLm9d6OYFsiNZMDk68aus1JsEgnIk\nrv8rOScGq9T/jO8hvAX5GpvNuPb4DX9SwTMEdqsDiBNNEDVOD+JaGqipj+jG\nbKcm11uFdfdeeQs+yB44ysjuMG7abfR1bdzJF/jQ9PFjh4BasQqJKaAefrVj\n8pzdxt6dTIF+/HzI41Z0DQGntSctcZwwKuUv+MsGqVEG4Fd8NX5KyMVluf/p\nnk6Z4URuXyVRDt3+dUHtszma1zC9JBn7ptN5hjYsnqAN2bwnCZwNEjg6WlnM\nU5iZJ3p8cxjbNDFv8R4DkVW5JiR22niuCra69YhZv/qfaqQ2yicjSKN3+GB2\niTZZdqMTjpLluWzxLgjRG/deRMhkDVQlP3K3EsazYv2NpH6U3WJPcilYeMnL\nsfa6\r\n=yGVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/density":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.6c1ebc721.0_1587412708161_0.32237379778670716","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/icon-button","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5641c5cc22a62b38f5be0f8ce1aaa65797a52e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.9cff4318f.0.tgz","fileCount":37,"integrity":"sha512-/kk5UHOBo5zoI+tAqmdRalVO6tUOWxEuYyV+0ZvKgZWEy8XZnXJhb8K/T3DlowVnaHl1q71TyMH9vb45ljMnzA==","signatures":[{"sig":"MEQCIGTBu7vnQzqxkSFwpIJu2ZypSt+ioO/umQEUFOJZM0OpAiAG9LqbkH366iNfAiKm6Hua6Bm74ck4oMMN1BB9Ty4J+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxlCRA9TVsSAnZWagAAj5YP+wQZFP0mkGxlGT37oF2O\nrPFiq0/U/TnV8SUIDWmWEZ1p/ktJGFC90rwjoS87z/xv3rArGgIj6iBlnWc5\n3shcF6qSMgl9dJjUYLSebHrHrAUJWw37RFfD8BmCVOVpiqyjztH0p5vk+Qyh\ndk2IRdUUprJaDtzn7OH7aA4j+haUhbH1fXlCGLFg9R138J3yVoVymuZISLVl\nEWrv1HjHnGVBRX3Hdxnh6/N5Ma4ZSruR0fxf9Qac0txnp0srlGznvnEeenCW\n+LWGjUsAcqi1LvoDpggdeNHDurwGMX9GzzRWxIY9oTg/7MzvcRV/Syd57CLp\nE1enIRMB4Ay0G+dapKsa/SmybBFk6olm45zjtceivICrxJ/ltN6GCSSECg5C\nZXph24yj8vLTvBxJTsnZeNrezCQYeWNsRfRRPNtf8R1dYPFMCIIXeYpKHeKd\nsS9irfvSQpXAOFu0nbm0FBwKWTT3bBSpOK2dcMcw2MkGnAKKpYy9ABgakE9+\nn0bYEsteFm/Kdefa2e4rnso5DwGXaQxwaqFC5ahybhI5OWTaA0/k1AjfAcjo\nKAb/IfqTvrcwwBTdoG5xhTqob3GpHxrcjGi+QaipjqEouitivUnlZRUWpMoc\n4GfSIIb1rT/uTZl3kE/BNTGUpzIjbbJ+bbRRqpIxHmWHd20cLxmnum7C1fSS\nXdcN\r\n=UmkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/density":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.9cff4318f.0_1587416164802_0.1837379000998105","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/icon-button","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28931714a91745c936cdc68615e22c00d6c57a37","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.7b4482402.0.tgz","fileCount":37,"integrity":"sha512-tcTCZwYjx6u5PTDQkBLTpr6RUs5SLKIs5zm1Ja855e1Yu3KZOQAQBzCC7MK1xc/Sm/tOsBfgrJpnYIiHET3bdw==","signatures":[{"sig":"MEUCIH2o0A3vUZh/uz9T3f3xuagDxpkKvRyn35BjAU9nZ5UWAiEA1wimCZViBx35QPhld9XBxifugmnmCyErsqJJ2ViBbT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAlCRA9TVsSAnZWagAA77IP/jTSkzNyrs5mZMER1QIo\nZgAWPinhAHQy5xMXkAAlDoLr86C6jhLf2udtfGDrl8zLIQcKFakJUQuNqXvX\nyJv+QtzpcXwwQBcZkyDREPtfqOvCyd68NaXh8dPy/WEfFiDl+dM9RylrqNC9\nZP2zZY56XiuzfO1tfgS7lagLlnjncwq7vGIEBiya+PuaIsUk/BEib+C9BDeU\nle7qHdjSP4SEYeicYkxmL4b6bFvZ4cbYR+NsHgySAwzxzjEQkM6gRdw/lIQA\nMCjND0/iZQxecWUxBWIC9lW2o9apEI6r+8tNPKAu6MnympnufZ2/AifDDxDg\noNTLakzF4KEDQ7kh9CT67mZHVjuBNFyJzk3/SptmfHBJKo8WL7NNENLFyUeT\nxN5or3VIzDyAjeTcMeFBLErzZOaLK+7QF3QdFmFYgj1hkHhtvZ2Bx4STlsZT\ncb4KMXFghwBH7SrTbuAJQTqG5yy6te5C+8NQgpCpf7Zjsbd6sNRN2nHcVKxt\nxTsT34hMguSdx0atgVxwQocikfVrQH+fXocCI6o/SLgzeDtH/ixoUVvyciTx\nPgV7rwKTk3rklGbCDwVFtAE82hcPki0sSUpb2GJFaf7mYx0MJRy+d39IjF0D\nzLfdB2mbX6NmeayL6cEzJVLlmigwRsrTZPCuvE+mt6dN35gITjSP0u0JZqEt\nSEM8\r\n=dviL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/density":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.7b4482402.0_1587421221402_0.5734309106095079","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/icon-button","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0497eb5d97fd25458228cfa7d8ee6b822bec339","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.deda86d8c.0.tgz","fileCount":37,"integrity":"sha512-yDc5wU+WCw0a/mm7RQdj6Ey1Xj5DbbrRlWX77e7eVdDbudZlkBtQemkRbGHnSbHkj3FM5YTGxhyKr5hrTCwMnQ==","signatures":[{"sig":"MEUCIQCiJwuwhPSvTk8F9zmPeZiBDFoyKOydNrBR8h1OsJlkcwIgV2lqUKTIuiAAPVm3sYdDUD1Eug21ciNB9czSxLrJTRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkTCRA9TVsSAnZWagAArK0P/0l5JBrWhBoKSpOSudRX\nDQRF6u0FCZVcWFkWOyrXofIHVtsGpodzFHzMPzCUWE5FaLq+tTrqBJRCYY+g\n9FHHpv6GrDNK3dBsQq9lwEYFEh5wJ+7mnzE4365WKpS/ePMMo2EhinkbOyT7\n18pj98dFxealxvAC8KgqTDo/w7S8TEx+3LkLCmiS5URGaUlyzTOSOuAEDwvR\n8z8xnqI885i8j5sh7bQAE4NB0CESuuiBbHsnXNfpVXG8Wz+ZwKmRkElqLshZ\nlSFPrmXj+e4GL7eeTN+Y0tN9S9CqBWPdSN3qeT/2SA8q05tcUpGR/HAht/Ka\n2xy2omQU9NaYKs11NPI3EhaO+qXRz+dYJwgNTEAFHUD8OxBMaZ8jtHthBSaU\n3ONkXL/AYmupotOeyhDCM23PKX7ctLylVMk6Dc5rOrLMW4j00rpcD8ZS+kD0\nP6sAW3+21I9gccXEQqtYM4sRdqhEH+AAgDpabDFT6GadYmuUrZ22fM7c6uh1\n+lgRm1gMhAQX49YewlBABN5p/xeusnekPmlWB/naRSOuk9iQLChYfTLuB+X9\nzlv/EbFoLr3DdGEuvFZRNcEPuzW7CD9uEWku0hx+P7exav+Mhmq95U75uonV\nh6lyhN+48zEfmLs69cBv13eoHFcrUtQgXx0EbmT6pkfttEQHfoMsasvWHKNK\n8o/w\r\n=tZSW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/density":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.deda86d8c.0_1587431698447_0.9384455537197471","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/icon-button","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93cdc9964d648e33e5a33badc7a9e212b0cd4503","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.d10412cb2.0.tgz","fileCount":37,"integrity":"sha512-yzIDk85W5jI9qFKb2aQ4zQrvz+NyhBRMIq7RiDN54yXJovBC/+SpxCYnsvQI5PuyePWKpELE8Dd864WcTcpqzQ==","signatures":[{"sig":"MEUCIBC0cRsvjw5eyrenKp+9N2/kn0wVPcvaGJjySDnSfOiZAiEAy+Qe+RkDISdaS081gZ0dnjWsfhmjGZ0IHhmp28G9rfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzj6CRA9TVsSAnZWagAAptgQAIslhtzbqQ4Klb3jnRGV\nV07iayjgnafH2OPdeeLrwjYcTAoj4HQpvkGq53rU/JYa4FA5hDdIzGiznpjw\nhWUhNzBUta93R+j11oK6D//OVpxS4OoN9wOXYlQbDAuKV6sWNDKy5jTHX6Gd\nnvraEr4w1/j2xv/vXtWGkFi9PM2/qCEjjSOkPylU4XHYp0RB9iB5T73vLbOS\n6yWCEKQCvOpOhw/psW7JZackE0XVZquD82SJmfZVqdQFMMuo/xWxjrBTM/OU\nWPFMm6Gvr7+Cskmd+5iUfb4ouRIb799h2VuzeKo5tuROOnHz80y0HkZ0N0QU\nVa2GQ22Ln4nd9btcGcmQJIP06AcsbJ2v9D3fLuBYMGazk2ze9uk+OLA4oGh2\nMy+6oY1a8IE+g/R02d5z3meF8UnI2W1Ryceu18d8KdOt8V0u6LbagEGoA1ZW\na5CB6Y6KdSFb6HcV54iESQ1o8N5CheENNtokXXHZL5w6GnI9mH0QACZqfRAM\nKepoNdq1gcZ083FbqTeOCRRFbsELywIw75FC647EY6psvlIGrPaRe7xkPJSB\neDYCx4YkxcvIW5Zsql6p02xkFTpFRbQ95tqAv98V9Mp2R39noPpVHPxZ+S2O\nmaqQFIe7P1R0SzWFmp3mhDQOzhEPmCXKVMTiyAzMz9rSW1m1NwMqGMTudaDB\nHPr9\r\n=FCgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/density":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.d10412cb2.0_1587493113688_0.46979482767419434","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/icon-button","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d21fee8d95c5e7257c253cb6a8f7e114a0cc862","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.c141801d5.0.tgz","fileCount":37,"integrity":"sha512-ULgudpSjQlZffkaN5OkkFJvYXPJRkD3VNOTblz58+C+JanilMJDahKGwKjt5mpG3J2Qt1eMUDeTmNYgTF1jZFA==","signatures":[{"sig":"MEYCIQC470e6EV5yeaAU8xJfzZBYcocbo2pVqQG7DqOFsdgLEgIhAPb2FzLmebwUGq/29skYVfeuCoIZTp8Ay3XnipcL/0r5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yLCRA9TVsSAnZWagAAI68P+wQNUnoFSsbVjfWUo49E\nDwoPXDxihMUjz1XMwTUVbARC1cW7EQCzuaRVTtHB0ONcXmCq3e/NAxXGWRYT\nUm8+eGHQjGGsgeokKJCbXD5faFGWAiy1LV515q5RUqbpI9nuE5p0KbA5/Ful\nt903CGMUWFYK6YaOeg9jcpnwDu+TaPVGUxFBkTCpiyVQ5Ob9RMs83iKaBj2y\n4USnjmNa5/ovyTB4n5qcHcOnfEAEYxkcTCzcy+x5LYlyXYXa6iZkH0h0oObo\nuOtSfx+8EpRJR5rXAzDhCpV00G9FL5luyqCIvK8YdwF1+vowa3mIyTm8C1a0\nyeIZdHJ6yXusCa+FjqcZVxQRcqk8/kVyEqKPkJjHhpCE/Ko0jNrmz6khLPMI\nLRMl3nrQkwPhi+DtjK/4Yh9yFca/KF2ybzoFl4doBJrBqGCrZZrCmlp7AteK\ne2TuAJdeQak6zanwr06ZHohPmTbYTrD2ui3yJJION7C12DbRCxY7/RwGYCqr\nzuUWbhnGZn0IfLWwglGhgBebZ224X8yqVYYHh50BJ6kTx9DHH3Tr2p8h9rYo\nQh17UFgsMCGF+nkSyMfpsT7I43csnU+Grwe9Uky80p21mHjNDSU7kr2R4jmO\nyi5On+0NDQJym7eXxsXhmCOcf5PsW1i8KgVVbAU5jdcW1/4doahRyFu4Wiwe\nQvrl\r\n=7ESC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/density":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.c141801d5.0_1587498122877_0.7605381665401476","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/icon-button","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8252481663830fe148f573e4257defd40b6cc97","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0-canary.28d10a96e.0.tgz","fileCount":37,"integrity":"sha512-6By9TzVfK4arOvoGVetX5G0dIc4fGOauY0YUCFV7LQsRTAYA4ozrb1HJd15WucsjpijX7FTlQ3ln+0ICK8PabQ==","signatures":[{"sig":"MEUCIQDjJkX7kkKlKUOO5ZS9wLv60l2pGR0jF7wPZWb6rTgCxwIgTAiDRwvQu8GfJMmhymbmLyK++oF71Ubjl5iw4i/OIx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAYCRA9TVsSAnZWagAA2woP/RyUvnhXmDate7Rd1pQ+\nTQK0oYxGHyPGeT175GgyaUMQLe8oG3SSfq1QErbOYZ+jwImQYPgHPTxnmOQ8\nMjG3EQWW0JRiS8Y4WmFiYPhlgBGRIl88mHYgO4um+lC4BWlrGxGrKfAjkYlG\n8hPhfDoK0PpQlxvqDkICUCrnfZx0LiJPrc9IypZwFN4AKgLxushofd4fYXeR\noe76aJIUvvKMzwtxVvl0CF+AsDGqod9ZHxS69oHGbpMIVYoicrCr2xHG9jDc\nthbdBKfcmjJaxqtcdq4LeezW3sMuYHIegz1KKihloBtMhJu5Khwh6ELfjRpz\nT5dr+idkHPXPLIV7/p0QNqBOuEcBF+A+uzb0+ctYc4LUrbjAcK17hrXOpnWe\n7jzMhozOdB9vUgJBJWK1svBLmSlG1NOeBnNsdRIGf/f5W2yTi/vQWUCL1BrP\nGm1kXfejGdTcHLnvSW+RLAidKn6vEGcIpuxajI8nP3dGaIoxc/DiVEBAeJeZ\nTtm8fC1uh6035YV5QV9tckBIZ5SRLgIX8XB8zTy2/p9CZWQC6Eehq+UNStWG\napDZ7nbBz3aU4dDPoeTIdv5eprKjyUNCedqcoK8fLnUxQIPq6mSQPhDhmkl9\n5zUBkiAWTGg6O9RITtIpBkYnJYiEILQGYqORZZEygoB71Q+lMmJTodEj3Xju\n7XJn\r\n=6CU/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/density":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0-canary.28d10a96e.0_1587593240199_0.39597538054000325","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/icon-button","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b19382b6f3c256b6742be24ae65c535f66f7a310","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8540808be.0.tgz","fileCount":37,"integrity":"sha512-fS3xquMp3XPJ8QhPfc/suxn8kjF4r+qqMcToIjzYepD9TQ1y+Cqcc2lcskOH4TT4yzASqD63T4SV7Hl579Qhdg==","signatures":[{"sig":"MEUCIQCxWuR460QGQiBid2xk8D4zl3SwpmSSr0gnFEYUQ0tLWAIgJa9KkUGSPP9gOw+vCwMY6X6HIG+X+dSaUwzFmRLxGMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+yCRA9TVsSAnZWagAADEQP/iXtDkeQM53jqbtkCVKz\ntOJ+cnV3cWBhrZaFBnPC+z5+QcYXdP6fWG/+3JmwHJzJS+Vhr/41hxMNrfWH\nvkHo4RfnxUCkkjVf3aoVNvpBXqcNbAkkNpAZ8p0AOb+58zIsfVSk6ImtVNYb\nML61WhiCb4RrQq7Lv/vet+KJrKvQWkZKlB2quR/R955WJOzWgE12yP1VE+Qj\nHQ45O6sb5UdcYVeZkWb0CgiAIEam8wEdq3YKP7KNOi+GqqlUSxGfZb/CYeAt\n4vqxXBrk0OnKLKTcI8ODLYpkhl1jCQt66pDQiR/bWlt6/x1DuSvtNFbQgRMd\n7EiBIMRZw1I0wSzlIH4mUfwyK26h6fla9D0ow/BSKb0FudGs/iOAoCFRINXy\nAj2lSCYll3dZWHgBlxRjoDKiRJWnSs66Xctl0MQWV98ENSfbJpjhZfb1qvGY\noPFox/Q25ax6LKvFCU7e3ZPP8Z6IoKyVEGb+dTb5t1RgET0nUdikBDaV2IDl\nu76yPDs+s4YrBUd++fsH/ebtDTPBO35PaKVTory61yf89ybISplHeDyBTQmh\n84geqooE66FSYe83ZY/5o9XJEH2uqVJhFAZIGk+B58rVSAqBB27j51rwb0Lb\n//o02hRvXS84iUcuRyv3ImNT6H4ktUCmzjznXf0TnB/aubr3BZ1JHZBBe3Fr\nWHJz\r\n=x9RY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/density":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8540808be.0_1587662769563_0.637185397393814","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/icon-button","version":"6.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"769c0fbc90920a5c4dcfc52c8665ad82e2c19b07","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-6.0.0.tgz","fileCount":36,"integrity":"sha512-ak1BIG20FVAIj4oV20YbDhvYWIS8kn6cCcJomVBB/f8uA4OX6NO77xwaJ9tBZTURkvLJ0Z5coDLinxOHN15ffQ==","signatures":[{"sig":"MEUCIQDY5ZbCEk64KujNAEbpseFSCPwa36aLsWHjvLfqmmeVQwIgccHYQEgwF/RUKo92CRyeJV5tbZo40ne3a0E/k5xyPiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/TCRA9TVsSAnZWagAAYv8QAJuXJjF1ShMF2/i1xsaH\n3eo4u1musTlUB0/XxGHt5dJSPg0yYVEsL5RDmCArPz5JiAkzklxVYY9UwvE1\nE6pceLyhAtki1NVKP1IGJuWlKV+RNZ3Tnntbw85SdiUHRyplQRxXXtrapwat\ndee53+byDt5b9CYWjRgQDRDnUJ/RiRWKoPH1jIZh1hkznr1UOcrHl+F4Hmqz\n1zAaNC8y7k3RF/4lZRAXWA1C+eBUdfB2BCmXlXpxSK+I7NWIRb6nPVInPkFS\nu0Lg6DCbNcWikthPrFtEMmTPyJbhT7XVF7D8RTFNpve7J7WEmKAxRjlzjlpN\ns3EAURD2I7CVooM+zezajnbJ8khEU/PD/GtALHmMfmpDtYXMBclDMzgsM1oG\nJkA332d1LOsVZ7Vr8gWVbSlIVImnf+FappAPkZOZBsePyazWBAlkL+zFkFAD\nIFuOfMP3NXxivrp7XO5AIdB/Cq4UuhyTYzBOcIGv0HP9ZVdnHCYVJakpUx93\nGC9R/uAP5wdFUAc9kcyXIVSwudPCDWss2GNH5OAvOmU+HCuLUrUOACmzOQZh\n5JjLg1bl5OY6Agkrw4ibjVzpTsnIanjLoEdiRDQpMO5Y8LsTzfx701UX+lXo\nBx7I0iq+1sw0b0DDJBZhD1Dc6RBlAmSfNegNdOvz5APJudxRF+dYv3dyMUn2\nXAJ+\r\n=Zw0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_6.0.0_1587662802505_0.20141494139939753","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/icon-button","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2eefecdcf61be259bf1b2762588dac3667c440","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2673adb74.0.tgz","fileCount":37,"integrity":"sha512-JohMAnOGs6hHgBqUB3gUgaGCRPm7D2O/GnwgIFmTW0kE/61klTuUIq19iDqQZEiy3AUKyacxiKD9q94pxwaFxg==","signatures":[{"sig":"MEYCIQD8BgH3Jr7R4YY6VjmIvJWaZAuZxKMj6ld24iOQV1s0YwIhAKeaYPShVcbgEvp3Z+dJrrcwsGe2EXJMWS+cc9WiWCQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqdCRA9TVsSAnZWagAAq2cP/172WK4JWIQE03X8U818\nJYmcPKO8WAejLmuSfLENZTHhz7sDctkQB1WCv3pKZlS08M1zYxFmLzSf6Nn4\nDVWrTymorxIm+CcRGeGQQS54dgrruI4D65c5brM7QNL2aNV9ZC8cfySZcx3g\n++OPkzUtFc5frgYUb9VpefBB5wY8rKVSL1dUHLk1Uc1zrCZrKqvjTXYlEMGN\nBd9IKIEbaf0OJE9hiSWA7t0tU2bsl0m+U74LVzDZfMw2KMGWUu3LVxyYB+QK\nV0bVhGgYPPZZyMBSEGAuIYxQ5ydmCwEnXFZ+xG4YC8TllqZ3u5mE+YI8wmp7\n/G66j5NoMDYOiJZkL+aQJZ+QBtmAc15uHB9xErEzkAKqKF0CWDzSvXzr3Rm0\n/PlOVkbBj+3cUBINO1BTqwEwC/ZwmrwSsAciRuHhoKxTi+nDt/WLFcyI8UHZ\nhkQ6r7abRzkxT3oUyxo1BLRIEYJr1q7+FVJK73MfskMjOACa5i1aCqcS9hhc\n3M0tNI036oOI7vGPcAepL2n6pAS5DSZmQbakILE0Sb/LuMWiI2dl6MwCnwC5\ny81RbTCwYCcwYk3P7ltkoyo+X1KGTC31SpRZZz0vuyFCIL8NukxszDlvb6EV\nNZNbUVRbks0o7u9gqrEYRI4aFkMXCqRHm1GfxrA7SVM0PLu0X0x4s3fHe2Cm\nsjaU\r\n=yrfT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/density":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2673adb74.0_1587681949355_0.5219867001788672","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/icon-button","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8508e84635f5f60a90b769772211b7181688df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":37,"integrity":"sha512-cc3T2JD7Q5/6kWR5WRqGQI2v4sVxGgvGyLaD0sxCTScdWeM/4bnHDA+xGLpB+2E108BqU1K9UxkxPD6kX+zVeg==","signatures":[{"sig":"MEYCIQCqmwsWOEBC8n4rbM+8JfmzOpy6r4O03LIrge4YEp65PAIhAN4dbkhrDdFqRMiqlcKUuEWoeKx061InhafdgJ//VEUo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojD9CRA9TVsSAnZWagAA5msQAJynkpobW+o2iO5sTZQl\nQfiWS3b7FUE4cT+ChUOOrZDk460wTB+w2INmd88zBPLUp6Pa1tK77oxxggWI\nol7Z0kpHMeOiwAIZjh7n6bP2VGmDv/fYzQXidhqO86lNKYzpKMJko9RB++0Q\nx9LkcRvhZ5Zzk4TijTLl9XUwrxYLlTDdyI7rO3673evVHI9abW35b3OCXpi8\nQeZ9RgU0SxdewbU2HhtYxtnNc0CIrC9GwcR2gdzIzFl0YygFG1vOv7p0wnlk\nKP1ZdKWgIOqLQobxckBohK4OnW1UTEeMZi+MLBH8ouPMW4YNen5oZ4RQgNud\nHv0G0VXmowJ0b/wi9ZjfvlpMgStSJsdEK4cPAarak0qAEFx35vrMGodN7KSl\nrzMQazedAZkmbdwlKnnoaYzcTTI6p+nt73CY/N1MQ/uJA/cD4CKvooyyG7Xo\nVr9IYBOwQ1Uqk+eptOxsnq+ApMynjQ5b7m9o/Ktt25ozDa0oRi8GJjEd8gQI\n58XCGlsO7Pl3Xa6rvDLV2ueF9P2SoHOPDuMYIzXB6MhUcemBt9Ls0DHPLFWy\nWJix5UT1Wk/idzeuI6yiL/cUkaJf28Ag0zfekTe3ms6yIPWhY8+IOc8H+jAp\nBDO7F/U3FoLkhrqNkbO++j8cHHJG/zn8eruePUMs+YuQZbzthK6lSXdHU+KM\nfqEh\r\n=EACF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/density":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b10d0d7f1.0_1587687676918_0.5707254521998115","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/icon-button","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cebd66d5d3bc006bf4d1e48076d3d832808ed02e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":37,"integrity":"sha512-X07BAbsj48JSSrrQMPuUC2zFwx4miQe6viL/ywuLDQN0UQJp+Q+T89kLj7UdiWkxxdBjua6zK+DsBX2HbJ3kSw==","signatures":[{"sig":"MEUCIQCHuKxuKzasMPtsrgjBPg25ql4iYHi0sS1xkScNlWjNjQIgfl5OY0PIdJeo9TnpLwI9vD33Mt2qLPi2AG1GlF4aYeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TCCRA9TVsSAnZWagAARKcP/Re1NjgYYi3NjktqO4PO\nci8Ei0t5FEl4UnPVBL5G1cKB8d+mqYol2hqZxwvkjDmS7S28CwYmi80T3xOY\nm+U/Xihh2FZ/U7eEXuoLqR5lGzWWknz5IvV0N0v2ZnklHGxKosri59gwO92U\n3AwLOMDOd+et/Yyo0Fvr98i3r/ONEw02olOkMLDT3qMH2tR3+0A3Z0tX4PXU\nknMs5BeHzubhcg4/Fr602sLJQc5S+2HeLgw4tsjp1yMOhTOo43Uyr+IHY9F6\nvqxpiIgr12Ikwq6bz/XsOkmlBYeZ1n2HbdIKY2jvdsca1b5P9Z4QhFXNERXE\n2oT5YyzyJQ8fK6c76O0PmSpMJvQXwQWBcpUsCCv/VXSQ1gmgMKQnwkdKJKHV\nXfSshIaWiAwgtsI+PGO8F4tMh+yCiY51+qtlSvrw9KwvLSRJ7kReP8Aq9smY\nALl/RYyNwdqTKmbgtAd1FLkmBWwmPOvXaqxXG21NvFp2R8aiSMlUamL9HMqw\n2X72dCA8vSz/y6YxLB3VyW0YiCxrUtUz47uvLpdANDGgX3Na32RD/x0Om8+t\n+xEzAgenHZNfV0LwIuTAuehtwD6A7QO0foMqj4X/Sk7xXb/fwE8FcQoK3k9A\nzILlFNb30KzK7q5mZR0t5or9hnaPNi9QB3Gps7NV2/T3D0vL56nT1h9XmffE\nEhOp\r\n=4K+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/density":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.3bd8c1bac.0_1587762370415_0.7689689238580104","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/icon-button","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c122dc6832c0735d241b1aa4f5eda8329cb00fa1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b83c8dc22.0.tgz","fileCount":37,"integrity":"sha512-BqQ9F6tNoB3yx3RkPCP5Z5QBs8iy9pEgw5MutgIeHPwgt8PoKmKNDICdZbsdcijvuXpvO/k11ConrQrCt6L4PA==","signatures":[{"sig":"MEYCIQCBgKVjXJwqLR95YgHdJSYoNzhW+PWNLTT/3wKYocuv1gIhAMUzJrAiLh6PHza8f7jIsCLuvD/yD/6jvUHxRPcAqpgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fBCRA9TVsSAnZWagAAR/IP/2tKSdc2zMN1Duof8ol2\nqYCnHQLMBDY0Y6/GW2k64maXvscxSFq+o08wAXus/jVeTt87YdwPGhZO+LgG\nqtCf6pblEIQ80WQ1Q4RnePBbhr6ce/Ln88JnchlGdPx6o/+OSj5SebkabqcP\nElVRMZXKYFLVtCErzGBWMMxGOSeDTRT+NKgVXY5hHqUR1RiYz/5IpEq6CVsH\n1XVnWe0oVjc1kI/15o4TlW+1YP1GEirbqDfbu9co6wuFEcIVCazEcSdgOBrN\nwEBJQA93XRCGpNHeG2+fs3ouMWyzEYrHxBITx8t/IV/m25dRA8opXZIKzBQu\nsz7ezKpfxfBWVMImNvuDpdSYYaOboK1uW19X3bcf+wsRLS/y71EJSrZyoNOq\nmV0J0S4yUTupafa0c2DfYDiGmfJI2FwHAmV00i9AYY4bJMa0JCE1sMZyNXJA\nqRQECoDIo1oLQShuOF2KRfnkPd8O2r3aya3opf04QwrIYmpdRrOh0xOtIm7k\nqeU7T7z+7UiMysT12xgwFxlrvuoRDnrg/IH9gEluGRgcebWSN4Jz/tltS73r\nlz+es8+OLdtcWdp5KkFe53TF2I7945K/lpc7X5VVS4D0XIlbWkD3E6Qp9iDu\n+uU7jbiE39bze73YgWT9cOuJ6eqbdfu0XUdwjuCmhtVmbPt4xJeA4ZZNUcTm\nIwGb\r\n=dLTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/density":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b83c8dc22.0_1587763137543_0.45321489961887207","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/icon-button","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e276b16bfc5818b2acb64689c95aefe3ecd83cc2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.1b3dd846d.0.tgz","fileCount":37,"integrity":"sha512-chDGOOaMyoNpgAQZQkwOTR50bmLQP7yNb4gN+JMXGyLmlUTdN2q9854cSyazj2r5PVaR6l1R9eJsil5/GnAcxw==","signatures":[{"sig":"MEYCIQDF+nKthtAHi+5V/1lHqExi+m9gMNgTqy8h+jssy8dBLwIhANogSeF4L24xyWcgUH6ADGLsVdI8aS0vNGej/Ea+/Xbl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fSCRA9TVsSAnZWagAAGycP/ieP9aPX+F5mWeLMOF28\nXs+9l7I/XbWCVdkA+0lrs6k1fartC5zk3lSldCP7nqumc0GbTXuOPE47334o\nuqJhGtq3yUWt/uf7JPzgFBdNmt+uz/m1JNfskzsI+SGq1rNnfaBrF6NHfOHL\nHOOLTKU1FwzeCZdh03XitZ5+CwBvnkVhgAiAraibUskk3kXJ/rvFIkgYRGjF\n7QFaRV1YpJY/HqL+2eQR7kKgUvxUjIl/2ZGo78YNF0jkibTbdle1LqUW8780\nyj6yMpOJsMwMRvGiWJHVqvMksIo7mDaeux+BUEciCaJigIn6jSDbvPo0oU1+\n39iP0Mybr9ts505PhOzZnk0D6M8tNv8a/mZV0A7YoQJ5+zCPywwdA27HkmPc\nK6d6Ss1dQXQbTPjqWFerbP5fKdklqbIdRhtRvUOuAtUtIZcmtvzKgCGC96Xq\nqlVXeuWE16pTVe/ExSpeOjuopx9Y8/cksXk1ByfzHwqwEUSFLAu/OZTyuotW\n6oqaMJ/cig3zvaa95TmkGNeTBeFR9//yl39jd+p4cA5TJexhnI46VHDwiBN9\nWZyVD+6ix1P+h2Ul05aTW06lFicqP4AESAn1Fdu4mP9UPo1e9QbvNwwWB2vR\ntdgIy/Vg14jkf4zu3VIDW89mThwkgGltMtGJaSKJ2e9Z6I2Vba3dWaCflQWC\nYKBk\r\n=PQan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/density":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.1b3dd846d.0_1587775442169_0.210444019537519","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/icon-button","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68e7e71804cccfa895fb8ed868adb221d3f080a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.29debfea7.0.tgz","fileCount":37,"integrity":"sha512-PEAVTJxEULLbFDPDIUApRpTup3uuRVLo2Tc0/Xy57GWk5aED9fIxUStBL9VrHxOpuLmjsDPskjxcR3XFi4peTw==","signatures":[{"sig":"MEQCIDum63vpm8BzrhXVVjkXjGUu2iCVnFucpCy/cymQwLQyAiBGkXN65rnyzuuRwTgw39rhfgy2bnu2lPT3vsLyl8UmSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDXCRA9TVsSAnZWagAAgS8QAKDHevugYL3E46VcZjbf\nnBugpq/p7malR/33dTGRLmPI6Db/m5zEYBwthOU93jA0Q/A8w6UVnkHpS+i1\nv3HCd5nbEFxpIzLy5gWiUQhOZ74/S0AcIg+N76+LR90HpK7EJ3f/Fkb/V9/Q\n8h3mEPapumo+pzuvG+lpjKBLglWuJnNAt5UuRQ5Eoz8qH7i9kUzsNZzGf5So\nQ9/NTgTgkpGSdJJcawM87n/ReodFY0/GI3xZSzaICfM5PU5mzOaRZ/50sJog\nKA+dmOPhRvhNyrJdu38ImdPXJtgJwhfXCgHm5S52tVpbXum5qupTZ4XjgfKd\nZEq7U555esPsb0oCGvKOW0FjIZ1Sfvrf1zHiiX2xo9aoKj3QzxPHQKhFav0E\nJPv9CBE+xWcG6NFuI6vC+kpHKswJ6H/e11OqGTKo+cVF91D1DCKtL7GhsDLj\nLOkthfHS5R/SHVUE8ppjLJHenXA/wV8TJwdx020YsRm0L0aN9XoAdCAcEtgn\nVm5NE50kLp/mq1Qf+t45uxxgzVl/3WCT/2YTwTlzaqQZXqk7/j+NLYrQgIV2\n5YKMruG84f7O4pQlzxWFtmTgLEi8FaI4SJG7TdVWsFfiEDtHWjPEmwDBkdLC\n9+3vklLJ8TPk04acBHm/ELe8ag2lDMWKeM8P+i0u/atr6tx6QFPcE8u+tBIf\n6v+J\r\n=nYhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/density":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.29debfea7.0_1587990743168_0.5219348947687372","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/icon-button","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a8474755f62da704c7b8ae60d8bd83875bec729","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.28d32f8e0.0.tgz","fileCount":37,"integrity":"sha512-5WiewXiEUQjXPqkm7myJ5itLn0WMVuFmcQh2bdeiH9Tpu+HEZtjnXWS0uRK6GloUn890/agm+JtYsHo4aPVv4g==","signatures":[{"sig":"MEYCIQD0MuBJ9SnBi+gsUEZTZP78P9RWwOy/mmblmTE5tTPDcgIhAMROU4EIBuae7UjJttyrKR2JYBoKQDX9cCEBWK0swD1J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucKCRA9TVsSAnZWagAA3/MP+wec//j8L7+wcmbtXwN2\nau5ctOTD6MNS+GeoDfwmQCfNZ9RnYNGreHB3dzYMsKbQFmJjG0hxjUHjdigZ\nmZg+VZ8MSUW4iSsmIJ9JfKC9InsonKZs7u6Sa27sEkZXMNwL5HRKOzwR+v8F\nRUnToRIjJxHqFLAr6vgytONeb75M/wwSKe3yitfvk77gAg0fQjaC6sDf7ffc\nGf+2bAjj/sZFdB6ndGviJDOjvFzmdEWk5Ju9E4N/nHo7H5d24D6OH3hBUBpb\n3pC9iHYpLlf3E2DoFO0PveZjKWr2qRjK2KLSB2alIKBZNlEGhbi8/8r183S/\natIW9k2hR7PPsLMmoiIutNoIHNVdBfTSuHfgbuoniioS1o9aSD1FHJmgplCT\npQH7vOkK/2mVTW83Z8AC/8kSdsY72MijlyY9ItmdkL/t2QBXHieTuoQmkTnM\nirSbkV2SEHxH26x1Rge/W3g0pcIMJFG/ibOb6nQlvHLZM/kmzvirqEAZkZKD\n9OfUIOSI7ylxD6raDeS0ZLE9I/ZPQPgdx9HYkpfKE7kcpBRfcB4fnDbL4VSq\naVnQhlijGprzEXEfS/IJVDbS3c6BuyBlhlt2DuWAiFMa+P4hBtFDkkjVppw7\nZ0iLJCCIKrHYWatjag1pUiUorj4B06Q+hqkFZVpu0RM44vS0hwpxKX4zEhzB\nToMa\r\n=yAE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/density":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.28d32f8e0.0_1587996426326_0.3179022605129478","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/icon-button","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feb60e4ee8c5fa0d8e5ac63bd4f5559dc0301824","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.af71cfdd6.0.tgz","fileCount":37,"integrity":"sha512-WUpnhDE31DQt3PabCpnhctndQms9jCWob7eu5SC4Ovdj4u+iz5ivug4guZ1bN8MrO5fzNi4AezdQgHjIQzMb4w==","signatures":[{"sig":"MEUCIQCmdNU3ZwhTxsGahVJNb1yHLY03YpW5Rev1wutY1nLN6AIgd0keqitJsPNm8xE0uDXy3u3IGY4WnuEoVI0vZSdagrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmPCRA9TVsSAnZWagAAuaMP/2Hpl/PCYzDbAsVAMa4F\nyuOLwdTLKvp2UAx/Pqg2HKwsXFYwfkou+BhwNm87iPh60Ic9jk7jx3utPxht\nKMGWRXVuH/ppDktZe9zsc6RgdbjP4371JNADege+NpzZf2Bs0GRni6Wnkijo\nOGn/W3EuGEzTxRWUyQFOt0oi/05y9C0aSlEbjTPEQmi5qDaKww1j7h+B9Pab\n7OhEnIFC0Vs2Rc8fPC1QHEpfmEh2e5FEze5A13+syqda/gJQMCkeb6Bdftf0\nE/71ANYaXeUpgsgd8crGufb0eprFqSLBiQgIo9Ju00FVoRwtAEy95lp2DI30\nNa8hPHavv4PvYUdmoQ+plh/+e39VOEIr3ojb39w6zllYFSTMnWSE/OjiN9/E\nB621HzJT1R0Mi4mhi267gTGzcK9B/Y8iuN+azpBDoiosmoOjwXdVywzZ2Oil\nog45HWhG0L9+xZ8naeCTNG9SN9Za4mJTvhsYfqnhwLQsbFFzYACG8JvfeX1d\nqXM3C/02xjGgVqFt0P6QkTQJEj1vCi/jpu4OXO0GxURjZxOZg5SutO3FUrY/\nZXJkWkUpGaRCsjFKLtK01ptax7nvJ5Bh/TbuiHa5rK8qDx7PqIQLFiGdu8gb\nA6vFxo2OfNhABzw1xT2jNqzOSvD0rwMtrDprEpHQNuN97iN3BWV5x47MrZgn\nooCL\r\n=0Yuc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/density":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.af71cfdd6.0_1588115854908_0.7795996998892247","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/icon-button","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6a59c9240933c281f5a08193ab12bbc11bdfbd7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.99d2fc961.0.tgz","fileCount":37,"integrity":"sha512-klFht3xG1YY73NsesyleriKuZZnLGF9qXjOg5FdhI3nnYaJDra/REAHzcqAITkx4HuuKhK73dJf+v5V8sZap+A==","signatures":[{"sig":"MEQCIGxY2RPJZ/2pfM2qc6AdJS//go+YI2NhvstHwYG8OVIAAiBnvZ4jqX2fhLN5+BklpZVwFbZqXMKPixu0LjtDSJZnbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVp4CRA9TVsSAnZWagAA3YgP/itRZjEaIz0ft2tRpbr9\nCbwM/kw65fV0Vk4Fyf1Q8lwfnFo1GQZjwEJr1eUllF+rOemQRNK7amBdCgTj\n15cYaGBt7HKwH3FkAnewUG1/clDHNrYPzrjVlnSQkeFW0CLy2JzhNu2FfAMg\n0jYAK4PetifRc8EdQmrI9JC9cgaxmRkoC1a449IfY91gbiUqIsZj0dYVG4w9\nd8LOm00BqleFQf2an0wRKi6UZxBPECDB+4ZGXvZhCP9CTuJkiBmBDg3y/X5c\nqqbJZxKsKkMxV9bNZR/csoo3PlIW6eBexg8O+Uj88qYvOigJ/u+5yok1pdn/\nxziTZHzmzYsyn7Do6NAo0WBhtAX/yu5n6pUcZFmy1u9K0tGg+vngbYqWvqhd\n2Vx45oOlWS51Br9c9X6lU8wSb2et1dJpNDySLrxUxBBa2uTN08yo+5xG3ZP6\nJs4Qk/VJCa/yJk+2pX6lJyvwazidmPLLrGwGXOSV4HjZZvIy3wkTywFSuwPD\nTuJfEI6cB6gxbUy0fNhq8Cgm+h9vj6KUeprrB/ZCaWCesCdZCCUhp99NVThV\nSampCCfIRh4/kSsnxxvWEj4DHn3/0IMqAFXPYvg2fBSnt+AE9J1jFuCaSuua\n5f4EVMuI8kWnXHnoltXw3jmLOHoaXyEuLNUsuIzsi4bJhUmpic67Abic5yQz\n4xcG\r\n=eRsw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/density":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.99d2fc961.0_1588157047671_0.5482133624699634","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/icon-button","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56572d84b2b89c83af1f6f600293f4b71e15ee1b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.0e052b24f.0.tgz","fileCount":37,"integrity":"sha512-sP/AMaOM3eN8mBxe/dISTBTm8rJPYoEP0RkFheVUmywURDjcbRRKsr1+5xMTdl6mQvzaqjqcv9Wj6OEoOi+iBg==","signatures":[{"sig":"MEYCIQCXuB/4EV1XSxI5gSDF9qXKl3qa0fL1/WdVHVcD08khDAIhAPUIyNgnZe4/SuDy52YF5BplcvkgdcDDIHGOeWQy42Vh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioICRA9TVsSAnZWagAA800P/A6N0Pu3RWDXYaU8vULZ\npuE53CELhuVN/+8kXpfBw9Telm54Os8nmFREo74yaugNa+3Kl1qDomsqwCTW\n3z4IgJCgVEE4cweU/U+eM/j4a5FrWvagfhfoXEW8TGAFJc3ZkZVYpdSFdgxT\nEODRD7tu2BIU9MiHn4xDys6zOso53rXsngng2b9zTn0fgyY8qlMMpJto5DHX\nWgEaBygroRwa0oxs8nCKWsTiZqUbNnu8etLL7AnXCoLZrbMI7Ga15+je89LZ\nooen2AYrQCK1fo1a0rPklvuH3eHXUznc0xwhlsFLKTiH0Z5BWoePoKrOKeql\nMEo4fndA9E8DUw8CH/fweEyQUMfW5Pd+uaRgXyeF7cg75q4ZhsFjTjxqLEmW\ni46cpWFP6Uidc7ujzpEdR8f8HGjz+Fn6l9DYlZy4ONv5Thlp6krAufatsvex\n85vLjMiW0mH6wmYMAfsVNCL1HdOFsVwRIdktDObSR7K4ABOtCS7eVqNaGah/\nw0tbVav6ZXhv5ot3imZF539pc7td07NAx6U5LHSO2QWxpvxTFhr3o9Lyk/tu\nx75UCnO80jYbIuzf2GbZruVCrPd6qvhtAnmdO7kimAzuJmMmr2oxxqSulUO1\nskDwIeRGqTwlpqgsNvCMX6So+jAlCICP3I/EKAt2qmOCFlW2+m/CfsJADTch\nJ2aM\r\n=cGTE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/density":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.0e052b24f.0_1588210184182_0.8673740992304595","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/icon-button","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12f02821b13a945599971e024c8e49a13f9cd10b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ff4bc632a.0.tgz","fileCount":37,"integrity":"sha512-5w/jCcaRsEe0NH/GJf/8X6K+E7LlaF+oQyPiAa4b8hfKjEfqMDplLvlU85OC5vwx3qjJccTTNVtWKbCgdHjtEQ==","signatures":[{"sig":"MEYCIQCApRgUVVTOmvHy3NcendjihVOtHLg58wX7yo2ga54DLgIhAK6937+pWSQSULQTuTTsjo9z+9NnbAkUEPaQ2XZBpe14","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowQCRA9TVsSAnZWagAADi8P+wT8HEQwEPn4V/mk6k4w\neHOm9qBDe1900Mvhp/tIqTTRfPWLdJll83hxpBS42vaHSu6RZTnCysvWYlsw\nRAOHyleLYOG4+s4tVZcrKeKjmjKOn5zfwhgPV7eKg5T0mgHUzocjiUZet46g\nMPA8dFuvF0CZbjZ3vSvKpHzHvpSf0iKReSB+C1uvNy6ISx+6fvtD8rskDd0D\nOMI98tUjm7RVELgGS+fXB/KIkSaO2HBDoElRrjHbDYp5Z7aMDWj04/vZDNEb\ncYocri4oF+6FGZ8Eql50ZCpoU4yIBHtpLxo4+UgK64LEAhdyp4YcKPt3cfH6\nxbW5psO9C0tK1hZqP9gaMYEEwDyWB2CmE1mh2Sq0RdQrtnIZqgBKczLrSLTJ\nspMcMboA9oKr+HiV5h8QpXnDST4cHEPhhADTnC67wWPm5kTkwZEZLPG/GU/C\nVphjLE1VTEzF4JRNy0/y2mFKYR0OjSWoJ3hE34lRAehUGgoumEN715vWxFSC\nfulIs7YyNVmpXuman5oVMUG+klXcR4EniMUmXNIemzSrDdcBEGf2HXBVM32j\nisT0xiMcvlS/y73qNA8+/JbvlJNv6oFuJ+X4+FHX/HYxYAjI8zGIqPbAqzWA\nYo0HHkFzsKLw0p6+b+5R21W2fggzcVP2qvd5vtW/ea67UmyTqrYrCymWCWjF\nT2yb\r\n=BfdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/density":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ff4bc632a.0_1588235279876_0.5968084831360216","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/icon-button","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"400405f3770650a4876a2136effbeb2c58ce9c0a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":37,"integrity":"sha512-CHCwLNrvTCgdWDhtxOcMauY9+W5m3LDK2b9LOhZHVM+iXYZ/+xYiQHVMuG/oxbsYnqAk/x0bbg/p6Y6HUpctwQ==","signatures":[{"sig":"MEUCIHW/gunTfeJrS7R6Smnv2yrGhTyNSTgukLG35b7VYSBsAiEA0nypS9PhLlIeap4oiOTe+gw+cDE+MaZQdaZq0lOz10Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGZCRA9TVsSAnZWagAA2iAP/ivoVmyLcIzk57iftNSM\njTUNwQy3cM7gV4yO8R7VhHBjIcNlQTiG+zQ7HAlpITtgNww2xdJ10jVYuKmD\nVvgKFSY9Mptak3XL16p+NwK5vig6mVyHtHyr/fYo8UtFxfJGrLv4jWWqQSGY\neb9v1qr0nSok0LTTzAv+HybvHNwOv3AOqfnGDn3k1/3HA88BxJFZV8pkkmyB\nQrmJyiqew7yaS2mpHYDaNjzDcMwuQ2lN/FRkRVRVi3ZVgqU6Fm/VJXc5RfC4\nB+9yALxOGij4/oeRqsBZaew2KTk2l+hSLN3+AxH0JfdW+oIlWnWKuq1Uplc6\nGetYwmBlEYbpPWe5zz4qfaTcuvJDvjDzRNTutu3xCIB4ZQ/wq+MVW9fqKunB\n3bofy8NQnk+yOTcVgDdrDC0MLvL05inCFnCrKCHs6nHek26rR5nLGfJw03kB\nCI3bY/wLs1+On7nTu9VUhVICA+MtwBbiU+wfKzFbQMdsLq6fEmkvoUEIJFAE\nagqT9kijxBLa5NUh9mJphX0ofYfkux7KqEmsvtn7AsHhNooEQFbFnDuiqP+x\nNsFmN9vKduUe13oNDpMiYcfkA6bydkLWT+rORJUWZwJ9aVoHtPjGZ2+wLwql\n7ctS/ZtLoEqlResEfPAxSU0KwNCDJrpJB5VAEiHS+AA0ymxdQ0JKV2DCicDv\n+LOK\r\n=fV21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/density":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b0f83d2fd.0_1588257176470_0.38083708668749283","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/icon-button","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd1feb9115fdab952d8ba1ebc969c52211aa0c13","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.e59906a57.0.tgz","fileCount":37,"integrity":"sha512-OGLYIX1AN1udUzc+c49Sg0Zz5JTlc6685K8jZ5xd9bzrSCaCwwi7Vn/N8oiYNzn7c5LgYAhQ33Ji64MQyYoj1Q==","signatures":[{"sig":"MEUCIDDBMtg/bOz4iOompCGeRvnqWzMVCw18Yx0crArsnjqlAiEAwcT/9gQaNkoqTrz05mg2ep+a3FpfXLJpjAOaDSZF+8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEN3CRA9TVsSAnZWagAABu0P/iu2p4Bif1BBamLUpHVz\nKJPJl6RDpfcnGsewibDAb7vEUcihwVIEc2Wy/KCaZxe9bEixtmovdByL6ZfU\nlT0/4LM4/bPabZRwd+g1bZQ6ftQoaQHcTICmjELa26XWGDacYroIHswwys1u\nUkKKU1d19B+9k3g13iaUKO9UjdlGOr3gu+1KjFRkgGKc1+Z+gmN9QIIpeU6W\nNroEcRNHpek/dq3b65xgqJPwJsm3ygZjjb62TpHzSFHeabLexw1fy3+y8r49\nSnC0jeYAsYBJ4oY2QP2+HXXboNgKCiPzzaBKT0AeUmufzVblU7mkMbk9xaKO\n/sBijZKg8GEPMjNoLiGv9/Tt4+h7aXSPq3Lch/oQw0SxL9DV9dNAl7q7yqbH\njRh3r7oPzsGKKDFgT4BYOgKZOLDyVSLsQqrN6mTRjt1EgjFRCFdR6Fo4d4V7\nadfMHV6JRR+qeM6rkpDfCgqdOCYB+v+2rq6YqnKJxYfDUN1deMA45GWvLuom\nwHYFGMVCvpZatkqClcDNYuWQOKO5ovpSql/UBaQZ3zY5XOlnoKgLGjekdSNF\nk4mfeeJBxOv4JRWf4JEgFY8pzfyGGaF7+xTBIbLELfljMfzat+w7Ur24n8nV\nEE0TVUn3puP8p8+kRE+2USnhsXPADd2wwmXkabtMhkZiiGkfdH51DAmTtkSm\n48bb\r\n=BP2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/density":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.e59906a57.0_1588347766939_0.08551728989792307","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/icon-button","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efd2c914aefcdea5d41c8a2116160216b85c5cc5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.c02712b59.0.tgz","fileCount":37,"integrity":"sha512-yD+lcxTM7zsZimzcr+Eg1nPD7FWNSrKHRJTo0PP+Li4cbcLTBWZJZ/v0rCuEIu1eionK4Tb1ESMjebout9gVqQ==","signatures":[{"sig":"MEUCIQCg5Z3O8vZsLukGznZgHcZYcsmWJoHhpObsthGBc8MgBgIgP9zhRHEm1wszqyR4TBbSDsKYR10lPeK3wjJWl67ps+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmyCRA9TVsSAnZWagAAzj0QAJaD85pWTUXlZHjWuKxF\nQdpdZuFor8qfxxVQmMQJ4IXWST3pp6/sN23apPJKeU7fK9845+iJaZqmUAbo\nxNprSg9EsIhLNzxRsMv/3xgNml7+1lvp0hZWrT6d66Z7FKl3GkZcG6UMgMNZ\nyQqbOkZanWkvhYAxVyt3P6kauou20Jku/s92gu02bq/9umialfJYY3qT0L65\n8jjt3BejARNAZ0h+fF2Ay74a9E4h72i8Kyvgm/x5FtOHS+m2pZIOTtFKZhYg\nkmJI5QP9ed7Ui4v0uE8CId0qsHnR5r5yYsbfomLVAaMUMwWjeinfgohw9sT3\nEVkQXTmwrcdPZvWFhvyqUNdN8ojplbu//R61A++KENujTlGNZHtFlqyHb33O\n/WA/sZ5ki+ptCGrVnjD+88jbFVQTVvKVWqXsvkE00xpJE5wo9tT7F+/ToBzO\nrx9z57QMlrqJkMovxHhQmuKjjobJ3Z0QU0v+wKCz4vdF1BHMWkBIhKXuVcUp\nrEjpPiVd5Bw+Cq0QWz85JbiXMZDzIS1nTe9J8TzL53fDuTVx99igKnbKruBX\n2xmHL8iTW1HYV1/WkytlMwOF51dWsMr/PTFk8h+XVD/VC1Wpiaep8DXaPyaV\nc0ctImz0ArketIKA7pXqohEKOqGlsoA4NQUO/iOxWE5W9hDQ/KF2kBKNbE1I\nNEwL\r\n=BR5k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/density":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.c02712b59.0_1588357554393_0.7933836331777189","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/icon-button","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48383889ca3bc533d577707a2296ec7ab5972c7d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.15d65448e.0.tgz","fileCount":37,"integrity":"sha512-yUUwh0UbAIKdXKXKSWoW2y9ymFWMvWCZzig3sbToZcRToY6mbNrHTLy5/0yvHlAa1zaduCVMyWtMWrKJiLBv8w==","signatures":[{"sig":"MEUCIQDdZiwOV34VerM5RS4u/juDBm7zuFFL1P971KSovj4LXgIgRw36XD+7+dbUJPypepQVRxlsuAsry+zXyaJLrBSLc20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcACRA9TVsSAnZWagAAALwP/1Cd0vg2jV9ynuEoaNhh\nUtSO/HNMCTuD7Z6J3uBMbxKKxCFU/qdcgO71vLKWwd3wX5GHk0tEKSVwtYHT\nRCOp3dkYQ7qkk3x4/V4N9VspbJCGmRieH9M/bnQJdQLVfVU1UJwHW155lxEj\nr1TYtmCW/uv9soo2IpsEx2eIg9B7WmdxNtTZjY/cJDlYmIRj+dcGsn+oipcM\nIVIQb3dm9Vird/drEZPIy0224ZL4iWjD/vW/zzpYFzpdYZMv5eTOWzTOdRcx\n1YsJ1DE3AUoSt89qGhojxXZjjOJUuesgG7S4GSztnGAxiw1DaHm0ZVPyNN4Z\nhVOQmkcoyktwacwbINVHCbH/tG6gFyzyh7cgDVZGBzOWU8d3oBRyqd4UlpH2\nda9yALMeMDq0ipozCkFJH5Xri1b8EAgURuc/+v/AEmyaK8kRj/n6EJzs552n\nncgG0J1Pd1qyxck8JpigUrHVg75tG88/JEskoS1YTi2r+D7o69rmXQk6/jgW\n0V+KE7zfuyC6p2ud/VUjSb37o8imYi738xem8Gd2QmrXz0PRkgykSdgN/Wd6\nS44/D3bmxwjzXImTE8E/KTgcPiXLJvpclBGVPtzR+r25BPLDUB2a3pjynp4B\nlQ7qZ+AKMDFs5ccOHXpitFSJNmpiXjAS58x5cr+HD1JONRSpX0TxMZ9FlDNd\nypl1\r\n=MCea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/density":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.15d65448e.0_1588360960262_0.17010850078531758","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/icon-button","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5810f21e1dd9128e8aa90dbad43ccc575371cd5a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.142b1549e.0.tgz","fileCount":37,"integrity":"sha512-FMJumpNwvn2OpVsJMwRWA4kOubo7r2xE7D6AhNZ/vAwEyBQnqujLQsZrMpPocJ3kcinBvEtG4WVHqvsJGoYd/g==","signatures":[{"sig":"MEYCIQD0pJXo2ZEj3Yq15Xgcfzapl/RbozJt2iL09gBgqxJu2wIhAP7L0AnCHgUbBZIieFOx6ydzNGtqYhpN8ZxX+ucMFXin","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRMCRA9TVsSAnZWagAAnTcP/36KYd2u/Sv5LvIDoYdc\npUtEnFLO6uk5NAbiFBJBE6kYP1qL4xk8N4u0Qq1CwgKyEVGVu3XbMU6M7gg2\nZH7o6zpg+OGnisAgvLkU6bUAnSTfPzJMsEVGi1dKVQFGH1WcEf3lHglp8uAw\n6brXmg4lXv6xm9z4+kHWMmfzq+7O5iRQ22aCaeuYlzRpddA6F1Lhqgos1W4x\niW3OuqjUircsgaPlxTpZcqoBIpDsvR2Hg0dyIcO5VmXhk4ZqSrFU7HxBOZn9\nU2tHiI+Fjh3cn2FZtlTX1PXTWdbcNB+hxaEsd+2J29El2JHlKBQGan8mEsEk\n2OrgVkeBfUlYgnF+Mua+Gyk3KcjWoa+pow4FW6ZKa1dTZVU4tNzkpeDfRVqo\nfrbwN8ZUlkLnvUi7RmRf4289EgmZp+f50yrqFtug9B4zL7XXC+93Kn8UXOsT\n/jVig9Aleo7S2ziZUFxQbv3mnFAEMuL+O7WEohWdO4hoqhkXJDIfrW1DhxuJ\nVs1V7KwRJXPyf8/bFwcxtZL1cBr0tJHh6KBAYCSosL00Pq5ku3Ri0M93N7QU\nCGdLL651yE6Wi/r4vkZIUVC50tsLBF7zgPmTqPGxRhOLUSBkIH0pEGpkrqUA\nA68VCgXLB6+98PTP5K6iqJQ01x0qNKlJQZ7Z6qcRmuS0xBYewWGWItC/MJDF\nlIDs\r\n=beOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/density":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.142b1549e.0_1588372556264_0.5959526684097827","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/icon-button","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"202b9fe2dc5143c1b4e6ed6c1a446d888353c571","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.524b7b812.0.tgz","fileCount":37,"integrity":"sha512-3QFLIqXe3nJMeVWgGILKVnKwm7FakU/PKmYykuyVL5ag2BIpchHtCX1xgt1jcNqqlhlHYcajZ1579R7iBnam7A==","signatures":[{"sig":"MEUCIEV3qIKi4UO5teepwdywOjt/aLMmxgJEOlb8UmBkqi9mAiEA1jpioLDsImKmujDx2kzjOsIOhqTe12On1S5R6nV7ps4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3tCRA9TVsSAnZWagAAdQkQAI5gFM5e1ldyDjxR16s+\neYZgCFyXPjnoKrzvqzbMh1YWscMHIGiO0fMfbnq994ShQLXkOe7njJofgmoX\ngbbH6Jx9bNn3Aq6cMM+lXT7CKKdS58BdKksEfhj1kP1GsXzJBXc+/izMz0ef\ngUyL+mlsL68z5WM7MVFgmEjADgt5ucjHjMkUZGvOzDoLxOQTQeEKZe77v35x\nXefNn1akhI8UIF90tQS+aQJ9O9pxlJzM3i+/yghHyh/KlUIHw1ow8cFSGXZ5\ndwRg1YbCioEtDxRRjMB8YuDcrilkFB1qhT7zY9tu9YCdVG+3RSCQMEMJZzfO\nEDYgZbcy3GfETMR2HOXmP3oeVrB3p+njNjPB9T/2JpZaXaQjel/A/3VTcL+8\noUFD2gX7KyYSopDvdSbY1YKTCDoIwLC5iGIQnCWqN3/lQYYlFZK5VePKktkE\nOX1U/BbVAWY+CTNFljFNOcaI0NTe5tjhFlHMkrQAzKHRQo5GvZ3ruoDz2wJY\nrfCF8gEe26C2g6aYyNKjrwjfYqsiT9q/5PCYP9toA0O5nB+nKiZnHx1LqHv2\nq0D4LmcNidMKfsJojPCZDXjm+rAFvStONe1UEWrOIOVrXDA2gsJOyZ4OJ9Sd\nD0FfvFxXOYUR6t5AsvpZOW2BoQtEGH6V60lS73MuFPMnL1qPGW+qD96ST1VX\nzCNS\r\n=pYMU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/density":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.524b7b812.0_1588538860658_0.20529291026620777","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/icon-button","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d30bc3fdee5328930071f22ca24aa93b4d04f5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.bd8ca9678.0.tgz","fileCount":37,"integrity":"sha512-9Zsg+KxL7mzQWKQUz13UYp2EBVDUlNYcYkd/IKDrenJ42vmFtTk2omfD6E+zIbnaShn5TsvYRmcas9ocMQ2how==","signatures":[{"sig":"MEUCIQCibzsBYPAnEezX5fYVvP9TKlOO+QtRI3bPhpHDvbIBMQIgTgtCBacfn9e0vJYy+TxICO0cS9gJ+AHFXf0W+ABXl8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6MCRA9TVsSAnZWagAATUcP/3chy4x7rn1rq3kne+we\nb4Xtzlgj6bxy910wexDS2c5+8OBVzlIvl5OCm+ylUKCsvRdCFFTQzkrZ84cz\n9ibCV7iKUmW1Pqnz+oN51MgdHnxBgyAIKumS69Q2SekFz8LEaG4m1POlKCUF\nUcjxwDYXS5FbDbGVi7FYMhFVzr5TGT8WdQi32GUCdmRrQ010Uzc7x6xFyfVS\nvVZXoaTdmwDJeH0/bJub8GE63qXz0BLmtU4EN1LJYhMuC/X0cWHIPrTkyNpY\nT9IJChNdo9axKxI7Pu2Y3S8d2FBgGjpJrY91hyBfQAK/uk51B13VVcoQB64O\n0bpe9AbN5he7fz/T01vqH/B162zUUx2+WJAmn9WGDGUwUd8FVEW+lRqzriuf\ncfEtEaQ95VXUlpcj4giiG/TRdLDqun0NUtzFoT5Mj6ru5K4JOPr1wu1Fmi5p\narfPqO4qXGD81EMTcr8Mo/h48lvIzEy11Ui9m/Qnm0OOYjo04MLu6L/0Obeq\nmN+1nWdl/GSCeRToBhMeerMqnsZitkiyA+N2PK/McqDooZ1uiu/soFutSBMU\nnDAWmvkrNpV5KydosnCj+pSmHyW9BufjJVd8Oqly343aAINQoI6tsqA/KUTz\nwXUsoSIrQVvAURJObOHp99u06Hnuen4wBCym90Dh8upnQQfISZNDhiMFgTum\nxsyK\r\n=KBWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/density":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.bd8ca9678.0_1588612748453_0.9128057532301164","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/icon-button","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f56dc7e4e52afd7f6bb3e857285ce08a06c146","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2553e86fe.0.tgz","fileCount":37,"integrity":"sha512-aSFjkSc/MT9dAvVaDcVmAYbLuluD+GNlZrZACbcHhjKSGfI3khSQ1u22Vq6RW7oNsFk2fDMVTl1oGPpDsRl/Pg==","signatures":[{"sig":"MEUCIQCAOchuzS/WcOOMnCVzKMFGUY8ssPTkljTbuJnc6WeOVQIgObVnxl8j92gUFZWPMgN96cmAjYIdE81a5UGwhDAUuyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFF3CRA9TVsSAnZWagAAb/gP/A+1g3iS64GlptpS17lX\nsaiSeSCF1H5WHfVwfMriu3Zns9OWb38MeQyd8JH2X5ZkgW6dzxuakTkGrGQ7\nw4F5QQZGmbDkp8MWbfYWm4O/RNciKf79s964UCBa2VU7MyVdqnjsnK++9Pfh\n8T3UqJjlIzxMfmFezDmy2qMXSV9rEchB01CktTqoSPI/MOndmlzqYki0oa49\nEuG7aAGrI85ijXlYeiNKW++YyQ1q0nFoaSCjnytrb4fToC2vQbc6PvYF7ybV\nF+QOEu+HyD3Bn4/p7/hv7SgUUTPZCMaBhDQ8SM7rF40G+CmGDP2ZjHSi3cAZ\nZgBT0CU1hf8fsKnpmwDp96h/XPdqJaZY5n3vYuybSPDM6Fbu0rM3jAKIgdy4\nOMxqyGilvdbq4TNvCKE1DzCON26uls5a024LFrwQBh7oW1HGxW21/kZP+ANZ\nOjf+3e9Lp3k+MV6nqeMgGwoqN1lek6n7Ym221ZHNfBhYaXVFcMQ9OzZ/nZyl\nrnHB8YI397FO62fYW9VR21YQa/ToMxZQGO/C/TRnhec9ULN3H0qQsXScV21w\nJHCWWsuL8w8aRxzAyrAd3KyaExLqYOqq817zybSyW4RX+N3YhdVz1W6vKZ/M\nuMIP69TZH3KnvQvec7E2JwyuWXElIl/u8wPVAxnaRTIHd/6uXxiyO9Bp9TDq\nHzNB\r\n=L7Bc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/density":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2553e86fe.0_1588613494932_0.29196404971471046","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/icon-button","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c5b025609075858bffa206d517cf48e9e091cd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.03dec929e.0.tgz","fileCount":37,"integrity":"sha512-FtCQr7bsqXqUAGDHEIKh2z3JdFFOtMU358yLD8HGNirsgkTyJnktbU0Hz0J1w6K1mlaakruGycKpmIwsiXQreQ==","signatures":[{"sig":"MEUCIQDK/UmZkBeZ9vbDr9p4X60B2x5+cnAU5+xlXPKJMfUk9AIgBPPEtrfslUds+qGP7H1WfC8G8yADyslkVv0Kp7wmd+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZuCRA9TVsSAnZWagAA06IP/i/Yf/1WP76IzSSv/rtS\nbqVgBqIevdnhmNs5XmtPEPMtk4/zKn3r2HAQH52CiBHZZV2OTrM7FPudvdv3\nBR1yh8fhVLPmrgtzpbz3F5n7ufEdAguwR/IxUJCtyN4WIs11xsajIjLwu+QW\nAsdFj2P64cas8oOXRFxsDiQAO0KZsHuCONZgqvULBSFnNACrIqo3jYzO0Hza\n0K1qYyv4Rl4Mi0Enwoe6F//10d1bqTFadIClVKI28DooAVKpdgomo+crKc9o\n78W2SjYNUYWpNbbLMMAgnYqPYtwlHUaigqy3Hjk1p+0YNTnQo60VYtXWxN1v\npUtJSWTeiOXkONKx6UOdxvDIhR2Q4UTTYqdoXg4JwIMRwCHObSv7T/ZCvZqe\nTFBxcusx3lgRHGIrMdTS0TepUX168QlHBonCHX6b6zoGIWX6frSHarMPeJ5r\nSBzl3PEhcrDXyjKVVmM+dzrA6nN1FohBhTT0BKamf01K7NJLlyYwWA6Z4sp3\npx4GIoWyx2oa8P3EQaPJnqBCroCdFSA+xz/cXe2KjsD5GWUcgZdx1lFilG2f\ne/BP3RA+Qk67n3CMFy2lr1RA29P7/MaOxJOfrmgk/NJEPyGq6zDBmlJ7unZy\nUEnI02cPl63MLZKBiPDrgffMvwzC7iSXhXeTgRAZUHlCiSlK8IrLBBfmL3B6\naw0h\r\n=wY96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/density":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.03dec929e.0_1588635246546_0.49945167923617406","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/icon-button","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3cb688d9d0bd185f8c67e4d255c5095ea9941fd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d92d8c93e.0.tgz","fileCount":37,"integrity":"sha512-7LWQ4rStg7xiLSQ1DUSOXmuS5oyLFWt4kuDiMeqraapluMFHwFZ9RwmmliE+KhhZGHpe/4VT+M+mR9ZlG507oQ==","signatures":[{"sig":"MEQCICQUsu4/Got9i72ZjAwv0hq0yHPNpLKbgrKtO31zpkZAAiBh+kkeC+RgAEsRvNnmUuTBhUHIl6HOOOoaDduDn1ccmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtgCRA9TVsSAnZWagAAzKYP/0jpLfwC2T8k4uOM1i1r\nq4R+Mimug1muyunSwUIDv618xJ9H8yL/cSACwONbJRlzmR3qGR76IhI2U+Lo\njSXtUUrLUp0PdOTBHiop6YORm6U4HesF++k4319Kx88mtYIi3peJpotXbW3l\nPrg+Q0wy78co5dfuMnRsLDGRy2NieuAX5G3ak4y8kIinhXRn+131fI+DBdNd\n1IfZEAX/NR0tnH3oAyrIf7aeHlflCg8V/vyHjwP+q+cMcOy9e8VgAuH22T0e\n3+wLCVIZnw4DgpqiOZVNWKA8fDL70frU359m4gHkBiR4hfspoScQwdaEpzfi\nUOOqSF7Jwbe4JeCHboqUVKK4EEATlwDDxc34oMm1XE8sWRzbozjg5NnEvklD\nCSmecMmzsKS1pBgySigIHCZ5cz3LaI4rYPw128sll5Y0Q51LfBnwdvw+GLFV\nA49W+UIDf3PcHLyR1t0Qx+oGRtXHm/sOl8N9VNGEbMUnOLPo8Tdx/Ag1MywG\nYJbwR20avlY7NG87T3VTMMUbyHS4byZYdjdAR6k8yIx3iZqhqvMDBUjU+5FM\nJt9INnwt4JXfJy0YxzfSKWZAzjXnpEpCsHwRXK/0BQLNYHP/OuIdESyaxaA7\nyyVp9XtJsvIorhtr0bHO27T+1rFTCLF8xsD5p+KjcNFYuvA+8pjk9FtdI8Cn\nZXgs\r\n=NGqT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/density":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d92d8c93e.0_1588697952307_0.094787257242263","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/icon-button","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9c1be134725b94cd39d407219cd7122e4d736e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.09f591967.0.tgz","fileCount":37,"integrity":"sha512-AnOh4PxuX5J4HKfz4WzT26TT0Pm3oPP9wpixme197C7KJbCiWYgx74mMmMYlPqSSMV7NrdCqq2MR1ltaSej0hQ==","signatures":[{"sig":"MEUCIFJpyQtlOXKQzOBbFyeRPrYuKem5uyHvG269m+P9Uh8nAiEA3Slepd1VuD0wqky81CI+e7ZTh+FvX4joiHXqpSW4jYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTgCRA9TVsSAnZWagAAa90P/1tTmQ1DEHynZyE0MsfH\nbfilckU5WTqOj4ZoSjoVkP/9stmNjdrodvoAEYXaOyu5P+RROpbvWIT6yetR\n+TSkuGJyZPXhIUs7Cja30sdZ34nszh5w80fEdQiocodtF1oc9whEkjKnzXSG\nJLsPodOxuv4EQ/5vBfzcNbXnyuBFX68CFl5OStd26GS+BcwLLx50aJYWIExy\n3vVDeFlFR4egDT3TqZVpMesrfg6aMc0ecDSPB+aonzhFwhMNJITmkJ8r8vVr\n0uwxs6FXIp/6DE6Kkny/+bBxeHzwyelR7vUzg4TGt1aFOclLpDm5AbxkKqPp\nqMLuQcUgNqTqGxiSybALm1SgRWkaXcUOIyZ+gButyfu5aiFd5VjLNZgXY23f\nLquT6bDWyAuYRKYV/X/9h5tCPzdX7Tj05tg9tJRkyJ5i/6vQH4YPI9wxZE1Z\nKaIT+Jh+q8/pkVe5WNpXgAg8cOc/ylIG/dEYhJ9gevFdYUA7O7m2jjR0MwOo\nuzATuGXCEcc3riZ7JpFZgBuirVtq5AvnZO8S8rBRUm+Y4G/Xk6PjXcamfW/a\nk3c/ztv7SCPNyMyy4TvPT83JXdGwAScemXZrBaAGwkEzVrcxLmi8bnWF8aU/\nL86mi1PskGf7+aVfNQqqQ3M1Kj6RhzCnS8IdZo6EBMoZmk3fRxMCDM5AZLzy\nHNiX\r\n=gw/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/density":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.09f591967.0_1588712670964_0.46657388115224907","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/icon-button","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b856a9c79f0aad3b3f1f4be84c0b042ab55a3fc2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.3846ce311.0.tgz","fileCount":37,"integrity":"sha512-GeNb7Mb5tfPZ5+C4M5bwALXGTWUeaj4zBEAgH6d/MwwrQLzgHiVfGIKA2HML1R1ztdwUsNfPPToBRi3FgoltNQ==","signatures":[{"sig":"MEQCIHLKUK8m8znF6GNt1ncdpXObcB29OSpuYS2gL2lihU95AiBcwYJy17zjVcfTrrlleNH9jjxj5zgXkCOSjYTnGHIUfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUfCRA9TVsSAnZWagAA8KQQAIfpIP9LbiBbCzp6g2LG\nex/EsXhV0FGRcrEgHkh0EfJikxEd9dhco6X+b4TuI/hretmJV2dBS4w7q31a\nl28zHhOYq499E8dbbrDi3smtIrEVvK8ajASvWeTEx6jD3QJqTyMzzZk236Wn\nAdeYELwAmOM/yRLJwF2A2wpnZcPkDzmUzxpNyf/1uK2WlXNqA623HCz6SsTq\n4RdzdicMXFwTHNh+ZjpJh85G2zndHMqbPPS+Aw06/oNyHG88Fxi3jy8NYEIm\nwpD6yD49lHFNrrmET09cFSHm2OAlRX1y3oTtyvzace/8N4usziR9nwIewWhc\nN00OzS+v4GcjmEJCCBr80tMIPeC4psrBohN9JALfslurFeH7ktRGJifPg1e/\nblxcsxrgre1avo8/mHrMSso8B/Jw1VgxZxFc42azxciYaA5B7oM7uAvqfvVF\naubwnpaE8X2m5h69z6TWaGXyuGDLLquBXvl1E6KcgDI+cHwfn9Pu1lfxlo+J\noUCwI1Px40jSV589gpLCmHXvBE88iy9n1Jx1thgbMioewW21L3/pH/DzeytA\nryiKjlyrHEVaLyWI/Q/+fLoHGK2hBuZt0yCSDTuSvwpzxbNhg7lXnYPek9JB\nIIKgmCE4qC/DVqj6uB0Enp5tei820+qX+tm1JUkI8T1C0Pl+PnfQlTd1QYBb\nT8AU\r\n=C7vs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/density":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.3846ce311.0_1588774174740_0.12399271821421332","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/icon-button","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc734be592a71e9d3d3739dca271377c96c22f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ed7f32463.0.tgz","fileCount":37,"integrity":"sha512-dq0rhpkqXEQbaLPpCY5S5E8MbrLELSJH/8ZlSbivii9xdKJrKHe+6gp4KGGVIMKzJB1WNWuI5H8Gn8zVijtckQ==","signatures":[{"sig":"MEUCIQDZStD1qEkNr2/4EzqRPFFhH0ewVYmyBEoptdloQmd0lAIgReAQbp9JbCDkpTJPIRcKx0t6r9DbiKchLenkaAuBbpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDeCRA9TVsSAnZWagAAAtMP/RpWH9aBTBveu2RUWnxT\nVOnMjwHpU8dtBUYyao3sWuhsLySVkIvs3xFjN6QBkiV0+edHJQdlFKh0Pkl7\nyh+kjHKmTb+xyB6Xpp5eNCzQc5Z3MsMJPGPJ27ImMjlcetyNwcr0/p5aDq75\nLPWSST9byruVdbullPjLDnFD70k1p13vWf+jqFXF8eMxt6AjwwSel9DeqrI0\ncQxrOPTlWhwz80xOzISebjPLfA87JgBJGyvqN4NdpAgR8szkyEZX7C0Uw4r4\n25QqySqF0yb+qAxPCP02gsOrZM2XePwXw4l0Zdi1yzt69HIWRZqJNFFxo4vG\nvbniIjMcvJ3HvlsOizULzKReoIONzL7LMpL8wC8TNGODGsM6ORbnZbQzJytY\n/8zBqnOBtO3J+S1Hd0EURFhGLoCJmjZkLl6ohSrNx8jSgPgZl+kZuDIkNTFx\nzkpdjZjTYpzjCM57+cuWIELfI2zyUOh7HrHlQMTh/Lph8Lw/CVOxumMoyZGs\nO1PD6CyzaJ4aILOEtwEzkPt/LnDqhIx2OUtPVlsUVH26VnLBsclUP+enp9d8\nm2T7gcW+BQNgYRqddCbdZD3jIpow6bGytGLOBluG61Ss8mIBzVZEzuuS+0uj\ncmZv9Jz4wVujCskqx/tYrq+/86DqjCDHjakECFIEVy+NIcbZxrAmP4z6OPUh\nfvfv\r\n=j3Bo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/density":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ed7f32463.0_1588781277634_0.20336226901885612","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/icon-button","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5ad0cc19f4c972549d5d7006531ba09198ca523","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8135cc085.0.tgz","fileCount":37,"integrity":"sha512-zi7dg/DIpQ+qzknVSdr1bzIdTxPZMkH84vwPp3RzRPDQ/TlSC8wGiGlNHyhNkSGHkFDO+RyzCE0hPJdvgfnywA==","signatures":[{"sig":"MEQCIEiy6Bx7fHl5Re8nCG5V/k0Rygw8EQG19IsHGEedM7tvAiAvc15FtXihS9nDoa5G6CyRm64nFaQIszXgIszFTXZGwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYiCRA9TVsSAnZWagAAzEEP/RJpKu2oEJOjHOMeu34E\nUs/hFCCAKLmIkDkfyzO5SkFzxsTVOn+Kf8pm6H0jZppNOPZZSPmSrYapKJCT\nVIZVWS4+sNCojURsY1LwwsOBi0QhalGn6/OnxECUJvmyGteu3sR2IWGNOFWH\nTVokMfKV0BCdYcIoWqSJBXrrtfkXu6gItQCHoJpcZhCtvVshLLUHzeA1hxlp\nffdCVDr2zDHvqgJ+ji8U9De0ojXcibHv8GF/xKLHLJtKvxYAY0Br/LENecIM\nAxhQw6F28pD5GXcf2j+rRls8BWseS9I/W+hc11TsA7zpAPdKX0BetCE148+A\nJOyQ6VuJKZ/TBjx0LOj2vHCSRzFg/Zj5QjMphQE6DrbtfZ4Nu8WmEgF3PesH\nJWnSzWcz+bUadRQh+7TL5q4xxB3j9WTwN/W6+1vkxYWtrGd7PFAPhr3Rs6Of\n17N87hjaAQzzUMUdE6k0qckQHdSGsVYEKWt6tHs9nYVSQEJCLoliU7kERZcm\nNsxxMovhm2E60KNVT9MSC5kPm1S2mToAuV/mUShOYtVCwqf6+LvmFAPBL7+e\nEuv9NUdpIkElMjYVJBlyFznId4LLEI8rpMzXubxqQ98u1OJwrdJYt4WAwOGT\n2qFBHRxxhymWKAjwrjCj4mHnFB8/abBAvytF0Bhpd6o8/t36m3zpQ2echWGI\nxTsT\r\n=cx0M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/density":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8135cc085.0_1588794913820_0.38366319796443804","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/icon-button","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"507e9482a3a51de7bcddc2cfe25182a911d9aaac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.deb212de4.0.tgz","fileCount":37,"integrity":"sha512-w/eHgBKIsgVhOH/Ip608x3e7YOc6w31+mo7lnnqEwUJK5VyJi7L/jk/tZwrnw359YVNdCoV09nqpgA3gdR1cCQ==","signatures":[{"sig":"MEQCIGrArMp8YeIXfRe9lkEQXwvhMT3qlgG4vP8kxdEw+Th9AiAkAbc9OY6KbK7+wx8vYzm8QvTfratxhnoXOi9acVobiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfICRA9TVsSAnZWagAAUMcP/jOh/0mbi63qPcY1qhkE\nzlVpiFZzxudNUYf63fLxJ2eVXdN05NV/Mq9jUo6dzMjKRA0rL5O1pXEWBRMk\nIAgtCHhCeEsizyHtlZ75GFwXZGTeYbG3Zb4E06boWoJu3r0wtDu2Rn9OvZsR\n/FEfHj0qeC0xSsnIJAP5lyUUbPbnsjdYr5sdzI5ufLxYGQNTBOjpFYG3RJJ5\n4mzD/QC5+T8szWzF5vvWV1DM4SY/l7Ih4EF9n5gc+wP2z/gaJioygiD0jq5G\nVZG4H5Y5xzpKpWDGUaaVv02OoF2ncSq6vW0W3h9aBM/5lipjiXR2s3guWb9K\nqJ2vywPhn2SjOgdJ/tnZZInxW/k/OV637bZacon9rVG23WWrkmQlWbp0r0rT\ndL8Lq5Fupdr2XxGaSeMpqujne6tEeBPlqMG4GYB7uvKvChAr+TXzTIuBNdLl\n/t4BfoEwzIJhevb8EPO8UhHuWog2RryRVDIZBOr5mxgiYG+alb6ZYDkoKvrY\n9R4UFwvlNomdrF2YFIYTORN7UOp4PcSOozcTM4drLjDZMzYJLbJB/1KBucAM\nAu9sCUiiv/A0zKqpGs/w7XPajwYgxp7ta85Jp5b6RvZyItUDFQRUztYgc6PX\nILEbIkqY+yX0D+A/7n+7p1MNhCMJyYfAZMXBfirM+u6VIGP2iAPD3Di7ha18\nOvQt\r\n=DBux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/density":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.deb212de4.0_1588803528200_0.4704982607046917","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/icon-button","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393a3612112f89cdd19790e467259adc9b7e7156","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.f83e00898.0.tgz","fileCount":37,"integrity":"sha512-3PgPKR+onr6ATzESxScPcKb8P2S0qEyXn7w9cOSfsawD5FX+uC1yC7jlEu+bxj9gwvVsZatmWHOlSos/z4MB0Q==","signatures":[{"sig":"MEUCIBD0iPqb5nhVkpc5z9geTUXGTMyr7oxsDAqEoTv84oIUAiEAuSAnLN1DGEJWEoLpLQEVvWfDX6NUCnuK3JMHrxKdp/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwfCRA9TVsSAnZWagAAa8EP/AphwO6wFHElS5jD3EFE\nV42ke1tynhI2vU5v7VYH0/HNAZI1twkzLWfp0ssn5vhuGvsgYwn1/4yg4GZr\n/ZmMMnc5AFAgyPxZNQveYAhGKmV/Zh6NivWnRu4PiDLwfWF3OOkbkMovxo/7\nN1da2fVrSOQc0KStlv2Iz/cNCtFCXH27RXK+qYqO8Xd3XyHpmcmh/j7RssNV\nmss/jpsCv59MHMtpnWRdlHSpwCIcpOjEUiD0tqqixwCE7jGTdmmzSIp6bqEu\nE6IzuXsoBePGr92Ia9m1ogM1ss8g7xqtvuchw1cgMBmApTISBAVJ4QLwEkiL\nOJgY1ZPfVPUW7SFzLIV3cXaVSse8Fx6hg45oNBC9pu3upzeDkZUA9yWqOxiN\nmKP7Xf5R5J6chIE7ZcgViFXGMSBJ6uTNP0QfZARwXamMCTpbfJ+rDStx7aD+\nQn/MVxrkXUBi4fiEczhJ2fI1hclYy4Ph1tCzoKBa6keM1pXToHKpe/OIevPt\nbsctm9Gdx3Q7Z8Qsdbyw1Zbu3TBIq8SXsMXxdxHl+tRlWczNRSYRWwvekcMy\n6H2SjNKBbZBCcgBNyt9YUPL7z0aY70kvf7U8bo01w/3xDmE+l6xYw4+CallC\nXWH4Gu4Eg0kW6cr6nuOUQ73karlHeqpdbmWGje7/l4wk9kvmHCVG11t1DXdD\n0otX\r\n=gOSj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/density":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.f83e00898.0_1588870175515_0.7473980437310652","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/icon-button","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"995a391af6c9927f54396cb55e10fbccbd06b531","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.047e6b337.0.tgz","fileCount":37,"integrity":"sha512-G5lR6UHOGKvFq/jZhLxCE/RT0DwWcacAMh8tsQEsvB4zymEkLRVoheKCmhCKBaRHzbT9il1dXJ8+Cltw+64R8Q==","signatures":[{"sig":"MEUCIQDhwNDK72KlcG8JOyMD7L1KANXZA72MFdI+ByWOb/eKOAIgCUixRx/PBC0wVtHH871klzTUr6fzltviQv7uBrgtlt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacnCRA9TVsSAnZWagAAbYAP/R/XWZ5UaATZE/YyzIVg\nnt3/K69XXSmWF+Ol8vgzsVbXoQr3fFVcx2B/4SY5b4oWOKb3GztmurlJOPlF\nbQnl4sffSwzkWP7b+nf7ATW3aAYLonsnHphgW1rRPOz088gtK6t3svl2ybxa\nKqQMFroBVEiQhLA4Vm79f9ioFSrZM/6yrzTmNF7BRp1b5RFYrjbO92RPBCjO\nLS6huVDTLyNJ0H/fjK4KOokG6Vv3J6iPEeV8gUw8NaeuZKbomI35WA3u37ia\n3ZdVxed0JCBYWAnr7jj5rX5G7mzxh6HCwRyNMlshlKe1IPhiUoma4HDrwPy5\n4/p6ui1IKbDYI7pyoQp2PoSAn8D6f2ASHWBEHvIfUM2lPWf+9EQY349SS1bA\ndJ/YHv+W5iPtnTtVHzewH9/YjKL6qD1+3LpKDpy9AQoJCPHqEotqxEiJsDKX\nx2Im3dI/1DUiWE6RlKGwrVVR9/Nf8xAHrcp3lJps4lGTI5PRBPGd8hWVwa1d\n7VAOA1Qjq2etv6Oj6Yc3ruTiyo3QX+mQT0tkz64dEL8w9JqloBPN2nITvly1\nwGyQ30TJcHkGBg+ZtFU+LPczr8Akz9Vl9gV0+PyvOrIRfGOV3tyWoJ2xw4jy\noDit/D04PiGCVQNOM3z1CAX9ir5/EX2EP5LH/2z1GrfzK8PblDoEub389YDO\nYuJe\r\n=Ut/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/density":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.047e6b337.0_1588963110292_0.646435901359594","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/icon-button","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379bc8292cd5c52c684af2916ad1b686af9abf97","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.119e21426.0.tgz","fileCount":37,"integrity":"sha512-ip1PslF1grv17JeyeYpg/tmuG9/fnDsNOs/zZQmZBGgflh34t+Q68Eo2l+KvUP7YoMYESrjMr2+wPfPUrkboIA==","signatures":[{"sig":"MEUCIDqeuwA5+IOyeCm3q5TaW/Eti8me+Dby0S4cZyV33p/RAiEA9r3DLI+S8ozD2dw8ptxm86QAbcPSS4e0Ry2JDqxuAB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+eCRA9TVsSAnZWagAAp0YQAKD/xia2raBXAsS2z3qH\nWxw2iu7hztFTWJZFv1M8kRWvO33nf8FUgHTs3KSceHy/8Zy/WFdbiTlOZjYK\ng8sWsRsSJiz4nJa5yeBj9rKK4MqagSvIgyo+F5eHOUstKEJH12LoPCJ7DTi2\nTHunoWImeHitdOMBNYm2JJan3O765COBuXsPLXN2teVQ+mkAyoksAhe4thxT\nEJC8p0pWgQW+if59bnhtjIOeWn67B9dDyKR0aQHC0tmGnVhyR4M4CTR23lio\nbeZob8VB2prRxrNTMn7g2tuP4jV6a6feOXHfacVNmRWDenUH3uRNVt4wBa3v\nwk03z9WHPNyYaEM7xXg/M8+YsT4voc4nsJ0QfVWHWLXvJIf8NyZv2TjuR1Ip\npjeg1cdXXzcAFwnZQg4uBLKMiOehT+GW3WECCxQIV6kCOaJ/3RpDP0tx9yNn\nBdLsxwr/nSfwC8tMqavm5fDh5vsSzFV2pN2n/PLvIAwFDWB8yfxUUCMu4DuB\nsr1x+xQbdnLZaRg6BlanEodVM9ztipRwzImMk9UYcwLqhsecUKaFpB21aVMR\nMcgG5JwHwIQt+IDRadTyRQaFAv5PclgyQPdc2mEJSbUgEUkfF85Ks2Ud3vG1\nTFb5s0qZHl/bZnKBY8L4PNyqmBPuCLSLA2FKF9JDntqIFTBXFwMFWb/sT6TH\nfUli\r\n=lu+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/density":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.119e21426.0_1588969373876_0.25421709081042976","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/icon-button","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d26fe4262066387a47c050964ac493336377f33a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2f052d824.0.tgz","fileCount":37,"integrity":"sha512-Vp2yAKg3YSPDNQf68jR6Ea03A1QO0vLeX5UL9rvEZmaWLUcpmv996POi01THSKYxTYqd9iMQZh6R5xO84GI8hw==","signatures":[{"sig":"MEUCIQCBB59graqNsAS6JqOc78pZ0aHcFXX42z5Fuzc/YZixzwIgOjFCiGD6dTFYhTa6zlssgumQGKnqnK6jWGMTvwvR8QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoSCRA9TVsSAnZWagAAQKIP/0T3qTI7of6VhpowageQ\nSM5ysxalcxHxnEYIwsWX2aOHj4u+/QbbRkmj6CJcCtC1yqpAYyNJKWh4grJ8\npnFUOb4HsjAx4hxlMX7Gul75FrdoK/l12hsLIvy4Hq/ML6N040NUPA/iZyBW\nJA+F5NEEvHzF4g2uAbZhoH/3B6b5gMRkxIFHUDrxcD7kZmO35TdoWqm7HIGk\n0WcPAsCnG42PqDdo00r7hvLS/haiPO15txKtZ8Qw8ps1LoOlauwxOYEk34Y8\nuTNF14UyOPzcitMRJEojGplWSpJoaSlAmC7wpkFByxW9BAgZlBp5xQwzhWaM\nOcxl0xJzB0eX9qcKwoF3a6Q/1Ytv4k67XlemnktxXIAjb/08EPmc4VtN8uEa\n7SDL0Qu9Man5XDMJJ7rG9ct5SSd/shKxA3WIwh4zJABJOLy1PAQEsNqQQxyJ\nd7rlfWPN1X4Q6ez+ur+Vw0FvlV1F3ldczLWMh+1exLruP/WEWXJjQQpS+ZOh\nvSuvc6Ft8YyDwa0XYP90JdNjyCph85LWuqhjAxTqhsH+S67FsMPpd9cVudwy\n3kggUPSrT0OAXUPQHz3yxDYDZw/rAmdjHhDPc4F/y8E4HIVy+5Ws3NFVGUXo\nhTOEEAJIbMdDz+BChEtnAXh3lTenmR14KuPJWnmgqSBcseYqAzMy+noTXUg+\nNWBB\r\n=CPU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2f052d824.0_1588972049820_0.15336010572582914","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/icon-button","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d819d95877396dc8b7db4758a91b76b11a76f8f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.e84444387.0.tgz","fileCount":37,"integrity":"sha512-Z0pUVjOkzYvOT8KYYwIbpfATtF8oZFv6H+dhDCAwnt/b1advH9dzJwlFahE6JhSnteH0FfJ+ZLspYwvtPnWOxQ==","signatures":[{"sig":"MEUCIQDag5+FslCWJRNMThZWw1Z7KJaRnycoSoh1OXkz007r3AIgS6wygO0QKG4AaXyh8TcPslt1OM1uGX1IfF6dTCKSaRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+7CRA9TVsSAnZWagAAobkP/RThqaLeptO/oAoyu2Ml\nD06l6/cwktpKuCWzKY2Zs+HEnThnfgINwAE2F/9TC0uLfSFzbQea31qujcAY\n41TeyzwWkJ2YzFo4hNOknDIZxyHMiDB0jJBIi1801Rgajw31LzXVeotTSyGB\ndapBSPIdXrA63r9NB68beWJdDLuyHoLCOTcF8CxhDbkyYHW1RjtYqVoFNvUO\ngz2Z++5Nc55i7ZtsUHdDX9kbFHFYBgk+dzhX2qQYurULWGw2RD5m0JqSGRGr\n+QVw6GhHVUK+JxANe+exswnxM/j8aqLF5aczEy1lw7mpRbwTsGOP5GegAZMN\nPTcou2b47H+xmHOFsel1f0xhOBpwavOQ72MmcIc/mxFMCjRAYBEpPT6dCRzD\ngPYcmB27gcc9Lmlpt6M9BfDzKWJt6N7DkulFXYcry5OTOkq4IGo4jSGcsagv\nanchVU56XfrauZyqPgdrxL4CigUvbA/DOQQ8tBFcZndI5APQren7lU0S+eYC\ndfPi8Mi5WoYJ8RchYKc/kbGwIEmJUZEPw/QuB7cKCd2YjCW0LRiYZmOSmPG5\n/Ox4qlPrV1NtxeSsFKtDFfw9uhz0r8uG3FJk5kSnNGevcSTZN+sx/4DO5f8v\nbQjAmEig7LECcKkIdcxC1ArP/Ny9QrTI2KtB8lCCYcxIzfB4qKHkCIurF4HV\ndU6e\r\n=oHWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/density":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.e84444387.0_1588973499080_0.7029135811592051","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/icon-button","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af711cb65f73870d7c4cee330601b3631132485","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.893eb1876.0.tgz","fileCount":37,"integrity":"sha512-89uMOvhgEMS1wr91KsK9RG9PXBsmMsVRreH1eQNsq71x7IpxVVQjKK8I0jyXUvDSS80YYIq+gyYgyNkkh+IlgQ==","signatures":[{"sig":"MEQCIAhA5rLK1gbVm+MHe4u5Sk/GYG/XehdLrTvPuwHJaomPAiA4Da6S7catengS1ZRVJ5mAzC84CzswEeN+kf7XtE046A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV15CRA9TVsSAnZWagAAqIYQAI+Ia1f78bWo6HcR9AMa\nslbBfTA+93jAXCYkSd8d0egC2vNAukrAWPbY/N1CDtr/oBhAawCKR+tOnzVC\nfzM5YgM/C597c8GeaxOfI0UntkUInaFzU7c38CUizbJqsFLqklDgNQ2ki7KS\nI6v5tvKSIcNlwxiY4Qlqp0cb7p2zS6r+OALjGdtLDiwuQmFWlHRLQkOtp0nT\n60XQGHm2OPTLFwZ++xPEnZaRwO+i/7SHJne7p3fDo+8AEDBhyWNzsfusnIfW\nqwBDBgXZF4mhdGJhl4ExxmWVRfnJasJTC8krgiOcYEKbT/IW8YtSJTwH7yK2\nEc6jyDb0IGdPLPgX7eAZ1m65V8hUVkRIfeMmyNIeGgZDgOPHbO93kdunGymE\nb21XlV26Vzf8+i2vovbX7fV3jglQqI7hE42izxJjNdPar4INDBFpnJAZcINq\nhbBrGxjaiq27H5n/7bNvoof//PnytDaG32HumKDXOlTPdnWK3kSnuBbdtFmI\n/ZwpcQ4P5r0GjkqY/ei18nWPvDm5UVnDY2MXBvN8R2dRXJxTMhbufBJDf7vd\nENh/UZTz1JHU/UUthf8i8ragOZan9/AZvyTEhhi9oZb6ubcNEzZLVy0Vkb3m\nDZ0Ixq6skNcAkK5eNxs5bVkQ83Zv7EQiRdPcgBzpERrneGtOOiU4iGeIY6CZ\nzaAl\r\n=kcCp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/density":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.893eb1876.0_1589206392675_0.4631635297561143","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/icon-button","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bacb14fe62f8d4da2def8fa8b4c8d64e58da3261","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a5aeb3001.0.tgz","fileCount":37,"integrity":"sha512-EJQhl6kfaWXTQaf2C+NpjxHkmha8RTwCwlKNjZlYSER0HqAW2z+fOK2Eqk+IvT8WqxruqJ/Ba00bQ/ts95T6qw==","signatures":[{"sig":"MEQCIEDDXyg9/Vqwcena0Z+kl/EZPvBQPf64caTUpLbK4GlhAiBLDcQETIyc8uIgg3EDP/KlK+lYVMrxQ9nv2GbdBpFSIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWE0CRA9TVsSAnZWagAAXyMP+wRaxQTm/OwNEjXHVrwC\nNXI1JC6QWkdSZWQOcRQiznvl0tlCcgRwE2cCeBrkBCdgADhZhdjemXNnu2PZ\nZaVDxFtE8npbDrxKgBlvUqt3CS7be7JpuK+pGwW/8z1CExBZzoQwHGYNEyHH\nhJ8sdOgDwn1lm1AjfHmpHTpG1AS2bm4GFA9CMg64YEIwSRvP6ykSRd5gVakK\n/t68U3eLA24uMuAd7+H71GsAml/yV+7Ihcxwq0INc2/9nFmZs2yrvNPv3qtC\n33e8S/6aSDJ4JpoSVzuUC3iFyw65cVVk7ZcY3PlLpyr+A7qeTMZ5C4QIG2hZ\nutKvIe2fT9agbBpwt9xCFKiwT19JR8GywhORbsRs+1ryAzApEr/UCdZVyBHE\nqKPk3bru5s59Uke0kvpM/0toHGOlfqP+SEaf2T4bEAHrXO39GorLcC0Cu4Wq\nntxqWQbKmrrP1WEKCB8ci7h5YhdMux/wqotyviaITT6+j+KXxIhTRGt0HM32\ndSGgKYosyRXNTjC6pKOn1ULa30OKHkWLwIl0smwya45N1siuZ9kSGSOEnY+N\nF3F7NGpHWhmGPwRk6JhpRNwgbk7kPQJ9IQtfCdOpM2DSMz8Vf1L3UijQWizk\nHZ6vp1qSaNuGSaTFPK9MkSN9X+cN1/tZi1UYzxe4/97y6QV7JmXlEKfUIuQb\n5IFq\r\n=X+Yq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/density":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a5aeb3001.0_1589207348558_0.9023924874342841","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/icon-button","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dafc79e8ae8c475cce70f4311fad96f84ca34acd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.610c68d97.0.tgz","fileCount":37,"integrity":"sha512-4+8ZkY5NnCA7Tw02dUYOFXGOykRlAOren/bRnGEq/yJ+VRWaC9eT+BVnayzBS5qGz5iOhcdb+58V89V+2TUs7Q==","signatures":[{"sig":"MEUCIQCjSwjNN2G20ozaXqFraF5lBrL5qwJecPeO/V3mqMxdXAIgbilV6BhpsEyhSgLJF8A8TF4mlAnmQg9f9m5+xoMMwFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahVCRA9TVsSAnZWagAAkkEP/RIusJy0Y3vKVFEjSaCh\ndBha1mLOd+ddIwpNo+W7pooZwc6anv51trUIefyjq/kcdcjiXQ3yIAxy+KTT\nz2CKvp/QN7C05BKO45paTTsSzzK+m8yvxsu7FYDtQkMgsZ1PLzHebpApl3Gl\nbN7EIWdWcxnuHnRwF3ShYA+lD7oe+xxBK/7R2fL91jVCxFqY/eqdn18uRhcj\nQwLp0Dyfd9+kB9HmNnlnnscC+OvJITC2/8d0loj1tSeyYoG0FaTq3qwgx45g\n58GG0C1te8jGzn2BlLCh27QVnSozRE4t61oSLpqPeotblhlPf1ic+tNYxGtv\ngydOz+QZe6ZSgD9fNW+1fXQizLY3ZFqZEHINZO3Cpym0EPmFPgXqkNEh3XPK\n42aUtd0pJDdHJ1mpRmrfxY1yeyNzGGp6m7KB50pJ3YxgamzAs8FitecfoWGY\nfMzPGctqPYTe6zLdzL3DtJVnQNOMCjV7Ry/02wrK8fnvWtt2wTPWAUhrJlDT\nGAoZrIIQBrdss3O/+F5uM79sm7bceRLa4FO4jQ+0sGtLJKeDh1IwHlF73XwC\nAOR76Iudq3oswHPaTOaoPR8Wz+0ipPfzf6fWSBYlPFBvVP7uZhSEfudNPkXb\nWjYAvmbjpD2EbJCeYsjUhrGYJu+GnwVZCBbSZXL/UhJARhl8Bp5y8NIHdq6z\n07Fw\r\n=ZeWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/density":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.610c68d97.0_1589225557156_0.8826608963463369","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/icon-button","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b366faef6af1208f2a098fbb42c4b006882699c6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ed52af767.0.tgz","fileCount":37,"integrity":"sha512-kn5uXfm9E+9B84tr79aUIGvEUlWZmgU7Qsa9sXlvv5jmRmfuNhRrzqtCDqqTNqRQqWWhR17Gp1PzgF95S3B0yg==","signatures":[{"sig":"MEUCIQCQ1c/HDzGsFWl3TiFuCzoYrtjzAeCo0laSSaYgPvidxAIgRVJKyC9fBggJpnF+Vq86fZyAEKzTSB0M8xx5Ss1Cb+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUoCRA9TVsSAnZWagAAScwP/2KprIw7nVM3FPmdDCLA\n+hgkPUcgAc8wXXfm0++7o6bK97B368nMnNARWGGEAc53RRt6qm0T3M+Hhc3h\n6H1UoMpZqSyUjIAELgek2rhyC6Dot1TCw1JyskJAImzf1qf79lbyYZFrN/dh\nyH7318bYNL5KyNkgil/b68CIRPFGOn2lzpHRYuvwWJ6fk/5IwaZjUEpZ5MmR\n3J0f5VUKuFLYZWHQCizKpQgRjp1CI31ToBCZ9vLih9YJC0WSSoSZgBPb83+r\npKu7O47Pluup6tCZ5newZ4RnDg1POsthOZfkP/CGTth1pD60nvvLIKlf9j/+\n6MYgu75Nvd6U1vwt6z7LGZHsKrd0cD8GgYYdhGGcr3rCbLhd0F8AjKJvSmVe\n/tLQVBclBdrBq0N5o6bZCpbRchJgzCKO4QSK80JG2RIzPKPfNkFY6xMQ+SbQ\niF5/7HfVM+n2GBIrZYC8Zt6DBYnwKr7OSZRyVQFBV8jB99xELJPWN12rm09I\nz4xMm12XaUWm6tC3y9OdMQ6g10MTI0srY/j3r+cCvLwVlZ8ys0lcw1KhDmAx\n6GjGoewUCdVmsVfoC/6wSLMFD0qizsQEcO3dNGnwUoIFSzWZ4nDKzBM2ULg9\np7dn5iTaLGNFkjF3xj0n6v/wT9TIACaqbOj7uhgFSwiBYPdcq9+HJMKyU6ZV\nuMz5\r\n=u8Cd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/density":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ed52af767.0_1589228840502_0.5801225363207991","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/icon-button","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e29338966162d96d4bfae4189934720ab2eea8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.058cfd23c.0.tgz","fileCount":37,"integrity":"sha512-XzzyDXo80kf/0OKdezElLAySAplQ4A93kAGztgpcnEuaUKFesVTPOrJ3HOZkksEUnBj8//HWy6rwzvuPRtf1ug==","signatures":[{"sig":"MEQCIFNn9qW92CBXEFgMN4v2R3BYtu1lWxaFPMitc0xJc6YpAiAnxtMutZa6p9RCPpxchcpSxr/fjaXAVm7zpkYXOglH4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK2CRA9TVsSAnZWagAAwY8QAKKG2ayIL9F5uzlqg+Cz\n97Km/+9CPjib+IRL6rUYTroDeU2gvJEuRDKhU28r250FNpfvgo91KztUMHxs\neiyLXkiTz074R4gcX1vaQo1I56BOC/FGPF9q7Z1abPuIyvbB4A+TSW7RvYb9\nFbC3dly69lNFA2STf1LskK+gPTOLbczp2P7r3zkuEW1lk6tc5I3iNJ2yrEjL\na78lfxwk6O2VptcIbrrgzu5HRTYDckHaAlqUrxIhrV5eP4hXrA/SJW3/w70e\nwANt6M2XPq9WjFpSqKef/1s6gJklktuUJOKePbIHcvbpSrJx4RNKtcI8bN0L\nzwMFAJo0Ktx3mdbKTQbkvBm4+AIx38q2jcsysjL4OIGy/1rvffDGwvcw5+yM\n9rdugAifweVXhF/ndX2zbI2M9dBBKV/lZCffuKHJMN483heW6a28GMNRxs1d\nU6XpqYzqNFQ4NFm1Dbld0WHRNvYnkY0AP3R8XvrTluPbUauwTEnLxv94XdbT\nnhfSMawhB9u68zHSIupw+27tkoAuSOZ9B822TEsbXZVQu0EhRypd9yKGiA7I\nCWQmVHnnkUisLficMhWRwheGknyHWadKHDrHmfvUYrTH7dXx9iVg1IPyUUdf\n9w73nfGCtEHBsNXePo5LYPXTJ+nJMGGGwU8KtMPCn/WSSIN3qHe+oY1UvgKB\nb4N1\r\n=fLmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/density":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.058cfd23c.0_1589232309566_0.4326405961574944","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/icon-button","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"641f3a4c694692feae0e28c61560d276f3ad1eae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.0a371b4fe.0.tgz","fileCount":37,"integrity":"sha512-q0yf3rGRt7svoYJj34ZGgak+OJywyEu1RlZ6CjDKFB4z2t8AO2u/lZ/hEEIIpf/xSKxVOzgR2oRD4dnkwYN88g==","signatures":[{"sig":"MEUCIQD1/hnd5lg2oZPBCDYJtUJ7to1FQe0eVUknakI9vRRFgAIgabJNbek9TsOvPc99CimwH3UyvmkaTDj2nClA6K0DJvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy63CRA9TVsSAnZWagAAe3IP/i5E1Uh37Nco8Z8UUAhF\ngitG80JigRG1vyXD12PDRINSGmPlQebob1D4jyWEWADHNZQfqwHc65bJzHCS\n8fEW1oZ/tOYoE9gbF8I9lmoDO2Siev0IHtb9dI9EMQkfyY5xeJ3gAxJedMdD\nm2O7uIrclAVTc5fu+6iBwXHSwCKexBJjdHr4yygXVUZWbIYdiEJLpcbj7PUs\nagKLtUt0uCBl7PGSHuaxKySAxVctcB0ipbLSzxsxiM1duUVROsZ+NqdbUTVC\nUsHEatsKPKcJzw7w1z/OeSv04YDzM/IAvWXaSpFr668JpzXU4NTJ09qN/4wV\n9wNDqlAKwNYlfAxXHOP3siUkHr5g51oLGzmDSOpCyzOFTqFLOoUmW91A8Upr\nVoSVDBAgLpUT0DSCMZHxQjekedHSKJ1eIWsAwyo9YdgZS10uQREOewdxDS4u\nbldRVBq3QafQg7Gs1FCLyORshl5o9proW9NGdgVOBuo/zfOxSxiwKDjWjPQC\niN69HZ7BozmSPZyS5iQ4CbJj1KI6ph6wnOEp7itFTdSkIE5Vlc1ohD0TEZAm\nb2yVnZZ6u1Phr9vy4XT1SSp0RBn8QjqCBLoKCT8ND1Ih0s3a8MtD/de4VPgG\ng8IWoXOGMV2FF/bXMT/U9as11YkGQn/8vqtL4vft8ttyILWJxAOU1jBAOJP0\nONF6\r\n=j60w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/density":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.0a371b4fe.0_1589325494823_0.5887319755144294","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/icon-button","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85af8782fa9900ca8fd656a092abc912dbf6f7c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2139200b3.0.tgz","fileCount":37,"integrity":"sha512-Fa+n3z06eZfE3w/Hf6c7tKfOxJ7JpvVn+8MbkWqppdTxhVgjbckBjjy27LOQlLIHzZsXq+l6zsi+TG69FBEkBA==","signatures":[{"sig":"MEYCIQCaf30OCUjEU5U/AnZdLu0LDedU9mJ4N1jADMiQitW+qQIhANVwjJPiyMjWi3Ht3DnxK6j7DiUSBHkxzqalfgaDNGGr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAh9CRA9TVsSAnZWagAAYyYP/iu3ySmfYcrbPDMWv7Af\namqJovMf/RrMzZSPRKs3aUTv+x8UBcsDF+8rXr2hNe3ynzsRXYxDyl8qLVms\nwVPX6BMcBf5GhYKUb4fC4BJL5ty75LY0AwXVgUgMDCf7dup1hwty2Q7vaqQ5\neJADrK5i4S0ZIIaiUr8RLlcoZw9Gbq/ioEGICKiZ/uzYsfH2z1J9kPXsFUuY\nc/63dGYlVx4FFmXHA/oc+5kjGCwjyiEsMjC+wMztWk1REzjb8WEMBg7o2ohq\nhjYCdLBvRgOEdAhHOthAYXO1nrT8yLBNlHq+JK91Kqb+DBHoyisDaHfI0cjs\nUhkEzmqwYj/pMt46efCfkjxcd2pQ7OjlPXrONEcjBV60cRWH0nmjmQaYGlXk\n1/9CH94fdh0Q9g8pDMKnATaq3zawrf71Q2jlo/tY1pIZ3kKMdRa6ZNRZwIpT\niSAlu5t+aF2GjAECzIFDRXcXGnr/UTkQ/o0tyP0Ylmk2vwFt2pjppt1uGXGy\nFgn4F5aqfGqsNDnRGIM/ROLcx7qGUZepCfyhuT8t+n7SKEGJiLKuowKJUBS+\n9uUatemR1vNFZQq3CujliwNcG4MaSkXu+Of3WfhJzrABXz/oyIoUg95weHQM\nLZTHQ8Z5aEcPS4+fBdzeZyGPAN70hhvfY6Hev/cJ4NzQrkRNwoqFFMBxSuQy\n3RrX\r\n=n+rV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/density":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2139200b3.0_1589381239460_0.7644807874435897","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/icon-button","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26bd353aa0d703fd051a9c2cf76ce4c003cb1ff2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.744d751a0.0.tgz","fileCount":37,"integrity":"sha512-0dv24+EPFLPXD54ME4qo96uvLXYtUvt+p2q4FZLPg1s7sx2z+IgxqwC6aubCXEwmvRq+CpQW1/hoT8tDlm+T8Q==","signatures":[{"sig":"MEYCIQCsn48jpuZiT1O6dqT7rZ88/ZEjwShN5CUYaCNzUrFYZAIhAI4JYxeIzfHyoJgg3ku/Ibhx4tF2wncra1xs7OEb3RRx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxLCRA9TVsSAnZWagAAdh4P/iA8ZFYPE+nUUSBu+Dgd\ndo5V1dPyKa7OGCQup0k8UWv4Agea9HF23TMFHNRcB8XknxxeI+5aXfLVYW2t\nJM1rO8mJbpPWK5FCsGn3bkYzd1QGMXiIOAWMhTa8Bw2jCwNRd7ggTgfxy3Mb\nBq67kg1V/koeXSabb+BiNFV91A8IUWjBXLsk8GTvCfk869iUNta07Ykmvtzk\nzgSuOptT2GQPx3pQX9ZYgEUfg4rnTlhdYLynJv+M1+oW5xKohIAoCuKgnNDF\n1DalZMIviFemolwlLj+fp4TJ+bJI3femsejEOMdVnc3dhohIeU+hLUDW9Hrt\n6nUvyTt9S/A7zy5ktxunwZOyuQa+3EYPDUHis+WDEA835dpyhChlaW4Goprn\nyJ825IhJIfTXh+1H/4thyN5y0tU5UpQUK15K0mvBeE60Yi6xD8/03p6eOrTW\naOOPFgj+PcLoVQAvI1HRRQRnBT38bUAR5jDa8Ny4dSkBFSA9peJlBndcCeoK\nCBWmgMxYaJb2N42ciBmwXXt5qVtAOtQNhMa4qg5th+LNenxRi3R9EiNwFL8/\nDDODabyIsb18pLcEnzUefg43ljE8Q1iBv974Xwta2SaPzdREw75JqN+dt/HJ\nr7ju25wlkZhakfQLMUi5AOF5dcefVWr62Pnn+BRR/gVINzvcaa8CvVppbT63\nY+V0\r\n=op6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/density":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.744d751a0.0_1589431370846_0.05816970941870969","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/icon-button","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9432de361925c1e3d612f06a2ca5f75e66840750","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ad0c0c103.0.tgz","fileCount":37,"integrity":"sha512-95UpTKsu4L0Jb2NZ2JvZx7ynsb1KLrU9leroQoshKeEAohAmjvRPoe5tJBHzf8+cucwi4tvZy4CW8hr1xZyfPg==","signatures":[{"sig":"MEQCIEprW4jZdrg6fm3du0vLIj55HsyZCxHD0eyrV4B7MOFwAiA/QytMHtHNJEjg6XhSQ2KiO39GA3n6/pFa5kqjv1SKgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVr1CRA9TVsSAnZWagAAA4EP/1tB/vKGCKWhXdP1WbkF\nio0RWXtJuwG+TJ2tWZxMQmISk+aOjfxPcrghkdwrLHzY/9Yg2DXJBBH+DLZW\n7ViuJw+wxfUd+kXoeAC/FCvAOKeGbC40uJDu6qKvQ57knj5wIRLA8HgGTr0U\nn6I72R2cJMA93uDwSZCwNiEc0lOG9mnUmO1skE1DsvjwpPZtuL/M0ESBTCJP\nUj8cTUqYZQ+PK41LA04PXvjhNPzrusVTP29YnCmZQ6zFKuNbqPt1DzSb3qGi\nQ3BQOY2DAQToJrLOXfOadroTUaIiWhVAK4xZUQlzJVoDOJpl5+uJt1zLtevB\nMZok9NZPYxMCLUyGpCzvhIdgh1Rz7ODJlEQk91vCL7F+EWO68whjZIuycdG6\nn8hVh6tiusB2EFiYVnMEuXwDJ9qcROAk4Ihslef7wFmSz20/854zvMlznj6Z\nWxozEYQ5A8pi/D0nugAfaJSF91H+/2SHRZA5+0TXtKKNHSh+y24/4c0EgkPY\nx1WgkVByLSF1L+1pVZqzQNOCb8guxMfj9ZX5N9LI2tNsK0e5IvGhccq/Y9tf\nq9iG0NJISdi4LamGXgN35S1HZe9bBlXkA7PNHNAkDZlanZ8ifCwA2iqEGGVo\nzkL2aparFTZ7OsKieX5ikCvQURilrc8IWA8mUWzNVpxybwxLg/a5f+A91nau\n/B1M\r\n=rR9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/density":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ad0c0c103.0_1589467893289_0.3439165537663831","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/icon-button","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5ac2ef0a976b4fe8671362d876bfaf9cd91ec94","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":37,"integrity":"sha512-6SJK0UGJV15Hm/tq3K7DZx/DMkgRV8b6Uq6etAzM3YbQCOmNjuBsenM0zjdTHomVYwhSuUCh7oly7STS6BiiJQ==","signatures":[{"sig":"MEUCIQCJtmfVkZjiX2brqGo4lSnHxzt6COLHCjvblrUOW/JLEAIgfvNH7W/2a+OKlnE+5whGsZ35NmASpQgbqRvV+atbgNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsunCRA9TVsSAnZWagAAQFcP/0Avf4GFrYqKV3FVXJtf\nUmqWwZxFjThp6ivYbF0qNbw5aWvmYCdY392pHaK9XVwbH5bY23hxqyYJg36e\nP+DXHffwMipOl0TaIZNh6TlB0CNazum7X65v03EzOO2YpjC4tccvG5xfQ9FO\nn0CgFR4cIbcKofV2MEMhCW5DRydoChSjuxdqK1P9ejVfASYhpAVP4NKNzitd\nsS2nhAQJnN5fGTJvksi/DpBoO21inxKs1N9W0fD49zKPR5MJQNZHmwPGax3u\nTfjcWNoHaf9KIv8XdKHFCO6bsFBz+aj8fFo7rBIz8dAMB8WHalsCpOxT+aJu\n/aE/4cR9yoHWO5F12DXWCmFU+JIR5a4z3dKGqx3Sxe86o7izWnAb4dnukoGe\nFkC+EAgl6PTljMXRwvmL/xLJHlOOX8uJkfDUsRxJIvcrfrRM+VT2oN+UJpuQ\nRq3a1p6wk+GtKsFzWRJmQsQZ0D/fcSsSd+iPPqSv0hqZd/OXZ1xXyY1vxM7M\n7JKSVok+03VHbEsi99/SHYLkSdMU2xEEA8Vw9huYe8FQV4GWAX9UpBuClijE\nzs09G2gzWZZgSRmM5hAkXDIaFRP+GSsnmB3qJyd0QYqFsObUa08pCjon7Hyc\nGgSnmhBeRX0mnl4yrUHrriotPS2knovQEl88+p2uXHjXhiz+OJVC6vqK0Wa8\nNfs9\r\n=6God\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/density":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.fd8f8f2b7.0_1589824423492_0.05076319741123925","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/icon-button","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c3d0148695b28852ea918c17d36d0c51ba13104","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.730920fbb.0.tgz","fileCount":37,"integrity":"sha512-M/s2by6AMgo2NLGRkogC6bnFUFZQotNGMkVcQATFSHZ+kdi6UDDSskb7+1dFTovBr6c+x/5U+2M7ytyMjFpLMg==","signatures":[{"sig":"MEUCIQDMR633TKobWXxJCkt36k5SIlabgiOm2p1tsnDQWFYx8gIgUTdZo8jxRfQ9OZ43eNFsk4zidFmMClyeAX9/ijkVL4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWJCRA9TVsSAnZWagAA6QIP/38ozpLDi0ocSQxmuU47\nsvid8yfnEbr8toHEm0TjCzWvR9DFJgVuojjU9SwD3PxqMNClGlFHC+CjZPkE\neYVgP9n/AQzFhQg1AnyH4pnSlSTkOdZaq/atoCepFoz3HJrjo4amOKfatB2D\nqoLhjXiRo/2IvjFx9jVhtSr++rNOzMB7uJobNgKFB1RmRDaEtul+Jeu3yunk\nQwWz1hIYtyjG8DYznzRA5v78SPeoYS86/xEe7/0rOb7cW7svL5HlDeyaxB2W\naJSZSxG/jRr7a3tEK3OjOyIOGqa8TbGyEZdsOB8qRf/Mi9anreW87BRqnx68\nrCUjaBLLJWHYsQRM46+W3y6im9hQIX2WuPZOZ2FKEwURWhYPbKJaGvp0pXMd\nwNfwGOyQQ/pmBeyDj+ORj7uaWfw1yWewwp0d3w7s84mdVyvDNZjdTYHwCve7\nHfWK11LREQ5ruv2jABmgAnpws3Hn0swX7Y7gVb+JRupOOONW88Qg4u6P0bza\nUwjVIYVl+SHtc4IrVyN0bPEUYuaIdj7nJS16ttefsS+7JF/j5Ur2aFP0CXIz\nJVQY4YHDGHiIq2MNVYOIvgDVT8jv/MBymzmLST3u92bDEzvJeX3Zk2jqTITh\n6tkGj/Py//fECgOvVVAN87YLmls+9b3IoUODFCw80S6Dr4tnHyUVkP65U5Dg\nd726\r\n=AWUS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/density":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.730920fbb.0_1589831048642_0.34086151820962596","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/icon-button","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ab00954d79f4933c108973a93b1dd23402e7cd2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.bcdad99bb.0.tgz","fileCount":37,"integrity":"sha512-T8K/gAh7Suqa9VB6v+kd45gzAxXGy8BaONOxj/ltgWwom21q9L2sRvJse4IRDYEYmh6wDbBScQbdzJSkiZx4uQ==","signatures":[{"sig":"MEQCIFhohpsxya517XwN9ihx8InJZbeqLNZ9s+iOLHGbp7uAAiBWqKDDIKgNEhuchpCHuNaVEUJ3z4gns5eOQsl6oyVB2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/uCRA9TVsSAnZWagAAxQgP/iWg/QzndhC4uc/s0nqo\nEszBTGtOUd+x+92+H7ErXoP8SvyzJbw5qzCCx36OM+JZb8R/ZYKjDlsKdyio\nFGnLCxo7nKNFYh5O0G+bWgkQQ5V3IlZSLVQN8suYEq5s5kKtBABUWFduDYiS\nX98l/gyiCahl1I0eSTvTOxwf3EscaecxLofBtvjIyeE+pqwZ+cL2jKscXYTg\nB2KGNweJrRlctvNQPk6+j1YMtWKzyqajucftsjrjCSGu/7hHdtEQIbx6FL1B\nRfYJj9PGyw2QN8Jm1QQV/DBFx4yeyBuMeswbPvvg68E/Xxyo+cJevuxJ+PaV\ngeWAA8IQLIdUH3k0BLv91PVhQPGOz5Vfocq3YolkjGLeRN1EN/kmK6E/3B5G\nbe17QCkPM8na/ZOV/6b4726Sro43rtDKfs69OWBaaJCqq6o7En/VQEi9k9Fh\nbif5nKVU56R+Oil9ivPxGx8p7v9/kI9y9G/jiv+NcCyVSeum1hs16lBh+pgo\noWh7EXs2vsrSUTnuMBfzEIO1VrFniRJTGey3vMZwvr+x9ONAJdb+tUCqN7t/\nfKP4NzwJw9iOywYjiYmGivk/OiuPn7oX/2GEbmZRhagxyxDZ9AtJBijwSI9T\nPOtWZ6KN7ljyqh6aKKZz4oMO+Ts0sEnXAz8iFhJmb42D6MCuI3I3ZI1xA/ya\npQDd\r\n=818L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/density":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.bcdad99bb.0_1589858286246_0.45539793102639936","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/icon-button","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cff0aaa008c14b148220344f83f32cf166f9eae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4497b86ed.0.tgz","fileCount":37,"integrity":"sha512-PkjSx8iqtzkSLfZMBX7o2/EmsV4m0L6Mjzsh7nlaVjBtDawM1mPH2lqsQFP5ppgw8OxxvckwAOh3sBR/tQDvRw==","signatures":[{"sig":"MEUCIAxK6XHkDBa7CAuwjkg/nKPwuB4P+Etr6LRD7c/YcCR4AiEAtZ8whVd4U34Dythaz9KMlnFe4E/36ZAGrfjX+Ja575Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1ebCRA9TVsSAnZWagAANlAQAJF/sk1wPHbaTIIO/ieF\nB0IGymPDMV7cF7YRP61dd830mk22oYNx1c/LyFV2nCyVuY5bv/UP39IjaiLp\n8Ygzl/0nDiLzghA6fB5Cw/o0d2V2q5gNKqr22gau7ruWcr+p79Zgb2BuOSlX\nx++jX/o4LrJB7yZqFs3WvsnPneiHNhTh0AVd3oQe6+Rmmps099nhMdr5ZnCy\ngBcusbfARmfoiAhnJthSp2zbC3irr/cwqVZQQKQ354UUILZgmJ9/S4vhosEs\nGiPNtynmQKvgBVKpOptFYevkGJlQoHW5MYyWBkQg9G+Ppab1hd5XTNQTPWsb\nKupHwA2E57jlUZkDFXfb25vJ+eTjiFF8AU/KVoE/RlZSbixnj08AQxvU3iA0\nOL7xL7z/LhrxkiGVSApsdszcHtW46YH31Xt/gNdTxPaSePguYElQDerRFr4M\njakhIRcYv7iqpoa+esFCVQ/a23Q3pmRBcTjL4I4YyQuSV+4qt/SRja2gTvYV\nLDxU1CrFdjuGm6sHyr8Vad4o0vSGIFrSOuajSDLkD7dTZjC5nkJvyK0L8K+w\nzmV3vp0UCcPfS2Bxnpo7BKA3JjBqHw7sSG9SC3rM5+FlPkGPFY+8mrU4n5Sw\ntONpnhtxLzvEb6dvzLKVnMWbReRgDzT2+Yyfi6BozSXpxcZMRTxqzxZcVww/\nGl99\r\n=85Ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/density":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4497b86ed.0_1589860251420_0.9049621382461233","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/icon-button","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4bbd332fa794ecf716dcb67daf4712f0d56b134","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2e60575da.0.tgz","fileCount":37,"integrity":"sha512-eN0c+5x7haJomYCdVHSdY+qeTxneN5sWzDTXvoLHq5U4JzCqB77O0GVAueH0z2kH1K10V/3QiUYV+RA9MTstGQ==","signatures":[{"sig":"MEUCIQDt3LZ+nUzX/BDT/uZ9U1k+EkjYD/Gat9vL6EMfpHrsdgIgSpoeewHdE4pF7XmyMx9lDtGOyoA/HiGvw1Z3hiejKmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASzCRA9TVsSAnZWagAA5IwQAKMPF8gsKLQpYuNrNcWI\nNdgfRpd9oQlxHIpQ2+S6RicucL2OSEkicP4Hmy2xE+K804QYJczZ7IDTpcb4\nqCxzd6u2ARUGXAyMYyCuZfsgIoKSvqYPMGyUP0px5mEn0YQ8b2Xj4LT9ea5e\nBzB+BFwgOLRAlobwur9IP75u29ymmG2myBbs0ymH/NZqYvm8iXz1E0yhWwk2\nIzhFx3Oikjq2L3o+1RP2G5wVYTGK8+Ld31uiTELOjV3zuPlFcBhh4e2ojbWq\n5HfREDuOIm8ISi3weBLw2OJufBKTSjJW0d8X+ljzLcNGg+yT3Uxfi+hNu/70\nCQwEaGB20FL0Nuh4wRPD9/ZDO32P1B5QjlDzHHQvJBdO6wjHAVKm5UtwTqpk\nlmBTqTPIdmYK5CqV8quVAKmeNwKPXOiDsMiAqcREMPzRwt5V+UcTvXDDOyoI\nndgw7MnmQKOARWXxilSFKhqteyXJyoygV0GgXnbZWeqWOXGzRhvx4MvPhX71\neiMfJAviXDmO139oPuc5fkoE20TOmx2WkzXXVeAomApOE8balc8MCAFgCF/l\ndHVVi9oixbSEgCZFsTYG4rQC/+t9bOR35wEYYq3pCCa+9kIT2Boy7fy+yGla\ntmtOjayGYoPNfh9uv30yWLIXzoqlvBEbk2qmllExGEbWGpFlxCqKcHcySUGZ\n6spc\r\n=DBc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/density":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2e60575da.0_1589904563300_0.4286345314264992","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/icon-button","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1162d29693b363f52fec9785c418b869d5225197","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.e3eacefcc.0.tgz","fileCount":37,"integrity":"sha512-hribZvAcCmM07AwhndD685wnLmC+aN3r2vtvooM/ccO6JOAyNP+iAZLrM9Kr1EYr43v9EUzz+IaIzYsYHyQJrw==","signatures":[{"sig":"MEUCIH5mDjf0MH9vKT3TnOgALe7p634j0NUGrYn89Kj2NXgZAiEAw/ZXQeTds6IlImmam67jglZqSriodMe8hHI3M8kjQIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmICRA9TVsSAnZWagAAaLUP/3CiuxiR2VWdfLwLB2ZQ\nB7DyWGt85Q75kQ90XFoTonpfth23ll15RTVe4CiyeghQeuP+UcyDHAsQ50nA\nG7aBY7Xau0ibIKBxuR4+H2dXpKRr/lVh3Z8fzi06hueGy73j/s0RDLiDNJDC\nkKJh6YT6YTlTl6ewiK9wCmXNHqaFcD8glfMDyuXTX7oCRW8eOnYfFqAWKJ85\nSjfbwXYLWctqqv5fSfSSF4ZQrKV8W2n8PSnxiytmpIR915ICDXOZVrQsqhah\n8VHcg6CPqKid4ALTyF2e2DQoKXYaaACKlFsQfrog0lgkIf+ld931HbuJ1/no\n4zIiY+akOkcLeCu4f41XGlNKJ08L41a+UVurXniPEMIoKBTmSLsXg9fCXAot\nDqHvxDjOk624kXbbEqN/YKwYbsQH61HLAE9KNS4isDDgjhSu/HBNdSx6iVQI\nUhH4xvvjvc0QIngRZTAB2/UBDppxGOlgs+zVoc1q0vupmLu6hzOFxg+AORNp\n7D5R9tIGCG2YC/MGTomnTB2vuaWaScx0SeNvb5jLPBAR3D9vtBXihNDcbYvd\n8flLehQEo4Zeh54P9ZbzHMdzTl59A0skaqh+K92K4PMMc/o06AzDSqaQip4X\nmHU9foUwMyjD2G/ZsnLg9gDQnGD6YaqpumM1LvVu9gkjDpmIMJU+8zmH7sxj\neFmr\r\n=9u6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/density":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.e3eacefcc.0_1589909896035_0.917417658835977","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/icon-button","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af532d4ea4318679831718d6602197edd5dbc7a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b065a4d2b.0.tgz","fileCount":37,"integrity":"sha512-Xwg0zvsNeKLAJheFyt4XX6Pd/XAgQZUJTv4ctCNvCtKB4zEzdwyM8+awp4Ty4Q59990VVf+7wPdiU9SADvlfZg==","signatures":[{"sig":"MEUCIQDA9EraAQMPguP9PkWt725YBJEHP8f0v7hTsZg9qMBUJQIgdUl7WPyiiXhV+Y72B3cY1WdVHSfatSS4veP3g+wVPMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUB2CRA9TVsSAnZWagAAMtQP/Ak2YJmAgyDigjTZTb08\nBz27Pifzn0j64J//jFVeqTeokl+HHAK57e3cP2/x3PBQrLk/jL2Ds2AUKjLg\nYAC6Ba8w8Do0Od/O6QDyNXh6Ig+MWemB1XS/lCWC22SD5ZZBllCwVZNo13Zm\nDHSgLsm9cewpjDaxRmXDNZ24bZwSq4vHLkL5ybOzJbg0v0vE9RwceTiVHEqh\nRnaJHKV3owQChGTpDr4925AUgi81UJE4PRC5YClzVgZHW4Ba3L8PupZTIzY0\n1zZrKFHWG8KGzxeirKwXOeo8+RqDInLOi1BOW+PBPTA0TP9JoVQ3as9ivRav\nZ1URqI3ebS/kPidm/XBBbpTwRndKiVcJb/3h76VXJSMhoxHaRB49UAn1nEe1\n+GP2s6pp1RoPR1IuQDlG4sjU6rF9MMOD5OA8PrCbAspDjAXj6zgxNeycoLza\nOvvXIbodLvj9Yt9Kovo++Dh9K/B2IvD/oeyxTNIK7M1Z8E2tmXJ175QUhSgT\nmqZf+NkGeEGz1GemIDzCdnMzqF50NJ8OJ7QIkQD4ZcL1K3E3+m0hZ85mzaGX\n8HeUtM6WXVxDCHWOCpOoJSX0Iv2TlcMy/Sq/igAsU+fpEDL32Gu++iybqSVW\nc31c9+EncSBK9nY7X5twvC3+1yg29RMGLCpwpRukaGIQBvWTAWl9MKrXTUDT\nACD5\r\n=3AEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/density":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b065a4d2b.0_1589985397916_0.8644790303633691","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/icon-button","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab2e7c4ff9bd48a2f06a2620d02a99ce4139f1de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4ebce8d78.0.tgz","fileCount":37,"integrity":"sha512-VxuCqFw7IYjumOF135ndl9vpc4lzBgrBNV9enx04jaRdkFo15jFxo77a8C/k8c3ED64cgUMszP/fHykP3fzZAw==","signatures":[{"sig":"MEYCIQDWL9ME0Fm3e5SiCVosB8qpcEX8G5WJ+xOZsJJkzznS3QIhAPuBw5bMYEGfmH79rDMM0IhKR9mQY980pcaFgAkUrA84","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgdCRA9TVsSAnZWagAA0u8QAJtgp44j/UQJOfYp4+E4\ndFqvQqm92INXYZhjDz9eY9Yh2q083NLXg70oaPwzl77Ru2oEWFboWQ5Ekkdd\n2seUOr2ImPms6LpWAVG5mfUpntnD1nZu260yHOFYgLjZiMgIorJNCsEgW+lk\nL0PLuY3o4MJgzbqjQjZtmtFeoi5WnKsyIWTN9zbxo5PCEq0LGTwem2xiaXE1\nYqlpz56EuCXhFxyRa7gtdEGS5ZTcdx4wuhLRGiVgylyP6nnlTV1o5E/kcbYp\n1j/aNkwJvhaqAB7pSdVqCBER+5dQsFYAAx2y2Zvj3ynvhj/3pPFAsbHdVOcr\nGfyChPWtrcAOSpTEqNojMXyodtQRDMGB6k195Bpqpmye2vpn8EXcwAj6E+TW\nnEbbgAZMatcLAUTC1bLN/IE+EXgmWo7NlfGVThJg9oYJu+UtDyZJTJOf0iGX\nN7xaN6dodQh70C0SUKMwIhBZz/cIHv8WqYVReCjgQvMxAzo2XTYaLWP+bSrL\nVPT5lWpBXhb6reIjjjozx5B14cd7n2zLQM6u0jrAPy7OmNS/PSLLGpHN+BMQ\nyywJ9Jb/n2DivwY/enup77BwZdiLKfbT5HGZm/a9eKGik937RSe1qFWlwPzb\n/+awb1bj+6Qk4WA/E0XRXLo/yNHwdydVEIu7KoZOqWE1TfQVWDboP4i4J7W1\nlr2Y\r\n=275g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/density":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4ebce8d78.0_1590007836630_0.06653598727902499","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/icon-button","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23b6e1d4993ecafb2e675935c4aa4f931143b38a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b0fdca492.0.tgz","fileCount":37,"integrity":"sha512-WaIEeFPAzec/pm8P0acIwdya5CPn3yBq52xrjyZJdknWDFm0KW8xJCb05Zh2EPE8n3lUGPLGhdmFILFUpNIsmg==","signatures":[{"sig":"MEQCICzMVdwJdOHtQ8G+a/iQ8oL8zRcZ7BU9vk2xGmaCOHv8AiBUxwAQ1OPdLhi5fmFMGmYyHP7WSfymoq7r+WzkB5mZHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbccCRA9TVsSAnZWagAAeP8P+wb65q+DPPi5iceeinlJ\n6/susPtSvcNuJzxxaBOQVOgoAGgpczL0uKhbynIW1DQ7W3ayXjoFj387zUma\nhcxRBbKdvKstnmpp3bI4batoXoWPcGwnkl9mumElDoRQhOwDzsuShxl/NkW8\nviM1uffjnYo5ZkA9LxLBkPXWPdzYBHeY0UeywKYHCTz3lwZZO5E4+t/iedpt\nruMro8sNpmxmHropso/2wcKe9DYEXxIqNeN9Md4aGALDuluP71sHIyfRfS/6\nv7n16s07k+nbOGh+vvvvU/i/Zn2uA3alHP2b41NIslq7QGBgphL+hMVwADHX\nPS4TMKolr8wKsokEFSABs0yCpbGSrii9koPtBilhRU8KhuFvkHzhmyoxIn/i\nkkj2b6u5sGhqj9fgEoJ3qupOOSY17uzPYgsmVOJeaZWVOwa8fzBhsG1PN7Xt\n02LW7bs19gSC7KgNOa9Rhm4g3SfivlK7a1Dz0dQH2e1MmYnaIp0CD/laVYrQ\n3pe5XDYYGX6WjMDlEX76Hsm+aueJ5kgut5ehqk8G6H9QNfYVz7jhjwIsjK5i\nxxRvdR7k3wYgkXJuJlpLQUyya+MRih0Ey54h6MkfI5/7BA1oMxNKdxzCRnZt\nejUUt+ynK9OTCfqTJUQst6kk/Tib4wDMYjUwymI6IaKCP/0YR26nPiSRgCzK\ns64X\r\n=ClXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/density":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b0fdca492.0_1590015771836_0.785123173062396","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/icon-button","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cebd6a6f3be178ae98c20befa33b05fad493aa03","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.c67667e8e.0.tgz","fileCount":37,"integrity":"sha512-l/AwhbpXf6OMR87XcoSZWrsyNQP1B3RSxTNNOuSLWJ/qkqjVOpX86NtME6MJTB5KMSqwYVKOMTQUPAM+wru1Sg==","signatures":[{"sig":"MEUCIQDZ8tc9sq9P7YHH96FbrXnT7XD7xdvWL3PJC0SAlcF8dwIgG8AbsYaA5MOXUy9rQvzErdd4tBm8qzXYrLM8aDiMGoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxjCRA9TVsSAnZWagAAmzsQAJz7H1NUvX6pLuIlpvex\n+O9+ex0R7NGuLJrAl+izaaikdfZ6BHbd5Z5sA5gsObgux4/a9TP53HXyyExm\nfhQQMicYxjA6U6HsQTcWL+hNQtOezfBBpEOpslbrkFUQN5fDROQcFOKi/jBI\nwkQO4Y61Ez0P7EoAFgcdlbc3UxjqDCR0pxP9iWysuy8uYQYLWVanfk7lrSW8\n34PqTlDYnSYMPbWrH4PTlJvSI5yFcSGTaOOc09P4TH45eKCyhPKB/FTBoVY5\nh/0vc+tQCBksWBiSHAyg4yhxozTzZ2Ab//36Zmt8+EuDw4OqSD8hZHN2T6ZY\n6eYg0xiJyDXGfwrh1l9uELkTk2cjd2PrFTi3+qwoPPkpWZQsMXLm6xhYzuWb\ntm3WU4HCDaLoVq0Qp8StqhGWZO8IiDz0B5BnleKyOKZNEAe28fskirqz621e\nT4WYIeUN0YNxNgTv+LWwdtzVi5yHpHTsNFsdKwQNBbcaTherzHiQe62d2PHl\nXu5b5E4b69C6ABbOdKbxfL3q+rQlEVS0Ii90khZAXsL8Sl2vYU/d0iWWwmN0\nKiVgoK/L9jRQYe9IrAx3imVAN/ClBd9tOqFvRa3kj2aaF7pnnZlh9IT5izWc\no6kH1E4dZ5CahCG9/85TSMruP8eqGCmvRyyGiw0erwjusEKVyY1JcQgb0ont\nqMb0\r\n=K7Bi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/density":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.c67667e8e.0_1590070371234_0.27089545001860293","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/icon-button","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c5b320dbf010e9cccc87d5f1ce055781e9f81f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.62b5f37db.0.tgz","fileCount":37,"integrity":"sha512-Qr3xIpJyBuw7sZPwQdkMR1eQowbFNiIMy9YA+KbMCkZNYPGGyeKFb5NWdkxNWRBrSbMYAY2QJ0QiE2xogU7c1g==","signatures":[{"sig":"MEYCIQDt3v+uuUl0hqoZYTyZNRvVDhoq/l8Klk2Rjdjae7KNRQIhAI7SIQSgutz6IGg5Z6a6UBDbXYnd1HYnsMylxDf4RxWL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8rCRA9TVsSAnZWagAAlXEP/RqnkID88jY53DNikrox\n5yCidsPIxn20lqCF8bT7ZCoBd5rKKuiKSPxVJdaLFZTWvmnfNNT5921Z6us8\nyJFQGYzitNvR0JpFaiwSMOT1Y8EVcZMFm5Z7xXW1eexn1pT/LXJ1ToIlIUBE\n6dMpjqrP9xWbtpdy4lda3PiPsOjjplkb8KkeMeM3m4Z/kCslMhAyyNcc6Bag\nnbL6uXvKM//RlK8sK62efgGEOYs0G802kc5U0mZ+Oi37xErNVERs6Kv99+s0\nVEH2xeeicHK2Q2X8dzQ3zoIZkxzFWDvg+qT3wF3i2yL/500j/EVYeX8eJSP7\n1oDtuilYQ7OASdGBD3yz4rmOkXmxPEqS3T9CgvqjuVGSym2wPdb5/DM+q3V/\n2KGrj0PI2oIOhoNRJSXbd0hjBUAzBS/Qd1J/UozsZ1WyxauBRTNRHdjPpgfQ\nLWi6IVnWjz3wMOeittacXiOnipnr/g2GzaJjmsPJlwyzUN0XdiOgcAlTdeqv\nuVksDoIc6AADZNijp0Wai8vWEUK+GsHCB88l5tAEru1V0X9AVf3w99UKVv7R\nZt0Mf9yK1cIsCif3QCDMMl3VFNtCz/nBPIP6Cu7mDrGS+Xye+zmm1wUjaKba\nOD6Lw7mVsPXshNgwLNtXt9/TRYoVlpCXUu9jgPZuKz2K0oODid4jTnv4ZMqB\n+j8E\r\n=ZmN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/density":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.62b5f37db.0_1590079275415_0.3737601183235848","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/icon-button","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca7d14e6b12cd84dbc56c6f3daa27e25fdbe7e2e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2e218dbf8.0.tgz","fileCount":37,"integrity":"sha512-RXdTB8DIa0emDh74VtL0LYoGZisOeLiw5nx/6ZUg76p/3IdJq4U8tshgWI+SEKEshoty3iz9M8bk6Kq0bPfgUQ==","signatures":[{"sig":"MEUCIHEnkOSO8egaa3nEe7/aik0uMVV6XHtRjCX+g4wKOvexAiEA+K+ysv/dhmL33v8Oja4J463rXd755HWyqVTA1pa97kA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQRCRA9TVsSAnZWagAADOcP/A5CyMDwdBoWoHiCUVhG\nXeTb83I31SWXVnGGyBD5EzRiJaKW2PzK3KivGqhAE3p6AlbUUxp1g7miMcyc\ngebUwXUIzJrRYrwPwaqrZ7W3nseN5AWjvmINNFwZ3u7xtKn3AqPbLLgqaTGf\nVaT+ArT6pSg3g4MNMJo3JKH+0LcEvLEW1hHh0NfcMfORFHF0rVtku0HUCm2/\nFHQr2S7wROkmonxFV7YzxK9BgQm1tDXoefWf8/oLpp+D/yL0WKRbeXeV2Wg0\nBzgx6ZJm8KJR71sn+j+WBzjOXsJLnpQjt5zhy6fMe3fN6TPxSK0DCi76SaQM\nRolgcUQqjS+Z8UJWeRXQP4mYLE65YMKJw6sfsNqzU3DHV59j/UXpvm8AmAkA\ngp/3JcLo7aW7FxPy8ZR9F7+QFXOSYPQo0wnCAb6PE89FP4d8eh1vPGTjieWd\n80jqWN10rcqOkrayCAdSeZFcGUVd3xab2GM0PPH6VVeKzVtsOYD7dXVZPQkc\nRnaZa3xR/+OVY9X96XVQrmvuhMvnucNr4iQm/kQ3CuLHteM6Kf9aceULjsqk\n68PP8ER53ZAaTCbWxtQ8k0jSJgDCFQz9LcBYLhQFve28cpMoSgoHl2MWnTln\nyodhqz+I64BnN4GFeadH+Cus57plTgewj+BJ924ymRIixpA34+EkaaGRpR8q\nW6uw\r\n=Paoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/density":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2e218dbf8.0_1590080528887_0.31869511838970266","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/icon-button","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55844c695b6b604a6c306a583b2bfbb690c8b0dc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.7fd792bb9.0.tgz","fileCount":37,"integrity":"sha512-Vg0Yud6fH0QQ7Nm6IJuv0q2g1FmrLXxsHR50NYXxDwN4BXF0CmuhaMpNHUmj/3vdFUuwEd7BPUqBOdCE+Xu55w==","signatures":[{"sig":"MEQCIAF4jbaRTIPdxaoNG19Tsx8vWVsmXHPH5C7Zel6D2rW/AiBILum2bTbNkEOtQlIKygqDfjSIztoPCaoxtnvTqPVHDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcXCRA9TVsSAnZWagAAsUoP/jkzUNNOiFVgRh7cTWOC\ndQ/p5ex5l2+dS/rGdk9asZRFne3YD0NKKvLaqWMjdnKSHpdzs/rFkaGh5eGi\nuRGHUtj6ljdUGYlA4isyCMBOZke7x14x91lZkKepTpoC8/GJ4YtFa442hmrM\nWHclpulpnpFk/H9qYupQPF0H4lmil61JsKkg4cypY1Kch3X6etJEq+shVZw7\nJfiwXMtQVbc4GAhIgdwx6P+iUipnB8y1LONhW0ij9PCdaunDI/jiSozhwI05\nY0+rhiVP8/+jJ4fd9GTqi7btBt0uCwlckxi1dbn5IHEct49O+BrwUqw3LkOK\nDLoj2ZiIGB+7aHc6gt1gE1tqEVKpEz65ftoRQqglYJ5PQBGPwWfdjU7REhWe\nSMwIgyuD+G4XMTxrl2Pg5PXwh5yM15SDCNOLeIkTiX70gjpcjlGWAx/733SE\nxSXk1RekH+DUrdgvQJoDeeg324HZPkoFuJJpzMoJz5XPWu46HMi/+7ETH6dy\nqMJRjavuKmLfsJF8RD1ik0NJLq37fSaYMZH5vgdRl4cwxlEP4CxJELxMJ/93\n3VUWYAcCx43zcRy4IPRn09rlx6bQRdQjD/Tx5gkOI/St63EB1Frapc1aQZJH\nLqRPA5JVBmvCl0epozsrKPaJta6Fs8brGpWT6tBM/qYTesT1t0CH6i/Wryjp\nbpdh\r\n=6riF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/density":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.7fd792bb9.0_1590081303026_0.5102215019495315","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/icon-button","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6ae13cbe0dbd4cd4f9c971053dbe548bab64cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a66493cd8.0.tgz","fileCount":37,"integrity":"sha512-ND5dJTid7gi+RhDNGs2sxbPCKLWCmKuazMy4rcqgf9o9EaFiAHPI1jhhVy89A6/bcVMLM5aMYMQmI1PMWk6tEQ==","signatures":[{"sig":"MEYCIQDcvghGA/dN5FPuyrqefl7ng/hA0pl+XOj3PYGPwrcxjAIhAK96Pg3fczcUerze6/Tr98U4iRDuZNQk7JS5EKD3WrAb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfYCRA9TVsSAnZWagAA2tsP/iIOmHvSGPCaQ81t+AwG\njiyFB/ThcSvb997MWH9rN+Kie/oRfwg8Mc9aRmeD3V1UDMRWkDbk58fQcVri\n70u28sh2C2vlc/ZeygktrMuThi00KOYxbTZ7OHoq/hV3dCbzHrH5WLjinYFG\nWSyb+bTvTz7MAZTcHYMeijU1KLAlv3kbHrn1N8wCo8bDwkXaJevgDKIwyxmD\ndDQ757hv1nSdKASAZPjRbN8SXvFt3TJ5e7MFgIfF9dvutBcybREWRtrd7BlC\ngi7EyZVW44RSdfu2xn7ld83eIU4YmMFNYDNJMRmC1tJUTcjP03YH+NA45aVE\nISHo6Cqe7YFCQzfDzPs/YAdeJNO2LO15lNrOZmU+lcYfMUbI812QlC5j5Jfo\n7eAQvMorqasH1kcqVkEM0WLyzTvTePNwX8MQbgQRwXhHJ9DzI4tzOGhG6iBD\ny0igMgzOlrAIN/qQfX0Ou4xBdKTQj3LKZ4EPH8fEuFImrNYmomc4CcAr57f1\nL+HnkeUyBcqhjyF3YZ8rPO3WC5QsQmWxssEGLIbFAZgY2/acyDD/kigbDk7Q\nqPAYPJJ0US3Ew/bo0zV4YBcKtpAaX2g1a+Bvi9mCWyWmnbLztqazYQ8fbFwI\no1UpCQLTKqiFnOiCjSF1EUBxYJsqmUXl+Nt8JVQuGLNrPoSXT/8bhKL9N62H\npQJY\r\n=iV0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/density":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a66493cd8.0_1590081496294_0.9227393965586534","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/icon-button","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b84c9f2f2f845c175546e56ca02b4cccb0665c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.da05f66e1.0.tgz","fileCount":37,"integrity":"sha512-3PgT1a3suO0Wc32a8JSvPqbOQqXgqQK1thVpeBK495e8TPtyP7wWd3DNzAtbFDGc51ezmHWzvrR7l9x7lkyMCw==","signatures":[{"sig":"MEYCIQCTqs3Bj2WynEgDVatq+fuMsja5xPE85xvK6UkuUPE47wIhAIb/xAfF9uEIZfQjSX5hiVoG6NULLD24gsWH/ftMeGsk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhaCRA9TVsSAnZWagAAzK0P/362i4pU92byCjb3keMA\nnspUQ1M4bdaZ1HSqNIsEzMGGGj77KLMR7MhhQW04XDFmPhkRasnUQhN8y+Rp\nBkWTKJT6rgE5sHZ5NPJg8xk1p3TozYiuE/zRraMYxnyZHx88RSzMpQ4EjJ3X\nvf+Zq3dvojbLvWGSZTb2WBRngTYi2+cMKv8xcGe9zw2vTos2vm7SuUcIvpEA\nWTAl6eDdE/5w+b4ZuNsaZQHlqVOVn5yvi8PWrRzFD5hHeDIyS2uq7K7AWGTc\ndgCI4ONw9SIl7v0QivsnmMXnITZec8XibQRdKfmdmDFfkBU8hTm7cFuOezvj\nlda/sxbMLHzsPYwl3qxQPOWY3j0DIjJftzLEYLxyda3HM3vz5H4Cz8xOvuka\nWaNF2THwsUYBPrBmEYcZP7a90qE6VPr/sM8QH2DXv6Gac7BSn7cKazi/RIgw\n97NlDTumLJVYV0aw2gdcLLTWFRjb8himtx3VfV/pYUnx7jOyBKnq4Bjlu5xu\n3m7X8AbuHRMplmFebp4PwNmQzDL5BpqBo93QWRh5urXZ/Dnf8tcO9Sib4apD\nKZ1b0yv5d0xSctnCix05fW7K/ccjQuPLwqPKqo6mrLQl9sGYNvE3nuixXFKn\n3HivCcHU4NP3W66mnoRAj8RlnfeGzGGhLegsbfzJ2B26wwKu8N/VBBrv2NEQ\nvP7g\r\n=NVT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/density":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.da05f66e1.0_1590081625785_0.7907964575165689","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/icon-button","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c758521270e991cc3eb6f671c1534c197eaeec3c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.740860e78.0.tgz","fileCount":37,"integrity":"sha512-jFgi8QkeAulzxIWiZFqx76zmJ+2HheBEqRRTwYQCndde1PkZTtUwb+jlIGnF+VNGbQ5/1Cbw1Ca/g8ciQv4FHQ==","signatures":[{"sig":"MEYCIQDJhdLItUesN5DQTCaFB3MMAuR2jxh5KDfMR3ktLN8xJwIhAM8fX5wPn83iZZWzDqM+crNkThp6MpJW7LEouqdwlWu8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnWCRA9TVsSAnZWagAAweAP/3Amo8GGyfjcmwCjmUmr\nX728TtAJVZybuIMoPR3cO4f6IsJbRJX/04obyt6KFc5VUxQ8KnTeMoDt2EpE\nzAVk5slzHjRcy413ATtX4GIqBhwBpXCld1BSq2k8LeXCRiwMH2EEqeg0wg1/\ns6x+hW2v8ePS5Yptswb0gkAuWC0h3b0XyWTlSUK4S9QBr3Wvgr4XK8YziHad\n4gdcqha2692iWstElejV6pNCOzRtp9xu8PPW92ybGxo/8FMzXTcitN2A5ooL\n81ccJN6tJhvbHtygeHjzqBygRQcq3jHho3Xzpb0ui5UP46oe5IPkwVp+c2a5\nNESm1j3TXuzQ2xUD/5Y2umnZdai7utwVNHU8P1osvdiujly88eEqYQz8145m\n1o7a37TPZgOTbIq5mXice5rNeENk40gji0EODE7ZPPa48yneDqN/ykuBC+SH\nmMSSnLAI34f5EP3XUmYRgSRNSg19nmtnNK0vfFIeWgdypbDfoqoRiYzPORYq\nR9Ew8Bw7Mq1PeQi+SPZZqzUBPpxWxn+w6oEB/9j/eTvcH53LNVQsF0pGe9Qr\nO1FFXgSfDLVJpN/qzj9gtcEkX7qIIlP9Lbg2O9h/YmPMKLtoCVa0CatodP08\nwFVvlti05dpMvYFmc1IaI3WEWMvAAXvmFH7SuQK8YvjUyG46EzbB7Xjl0pZt\narjP\r\n=OXa6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/density":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.740860e78.0_1590082006248_0.9640083308678382","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/icon-button","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f89411835aac1565783b110ea3ec119775d82a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.5cea2610f.0.tgz","fileCount":37,"integrity":"sha512-o80akx6Q4HRhDVf9tsRaCKCQpluv/0WbO8fWd7YOwBNjkV4r3FQjerTTveQRIRVBo6HhNxYSkUXuHBwgUShKXg==","signatures":[{"sig":"MEUCIES0Jsy+a42YpNvqxfS+wF3w5pL1CLoHcNjsRdP0q/UEAiEA4uhvf2BNFBa+ZtSlqiTrQ2SAXEtYZkDXPs7mwwr3I6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpPCRA9TVsSAnZWagAA/SEP/j1uOSCZRUGPWzXv5X3Z\n0Yr8L/jTYxqcbU7KczfTUOoTAKl3r+kjLXYlB8oyZd46dUVLlYERlGV0DRks\nX5kLeROjx0w5FrRyxGJzEK9BnnDMcWoAoOZPUZmYNDofhzGAZ+yZJQKALanF\nfX8pkfKjko+RJsYek1CfDunYXy2Fb88snJd8hDJwu3FWW8+tru3m+OygpYQ/\nZXEuX9A+jxYJ7Qx5GJS4slEOmR3hQVgbolrdaqoCtT+elg/o0pOjSNpq+HeS\n96BAlBEY66iGHvRZJJlubQRcg8rqAapXvRV5yfffucVCRGWEU2iw0A98Ao9o\nNKSUy5ELgj88k2ew+9lZ5RrR/CCGEumFvHBdE+uzKiRibwT55tHJrl5QIMnJ\nsN9babRa54I/nXHq16TRIX1emNYT0KNApxlFWZ+S7MU9t1KlBhvJw1AvyhdR\nQQJmeKe/T6hvULIljxGWRXxB668Yfuh0hpgK8a0p3rTAL0gt9Rlp9TUACHlc\nByHIYYvRUZC1JUASvgyPX88Uz9Jq+ntgidFHTKZzWIXk08AUgWz2M8Yq/NwS\nzcgr2Iw/PFkrhm579fugeLjDIiSN7NqWdeP9zDaXd5BM/KWEUJYw1zd0639g\nJ1+v1vpf1krEhdDmZVwprtMA/JYFrMhU/8ehbp8Hi78PXHWbUcu1qOysWWAm\nOa+z\r\n=ZwQn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/density":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.5cea2610f.0_1590082127209_0.17734002774929203","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/icon-button","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e5eeebc33c77264b880e305cfbc34b5f60b1a6f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.cf7747ef7.0.tgz","fileCount":37,"integrity":"sha512-8shkunWBVJt+79Z9uejKxY+m2EbJrWfz5rqxm6eEpDXfyrP3N7tJ91NSx1D3JoCBA+YLb5Yp98s1ELAwreK0Iw==","signatures":[{"sig":"MEUCIGnH/x0/HJ/EUr3e5bhtfqVbaikBTRilpEmZK/jxxeizAiEA/8NPX0MTm/G4tEt/ILikHQ20TFfb6EUy9xuI+PIIslE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpmCRA9TVsSAnZWagAAwrgP/0snZrJqxiUjUlAP9/ee\nG1iWYKtxJ+iXsPHpB762bR5BpZzKD6A0ftNmdHvqNoQBcB1laFjZen0OZ/4K\nGRI//ft+VUIhQC07/Q1UCwfPQ+HJaaTm0pphTIMDDtdWTVlw5X/p+SUHZiOa\n017iftEG1crbbg+VVaX7vbmp83C1LBtyjtci/ggbxCVnFJ8fDR1y1TtlrMcL\nQNwYNIRnuTI4R+Zm/N1YKjZDabPy3naX7LZFY7phF4StM10kmH54gbpIlf1H\ng4rk5WDeDWLrQ7Jpd1Ganw1yub0h/1XcvUpa+ZxmY1PQlDvPSyHKw8H6NjA/\nTXL6+wI0i0yRK0948xO008WX0aa08IyfBkG+eoEVEatU3w5U3SBV0WhL4iuj\neeNXYFOybd+2PJTGsLlTCc/ms31N8SN+uw8ooUJfmvk+Jl6H8neyyhxTyR3d\nkd10HjMrLc2PP0rZ/41AsFSeRNK31FCHSF7QbDy6mC7H3uzrVAVl25W4Kneu\nv+z0pQSnv7DLjPeyrIK/pk2dK9YFQMsADPVKVz+3cMYsesVln64sZhAPlb5z\npu/GoN4Fy1/VAtFrEDu+oElLZKqWRlUNlSmiID4qROWqQR9dVWb1//FC5c8W\nJQLTWK8wzWLEKNxTxhTNWukgWxx/OBjaqvc59o0wrFLVMEFW6THVlIzbLGtj\nTubB\r\n=t3P1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/density":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.cf7747ef7.0_1590082150245_0.019402340109443417","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/icon-button","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"139e5dfdf0442e0ef1d72a97b303cdb9991eb94a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.862d0d7bc.0.tgz","fileCount":37,"integrity":"sha512-rKTsuVXBKCFjUxD38D1tc0toqD1FKkstR8B08+4IG6VgSPLF+ZcfAxC3MRyrNUd/yvaCXokDC9urN7FmkY2LrA==","signatures":[{"sig":"MEUCIBQkwgUY2cWq3xF9Y+LswZqQnFE6vDqN9yHHo/m7+OijAiEAsDflzZ9JIJsr01HnbopkCdshazDBhoB+U+1GPLvrtIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsFCRA9TVsSAnZWagAA/QYP/2vWZKQY/aqPJqKfpnV6\nGRXFlJsiO/IOIB5nBtY6RF4rRPa/CcW7vhcsye/Z8F+MSa2aCzKnHXRjLa6W\n2huUB0BKIw9DVnnnou101nPX88uMZGtc8RnMU8IDtXnJaTp6yjSpyaSwOwWQ\nkNRo9e5j0JMEjxzQVpCczoNheRnsDTqgsKdsQznzs8x/xYw3NxsEaP/ELfNQ\nq8YF/tcku2tiludGbxci9pp8MWc+dJaCbw+TUh2PPzRwDrFPeAz+tO0SCDvs\nVkJ6NJB+/KRqNGqZ+L4FJyYUiNMp9patslNJUNoUL/a7SlELfinJ1a9it0kO\ne2nwho+nCSXklA/1icdj+00B+ElRfZqXGs2TQ6J5pOaOl13TWJTSK7kEt0Er\nUzL+HJ6NiuL1E7QQIpx3WSLUhlDNEopQ5e6+zDLB5go392K9+IlEaO/dPSJ5\n5yyqthjdmi1jTOkNbz6Hcp45LmqSicwQ1lHK2IjecWU48Rx0Cype4Za7zE4D\nqA40vDTF3VJrU339FpHDmVS1pJzxaUp54uzdx4ix6d5b6g8lNdDtNk+/Fn+6\nSnJRdX/UEahpvtg1e+RbFJUoJLh1T5ogetevJ+EraW+9IBXtH9M83PRNsmu+\nfk+gehaRZxrsyCf+NeGfm6lB1LLVr2mmbitMqns+nA+2ZHI4YyTvxMYDVJyQ\nuvGk\r\n=VjAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/density":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.862d0d7bc.0_1590082308564_0.080344784199883","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/icon-button","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be2d87d0b8ca47924bb8709caadd20362bcf0c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.0008c8a91.0.tgz","fileCount":37,"integrity":"sha512-ruJvEnZ0aeTWwFxiQtnRJV3QrP8gSxAsTjnP0svl1hmRtY3anC9W4WA79jbWe7bv9nIJtiAFOUzMALgVdqSqiQ==","signatures":[{"sig":"MEQCIFC/FMOznzU3ihaibw37Bkt2vOelbVglG/vzdV30rSYKAiBraYX/iQCg+Ij0+OtkeGlYH0N9jAJMRhKPC/HlD2mMfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextd3CRA9TVsSAnZWagAAZGEP/RQUT4DUIz++GMElczmz\ngLPi3sx1BG8T+otl3isxMGvFq/PnRYXKXW6PXpu61uK4KRr3uutO11AMraDO\nLThT2rlEgwSs3MH2m0O24n4IN2Ppcs6+idvaVS9lo0YME3Eszk+dUuVWbKMT\nfWqn/dgW+qqSZAv3P/uZ46C9/7dlg0+3IJxqmqXKKzmO3OHAdRHiSdk2XYie\nQGrsWX1CrvEaww0da+TrFaO+y7na8Y8/sKvONNwjD/VK7gC5zshQ60IYeM5E\n60ZkFTtlQzFLSnYAUPNvQZqFNacgW/6FfW6IslBKd2MY7T0BAY0g1gKKJq6r\n0j6/7cAXiGJfg8yZfhtF8BPUs/ePclqvrmJNwDRgLYWdZuSY3QR0/xcuhTB4\n9xm24g+R5Anak77DwC7CUp9RfPkuusavKVfz/C4WXOYlyn0Hgo6GTD7v8gWP\n2dnsizpSDdPghHYnIdICQ3P9aAovpxw0CH5bjU/chiZgXsoVcIIV+xVE/qyD\nCYJJhAqWtkgbrvaYec7FS7PoPBgA1pkPbJREVSXtxZGAgX1jYpGN0X8u9YLV\nAQb2iqvFpurqB3ABOmfWzJgmDOA7f2J8fsN03ng75UZaL1vul+q/eRb4JZTg\nu4119jNnq7f38TblNiUHIxYAJ05FdCwgQp8lUzo0SMQGdT25ZI8gxtLRl/o8\n5vAq\r\n=nUKp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/density":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.0008c8a91.0_1590089590711_0.6269287186434434","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/icon-button","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef5794f10c1a057c6ce6cf632bc58d68a48531eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.541638fa2.0.tgz","fileCount":37,"integrity":"sha512-EXmx2bD9aTu+/iuTaQC39iZdUpMAhK4+9kr9xm4WuTq+MVSq2N7GGXcqpR5Kl2xAkWZgxYIKoa7/4sFvA4SKLQ==","signatures":[{"sig":"MEUCIQC75fjbBQtMYMh/4J2CXPH66TEy8/kWWk0LNWZfsS2jIgIgLlMwOsj5C+Y4STN6WrXbcLQUIHG3NPnfZ8Fs95MSU4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextr3CRA9TVsSAnZWagAAalcP/Rj8GFroGNHTCpLPf4sC\nk5K3WZJWEUoNFSQVdY6C3YK/OJ20zlUlzw+O8WHuoa5YLpCX268D99ssARNa\nOkb34Ji/fRVzGYJpktHGa1KaxHN/M1qh4FexbDLdDHfGxI4aIyabzkSZbbbE\nV6rD5YFurLCYTtsmn9TgR5+B641CGrrZ5joWBI86lj2wO7/yLaXKE8cLCK4E\nNsK/aV9kS+kdXt+8dNQcwKFVwN/3V65WleSmhXISmQ2aZneJom9qn3QjFi0v\ns24YVjcsE9Y84r5/LgcUuNbtupRQrpm8cxX141+0cmqA8HHpz72SaTAmzwqW\nxcFwDw8dOUBb8OQdGtuCeu1fx3HgAqtWH2m7+bBXp/7LYT4G+46vLhX4XRvG\nEr2KnjtPz3Ehq67/5bP5kgDnQufoc2eCdf6eC3SbOzgXesuiXKz/J2pntric\nXcZt7YuAE0EfpC0F5iV3l7FSGw6fesI/3xoS9SLD9plVJXS13qzxAJjnqPD3\nfZRTfX5Ev+Mj8GESIdVHGeweflRASYoo1fv8kXY+vkFwM6bipWiXKkf1c76W\nIchgqg8XfRr1Z5gQNNkIMzbQYCvUmM5aKdZ+R4KtyOumepbdEUEUbnJW9K05\nvtDmgCCgdlADcf3TAH9qypLQShIh7/bLcGIhf4qtK8w9btFk2/FlgeEXIIOH\nhWgx\r\n=V8iT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/density":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.541638fa2.0_1590090486594_0.7640460347042732","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/icon-button","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cf13c7235e910802d0b1b60e4fb40ba1207a5d6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.6167cd075.0.tgz","fileCount":37,"integrity":"sha512-I4cZzJDKQ2RyvcOJk6IhZb8OzQMBmz3sCLl9MJf9FYw47z4fW9MWKVR7FFpAvdo7EsN6SALk1IjjlKu61rcvkw==","signatures":[{"sig":"MEUCIQClfMKD1t9Wqob6cpehH/pg7KCU6l9hNMKMc5VBTuK5dgIgO0/xf11vTpsalrXwtn52srkxRrAOxdu/YX3r4O82qqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuK1CRA9TVsSAnZWagAAtsEP/1A0XgR9TchTwy+iHGnV\nnvCQNJu3BfmzBK16d02t6keqR07Mrm8l7cTyDjgNyps1hRd4p0NVs29K3yac\nMau53/20M4MonSfYsIcFnzaC0bf77BFv6QLY4L8Bkno5v4lWz/166cQbplaI\nDlEVpigkYo6c5OKep9vPLgwB2YIsmdgqZ54gA+mHDgncIGnt5IBFuwb12c/q\n/O6qysLEWgo4WRAEPRDStNDTC5nlkycOdMKb9xpOQfeblbxbRdNayg5iCtSp\nUURhaKVc4oY1i/K9SEtK74pq0YzkRZlJB5WE3kseRrdF7/28PO8TOQHzpB1U\n/qQ1ZRcBc6b0iarN40ydQJom6uzVJBgq5f+lu8puGxONDzQIu4t54MjJzfjB\ni2M/qbE9kLh6EzfLn7WQzA15/O7iyooZpnRfdlqipM0sX/vsqsm8ZqI6A+1E\n/CcYCpis/5e+lufoydkKtvXGRtNcrrl77+KFiKCAazXn7MAbGnSsM3cQmeue\n02XfberCgzRaQiAgip97DJ6+EtS8OTnM+2euYe6Nf9iBupkK3d7yFDMPdGLU\n+LcGm6c3a+xIpsLFE8SMR2XCrGUChTbKk9JLlAFNAuSKu0Cp6vusBi/A20Nk\nZcgi/TJFSdKMEv2bJfFCNkF/im0V1yO0aF2jpvf7m5hXaONixbAHl1zOW2+I\nEZd6\r\n=CqSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/density":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.6167cd075.0_1590092468546_0.9497882219779732","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/icon-button","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113dc320673b12f662742ac064c52c434d58a33d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.863ac1b0f.0.tgz","fileCount":37,"integrity":"sha512-06pCaN0jRe2RjIi2FlLtQmwoNCJEKFZBnHmnLVeWfT7Kyx1HYaNbPknYKCBOx04EMk6R+8Xk8p7pgNqO5wWsOg==","signatures":[{"sig":"MEYCIQCq4V3frXhgbQaXKp/hMKl6i7wPxM/6hZF/MfQvooLnRAIhALQ+F3Xv6m+WoMemTnoHmb5ABYnfBx+dI1lFyAu2mWsa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuveCRA9TVsSAnZWagAAtKQP/1I3KmBYg1zl4VZIvJo7\nQNJLyQkI/BxLZKf4iBRkezYZSjvpR6LUSg9aGi2RrYvZf4EWlvo6sZvnOTIG\nyU3BW3i7Xboz18IWbxoJmhqoPylQnA3uHFYehk2qfteFdqq5WI3XrS07LkDL\nvohksq2iquNscBP1DIoQceUx2mXkheqjJme1qzgkqlyT+gTbiX/IdP6Yp+hT\nBeo4wVbO0s+HwCo0MOiFLm5aHfJ6i9xk81UHJob3/j2GDdVGrabox1GPB9Cd\nGyhMdZip3ILEGP605omiKLDovfmw23aIVe3FTq7LYpQU57RtIBAe7BDgx+Ha\nwMYWomIDCSvfEJThXFj7qZR9xIpspQYocOSdEV2uZgeVcYhf7sq5WHDTxY1d\nD+CsufpgkBBUG/BAIuAZ6mQHV8Hlu9GJ+O3WULMHOwuAQiO/ZuIft2cJ1XNN\nKlzr4K1H2Wi933GtOZtuMlLj/doCfjHYkiTUxpiYmgBFyHfIhWs/HbNjtrsk\n+VOA04CaPDL8LNJiWkvzYmTvpp/a/zjqLb+HApoBRzjjMdrpLjSD1QJ/jvXQ\nPheygb4SNaWRZ02kGelyBRQPAGqXYld5x2TJtrCt1BwZTmkqa29b/p47XtWU\nBj+hGiTak1CdCHZ6TSQkqLDK6Ea9Ka4fuZVefShBL+qVBub35hiWJi9Uo0kf\n/c7p\r\n=nfwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/density":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.863ac1b0f.0_1590094814013_0.7492967135690718","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/icon-button","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"240ad37d1ce0613a946f1b225ba0869ea90028de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d30a214ac.0.tgz","fileCount":37,"integrity":"sha512-YLQjbasYowPFlW1P/oshxAXpWzVNWfcNj6Ht045MESCekQJ5Z02BV/qm4+c6E0/Roc1CIlEMPupzBtT+mpqkHQ==","signatures":[{"sig":"MEUCIQDMpaJ5VK8uiKJo8CNaUy5RVNzRnvtGrsaiyoBsv3dm9AIgS8F0hQYZ7/kH3IgIdPD40LscFVBWmoOZ3uqDu3PgmXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzDCRA9TVsSAnZWagAAlrwP/iUtoQ40MZP5WiH6m6Ho\niYbwQ223+374P1EfV5K0lDK6cSOeG5dqzGmnRhsk08gpZhkgxB3sVSq7678F\nNoFSx0zAw4xRbrHT2h9O+tSk9JQ1p302R46QJlItZ7/w7fgDbdzeFP71VzLF\nI/wzPzNd5ExPsmJwf2guFcrQbSlBsAQa4vdM7rz5MvBP3VWng4qRaA0dBSXc\nP7zRXz1JMDv8N5J8G8FAqqJBGsZpQOnhL/mEKt9AdkbuXqosBZPaZfD2QVAo\nFSYNPrxrNc1PzIGTlPwv6R6C39K2vFV/1/Cy5m39dPWiBGdmCu8BaT8BOyDY\ni3H1Ll6n9htlcX8a2lg2s/Y8BJjea1YDEhs96JtUhg8mj7XYrKZzU+jmFrdm\nrR2LjJbgbW4hVUhxBYoHhdZd/6hu3ac0Mw90aGHCB6fG/BHu7Nh3VjZXpvGm\nGamHIuNnSyBrzPsHENFrPQZKNwh/HhJUcjtXp//fLJdCcmzVN88Ae3OCn7aR\n1GsuLr80aAqGlCYmRLAFJSAigBJ/m9sr0ntwLlV3Lfxa7vFxmG8t1Wsl7n9z\nE38Uyu5c87TorcXep7SPhQDNRoF0LSyI8n80h1KduNbGxaGANUe0zFXqEaMZ\nj2UGtR0nIz9C6hVs0Pbe8ECMLt6wY+M5z5UMreUTdnio7U/eOvfFTT5wwU34\nXHYK\r\n=ulcv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/density":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d30a214ac.0_1590095043063_0.9325428066992782","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/icon-button","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b56667375fce191bb8015e4beda28373fcec2d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.62abbc8d7.0.tgz","fileCount":37,"integrity":"sha512-49D4fCfNKxFCxGnwISv87BxpDhTp8ZKvpiQJNudi/VfCWJK0FbS4KDFnFahhOqu3OF/bbY6unB6G0/17ah6jBQ==","signatures":[{"sig":"MEUCIEJ4QEoXq0wv4IqhyHtLbZ9qJnSBPg3sc+pnJBgVaW2UAiEA5pKrMKkMCGt+uijVkHDYk22FNrDazhwn6wcgDpP8npY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKJCRA9TVsSAnZWagAA03AQAJgT4OfxIVuGup3FJkWu\nr37a8SLOVo075EWSxen0MVnPJv4LMtRqTDl/ZnhCdYE0Id9MmlBz8i/VEhbe\nV3SFGHBz78xqFeemg9rIr7DFozBLWq4A7z3yVqou8A3C81hRXpdvomNGqYYy\nJ66LfnmAFIXyVg+phlEtYsd2w85iVUemC5JbIG2SNC8k53r4VRN1JEKbdz2c\nwrppj6G/0isMJNdQhYqsON9ErhzRVg+0zYMFeQSIBIHLTjhenxaZTHGz64Xy\nTfqH1cSUTSY3RXrLJ2A9oh/IbxofVUd+gix9GpPHQyEdCa4Ifjph0yVxen0t\nU3Hiq49DeyUz2SrZa2eo/piDbcV6vTJTvTb4H+nwOJLiHhZYqbm5v+YMy/Tl\nZgvhm5aN83uI498oY3zxHkxhyoKVBMJaR35YZml8x+c1MSmWh5hufjkFzYES\nRDSX8LR/w5jAK7fWDULzMYqayMguNUuZis0c7+bzMD/toyNSqpRWVOrxpKA2\nfUI+2WlzD60JkEKKBESCV2r3lPrS46QWXOkWUOep/O7I5uVwXgEOzlv4uH05\n1WmadbX68TcJ1nlT/MrAIs3EytXmggRslG0qD5DpfF1lX4q6do8ka3zhDnEZ\nH/id/uObfhLTT8bR5zCHDcwT6tRfkebLbOafZuLMvUUEFR3cjxr3NgYtZA/V\nWGRL\r\n=oVCw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/density":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.62abbc8d7.0_1590096521121_0.35217080832808567","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/icon-button","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7837ec555597983b2bfed5c009a4602e6dfeba37","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.49bf31d5c.0.tgz","fileCount":37,"integrity":"sha512-XNKYBe2VL0K13VV9bwx1MtEoIrj5lZf6U4uZEyafVHnJ5Ly17meMFcJrStZJjx8dK1saSM7dmd0hRqjMIauBWQ==","signatures":[{"sig":"MEUCIE6sYdmWKex4XoPokFRyyDMCvGst5m0By6ErQ1FUc0fLAiEA8n/O7opHXmrZadwsgaZBSgc6TLVqaWmj30CLmj+JqFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNXCRA9TVsSAnZWagAAAjUP/0q9w3nQqcDOrzmgLYfB\nUguUgxMdzfRU0an88+TX3BDDpCwmkPEJa/Aq+DyrfE46RRy+Vp+1jLZrqDPq\nH6f093dIrQ9fIfcSxZn2Hh8Ay1a7lVT/QRLkNyVzv0bODHPW+W50RBhaVZVN\nOQFv15erg+4mTFfAkP2xMWs2TACDArE8/tn9tiQW7hGrMIvSfRZw4ctidml6\nh7m/D4r3RyR79ICrSiettSFG8RYlO+YJOIlXLdKCFgFNfPLGhQhhVLCQcRrM\nFgXMc8JL+ySfPOfjy7AhaEVJrrLfVcUubU6CQP4SDBPt0ktyLxl09K0p7/2+\npMWyeYJZKoSmo0dDwmaN9awZmE4iSYpgeke7FWDGORQZQ1XPRUh7qjv7t0k7\nah9G4zt3DxuOaHWYe8t+EHnEmO+GFuwQgBVgcqXyUDIhDXBrFRSIc/kEe/iP\nDJmFgNtk1iYJNfsbOV/yzeLVItYgLhwzGkl3mLQSBMtlYvqBTdHPH+Ob4BUU\nERpGH39uwp4+AfyLa4nBi+9Fjmt1CUaioc0PVhg76cIXM7c41uwhLKV3Kbf8\nnUIeUzd41ySlwnaWUbyJXIXy1TsCA1Di9pLMABu4zGELLrTQsxmwx2sUc2s9\nhl7p/sMHmLfBxBaDjmuu+hRVdDRbGPoMpnhbAToLtLpJ9Ry2q0hyYfg6PQ7V\nqEFs\r\n=Hlup\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/density":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.49bf31d5c.0_1590096726291_0.8901498091500726","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/icon-button","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b68e9ce610464231bf298738593287ab76d4b875","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8e17857d0.0.tgz","fileCount":37,"integrity":"sha512-xlLeRZCzHlhhIW0bMPZV5UQzsvgQVjCJRLQx4BQcbh5NkH2lE1C3oWeu3FPg/hiA//Z2T6EXQBGWFC2u4cpIzg==","signatures":[{"sig":"MEYCIQC24QGMeImKGK6x0HgsA9w2WFJFIx5zpDWF8tadd/yHfgIhAJCJu2OYJlY0o9uQb2z+J5ta/oAj9gr3vkho9FOJH/8n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOPCRA9TVsSAnZWagAADBEQAIB4PxFw7yCn+t2dDwIP\npFAdFPX7TORli8Qa1IFcyhmehCV5IUtTASMR0OXCqFKWEcHUrqbdKARb0iSm\njAdQ5rteY95KmuS9eX0I1YneYrB0zn03KGj3hgO3bw9YVHTOnQOLAZ0qmE0h\nbG+9LgvEuwXSa9cRrEaevswFH+P8jTRVpH5nBq5zCx5CxW35WLkICZu6lmM/\n9aNn29kyNLluz1qG0Cfojj1fgyWKZELVI0o1Bb57y48jKE0IRt1KSBhPh8iK\ndgHTlXY0D5bA1gGY2nEaahEnCU3I5C8BdI3I/g1dufXU+gPuxgK05d4n61wE\nft0VlC11c8yLzIspsV1GMxDlJmWre6w0nNFifQsdnUP424L7FuQkcLEyoy1V\nlPpKewIIfu1Ph+V2ZWHvHhUa51aZkEQPULUNij0pU3+9lw06B2vaDuxOyvK4\nzsZBdoiCeKVQqB75mD44p0IGqlrXWlR1z3KT6FYJl7gJGgOa/uvXaCE43m4z\nIF9M5d9SXd2Rw69hJuJ7BM7rb4TBtSRorClWeW1Z0qJYiYIExjCFbOBn9+H7\ndLLakKxdqpHlVSuISyp2WdrQVtpdZEuFHH77GxXfDP0ckEmlxB5YgLOE0Bm6\nv8ZfwgODLzCjOvvjHagS5uzE0qZeV66CGItHjzMJYVpjfEtDarMQbeVuXhHz\nrHU+\r\n=VaYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/density":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8e17857d0.0_1590096782641_0.8262434172042412","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/icon-button","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4a5ca054d92f6cb2442c69394a38e9401751cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.c113fc942.0.tgz","fileCount":37,"integrity":"sha512-CZE181rzDnylJTE0Y1RPM+iw3GANWU9nfnLe6C8nsBPnkNAnw121YJdC0LDXTx+VfeHUY6yQXxJYtjZ4trcQ9g==","signatures":[{"sig":"MEYCIQDotaDqk22/XggSxdOrm+gwRvy004mkMZYUM4KcUKjr3QIhANoXKPTQYIWH05KfLQCbATA/XIH7/2ruBFPMX3TI5sCf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTCCRA9TVsSAnZWagAA6ZYP/3R532d6mlO2K6DWtj4b\nvzVIRFILeaDFTx3IFULpqWb2Ac8mxvAuqY2dc5ZJYuYIJiWgRKfW8nGReJGO\n204/m4BsfEKiJ9V85W8K7U8HlPoNCpuTnwWfaKHtLpCpaWjNKKiyBpDR+Guy\nsxrx9u3TSgLdkel1tZ6mt9X2E0hAhuhLk0NUhAYLSBq6qBEB1qU/e3z452LU\nl5zJnXn1OSL47hHwQrotGGZwns+C3tZOWLivHF1toNBu9phfIJhw24IfhtYB\nUFkILcJHP+7x5+ssPon3uPeUL/2YCOtz9QdcMZYRZRZr494Aj0CNCMGPyJft\nXkucuxoiVPkm6w+zA6q1VoJ+3723bSUfkx60hHt85HhYN5nxUOq9hWeh7fUU\nVm76hPbRSRHcsKzJ7hV3wivLHVrO2xaTcx/5k6zazTpCw+zYvX3m1A1UYytg\nmZT3W6M0e8MhDY73HwNwbGP3xWirAtnsGGRF06yPoEghtCYxHrf+seIr7Rfl\nZASOGEbzlStBF4+NObNX+77ZZI5+HYgCmew7PeALL/G3sYoF53FdJj1H/61E\n4gfu+ddga1znnI7La91CPfwMBkn5zHGqkhCiusgEAIEUbg/7g+bQfdPOxkgZ\nkCQXWdd/sqpYwZOriahD8BVkajDfQn05I2IKsUkg/4KqHj27F1y7eh1uLmvW\n1D7A\r\n=qUFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/density":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.c113fc942.0_1590101186403_0.08343291075936854","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/icon-button","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd47afc4c1ba5c6dc11af017691081b33df71b9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.912d9021d.0.tgz","fileCount":37,"integrity":"sha512-WKk9G5x6tBq+OAMtva81++9R4xkjfBwhA36skeMCCb7gBfvYcPDAVN/f4UQ/7zQf6W5gpCzWeDoZv2OUNtneKA==","signatures":[{"sig":"MEUCIQCEzBzm/nl52rD+PNhCmdVRwJMUhoFq1VCsOKHtY+x4EAIgYjkNQvQZKEDapswKr+QFt19AH8/YfAqRN5026UnVmDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPDCRA9TVsSAnZWagAAL6YP/jCMlE5fSR71Gq3D8B1f\nNXY3VoXN97ESjXfWYxME1559h64QbdfoQLEcJCN02OLBVH62+07/u+p3B2QY\nbFFTr5ABYVIzAk8fhhiVlP/rhOqaYg6crOdCkpyrYEEbvdvzTBxp3VYDY2qg\nz+zqCaSmTspLwugkF1+FfIReuuodVhj2JNhDuiqBy31d7SvB4BsJ/NV1dyae\nIoLbAZb2P85z9Euq1+2d31dlm6MGE0q2TLpfBfd+btHTUR5+Uetb3AUtrcr7\nJegPH4IIIV3tdSZ3D6SdCF1t8yOWgPWVee0EBJcBNP5nTG2I9b5X6DRICNOz\n264h1C6X9teXBv12RCq0UWg74Yjczf1j4Uvp38R300hCznvxxUHwlKSlVKH8\nUpFByT1Ehw+qRzy3W2m7qANA+Z2ntsHQQRQDvKJH6dE13LyCR3kQeUtlYWry\nIGqKYCIooldtGd7ACFDtKrcEsQxkZLzB+Pt7bsuMPrzhJ6UjzguAIie8furw\nUzw6ePpXFv2/rfHDEzCjM8jKWa54yhDE/tKVRZEAyFCcDIU0niYwUDTgaved\noeifVkrbZExJNAi1tUQ6byBz+EHFys8JpWNKYCV0u3dgt6HEJMy/Lshw1n7l\n6sWiOo6bfc9k8eHyy8qWanKbK6k4Y0A9ycQkG3y23Jes6afSe3zwVcFKr2pc\ne7Kb\r\n=fpOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/density":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.912d9021d.0_1590518723374_0.8959672713567404","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/icon-button","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c517a91fa642748a89eccb2198cfea360fd30c6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.68a2af131.0.tgz","fileCount":37,"integrity":"sha512-wueD/ErB2pkFE15T/sayU5BykWmHAsNLIHgwmh8PbsbH7aU4NDImlXNwUaH3qQRUGQeVaG7SyuNpXXHGV9WL4g==","signatures":[{"sig":"MEQCIFMtGgmndcz1AequE7qWwD1PhOlcSXrQlcHGbKtuwDCaAiAxDTmohBTpzbt9vwxegpLgCzg1JU+uodAISrmCz8NO7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWj6CRA9TVsSAnZWagAAXLwP/j7OYABfT/5BW4G4/mEZ\nuZ09YxAmxpCURBuvkAT1Xvg9L93KYZGZyELIX9iNMFHMJTLbjvE50KfI1wS5\nsXz0tEaQ36IHP/WI8rh91wkodqqrDrIGhXftNYpOM2kEX4y3rdZIGp74HJdh\nmJrxo9rxYb9jTh/jubkI8B7MEfcilV78ZWHNZm44rop8VAxb6GIDp8YOvRup\nzYZ02jw6e57pvMQpEUBnQ0TcQFkE0J7h0OpTPlBUWDbEZ35FRl/XkYa8W0h5\nvkrlD/wzdxnw/q2QHyjHldamS/ookn59a/VxYPBXDZyBeH1CnLYQZe4zujqJ\neuF24x38IOi20Umt4GRkqXv8ZRCcbW8Ff7OVAhs48onIrGKKku2fTNb3XoH7\nZ2YAnuqurDAxm26x9fTYCS2p304fe9kkG3ZKuYRk9UqxO251wAoJy+idsGpT\nuhxDQ567Poye3F91ni0SRUJGMpF16NlfjMS8xrtue7vDln1K0KuqIqHFq6oj\nbJ7oJqfg63Xxqe9HrnYCr429phawGMb4tpiCiol+8A0dW5KoM49xZ/KJPt0M\nzvGKNobdQBy77d/5zTap6HOCdRdUVueFqtNQU0EvIaECLWjs0stRioCcgB+O\nXGDKNbVfb0b6k4QsNDTHatDSqSNNv7yjGIdRn6VJBKjyqnmcZEpQGxm5mcwU\nU6zu\r\n=/TtD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/density":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.68a2af131.0_1590520058321_0.957961934123458","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/icon-button","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcfe4c1e7e9ab7294ffae0d12cd16d025da5210f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.01de07011.0.tgz","fileCount":37,"integrity":"sha512-7FRSq9h4S3P1iyrgfTGT8/T7KI/XAJkBcK+utYZbD2HOJDhaAatfT1K84j0+OKsJulC9LwwI9Xh99WEIA17Avw==","signatures":[{"sig":"MEUCIQDbBeEbF8rH6gDiN2DTQebwowPayIFlyP6Zq9+y4uHoawIgV4+3UQkOA3nPdcJR9xWUaEP7g8c4FoXKPrV+CQL7lAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOICRA9TVsSAnZWagAAB1UP/R/MWNsDimqzYPQ1rJEZ\niYEsYzGr/iGEsKMz341P3B+qQJVSbBClBa0FMaPu99TCfJrbi7xPsIwyo9ZT\nktcw5yB4FUDtTvPATc2TM+kxd7TpDiKgThLMiowbI/8lu2bUZYnlo+tUqCY5\nL/3HJpn5uNyapC7wuGb2138xKunmrWqgpXJmshRNrrBjtdaIwIDJNu1wWOQg\n2VbpDqMQIOXu0dpq+xashEbYShyCxYV+B3e/z/n2o/Et10FXZwI4bmjIKllP\nXdPoVcXk7/5SCqtcx554g8CzcG9cbhr6BzxLA9dEX40of1Zb43lil8L8WVJ1\nTW+Jq7Kjf8qQ/75c+qtOCcQSTMphzTE6pV5nVonDhnY0FtRaGmuy+jY6eVKp\n/4nAm2zHzfRRzFAM0bKMHdT/sY8k2E9VQaHTumZJX2W7EeGvVVwE3LYcbU1N\nj/lSsmu9FSlVf295A9hiUSsESkPkB4UGrQIruXtxpa+S5pJpvs5k7+S4HI2A\nTQ0QRpoPSrGKgD0FyAyvtv2PU3p44D2kcsNWjkWp7N7+9+YwjVuQtqfMnEVb\nZ8DYyt+16WrJnaKjkqktH2Bs4nn+p+EL/v2TWxvwJ8ALdd6tb5jL56irg37b\ntGlhzILBm1BvM3YkrU8Ns+rv46TUDAKwbi+MGAn8WbQV3WPFtpWXBEiZrt1K\n/CeA\r\n=UdLq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/density":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.01de07011.0_1590522760365_0.18723632347006847","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/icon-button","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c832da2ea1693f05d438d9b2477c688292e5f76","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.51d4535fe.0.tgz","fileCount":37,"integrity":"sha512-Lqa8jWZrR9MsFj7pq8By/58WWe+Av8eZpYhQXqPSW1GSnynxs4FIHxly+etbn+5SV9pz6kci7pla6DOIL7P+pQ==","signatures":[{"sig":"MEYCIQCBFuRDRRR5yzcrRTo4cgW7mn/t9zRgjbLmtkOL2rhXgwIhAM5QFd8WCwz2HnqTIpEHWt845yZ1XN1ie7J2vbpx6v5R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuOCRA9TVsSAnZWagAAkIQQAIQtjrEuyGH73ey86EAU\nOrr+v0PfsphBOPelCnuLc1BYNKTi9u3bsVol/fvvMX4uzEM+F+mA+8CpiYwd\n/U3xG0IKyIcEOcLT/MUESN5dedz91gV8/RXOZxhkVvWG34uqU+P5it6OtBvl\nkuZyQABP6rg///A0uBmi7iBfUTDyksHMH7exKTkn4B41b0qsni4z/yC/aanG\niRRgZfGVE5Wen7bvJ7wcMpQxza/dI9SCypk61X0j1yKVrGpSre2dbDNiVxrV\nG3DpU0M5YcZNxPKenc80PIKdu4nF38xp1vYQ/BPShSTLUCsTwOtPRmiO5AaI\ngi34dbRxFDnstOcvexTA6toa2TUAoTA+TZhXuCU4+xFdvlLKzIDDasiChJvM\nEov8A96KRtTyykjGR7/KKqPJ554KwQwr0Q+uPIyEargCRYHEhF3aZ03gCioU\nAubx0qcoTm+uV4IJ0Dl8Z13U9/J85DCWpMtCFv9UgOz2BQfkJWaZ5vJ+x97a\nQ+CY0mbBdqwmnrtX+QRNZnbd0mjDLyRB3+6QsBFoV5eEdP3e6Jy5iYiJF35+\nFsEUiVv/PV5swYBJ9oca2ZA4ifbpIDL1Hdoo3VdBVqhRF+VZ4edCZ5a4q0Gu\nmmKJ8ez7T7VJIxs8kq+n2OMK6RLIm777y26O+d2BQiW5GqWtA1SKWNq0vQK9\neaLV\r\n=UVTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/density":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.51d4535fe.0_1590528909807_0.02362852257238801","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/icon-button","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0520eb6aea266be60330d1683e294c2b60e9de43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b86d826b7.0.tgz","fileCount":37,"integrity":"sha512-OjAqKTw+x1KuRHUmkPYJ0052aRvC11O6brhPxD8xEJXBkZtX3ZIUxcp/h54X4aRqiHsxTADd0vw7ASIkaplcEQ==","signatures":[{"sig":"MEUCIQC/pwxU2twKoY7ASWKP7d+JiKCpU1ZH0zhPtt9avPEbFgIgANAPxvgm+RvG0ZGMzvJP95AAmakxiEcDYspggafaXkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSbCRA9TVsSAnZWagAAWp8P/jT3AbCTv8QsNdXSbhWg\nY8k815aZBmPJJiUIsjKUIKc0+hRSHyhQE9oJWrWIeiqmyUM7B3C1Tt4yk/YL\n2MyCwdtbEHS/+WwgqYCyverrRwrIhwAl4prBSWoBJBdh14Y4hRYWk06xZnv4\nTpCS94OfnNRaCpOdHz+P1FhjNtK0EpFmZjH8ZAclevsCxtGt1jPcMJqPpWr5\nt266zp8eSrnvqGeXiEK1g1GWbwrqQxM5CJj6XD5VaN3QQstpelAHwWjwT2I4\nUy1NeW0srpRnh85uw7ZpiNtG32b2kczOrTMRwFIra3n3WRn53eGkeM/iNwJA\ntHpt1QSK7XM1DWuoYunz/u3kYYniiIIyISgCuNNx2gqcPcF9tirNkFf7X5G+\nATWYNhq/r/k8M/zwuXtfxKZ2vLlmSKnh4HThQdXDHRQwxJgTOJ99b7bL1ozk\npOwxqfTEWWF1QmRngELiyitrtzfU4k9IKIljmZAss9l86htPdkPKpyeL34+O\nx7zsRe5pt/i9M5bnx4vgtGwzPuxhQP4CZh/MQiN8Zj/G5WeJZ/rjDpoj+GgO\nNzqIMyr5DziUNYKWmx7Zh5QikB3a5s9kMatouR7la8uzPmjETOvhpvnrBkcT\nDsToMHAo8xRxcb/maoRKZT8Cgo7pADukviPpyE2hrwcqSeS4nrseKQ0hTrEX\nT36v\r\n=TcSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/density":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b86d826b7.0_1590531226616_0.9152732683818501","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/icon-button","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9cdf9125fd85ba2d333700fffe93ad1e8f75477","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d91794c7e.0.tgz","fileCount":37,"integrity":"sha512-vYAn0d/yT7ILdO4hWQnpMVToOQs3qRH/Wy0UteS9lNIl6IMbMwAX+TfcIRw9ilVzNiCF7o/GlYwHCXbYIqwkgQ==","signatures":[{"sig":"MEUCIQD+fVSePTZK4u//Jm3NruaADHkVcZ51k4HUlLGdcl3SswIgRpuietdl4fdYwjF4oQ1QBD6XsdfIEDoQPbHvGUfulk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxTCRA9TVsSAnZWagAATAoP/0tI6fMFtLLGOb4F41EG\n4vb5gJfkHbWsKEF2C5e7EhFWRq+nIjg+9YJWn9CVenlZbjZx22zmdIt82av+\nX7BoQ+IJs+EtHEg3hMjr1tOmpG5o/ghTYV5MIXcRMYi/Ac3/KsMNDGe+bEJt\n5/onvKSrha+/IjHTZTb8FFxdmpNZxD17guPHpoWfjt373d7Hjz0NH7W8uoJD\nUBprvDb3TS6PyuRM2Ffaw8u59JPpRJkguS6M5VPZRfypWFysyMZyw4l3a18e\niosXh9WAOSfv3q5WZdA+JXBTBcOLev7G/TmCj7BOrx+DiQcdxcocw8gawfm+\np8hr3GMwP7AwgQv7DVha7or/fFOqKLoLB9aEUO747nTijpL5VSZUdVErHTEK\n1cjUSCPiAWxxhQA9eIiHfs88NCDMbtTujORENxpSw0VaXA3tS4KSdc9BO8Ev\nxVxfRZeiisVoxAXEf1dEW43XyB3pRnyNoacu1qdO6QfUJl+sdzsW0fkzdkNB\nQJA0BfqoW+zoGMaAjolPO6jODCPIBFHz0VnssJ6TG77FCTbeLuO1KeUebGZN\nfDFN90jKxEwPgoCOVNvi7eX9gjex8o+706H9bv6MCPi4xl0fpNaI/Yt7QYL9\njg0HuUzUUFEvXwjxcAmxGF7FPuWiRLg73jofkPrmOl0j2Ito3AR9UoL9ySHN\nXqta\r\n=q/IQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/density":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d91794c7e.0_1590537298683_0.4644830837596363","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/icon-button","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68dba7fb678311dd94a6be5f0b6b8e313bb542fe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8c6d7e076.0.tgz","fileCount":37,"integrity":"sha512-IAvTx1Aten91e6J1Ucga3LkEYDhNiuVoqgPe2TKfpCBdjtIMRzkySui8AkdBiNfqIA5oVBM1OOfbPBlsCQZ6Og==","signatures":[{"sig":"MEUCIQD36+jPgjJhTTQ90Kf4M3Wg8nvLWvtmxzUAV3vDgAQG6AIgRPHji8XbeUZs/F7yJnb3r3AA3fcnmODZv9j6JM5Lf5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriMCRA9TVsSAnZWagAATsQP+wc24wiqybEkrhTZnhEj\nJL4DcugsLrQ7ueM6z/sY8l7TvFW/We71/ZNngXuHM4sHET6YMXM34Fqpzp2u\ngCRDxSS7pQEVbuP9mqxrD4LUVuVQNB4u77HXJdLXAN7FYzA/phXo9k3K75xu\n/1DAJF0nJlcRwTW4UnB4XeBFin6nBiYtX4XYqyGIRCPnT3zoXs0xlLKSXL99\nuOjJRZjK+oApNoV3w54EGBperV0gqpWPI4zm1/TYAacCKi4/rkooW3XLBpMr\nvjJdkVkE7lXpBckwhCjBZT1RzKVbchaKRWnoBoHxpb8Oq6C+fCBMmvLv3nJu\nNoiOIJjuaCf5I2JEBBmV6IVapVY9byltZq9J3sg5fYzscLBnhIK6tROy/MI0\nVyx5V9PCfgdjJ55+O+T8SvzI8qf06ackbQv9ODP49F7B73f1KBYoavEyKSdE\nnMxB3fIFnYmVjijOjCSN3KXU4G/x70yCnPcOTkU5bAUlm/ltZmxj1nBwuBWv\nmjOklAu7/Efn3ysmIHWYZbCdH9R2lRXO9eqNhvHZ4RiujD7WlGO0L3ytcrHq\nDAgEDr9W6RQiUzhCkzV09hmExRPKK+gspj+ed+vJeppY0ODeip3S4S/BxWqv\nKe0ThUjz8cCaQQ06XN5wXk39/P10W3nOVEDbdMrdxdiZjz8GXI9scbv+UsbK\n02Xu\r\n=GNm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/density":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8c6d7e076.0_1590605963757_0.4680830176196873","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/icon-button","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96f55a6a2a9d3376a6c21085bb44493d9072085","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.5b5f62f93.0.tgz","fileCount":37,"integrity":"sha512-Zvp1ZUjen/kVYcCz8iXwpX5T9pCjxRloaDEdZ9FEglcqzCvzs7oAi7j7Pbk9evEx/AdWsykq7IETO8SLUez5Yw==","signatures":[{"sig":"MEQCIBq9T+kQ2FwpqKZ8NpYeI290hm5hAkG1Ijf8+Yag9p6nAiBggcziAZPRdMK+az2b7QyMiXoaDM5lzpp9QLDlYb9cAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrylCRA9TVsSAnZWagAA51AP/i/GVzfw15wPncHvdZlt\nskPGLgZ3rWU23tJCMg7QWqzoyfmDGmC8aAeSKr2g+oPr5bb5/4kncocvfBG4\nOwcdrOMUkmKj/ArdqSSJNXETbKuK5jhfloLmaF0FvmsKaGP+i2Vhgfeuu2Ow\nuTjeDgMNwB/nXpxQONqbI8jgfUwJ4e3gvoF1ED9B66ZUUVJzXMQjD0OoemUr\nsbip8RddSRHZSrAdTzAjl53N0qNmrSZ9tMlendL8LLti+qDoawIhurrftxXm\nTcM+Zt1qVOWR5L5l2ZLVcDSYoxhoQUl2blQA2sH1sZR8wlwkNnfuwgGfAqOy\nIfNemG5G48NuVw7NpQDcsD7mw3c7SRydtDXKsIUbDJ33h07/n9vqqIhTXDPu\npXzGAAgJLXQIfPdKyynFixANX91101s0JzRZ/NfvXeudRN3CZzgtf6shrHTK\nzIWcunC7jblgr7UF5zEDXN/aswI2EKZGq7n9ioNN9noe5vs9RCGxXa+Qt2mb\n4qix8vypCy1EtJzSx05Rq+PAaZ1ivkUiO/62Sm9D1XL6oJA4ZhpkN2VscBOy\nvJ7BrMWejDaM2u3mCWysy7QhTBrElL90aa3cCtm3h+FEF69Mgx1rjh4tHaG1\ne1SercVcG7q2WH9tHe0Hk/5c4bh/xeyiwxANU4qvJTu9VHiOqvN0xKpyQI5h\nNZIZ\r\n=wwgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/density":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.5b5f62f93.0_1590607012894_0.7102168271777487","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/icon-button","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c19bbe56e7b82a1c160677f757eba12343bef0d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d9972abb1.0.tgz","fileCount":37,"integrity":"sha512-h3Ei0eBO4UKNfg2aoBjmA3b31fyfUyz1jPHPkKMvc/3MMTueiImL5Q6F4SPEeWyJg1lQTM3rxkeWm/yIJcIJQA==","signatures":[{"sig":"MEYCIQCezSK025bQ+W7j56kwEjtinmfHv+Z0gn77P8jMZF9gBAIhAIqq7sh9tqQRYFAhZUrRV/E0O467CPQrdS6pi8T+mjnb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsunCRA9TVsSAnZWagAA+2oP/0vR+b7ANQG5Vv0Wh4RS\nvZrYhhc5tPjavfCKL+fGE8Y/FmY6JAsd6zcLJyGZzTSO1QE3fuaZYPOOj/P4\n+rRObVwL47myHPraT9GVjgWa+J2Kvfm/kXgD8vUyDkie6ZUoieLXuCPvZf32\nfQR+i/CqDE/3Cdu1uBS6z0clvZS19AgPtVfaKB0gLvXreA/RQpQfoHK9hYwE\n0Gkf5bcYFyjAfIcBu9MC+5Rr/mML9UwG/HQOvCzxx/qQNfXbdLZjRE4kfg8i\nGrufGKXChReCoTMcv5xU8ZGoC+3erPto3mtTpz0noJE0yOELjDdfqeLf1T2K\nOzLa7uBauT1zW6+j8oAb5f8PnL9VfgkmJrlTPIRom3cAjEZ2ztph6NPoefH6\nb25/sP2cKAYmr2tU6q9VJu9zIetvHjgK1cemc5vNZIaUdc6aJpE7bwP5Cft8\nIuU/RankDbVui8BK6pv++kt36DyhqPi6beegZE4yq9h6bpKxYuaZS3C+/wC3\nQU+kcDaeSAO/tLUwJ43UKfFN6S1IjyZnR0drZ+2mGD70HQnFvE6yJ4ahtxne\ngtmEi1iN/vS8r3cHmsuSYeelUOi/D00kqF/bQkQqBneJj5CNJw+ZeccGd2WM\n1kkogq22lJzmVRzKSjXkhHefab7xWNbafBvrJ2reEj934MzJSwyu9ofKsfxb\nFO91\r\n=FbQr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/density":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d9972abb1.0_1590610854785_0.36431557808883697","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/icon-button","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec43ca1b3aec85f7e83b03b41bb8c83b4018a425","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.6556eda2b.0.tgz","fileCount":37,"integrity":"sha512-60HP6KWT5jdVQrw+zjAFauJnS+BUs6xLAY/32AWL+iyXKF/EpLNQe5+BObvBSYyewfWa2l2AJNFcBkc6wjiH0w==","signatures":[{"sig":"MEUCIQCPWc27VcG8KGDyowWJvtOlCCWmLPLwZDFGJhReQUKOGQIgdFpuxxofq23SqHviNvR12mXkIwGYFUxpYBFVPuj4CX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3KCRA9TVsSAnZWagAA1SkP+wVdkqAnoxX6yJBk9l4M\ny/8FIbbislqKVlGgaMIg5hm/SoykEFxsiSgJ/hwlFmsf1awWkEtBzgr11MJA\ngVKJQosfZVr39DtujQKaymxs+9oxeSkrw1swOuNBEe3CxqYkvqJSmRpQXBnn\nNk44rpgO3F2X+oOAtCx8RDKpgSNMRymofYzaZdl26iLCotmjm1lUAFBiZsct\ncYH9UgYFLcZhe66u3M+MLLF0q5xikSK7hUI15Ec60y13kvs6EaKFG3uvBymq\nM2WKnRNmVX+BEv11CQ299ZzAs19AdFkerzihkT7lE/ddDkHG8wLZN8WI/wkJ\n9u9WOXkNeTC5UZOPSTM1jQd4wqWNUMvcGjzSjeEBI2vROt/vKACYX7MHu3Zs\nyEw7diYikn08yfiAok5ZQYbIVex76szsIw0ZXaGvQHYLyskmwwOKmiHPM70C\n9xfSVvYrj6jbEs9dioTIg357/AZxapWuT5LlN9PbJ9prc8NZX7FlNEQDZnXa\nMaibYeVmDhFWjTxSsDQ8xo+pNc5orykI+IbGW1ZwlBsrBIPF5lzhWwXOaeWB\nC9NCQUaB1DTuUYi8iykyJzLqbEe7o/JSqbyVsbVbh+2QFpYEE+L9TnCfGsLi\nOZmIx1BgBFkjiBxCzm0uwvgIU9CqtkKFsnvp3C4r1Usg4TWDzFvzwDt+M/rZ\n4bFL\r\n=FOOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/density":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.6556eda2b.0_1590611401487_0.4576253549351055","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/icon-button","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a49e44bc267d42bf67dbc6c95ff4065cd3d67df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.32aa23641.0.tgz","fileCount":37,"integrity":"sha512-uR0KCdcr9FsEEcg/vVexEhelflToJBgJk2QMoMInxIj7Or9yL2wdbtp2H8IiQF2L1z+kbRbT2PV7NXu6FdJnbw==","signatures":[{"sig":"MEQCIHeQcsfA8uW0x1Kzb9/xFaLp5IPsgZMYAfFTgBoAZNwnAiAkZQ62J/xIMGr0+xsT9XKsZmyigFMtWM7gXrzS1689Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3LCRA9TVsSAnZWagAA8l4P/3lJr/CTNNt6AFfLLhIW\nEh04nHwT0of/FuhY3lWmSqJh42T/ILqlQ6ytgv8VwfXsrBexaSa+GA2thmvh\njh1cBGU0mjgqemyNu3IIJ2zac8gbDatbE2Y+IBI4+7tEROeM3n+5lIQmnMx0\nkQN2h5fFeYhTAscaXF6C6rx+r5Y7nAxn4m1UZv4R64oEfBVPa3QW2i/NP5mB\ngQ+8EaJx7+2JZ76wXjOfxg2e1D+WVy/1JZk8lUoXpx8srfsfmu0CxsY/o2/2\nUrModEigjAEYRs1Y5Y/7kspXFTv+m9IBz1GgdZiSQrVilTfUhOmGgtL5MQle\nGUA7qTfBeJoCkD2twi/lkFNIAJsy/Q1WH/nB9eMS+u2q2Q7P6eZV7gEHFwwI\nwmIyIEoYwkTGA/sswObofM1/I/Wf1enXWv7NPl+oLLzvbaqA5zHhb6Q/yv1P\n79bip5nAwzN2za1lDkw09jDj9QVQEFypBZR/xJvwHUdE2TLNZw14fM+FtCB/\nHagNGxZwhcI+bQ6ihCI4vbjbbTbJLkSSeoaYoRR5fbOdUkuJvoG5rni4YjWf\nziBSoIOpJ7kOfGagjkgGkA7p7zKCKYLipfkTdJculQBazvuWPWE+wb3okbXn\nJpINGE5rVFhwKpI+ISFwMucvQAhWV1vFaOLxODerHVp5RAAAon8lGfZEm3Qu\nYJj6\r\n=XX8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/density":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.32aa23641.0_1590615498591_0.42884783186966513","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/icon-button","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cca980e541a372870fe834b1c91ec64f37b5340","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.654934dfa.0.tgz","fileCount":37,"integrity":"sha512-MasALgmEOkfzNVP4zSOsW1GIDHr/KhnvNvFfBKaCfuEgPrc8p4Lz3kZu16DwpJEi1GBPvQJHCahHdV7CMci8kw==","signatures":[{"sig":"MEQCIGBV0HOkeKkJblzo0wpUP1D0e1gy6a9RXKhcJBdKt8T4AiB5z/vndTgvhuSiHT59/3BF4Ugk/5+nBRj08AwZNlOiXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwepCRA9TVsSAnZWagAAb30QAJ5VTCygZ4OxnYnbGmYZ\nsgmK9W9U+d1VzrYvFUt0LuFq4zn3rz7rxalmEmv03On6ARkEu7/va6jKLHMo\nJewl+5GXQ9w1MLGDE+fAKi8v4Cl7+h4/tcMNh8cB2VR2RJM0pQsdOlhvrrH2\nIWSkbPj056vEftIagOvFGwD0Mo0+J3uOjxHQiT1D5ptVkO74qB4NmktugI2n\ngh+ORiv+ivGIzFFOKNf88x5Y6ykZF0aWoh57x1AzFRJPKmnajc3kzTBq5Myt\nBT91bxCfS/adZUBpDbzH01KeDpERiNIuNJE2rmx7UF+8I3P1ZFV/9EIJvJCk\n07mQf5JWwtlu02EATRg1pLPAcAN71wF47i5WpbRGftueh2DQ17QAJjYja5+s\nkQMI2RGjPPC6ETSrZiiB9LBZr+uxfB7+BBnmQ42+8rV5lrmh4SpmxuX3MBLi\n6GdtFEtd9nCjtzULbAMlpg5UdZaQwu4R475wGHih0msuYOuSDgbDRTDRAh0k\nOTC3HhZD4fxP0HFvXzb1UcY4sskZdxWoorfcC7DgqhSx2GVTXC/I2y5giAsj\nqWHWmhnx3GXMzZ2dmPJFgCM1TBG4Ub6Y8ZMXJRyGFZSsRN3WeV63O85oLaFm\n+VVxov6bkVdBtbaEpPxeHfEwP6Rkv18Ue1Csv5CYMtpbF4HY6tNXZkkigh0J\nW3ug\r\n=Jf3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/density":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.654934dfa.0_1590626216641_0.040426584032625223","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/icon-button","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4c20c4aad639af4802f0cd3f9e093831485cc19","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.41910b8b8.0.tgz","fileCount":37,"integrity":"sha512-8+MV0nWQ9DGaYXtIJJlNM9yVbjpnqka/7KUlrzzXrFMFcTJ8mOzQeXqhIcV4W04lvLoGywXk5JzkAmyAj6GQEg==","signatures":[{"sig":"MEUCICN6tVrsxFMln3n6PXyqtPrElYdRpdmHPyS1uWwQmBngAiEAr1KQGd0LnDXRb0DQQ8RGecGToiNClh2uHuFf3BVXOj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsKCRA9TVsSAnZWagAA3n8P/1ZXQ7MBuSrQIMFlrqsm\nTbtbqJJ8x2PeavYlF5BaYPZ7sR3v6cnVL8fflIzrC9lxR7KMIC+AHAUQrfgF\njiexOqHPvcdheLaoYrGmHoZEnXaiEMSlbc2/S/RrfKT5aw2IN/t7GQxl/RLd\nLHL/Un7YSUVR0gCesQHkTYxPqBRX3qS5A/m/C4+so81/Is1sg+6pBNRB5Hpd\nOHT74ERaxO06On/JnCJuyjWY4avkyNzpYqyIwVMQV2jyhTW08bjisUgx/0q0\nF+mXNuRHrrytwGIfplVkxw1ednpUCVVEzQOXmmBTjFOUI2iN63KTUQ/q0RtA\nDs//X4WKkPIjTOINoktlPdQP0S3VNWUomnVcmpD66R/QQUVYu60uLfYE2ARO\nZrmFieqNAjDTyxrmqp53rXb2QvnVi9CB9trsA/ei7DRqcRzUcyueU+vvwp7q\ndaN85BFoCSYoPOOru8KD55NoBw7xrBnnWK+4n7SHb+YVUKwdRyeG2iKsj9Gm\nDNrmtTlJLVRXTXfQtOTdaGHKvg+PCqNGJyv71yrDd8e6K6Axar7lpLMKcCEh\njM00Bx9Yqnd7LdEC8qHFVFrM0UjR6QwFw9StSWysvSXH9Rm+tLEglHN30419\nHNyc8wdX+gRUPW6IirX1Mgp993LreGqscHzjNMb6Rg1gaP3YzHf6Iy8sHTUv\nA7g2\r\n=SG0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/density":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.41910b8b8.0_1590627081767_0.4585806273807047","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/icon-button","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652d831845295e2b3a9607be2a72bec2a9a7ab96","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d66d22bf9.0.tgz","fileCount":37,"integrity":"sha512-JCLNcDNsRMLHZPuwxXZ4zrEnQvHAVQVD8jmeXlKIECLacrLYbrEpItyG1jVGzQPhy72U2bRwpioriOQaUxga5A==","signatures":[{"sig":"MEQCIBhLxLXvKDA5xzrU+QlTBMelVm9nNcJOEnHZinQGbzoUAiB/WHbwiM9Gbnu1WgdMmkwtHauHsRwjpc2tZ4LgIvEJ6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcvCRA9TVsSAnZWagAACHsP/AgOyZ/iTastvAVllmND\n1+R86a2rMqw7xp9NrTKzEKl9FBSILLo62dsCPi7zomS9RT1oRC1zpf38z7xm\n2PEHWVf2fwVnh7/EwZDJSa2ir4KfVYMU0VgMThjZiV92E3DNqN6zwAtvEjtD\nJRU5u2mq/Vi2Y8dNv6y2Emy+/PM0h5gC/4n9Q+RIRMWIwLbQnEw+cITnAs2T\nFjJuofxs1dTfkpP4OYI7bdiC49AlxbbII0H1/PCyzcK8DS+rWNqOdI3Aw40t\nYO95Js6jjIwom2HaNAGkBSyVIJzrWOef/kyuK9+9inhlEgi8sML5D9RW6tUG\n+6FxU9gGyBW+Oc+63eb2kdMBihGocwdwtKKIn4QMBRS1BL1XyxQ43n2zuXcZ\ni3Zmmt21qSD00+OBvyMU/z5fFbTHpCs/2MfDWN/bF4fkpRHSmFXGjWwW3F35\nVU/n993D3GfqqS0uojcA7ImJqPWDK52e+FbIF+Qlz7u374srvhgtBrnMi55n\nyFSv6Jjbtml+yg/CLEPLWfcV2wiJugNeMJoNVcn/YBOWbSNILX4LvKGyikU5\nY9b8Mx995sndhBwumYV0B8mWAb/egeM833iNn9N+umqlgmKny1cNE5krAir9\nEf+PSbjRhQaIfHAUY7pTNIpv5rB/1aQHHx3W4heMR9YPBYYmP4/pDtjme87t\nbVDl\r\n=Doa+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/density":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d66d22bf9.0_1590695727519_0.05068034618416184","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/icon-button","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25ce7b4865d3e2149713e70068eaeccc866302bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8904f3cbe.0.tgz","fileCount":37,"integrity":"sha512-VKgtV1zcBrzEk/nvWjlkBhes5vjojJYxlRCj6r0cS3pFhuQdaAm3S1GHiSsiOsk0xuDDX7K0GNoJttIo5QDeMw==","signatures":[{"sig":"MEQCICM3D8CwPWzxunEIB/Ffr7gDNLJbgsmedIpr0kfsZBNMAiAbaz86mSmHJxVOOtIZm6VHse2dNzHySaKbq1y+k7FUvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1PCRA9TVsSAnZWagAAx9UP/3X0eU2xbgpDe90NTPgh\ncQ1M4ImC1Z+ZE32JzEHI5wPFPNpaQGRmw3rBYkddCp21lSCiBfp1st/D6kLF\nS/KwEFRWiEFqohqUNSZGemAPekPB7ojAKp0lzHfiTLTpBUz+IejSg135lL/d\npv7ZpcUppqMCJsS7pOQXvRnx1AU4m3z4426OsZWvuydr56mgK0Fy0VkPxhM/\nrtI4PzW5nzL1Asx8xDtGOCNOyknK66OqXu6wV1unlsMaySRP8UN0M0KSTNGN\n1lT3Uw/ZXSOtYEe/e//jA7fQT9rK1VnnrzVV48u8oF67cy5R9DwqUjK7Enaw\ni21kn7ByjrJaixtMp531oJkDgZv/a3Nh7VLDnCD79SHqejrdqo7F8upyqEtD\n1qfUlamZUfnw+ATAxs0fgMQKK+YcWJSgfgU/bWxofIQ/87P9oX1YvjsdjOaJ\nlg1ZRSD/TkNZfYMO4aOtF7HsLSQJbgrT+q91itapvmsim9kTJ/rpkcSoUDWV\nDkT1zJLuOe2GAuup3NgDqX66fqWaVC4qVA2xamdNL0oG3jCaU4KQQHu32+Le\nSQ04BQZcycERDZHDFi6ZBU4FEZlEIBJeZb/E/O5aTXlC1ZEpQ89JtreCzK9d\nUx16A3Jbp8CV46C97JW+MhZANYVAcathE2txniNiFGRe5gNxKoOcX7pPLzQh\ngTXV\r\n=vGyC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/density":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8904f3cbe.0_1590771023260_0.4517928885693383","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/icon-button","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e0e462bc179fb6c0d269adf63735379f4dd8e14","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.51512a4ac.0.tgz","fileCount":37,"integrity":"sha512-X12BsHnxnV/t6ma9Uu9QsdNsOnPIw6EHhjJpA7jOtpHTc3KBSpnfHOQLLXoxUT0IK7FGVuDiMpf4MmrZC98Z7A==","signatures":[{"sig":"MEYCIQDd3lP6YWoxYrqotWXvWRoMYAtnWq9TyifWJMRIUObPKgIhANc30sGblOEjMClvTZfYxyxK9K5ogCS6gP09Y6w7O8NO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9ACRA9TVsSAnZWagAA0RYP/3vtRtcH9Y2H/D7eYAiR\npaTQjiD89NNhQ5XuR0jJ0t9IOdwimjK8hF+H52NDAk1zIvRrvChTsdMu6g4r\nSt6biwOLiryuWTpVmPJzIFw/S5EwvNOYOg11h5kOp54f8fJ1ZQuz9Z6V6k0P\nyLLs0uyKRy7xN0jRN/zTTcy3/CUk6lFR9ddgCeixjfvMHOBzoswrPZQz+nn+\nQVq39Vt0d8TLjAJQq0taxiuVGAVD41hErznFL7XkhNKtc9KkcL03P6feI5eX\nIHSzszostP+3G8AzbbbZ32CttxkGJmI0xokmkNES94Uh6KwspxCxcCGgIaUw\n1CP4IRBorTh6n1Zatv9ppTEK0Cj7VfTjaFqlTuMryEuEBf3dt7XaWAkfh8Ie\nxNJbi3AeNowBdExdgPo6uIMymze7/GM7RD6MRCFh4ImU6YEKYcQ8BUURyimP\nAuYeeyYUjYisWGfga8udf0Gk1LwdcXKpMdVCJnm1rM6CnU9KQDn3w7DjOeHV\n0/zDLSl5VaBrUOZwfhvlC8GG5s/xxPmYhfXxf5cVSL98IEpRkeoPycuXWCw0\nhV1UKGKuud5ASXuMwVD6et8n08mKWbrj9zySxhKysc6u71yeYIakYaxzhPY7\n75B1lXOtouVVMu5aiv8ZUNTnNhkTtA9iuD2375LncUGeDhO8sJFEKZbJeg5s\nuhQG\r\n=8Ivp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/density":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.51512a4ac.0_1590779711520_0.7651915671641121","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/icon-button","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b674ff0304f2fe7f042687578a991527d40a9dd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.0743288fb.0.tgz","fileCount":37,"integrity":"sha512-3mAiNKoCUh/0QC180AhgyrqbBZpJK2xURzgwj2bQTcx+PXwgALBqtiPHaAXFEKtwS94eaYQozcm886qUfUtiAA==","signatures":[{"sig":"MEYCIQCq3Ip0uhGSpfzM4iivQeKGn3wWRLqjKybhA+ZuGHwyUgIhAI3Jf0uBhSP19ydb2cobM4A8Qpr0DMIIgMOlM3x19x5Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrtCRA9TVsSAnZWagAAVtwP/39qRPzNHP2u1Lab4wYl\n49rERSTTbt6XUkF/BnxbX5PoUtYtD6kctBT4CWNza7leCk3U25tG/XZ+4OLo\nBap5tpMEGFtr0xDAO3f9iqBaZZsTMlkP29XkC0NYl2FkHk6d2SgtvrVJGpT6\nREtLeqQKdfcaRvZp3ETQV6SST3hsqpTgDL8/LXWVg0AIPveG+V3yRkjkRAj2\nmH2Ep2f4rRHDiE8RY0u+yF5HFOhHMRM2xyuWAOx2Ntx0XQ3DtoZexpBA/AaB\nKKFqGoLPYx9KZTQMWWm5zL7NajPeAkqj+Ja188ppwYUwILKu2sSqLWTWYjqA\nP8LIB76130AWpB5YmE3uEcqR0WeoHPrzRdHDcrUBcr3HHK3rfaIM9NGmPdlf\nKXxAVibzwmck+hdefUU/lIfVCH2ySdCs0XjatE71Av4m97vASURFlnY2I/wK\nhkOvJZjM3aRGe6pLjeHdOZBAGqA4tMaL8P7JuH2usMQ0hIOCSxI/VGEdIYAH\nEytM0ulxmSGjULIvaLsFdzH91e4JISKT6fUsg5m24l9C91JIU7nS0jkwj5ly\nQU/Tp3QwLBYJdONBT6g1rZz0hiB893OM15Bb/ZrMs5biAJXbUOilNt9fp+BF\nVm8DwsGUCmD9sHbv6GFGaZiBTQRkqMoZGWIkFiwnwkHcg5Vc+xk+ydc1KwUX\nmDlU\r\n=NlWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/density":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.0743288fb.0_1590782700745_0.13198492712414822","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/icon-button","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd4c8cfe11dd21691e991f306399c0de1acd022","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.06ef147b5.0.tgz","fileCount":37,"integrity":"sha512-XmT5nXk1UuSzs8upp/EuQrmJ+eP1hz3j+bZokA32rVGC/b1eHmmswXU8RjNnDF8rR+ecdP7thhT55MZAEs2cBQ==","signatures":[{"sig":"MEUCID4tJ1Vkb3RH8vZx7wywUYsUUQphpr6uxpMnG0577I+VAiEAuqkty8f9znGK/kD2PPJqWdDoVmO30Q6goRYYF6JD6SI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNHCRA9TVsSAnZWagAAAiAP/iLvfuIUwbDVbMoeFqrn\nqCKcsFDWSAFLFAOWR41Il2ZIVa5EU1y+95Px7TzEu83E2lt05SnQce75SQnK\n6KJyzybspXNueFU84r/J9rOE2HTp+XoeGUbRLuHn+Yx3EAhG9cAeBEEhkOyd\nxpUkLhq5X/KvEXXCmOrWogaZ+CN7qjXJTVQgIRx87jCn8ctafJ80SCpRGrjY\nU567IRNYWzwkUxBjUdaNStmL1mTYxEOVMj+C01D+5LKR0pfsUh1Cqqfn7JtU\nWrr295/Ze8ancjhQfdtJKetIkQZaPxb9Xzy4Ajo2ya1hWhGVEtlvG1Jxwe2W\nDYziUhAEqOGum/lKe8ygQN1VHS8KsGT3RkQK01CUc9tUTmSZOQLK1oKRHiA5\np3ydbkOkgFCa65D/Ffffq4mth8p5vhndrOSFkU0GV8jSHnJjc6Ylt8Zo0iWE\nytGLzTeFqOg2ay5vdv4OqdrN0yoHyK4eEYO+nY04QCPu/CYbwnkR5rTq92Bx\na6/IMeBrXSVfMl4qeru2Knmw6m/Lila/OEeGJlwUZ4YW235tYJZtAwbskkUs\nitt4sRwb7TkoEARBuNUVepNI7dE4YnQE1OujuV/+TFZg99K05gOpNciE4O26\noFgn8uuUF4s0dnJVRa2bb3G6DF3cSBPGghjOn5TNocZkNKPtiSZueaBqjzgd\n/1NL\r\n=wdnO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/density":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.06ef147b5.0_1590784839023_0.12649158139419825","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/icon-button","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06a9631e112dce2201860b38dba1b8f026403e7d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8073a20a9.0.tgz","fileCount":37,"integrity":"sha512-EFFjrIEAXlF6T3DgQdnyMEeJQQ0PFK8TlbO52Sztc7Z1zmDNpY8pSoUIx4fQvQR9hrEs1BzP3KJBm1IGdhsUHQ==","signatures":[{"sig":"MEUCIQD8tqSviPADvklTAZnHSsdxlL1uTkoXfRNxBHkL+drsZwIgGZkQT9EO8D69bPdItjOWB2xhTD5C75bJ3I0Zx5Zsoos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnrCRA9TVsSAnZWagAABPUP/Rba2eVsjD+gkJxNU9ru\nZmt+bh5exNZsW6m8ipb/+VRLd50gJZlpI84WYnhwPUN/FhLc6XxdPwhAh9TP\nhd9QNE4hokAIgFE8Rosllq7rUOx6Irp9B5wIaxEemoiQE3G9hqCilRlmAxu2\nTu50W9olA/Hbcjd0hHyggEzy6F5BHQbKOylAsq7wcNVdESB3J2zOwoFPZq++\nU0ZNJ7c7cZlb5xhSbryHknbKFT61tOV3j+d4me64njfbgE4e4nVD2WFstWVf\n9bCUe79juD9Q9QRQGbdbGs4XhpCGVvCMScoYpr8KxdVhnItWMrT/1VDqFMx/\ndQKhPU9KMcz9Y0p77d2cvHwmxZ9qCtA2ptv4g87fX2NRuNE09C4KJpxa9QIS\np0pdDqMrFoNKeqM/2JzIO/Gvx9v6FbohlOslDQQ+abXBBNOLsnZy4cj7AZpC\nvDa33N9wJ2oJcSQrVy4HIWBkF4nC3VTQWN4XbJ+tuIOUqVKlBxfa8GQULyOC\nrVXqmsow0oWXUBLQqLiBX10JdMFJ5jytLPzUD9eRspyomBZ0Ry/1Icw2XHKd\nko20jEJbfpth4TlnLDdM7Bjm518OndtsPqeQKa+oZmjiyGLXBLO/+DyWIeED\n7PcnHHWdtLCBjZFrgLsHV0w0WbXJnae0x5FZEEmiQSegqUVqZprAuPv/9Vv2\nkaPe\r\n=RzBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/density":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8073a20a9.0_1590794730557_0.9526105753525689","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/icon-button","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb3d5617315a1cadca0e59a4dc87e81da32ce933","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.72ff42330.0.tgz","fileCount":37,"integrity":"sha512-Q0fNNLjCvsugfADCK7KiP1/x4rZOMDj2DLcCUmCpEiCu65MqPnm98LjX3WNmyOCA9OU1UJp9OfgSSBDc0FFi2Q==","signatures":[{"sig":"MEUCIQD0lXbF8Ul/mLMEsEGeyW+ItrcRNDmXK8Lsdz1+nkbFTAIgQxVu1VVBBK8alibTPGvm6wqLcppTN1D6Z9p+xHJ29Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBfCRA9TVsSAnZWagAApSoP/R+/DLXZq5x80/gqTP/w\nSYvEEs5YSXMCWGuC2JKwl79MwLT+24yKp8vxEJLPd1Vl6qbuSmnbGMfJpkY3\nh0uCdB/tChV2Q6HP79os/Un5Y2gR/Wlq+SoRxKPa5XyCmww0Oj2h0wdE52B7\nDxtCczHCLDljt5VmmsCfdBtSgkVvSK7V1aAsGK+QpDXRPManV+LrLf3qAUOi\n55AeIzZgM80FPcwqzt/evXE8q/a0RFihDoz7h1Vd+flYi0adGuFkmxEDLxRL\ng+/XZlZ4INetHoBW7pdHKyQ+/9sSIrABqnZFAInSOdlQugdxlayfkk0gni7S\ntjVGWKHIJTcWhbaWan/2EE2a5fao784Rtu/CzTbYrNvFp1uSXyRt0rz1jVgz\nudypaW4oBvYsbmRloi7NKLA8wvpH2KksHlxTP6VmqjSn25VpxRs8sQXhuUL/\ncxr270TL/yhqTFKYLtYdJjf3R9QwiHxtCx/OJNGsZfW2IpC3JzI/vW+ANK2y\nzls4lgqLShO9ESf5/xIuPP0ypeDnMwyIQ5FyUg4Vm75kR4ToNYYiInQACadC\n1mQ0GsJhNm+r+DUwQ2T+OKWGi/vQ8xosO1zZW2sp1aAAp87zGHuL6TiPpViJ\ntgK+kfWxy4NHnB4qJSKlDVmqGLBOfoArMoTUfhC0lxHGfm45BbJweO1JO7Uj\nvSnv\r\n=JCPV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/density":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.72ff42330.0_1591029854784_0.3627592858549997","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/icon-button","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e4d0e8c9a660f3124c728128ba6ae4f43e90e4b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.9ea52070f.0.tgz","fileCount":37,"integrity":"sha512-mkrvDjmoiZsEWSggpW8SEIE+eiy88PZU9v0EEoBIw7kK8YLfzD4uyRI7ly4dGfxLAl/ZUqUxIz6fKxnrBt0fEg==","signatures":[{"sig":"MEYCIQDse9ewJOzK6ySzfWH0ZM0VqdeTR3iYTr8r19vVcA6qBgIhAI8lpoNxbQAPA2iviT5gUtJRmlhKNjGLjc1QLKl5scNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TF9CRA9TVsSAnZWagAAXxMP/0fX5zLoW+zsTnc8A7sd\n7Yd9IPKL4Ks4MT/Cpva14Zo6FyEdTt3ki8ReU0chw/DuuLztTqr/05JZcg21\nIvMpX4LA8vZJql4bZQjrS/rCaPXKaKj3oYOjg11L9YBZ7hq5UXZkqIsbPoFK\nwjct6eOSi/2HccGFtBGhsbbID9nS6mRkn3JWgZ7wMl8xz8neiTC/MQ3c9W0r\nLExojukevOisAqqEmG9GKQ07uwD8HZtz+puNAfnAaORAfzosAmAsZJJiz4OD\nKXK/KaTmEJ3byQE/RXMB9zs+JtVjUxQn6Wp1vCOgv+ErqIyxIIcqcFeixoDZ\n3fA7U20zVNHpfou1Nln1CVS1uHC+8Ip1vdLhe4tlESbAQmgjmj3W3yCIBVXp\n+lIWJ3Koiby8tymzYkMK9YLtBwa3HekhDOnkcrm10I672uNPZ3ssetW762Ml\nBa+8JwXW03IuVnSKWr6gw2VWwG6usyanHzyMogPbZv3IGCS1JOtOxqBwsITh\nbKbWhhM4StTYcH20y0dpEAO1QC6eS2SxYgvamSIKm6Z3JOnvMFTemXrSYHds\nxk5qGkYB2cDdoXZfV5EE46rqI4oKbwtAneIS623ud1B+LGZKLpdRSC3T/mQa\nUod5lfVKPuwoUQFz1Tk6sduJANZhYpINiqaSt5UuUuxF+itQUXmeV0GkAFDd\n8rf6\r\n=DpBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/density":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.9ea52070f.0_1591030140505_0.416603487526124","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/icon-button","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8190a1570aab33967197d3f2f3e6d835fe41787c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d86ad3b60.0.tgz","fileCount":37,"integrity":"sha512-sC4U9rfThJmKjNggAdXo6dkRUjHNiAN1Fy4j4smAKsZViKF7WJ+0+II31VS1B7XwegisXUo2080UhzkddBM/Mg==","signatures":[{"sig":"MEQCIE3XZTr2KGrQr6ddiSCrSTgf6XzgDywF4szQG+8rrcTNAiAjmt6dd7RaDASHERJXuLoYQLvdIZdxE6JAT8cvzsAQMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+ACRA9TVsSAnZWagAAy9EP/08MGkA+A/f32gFyXrpU\nEh7HP70cr8rGdesrT3S21Uo97L/T9es3kW//GyweRJobk8elgpJmf5Y+FXrP\nm3/8eKVdjqsmBY4J/F79OAyYeRsIEDNmKXY16pEkArC4gnUSZVvkptmxDOUx\nPWJdPnIjmM6x8G+aeSRn7hJoRFsYNvpO3Cy3FQHYhZhpusfIjLqCGcqS6it7\nPfMaa3h542EMmZ+V59Z6aN5p8EqrCnizsT0lwV5DrWmn/1jApqxtZHrj5Cfr\nWgFdmfC6C9Mooar5W/BUvUXdBpEaOVeKW9kInPDozguiC+wR5zUnb+voNQKg\n8WHIt6Xkp0ZpE2CboQff/rne1R30xDcqcCJR0655g+4AfhefeMbINvrrMGSY\nU6wrA5EuPDi4xx0C6mWukRPG87rmAdWjXzvSupSpQAIeL8cnfP+2t4bKTnzg\nxtOK7Iuj3/0v0ZO0WyPdBu3ZhGD5kuSn16mFl/SCKXPYMZunyv2Gsdvssr/p\n8/OLrPwxCr5FoqNn6uScDyk/xsTUSdHv5NY28dw5Rw5n/D2XdEQjsfqJYVdt\nlf3vj+AtaDlNHI4OTw01KU2Th90CjLFNULpPTxA5FrNO1gNJPhcFlVNxzMtl\nphEraSXbm0+iNqGXAKLZrCYrWRGmBbwVZsZW3Onoq24mcqt13zolZBK8XDhG\n52hu\r\n=jSdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/density":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d86ad3b60.0_1591033728066_0.9857462820066996","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/icon-button","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069642cde4a3a5a056f2b281627c9a2047da9791","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b9776b1d0.0.tgz","fileCount":37,"integrity":"sha512-oDk8AYWJwEW8nPfQl8HotuAdrD7srduiXFC2PG/s/QsjaNAe8G0nyPyZIuCI5w6UCVnEfoqFE8DNeJzpf5jJeA==","signatures":[{"sig":"MEUCICmxWALkmT985pDmdSJUudSOkP3atZBP5/2EqpvqgHaMAiEAsrwfD1EkwMchILIkTVLZ32kfEiR6bGE1BhyfQWxP8lA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhDCRA9TVsSAnZWagAAusgP/jmzviC50of2ryNy2bf1\nm1SGpPTYNwdMHTNWhvGH5XLm/GCpHPo4TI/em+tlMa+d3xT8MiRPpia7a0ct\nJ/785oxO7aiYeZVxoXWbPBNU1oCy6FOIYAwu+ZPhKEZ1oPBIlZiIe/Z5UZxq\nO50lZ9udOAMkxUehdXjbFk6qpsn9Js5tsHlvTQj6h43BR4njvH964wT62kQa\nWAgp3V9oZmJJlUqWDSBMp1otkgNFx8dFWLoKsM/vkcqo2MBT1g36CNNTe1yS\ne9GyPSIUZbT9Co8veprUzDfpkq9xqj3zmtzkN32GUI/CGfNliOGz7K+UL5K0\nNCbhGSxGbSxo4uL4gNdL+ibgKjD0colagZ+hLafiI5FiEGbJ7ONdQ1XcG10o\n4oj1yr+7i7FeIkQw0lGwMayvfVJGrgV0taLay0EzupJgdRAbgj4alAy/Da7q\nWNemWHdOrV2Bn5ybMBNVYAqcGCJGujlAQC+lGG63kWlnkNZqtOIX5E/cVufl\n+H9n1SI0w9K/2JkIfE3vOB4VbBgoqaFOds+mJPR/PhgWXjk12+oLigQudBq0\n3xa6pRMnkLgCKcGRAeP2Tem9HWK0OopNbuH2PZWwohoidufB2hm6CrQN6T+J\neQWY/G5Z8nz9HpOJG2RWcK/oCpB0qJQ/Titj97XyUwUujrFV57I1q9cNOuHZ\n6gea\r\n=8i9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/density":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b9776b1d0.0_1591035970564_0.6210353475517505","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/icon-button","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d459c765d8a0e69212c0c0f00b510d59d5b529e0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ba6f7c294.0.tgz","fileCount":37,"integrity":"sha512-xrkdd7c8K/XzFJJ85RZSZemm7ofo3kYuAEzRBhWTgOFGY5LcLb8RSSc5EPEFq6cfSRIDdhdK4KtXvLsXcJBcvQ==","signatures":[{"sig":"MEQCIBAR7gvgKzNs8fXJxg15CQ7uZCo+r81wyEVEcNbeMy37AiAEmXy7jvG8nov36/1gqiyiiWmOckJvQeD980ie3Qoghw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYxCRA9TVsSAnZWagAATCkQAJMPjTSX/5yP0XXEpDQt\nnPSVuaAjFjm5dXnrAaYhZie0PH2FjkFjJm4FiZQfsrxqBNIynlCUGKo5H+Dr\n8mh9K8b5mgK9tGexII4fsNbH/aaT1CANtDAVY6Ukj/qQoMBkKlrRdLAzDiOZ\n/RBVUcWzYN9iKjy8k5Ubfv0BIRz66IoaDL11A6Oj533YHHs77DDEhoKVD5gf\niBi2UkVZS5rRuI+zlvnYenjHttAmGoBlGHP4lP6bAOI3uYP/STmQ9WAp1P8k\nAWS2IaD+rXaN9c2V9rTBzBxw9ol4NEL5FLObz/WRdiXUDmHKrEznbpBQJoNG\nx5hZfny+9Ozbfd9AS675gil1dyqwndbipNLfT0SQ5bIYdLdVU1x/EU4gi7mW\n03FfavhVKFuFSxBy5BkLcm/Vxa1MParpWr8BTYZServ2hiL5Ft8gVGf0dVbI\n9jU+3wCjKlgZjbxAgZ317k0AYJRUHzCcfDKiYQwmrzrn7S9x3Hh5dMLZZFO6\ngC803WuaJCNb/qTR37LZVG3tGYYl6OfrFRWgsxNi4OxWBpfjbZ9BsYytfL2k\nJRqXBxbwLy2892634YrLtKQUAcoPz/lVliuTVWkS9YNHSvq5Np9UftOpL7Nq\nberqiEGxZr0lAxTKzkeYYR6tmG58GS/tR9JaVwmg/tIhv8gU4p2J8C2um5BF\nrVYc\r\n=X0nr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/density":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ba6f7c294.0_1591117360843_0.7068656139830429","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/icon-button","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7274400ef6d8e17a116dc6102e46b00e5360d0ee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.cf3b664ab.0.tgz","fileCount":37,"integrity":"sha512-ct1QNGPR/Vwbrt/fpCWAGBOvNnXTI59xXh3S+/TqjuGrYnjVdAR6muHcH0R0JAsvvU59LZJCUUjzf6lunpoWjQ==","signatures":[{"sig":"MEUCIQDhuHzlupf1Yx/qEJFXgsKAVoIaC6S53FjVWaMVaxJFGwIgLfW/oTBLeMudjrJ15oYfQVxd5Me9UlbLAvxxtLeif70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pklCRA9TVsSAnZWagAARsIQAIi5T2VUH8xblmxv4rvW\nZrKBgAsDrcafQtNZtPWTIxPrFrY3+4Pdjk2cKdqmTz20RYHQAEIDpXMq8oLs\nkR9YRinkeabSYZqik7lreopREE7dGMIn2idY7u633X3Z8tE5RCHUMcx3PXL3\ngN7VlCSMV2Bwwkf9GJb8DgBMrdEbRKSZKdGpTIVm5BFI7nXRqjawqkjsCJLY\nms8zS6Zkzy9CsoSMob+59zk8JW0tQz12wUpFCE2OAco/p065iDA5blGdjA7g\n5O4IS3F1fz9Cspw+szAASvRua7t3cWCP8bMqN2Mlx2notLfnGSiWrpn+JgnC\npMdAG3lYXmT/5AHlK1m93uUhStatOE4mR2TVYnYRneRHVjT7k4fA4ic1+Ipd\nueF8lb3IenCeiDIXnnKfeQtyDFoW30uV8viHcsYHkn61tQbxwXIplPizWF1n\nASOnUHnL1qGr9NwftO6LKEVkLUC7MXz+Rr2rqxwr0bgQvpx9S9cctAv6VrFW\nb6t0ZOmXjzshgUu/l83qdJu99yujq5WMAj4J7+/XYJfOjlbqGU+As8/cAOLm\n47OpZZEgqVDMfXmpimX3SY8sISwlqvxUanPIAtFi3LE60qWt6Xf1PI+I1Lml\n0why0CJycL3mAj5puVIapyYV/y7pKtq0AO4aBCpOeK1YJOHr2mmA3gHMCKLh\nSyPA\r\n=sFaP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/density":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.cf3b664ab.0_1591122212754_0.332404308176685","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/icon-button","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70facff25014ae0863ea91a020562d7fe529b5ff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":37,"integrity":"sha512-0/1cOE0wZ0RGT6MVdMTohYGThGvXz7VKXl1HCJmahmLUyg76LErAAxXpZW5cAo3TJSfFTSgDy8hKgYT5jXUrOg==","signatures":[{"sig":"MEYCIQClL/sZ2D/N4AfWn+NPk2ku4YbOxmqBXZf7mXp+8F3urwIhAIVr676RwpYavwrU2kv1bnL8kX6cHUkHef0m+iQ0Lnl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY1CRA9TVsSAnZWagAAS38QAJyNE99ILNUFAK5oL9Jv\n1EqB8b0Hc51mJmf+pX6ocMePQ1fSdqYs8Wrl9U1UaTzT5tlCWJOHuhDbIePh\nDPi/KHi8wH7e+r06akOVBWX2KTGsWIoMR76s6W0vkHTW+iKAwNwD7ttgj/l1\nmQO/LWePo3UdDO95rssawwHakuIekIvDf5GF53AycsDiBC1cJPcgE+DMJcJP\nspw5vpojd/F7liweMP0iufqo5z6Np+XiKgMYPDqsKEgmybg5pYc7PNA60tsd\n2+Vb8aVRqN91TvaiQrj7+vKIVAzMZJATt2kw2Qeji7XsLX5f46ADt247XANR\ntjJOgOlVta64mDWGxK9Lbpm7nyLNs26Ly6fIXtiyRPiPjH/0c/TBMQOvOy5t\nC/rpcCkjYvMc25oMUMjzvVsuxsV0NxyWsmZdAIWmvC0+teg0lqEMkF1pYxLV\nrlIbj0inBabMd7vy0tYdNHeo+w/StbSQgsboHcTAvm5ONvrlPTXtN3HA0GTS\nRdTUuu4CeVEpBt7fzMwO35jsWWkG/epHjsJXXKU25zZX+O44v0qsLWOWhU+j\nGhEG5ldfY3BTPqIkMXZ1NLH2QP/uoYaL13ybtMPCwaUrl3sNMNp/pK+SSGce\nwQa4I2GQPONEk3y9WgUb7lqCeaAyoO7MjljG059zhUE3dqYMcFk8LLhpQ8p3\nDe2r\r\n=iuD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/density":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4ba3c9a31.0_1591141940881_0.7751686208857338","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/icon-button","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868f045c76f4b4a69f6354760b42cbef6a82e004","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.388b042c7.0.tgz","fileCount":37,"integrity":"sha512-mDYT3MoTutQ+BZF+pn3thCwWCMG0d2vnR5DoUj+CIeNi+/JN/g+vA7yANzJamfOCZtu9/usn0yfaG4eiKndoJg==","signatures":[{"sig":"MEYCIQDXV//K6fgLwHbOZ9xq63v4b+1ao1rAWYSORoIqfoZVpQIhAKz46RmEJa6GJiGJaabS/lN6SGVfAeP6gvyGJH3qbr62","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nDCRA9TVsSAnZWagAAbAQP/i9VMSHkxlz40QlwuVhi\n9H2v6LYfQXRmyTWA/8APoffnnPMEh61t7Hm8BwxRQYK6zNyh0uQaWWWLsZkL\nEOca62fwEWJPJz8mE0dOpghPoY1wJG6OZJ0ZStgi+tzxoF0sF9SNpVAiY7Rn\n4moZel5y0G2kk2TVQxxRmsJL2EijthWFUgFYoICpnppjjnaroXZCsM31qzi8\nOhKJtUZ6wCYcJshabhEo/nvpmzv7NvXW9naQk2PJ+EBd1a1C7Mm9hi4SKW2k\nafQftFlfUH+0FgvSk2DMfemLI1AdTl8aneVNIbfKYXM/1untpM+X3IBbEiwo\npGNkJvQlYwCmUr7Vk9Fhi2X+EQhHSGDHEvwI3iG7sNAh32mjx4uVDNKd8FII\n5U/9PDbkFmdtNpdRVfUwn5ZAar6AJUh3XuYlLg3mi7SQNjmKe2ZDph9vWCn/\n3dvfNcD2XyJxkFe1Xl3lTdmfK2GOncHG20bYc1OZKiVJ0sbPRr4ZCxc+yJTA\nq8fj8+ew/VmYXf1a9rNxFuLBrApzIPpuSkHTGcMp9f+Qe1qMkd1MQHVZKugO\neyz8ZJZWAvdkxF4KlCuhHqxDUlQ2MHDhEIkl5Dk4H8VFhWSm98YMQcrUj4Pd\nx6U5Tpt79YmzASoGSnwnraR58NsySUJN3K4mcp0USf3o6vnlB0RZU1YRUCcv\ngNnN\r\n=+OEf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/density":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.388b042c7.0_1591192002818_0.5544229229305861","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/icon-button","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846169e19406b896d3b6eeb215b17953b9d3ef5c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.cca1ca84d.0.tgz","fileCount":37,"integrity":"sha512-TrD63tLA2POOMJIDJuUSI0QJFaaI3ziHTdiVlOQxSu21THJt5i/e3dQDFHMaolv2ZwNALi9ZA024Q5dl2ESGvA==","signatures":[{"sig":"MEQCIA5LnMxdY177ShOUkbh1MQTgDIzK0L9CA1E26ACRO2L+AiBtzSrWHkI1BlsBGAML6qKhNnwadwm1PBrqeviTy4UX4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18m/CRA9TVsSAnZWagAAq7gP/17z/E5Bi8jGwjzsRTMx\nBB6zj4wzUxRapa0nBftKCsqKK3fgRStT28TYUxHpiQQMGCBbK5sjBIMuSzrf\n2bfwwzfbYHWDBqrCVDxxUc0Wj2tIGGBMvphu6NgHf91RLBObV0YEFXFYRTTe\n05rgGNeJc7EtTkJ3tcdNq6XgBui1E5YvcdfEaMx8cviawpAJFhBGHfBChUrW\nE5RaqWnzdF2Y6K1KGZWMkf7O7VGmh5h70ZlZ8+uGJkoi+J8EL01iAuyusbpd\naunR0K2QJLIPo3e8N+qhYt/AGxS5Xy4fBA+ddVOObm40RSUC+8VMUlhqiNDb\n1zzxPgVROhV2Qqg6aib4BBu3xCkQFNRzvDd41mjq9UysNf79OzFxpEYj/Apo\nbhRKTkHyHxfGaq78qrngHthBbFzWIW15NLuokGXGwqnicQ+ixWYxGm5DgdeL\nURNaQLhq5fKng/ThMs8bmYBJd6aWIA7R3zE0eUEVGYga2XO3WSphHg0G5lE/\nkzc+p2FVrfyR/GkAFksehqV7xCYc35tC2+OO1ZBkWIVWYJTFd9EqKOO8mS2X\nfvJlFw9a6NSy8Ftl2QWAGJZccELB3Jkz8oLMHM03triD7/Gc6Q2/joD3Yq4E\nsXA1V3poJSr98X97J/WR8sViOKIes0gAKBLZ8zJ/lwtMYUeFV++y3QeJ3IIV\nY5pI\r\n=uB7x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/density":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.cca1ca84d.0_1591200190486_0.49127788375177484","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/icon-button","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a484e3384d39ba669a6258c5ca8a4eae178427","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":37,"integrity":"sha512-zUwPenbozMyUDJd89hG//nTMkgconTGB4WHstbpvxPRdLnGyMZqef5zFQAzwYav6MeohrIc0v80oC/zf8cWo5g==","signatures":[{"sig":"MEYCIQDtofV/lx/C1Zgn25FnCSadc8Cyh6hn+XTGqUp8pPRX7QIhANTLLCAZe7lVZdbKg+58zJ5yI9Bcomz9wRI6HP0JY3GK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KnCRA9TVsSAnZWagAA7e4P/3fY7z+xgpTZHtIkeE7Q\nxGZZ5uw6M2W6GrlmoUq1xY6vdLqgm+A7Fj2en+TP3hJYCgSyG1aMB2Zk/BE7\nb0cX028xXsqww8lYbpvCqiC8vYYHk/0RZyhOeAMr8uZM9LrE8VA2OPNaOxjE\neiYjim1etEe29g55TD7Cl2Gmfg74EHkJU5i+V1RmcxseF3xGoNoB+Gw+Yzan\nylQ1Jo+8IoevUuc7/PUVceX52rZrYU1DPyezkqEyGsXhZV489WZqYfzRHdC8\n90lB4cjN3o6PiT+cyUM+Sc+fR12x+GYvL4THyiJaUzFdTgXa88z/JDhXSIeM\njpu/mTWPYvDTM3gXSGNys+NZC8asGUUE05Kog9TLTmkLR8Wipx2gLiaCM9mF\nX/G0scYsrEhh3Gnlx9uDUpLD0FkVKCdUMknqK9dUqdDSdtO/txCe0qHdvmrX\n7jzROpLtbDV8vDYwXBBCwWzDYwWKnsTk9Rv6C0hsJUCJczMyxJcJ3GvZvBWT\nTbNvCizZNf+1VKYvpB2qc7xp6/PK4V92ttxnl2bSXBzhS1JFzI6xw4YRWQ1C\nK+r1VM/KPCoMwtweft6Xx2+ykijkGR7mo9NUgwIbr7oYbz+oUiBDF8lfbvWk\nCmirZLhLO04mYDP1WJ/DyITX7CCZTrGW9Gn4XVha/sWM2Wp0AIkWrn9DsKUz\naB+L\r\n=u1gP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/density":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.9b0b5f2e0.0_1591210663310_0.3323314208630015","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/icon-button","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84084ef615a5f6207631b9e8809c57ea5af38d0c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.0a7895f4d.0.tgz","fileCount":37,"integrity":"sha512-AN4VTaEMIlcJAt7nz9gHFfg8vHt4YFCaCmIdBoxQuLu27nnfVWXlOmUeN+a2Z8Pq08lj3WwMrc8bhByJcNe+tA==","signatures":[{"sig":"MEUCIE4qJVT6Dja708ONoYPejiZL8JWERel0xgPYJjqNX1SMAiEAqO5PuxeVHQBtS712FqBqtQOsdUO6JCrAOqj87/8GKqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFwCRA9TVsSAnZWagAAhbEQAIja7s6nBJbbfQKavgLJ\nJfZz2qz13KSiaf1JkgNxvo/PiR4eYEwZMw8SmZZ2oy2l/kGC+e0Xa/hTCcvi\nEVPI+uySKgWGBX0qXjFIT0YwluHb1Ut3mJhJJzlRIsWI2KxqCfqUI0x033cI\nOA+2tUQWdMNfmtb28Gfs22OQpYeJLjpcji1HMcb2XezE3I8FhJzO6Glvts6S\n+qhYR3XWbxBKYD6auhJslfZeSxVlYBVLVJSIryF687vBzr9Dq3zBDK/6cy/n\nDfnFr8JZ3lzcTZQdYMfjwXnJFOcN+e//YgkvjBK/FSJRpSo4rgca0Y0UA8KI\nGEAPv6HRfmfqI9feKvTWWJ3ivY13p1ih3/HhBJUiKnr9f3cNNbPTELc1batw\n8CsVzLCEQtqByH0FLzd7gOFvEwiOy4zuEC0y28FUH59P1ED5lu3e7FjxcQgk\nbPwGDkEkX3WIDoaMZQizEA3S5lvwNLdFrqomCoO11Gyu18bwyi/4fQJhoHKv\nCUSgY/pxUVUH+HajB72BGQkyYwLh7FyIk9iJAvCoz+Gkz84tMt5mfBdQa+pP\nFo4QclM5hqGpr/v0vdQvBFzJoSs3FD4a8bxWjYevNar8Hmrn/9Pk/HGieC2/\nYuPffF39AJnau5cYCsS3VVToBbMmaOSOsH9OJr1ch6o3HxeB2+D9b5Qy2C6L\nI6AE\r\n=814x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/density":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.0a7895f4d.0_1591218544063_0.7307474701141548","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/icon-button","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7157e63ec6d8f364b62e4a5e4f88a7be8b475dfd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.7461aad68.0.tgz","fileCount":37,"integrity":"sha512-1orm8bPm6MtlXztm0v8qn/1jBBZ7ig2mp/Any4NtTUN/HNntcroW8yugIqtGWjDAhpRL7LSup2khHQinLuA1SA==","signatures":[{"sig":"MEQCIAW3FwLXFXn0TFMWKBoU7pMjHRSe+TzV+nHKbfddrKP0AiABjgSov1lSgyy+rGU1J+l9TvkhODjvJrvQz3f4KXD2/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBGCRA9TVsSAnZWagAAUK8QAIwpCn2nufIXajdFsgdW\nH+l4x7BqGuz+mmu4BWI6I74J2jRb5IWAnNhyoYVz12BaNHO/D/74gLv+Xa9/\nSZTIxN+IHNs+GGrU+c6LDMc500Ojuv2V4nQIpuizhgSDYLe2cuLn0tZ3H7Ti\nTlWOe0DExb1t4tFfV1u3gResvgVPiQQumC3N0GM97iO+zAoge+V0L2XJjXwP\n1GWa5tS+VdFpZxScj2G1/Uq4QNUNcc8bR4PPA6B5nukfBexZIid1V3AnYaPG\nxK0/JIG3dvfbRcXBwYKYIE8BajE3nHR1UxJ9+BfDKfMan37KbsGe7Ni6PCeW\nl70OqgQofghTt4r9wXpjm49YxglR5euSllKku3J2sOm/g0Ms4H6e24V4GyTJ\nxYG9i3NgPHTVI9uuWACFT5AtTe4WZnFUnXiJW/+JAGcdorUvXN7+uULacOje\nBcPrl3lNm3p/suLBlW3uKpHKF+WPb5PHepq579Q3H2IxBp+D1KzQ65gorALk\nK0YYyKDmVtxN/m/35hYxlYAxUh1aPd9iqIazKu7JnJJGPVE5bnDj1QPuKPkf\n8k0F/GcSA/HlDJgNCkQgfDGGuOjJIEKE959OPFT/llNNLcci5dAOU4IdUDB9\nvb8/Aj25kNOTztEEIX5cf2c+/g5WbRDcL17mfXYWLzm15mDeiOJl3VqBeX9U\nXW8g\r\n=muCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/density":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.7461aad68.0_1591222341948_0.3444012340738929","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/icon-button","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27909b73d25b4d1deaf317d2552dacfe3526c61b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":37,"integrity":"sha512-5MHA/WhLvtdEARmjlpaENJsaC2kFUwgFgFEyCAWpMtxs7lsi05RhCfcBmePevu/ysAgsadTT8NSrWbLth6F2AA==","signatures":[{"sig":"MEYCIQCkwkscDDiKgnm6ajUhgowtxP4BkACrjDeWD/7LR4BrBAIhAJLo9glysk6hKMB2xacwlVFdeNxE6hh8Dg8PiIwYSjk+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQeCRA9TVsSAnZWagAAi14P/RPlwORmBRMnpQ2AAA2r\nfzF4fDZeX7Ry6HGcY4mMPl+UJ6rNc38qNCJ+pmLuaNI8+ds7BQu/MibdsUtP\ntKGmRGooPHFur0Kj9Ndf4Xr2H1pVItvHeT2v+Bk7pmEsqbAVFa65vmrVDoyV\nHqVdiM56vwMDCD7FBBrC09zbZKc7ddmjUNI8C+dmt/ytmYSQIi71vMn5fRT/\nUwBRQHZjwo9RkhAz5EPC7FVxUI/j8bd1kLta9XyCBVXP3T6eqNd0dF4nlPsx\nzDTdwRyFbZFZNXV0pS6I/C0regr35XG8MrcBFYCXkwgGPbYENzJhBt4BVdsG\nxKk9+f+cZALEFy6xn9lnviSS8T18mn5fvGRWQ5NbXexPkyCWuBZFabwaQ87d\nyPOx4zlXwU68YsMTtv01l0o3eGzdi65v7oA7e0w5eWRYV8l2reQ3YVxDgtxv\nj4VfJhJvGYKSQ1TlCdWHjh2pR4l/nLTQ1NvQXia14Or8wgoC9YiC5oE5+hkR\nyDQhWIcWGcPIuFodEWCJAPUybLGlrtv0lB89zlSkc9jZ3LZGBvYxjCbnWoUl\n0bvyM8rxI3wH5FzO9dHbgefdw/FFxE24VmT2bdgFYD37E3RWXqO10r539tAO\nKOnr1f+NACH+3X5tI+K+ZqjalESr0/2xPhpW5oDg0dH2YbDplAWXfA+46XpQ\nh4Jy\r\n=/rOa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/density":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a0dc2b5c4.0_1591305243777_0.7991404580422803","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/icon-button","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4949765193e7dd6dcff8a536c4b5986762b6c98","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.2b420c5b3.0.tgz","fileCount":37,"integrity":"sha512-FxFig6hMcS+XBxNZ0sKumqVaBe14UxDh+UA7RSfKk9cd7qhgvLXKYpdqyjPUWfybi/z/J0Gk1MQr0w5kvF+OuQ==","signatures":[{"sig":"MEUCIEZfBO3/M/SXR8hQVcvNy5wNUblNfvgb/exdARzRWid/AiEAzm7CSo0GFBG0vZqd2fMETMPDJF5ZsOgZJmf1lqjT+bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPsCRA9TVsSAnZWagAAwYIQAI8kZlCFP2RpzEH84/uL\nHK0u+bYrH8gB/TBOWF89wA27+Pt4FgTV8DaA5XdQ2eStzLZAePu/zeSSht9G\nRbjlhM1i9l3LKl9FX/J3vYpbuoQtslNPech7YrHhOHNiQthGglNvv9oYe/53\neAc9jJBzzIxFlsJIwJ0R17Vbv7jwMCqnvxSeEpv56o2tWUkwVfSi+H1ZerLC\n/2akKqy6t1lNbxMs7tiLAiUJZHS1+7ikNkQX0ZFm5LqpyRdg7GA+4gMPhOXD\n2T92z6u+kECzbkDLv/RGHSXSx8QlPN6d6vv8iG3ulY5UOZWR0nVZ5/vwXYia\nsygGv6Yzs5AizlAOzzG4B+EuROp+TmeP4Fe/bh2MQ4VP+8nkOoSPGKUjhjD8\nRZvxjP1OBsu7oGn1GLezzA6E226gAilMNDFFZS7YVT1GQ0UNcwYxVlJaHKMY\nX7vc+/FU3gukdmVmGBMBlF7oO91a/sfJbtBMFK4y3UrjPD6Nzr6rQHpdv3ct\nygI3F7lx9EOPWIM9kN+Ala1cvmjdbIUcaRkhuQjgbkbHaADNhO5aAAFL6Dus\nhy/wOLfFGo5PhwJrIJh6ARbRvMXbJYq/N4Xa4/6XZtC7jvE3gCPlLXrLljnN\nwi2rSc0jrAemcGhFIqpXKSHsAAnWF2UMQJ5ltXztgRBgmT8ve3ihNoGCuHIC\nsHdB\r\n=UJl6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/density":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.2b420c5b3.0_1591632875881_0.4444805356190924","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/icon-button","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4f0a794c5577165062389c2ae05080510068b9d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8fa22aacc.0.tgz","fileCount":37,"integrity":"sha512-GoWyJh4l0EmuJzGOahu/PUGQd6ubJCNn5fT0LL4V3OpccL6qPrY7nTsccvM7tp/mxA2IWO8J3sNx988XcEXg2g==","signatures":[{"sig":"MEUCIBX5oGVHNJCppMI6fQtNc4BjizOexqFE7M92BcXvWkNQAiEAqCmp+EUWZ1ltUc1sdEmAavqWcIXzacZF3Ii/eN7DPNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2zCRA9TVsSAnZWagAAmcYP/j0FYBrzvctNVyZgVgm3\nGGDAKF5C9HPKEphR+4Fyr2oA3FIbeMa7J2aYE7L8wr9KJsbVHkX9hsLbFemr\nYVyatCcW4uC1x09E8v6Y5fgiGKKxTHnDKrt0dt4G1P/iB1Zm2+AnBCbS2GGT\nGYdCrae2x5A1/CVyttuFqEO+Q8Y/1HGadesfr4qDorrmFzHWu++j3pyIFNi0\ndJVSMAxtIuRJE053HVYrb0qzLWw6C+8svdhrWXPY8Cf0SRSqJTiNpaYjONjN\njGSqg40Q+IES1aJv0IpWmKIuo4lbZLLPra7qLJ5eTVszNC7SwDrblIs6mdCa\nEo/YgDCj0iri1z05QnJc7LFjL3D/sxsWj5womjVtNcSeQ57QIyFs5DN/s4g0\nSO86SlyVXNgtwYmkieXNzSrhu+QEIRHN2sG9ozzCmSAHZHX8+nXxWcA93Q/6\nFNOY70NlqcG4e/NEI8ION3E+7uCR81Q7cpJSms+HyrnGIOj3FUQVXceI/zFM\nMa2ua7rO+GsB/Bluv9TdYTrrbDHd6yZC6hryQKmOIqwUJCQlBXLRf5iXCX42\nbfumQ+QSiBtKtbpoAykKsDM6frR8fumuUKIOlziB+z9yDzgK8SmTtOBYd6zU\nIlpnD+XnFR8+r7ORaj17T23nbY06G9aBG+4FQ3WOT1GoDqnpupcbkwDYKvat\n6IkE\r\n=kXRr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/density":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8fa22aacc.0_1591639474858_0.8141518700835193","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/icon-button","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23df9141b264b15c084067a719d65d10032f3445","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":37,"integrity":"sha512-SiSvMCO8xzFHSEakk8W0rXAdSpZy7H94wAI4RWmJcRBhU3rPTleZfXC08kDSDSySdPSHH9j/rEjIyjpwCQuX1w==","signatures":[{"sig":"MEYCIQDBoM+L4K5UyDBeMonkM3S0ks9A3ZghkbMzewMVfk3cigIhAN9gBBWa71E+XQcY0b/bT7PbylDcM5AzVjd1f8MthJ7Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocGCRA9TVsSAnZWagAAI0wP/2RD4mLwSwT9iRVRS0lh\n9oeo6KmixM1+XZxkN0XmL5tWBavz586FLEesgnBb8qTk0Y+VrTUvw4i69RCb\nJFM6ucfg3c8u7l9qkaTlfyxzYs5L7DK193ntDDGe4rMpv4Ou5ZJ24PecK5mc\njQiotlihmnoIbEMJQMYdrep8euDo2y63y4+97ZXc9LxAt30Kytkqj1Ub3zrH\nOTAIzyLEfW3zMYhCeW+0oIGRYclPsvVlUtNmDw1m3/D/6zsO2r4ayrvEeF6t\nVfAw+xcbgxO88BY+8+1ztMQDxZeBNNcFx4pklV+yAxIVl2xvpxgNyBvdkeNA\nd+Bv8u+Xz7sKFf+a43RtwbV09uT4dcHOKxfyOvTN2GLHY+XNZOGQtTuyROYJ\nzNFThBTgg4v1Baf26R+msPCIIdaDk6i+SfVZ8vT6HIW4Oli5C/ikOqn82H1r\nZN1n9jXREt0vIrhXeUQABJh5V8VaG+M8f97m/lO619ZykptY6FTOUaOOc75r\nV2GtCSLCxwvL34GFJdT4J8sxidaSlOih9C7m4zKNyTcJjtwEAFhReoChzhHx\n98Ti2Zmyepj1zsPneo1ROs4lQOrWyNzWG+NUawELVxPdyzPUxPf0vWD1xf+u\neDhzso0P42WqD0RXVOvXFFU45uG1hrKUbYOkuL9OrSba9RxAp29TcXwjLaA3\ncX1U\r\n=qNTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/density":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.21c4e4ed8.0_1591641861885_0.4712322012281869","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/icon-button","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b0c5acf71ea2a5e6ef16b74489578dd7bd1b254","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.dfde46516.0.tgz","fileCount":37,"integrity":"sha512-NxlgW5X5sDZp8f5cDJtgZa3xNlgWGyVV/SCVa00LIwfNAftxDurRuqZgl90vKX7SKqEssj0owMVRXpoKru8kmg==","signatures":[{"sig":"MEQCICs3NH60kk7hv7myyuzMSlsjZFZ+Q+d0TnVdhXBiaLyiAiBBJiPbAmnt+4H4ddzVci5ZSdQFrzPVGnv9IV0EiGy3iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSLCRA9TVsSAnZWagAAJikQAKNgpRMy7nvIQ9iz0fEt\ndeVBGspKfzArpYaWjZUwn68NAx4LRZpYYoy29tY3B4sAWMxByVddg1nMkSkj\nPm5AKNa+kjeEA/qgdXp1d6ZlRcnESp4L6i1NUSB6O1Q8q6vCGkvOzvJRE0NG\nhdlkqJ0Zv2yMCiMDOfDYFK32fteGyJgip92Ik1UNg3j52udBqCMmBChrs7ow\nZhnZGS+vVriWisS/qCviWAwbTQ8fk1RV0XdebFv/5S56IusvAjd/BDqEjpmE\nwbt/qtoawJcq6xFdVjkkmwLquW0JkEiC478eADfDwKSN/QJ6wVp1UFlbIjUT\n+kVtZvpoVHDVgsr/QatDK9rA4C0N3wqnunsrd7ztwGaInBPVPWMWdnqZ8YF5\n8oFHjNW7PB7tJ091PBqxW8l7bKim1ZDyh2LhrfzOWcRbqyfDZVhI0l99zwwv\nSaYiXaVdSYs1tJYkkS35wKtdGjy+IKOBP4dmRy/vm7Mx5gYkFIU2Z+sDx6vp\nwauEsSRIyvaSbxGAxXogsUFJ3ZdRihwDZeDl/ieuD2OT2PYK2I3T5AB4yIfH\nWwqnPsUAb7GivEZhBoXe4SMr4BLn+ILcGey98ltzGQOT5BIvnglPp7bU/Vex\n6v0tbXKfANQYqTDxo4cGrrJM/MBHddMa4JoR2bkrNFDLWDIJ03aBSaoMbLOd\n1I4e\r\n=I3N+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/density":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.dfde46516.0_1591645323232_0.7980733935940039","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/icon-button","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8edac9c42692f004d353b6dadece67b1b77a9668","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.05cc5c206.0.tgz","fileCount":37,"integrity":"sha512-czFQKWifj+D1q73wOaV3tWkNLikbw1Nzrx5p5AEP0FXAT9htA/5DSREYsG6OVc+2ZYqv4jZwpn7RuKlOwjLsPA==","signatures":[{"sig":"MEUCIC5yPZ8gr8YA8EBfJghjeb3hqMdTgNLNpTomQP71oZbJAiEAyZVcXk6GCEpHGFi1TNyiIocjo07ozEbqkFrbThJ1/PM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYWCRA9TVsSAnZWagAAOBMP/0v4XtGxi6GqFwydrdSf\n746FQgE/SYROy4otpBMmYfdBDIxtKl4QGT1f1p50n/U/NUldMM115yl3cgAD\nJ0mCdXTOSExgYwQ77/ZOThH+x/Vdnk4eLfQdfpxFPglrv/7nZ11r3tqzeAmJ\nMsTLn+FKcgx/Ydb/Pt7huSu4b+s/hwlGwcnK6Tvdmb4fz+/cqDIXCgIcLQk4\n6SVA4xUlZ8l1hLLyALMFKH8nU9/qcDYiUggO/nEZvwLwecDHT5K8QGwAmxWO\n+tYEUt4gFCDyhYgFl8TY6ZCkRKys11Li9/tkFzI4W+p+UbDO0ud4GBaeL2du\nJ80Pejx2jt4nsAM4oPTND5D2xtcccvMeVX19zBvvWmCxuWGDxKwkLS414Ydf\nB6fpbzMnxywRaZanDQGOOnx9bKGthUZtImWS75oYntUlL/vXkZ/9Dp0qcPxM\nv02Nq1pTr6hdcvOwrE10Oare91BLO9l5yfGiMgavMTgrKBXITZ5VacVA6w9f\nlrLzyiLhntKu/8KBxVNRyNEQ5x268L11gVud0r+LV+R6G5MhbYeYMzfa0lV8\n2ijWvzBG9OLHc7GWqi1yupPi2rZ6FzhTD4N1HQbldq0okKfbc9zGI9Gx5pYz\n7cXKiyjHhUWI7y9W6PksLG++hcDs0Cli5wv5Xj1HPAb8IjAL8dqLdxSkjXn6\nDlg0\r\n=Q0Lo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/density":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.05cc5c206.0_1591649814383_0.05041578444031858","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/icon-button","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44f755f2df1d3ad316e7c81af4ada2872c6d7966","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.3ee488f1c.0.tgz","fileCount":37,"integrity":"sha512-ISdiCZBs2bL0yVlB9SlNgABOHkSuzqGVcXcUTLaMkMa9yHoHJ6dCzwzoqTyANvFyJQPERXbpPBybAz/NI01ptw==","signatures":[{"sig":"MEUCIBt4/2MJcn5xgGccRcsj5UKYhV1u6k4vDUatl1udQFDeAiEAp5jNA+BMrIf8Jc2Vh9ydOVRP6xIQm+DC+3P+qJS8hBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KPCRA9TVsSAnZWagAAdXMP/2b+3T1zwiJtsBeplpS9\nl19rFpuWONgFNzqh8PpbRBbpLZnZzdHbMeu8nWlGLeqsteQOr5gj68hfI4cE\nQgP1Y8Wv8yUsowoEI3C8V9QRqMfChwm2fLsZ5TIdc5ZXQQ2Ou04oaH5XN83f\nfVt49zGNHmBo93dlczxjD39owrvk3gqiUbM0azbXK6S4psAnwUZ6SpFv/v2t\n2bQ6X4/QjrWwsJ4tCtAg0R5OyFYFVlBYY3PW3QFbFGwUe1M2HxW9IW7DpT24\nyCCRM3Q3dK5C+gwQ50tO13sVZNhCvr24jSwpNsoz75sZK42vF5QqyQdYaYiN\nswyo/OuO5Mdha/tuNhaPxr+3WKXbfU7nDaZDnmojvOMJQoKWY45J/2eR6hnj\nAgOjaRser34fBafv5CUBFthQORx69uHQyyILEDSBsjAYaWVfo3/iEGFeZJxF\nq1DfKIqarBU1Gzts/Tlpj23puYtmj+5m4/KBR2lE7LCtEy1x3FbL0NRou257\nxDA7cMFOlobZsUn5nTjYLJSOR+yggFXqRJHC46I8fiu2Z5PklRHQKzqgRDMP\nDyi0wiWKGnuHCFjQ7wNmBvzbUyqeRRXCqYS42/FmDGzvOHj+YT1qhF64Xy+t\n4+L9Dv4xp7lMukCgByhSXcAfjVdUK2faK+CFPPPw33Jgl33h3UWQIxyx/8Q6\nrgzM\r\n=hy28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/density":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.3ee488f1c.0_1591714447582_0.8826974133714944","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/icon-button","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cb1a6632cfd969fa90cc8121b47de610480f8e3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.b83d720ee.0.tgz","fileCount":37,"integrity":"sha512-JrxDJ+hJyHvDItPpXzKhoRv73cbNN8xx1+5TquWy34vrkZjlKmfwvsIAXQLUYkCB0pllWMaBlD49ewpeAw6mOQ==","signatures":[{"sig":"MEQCIBxV51zMi9n4Q1SycpZM8lGgPyrRgpodyb0/1F0exbAqAiAsaUUXxVNu4PaSl0d968G8rIIC6I92sUuYabMP4MmOqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38Y3CRA9TVsSAnZWagAAnJ4P/jeqCIDSMWUwZyGCybf8\n5qjm7F1XEiKKhSyQVcR6SYdgd2HM7KsuGbycqP5daOCxz2q8Sy9brXRJ2zm5\nu4DxbxzQVpHY6ca6HdoIOOCglL948MHy130VjnUSgVpiU/717Q6iMpip9wPi\nCZ57d98ZEVDGklmoRBbQhZ4RikuL4r4Oc4j2TvqR2DkeO5hRMT+Ihqv0D2JN\nHIMT1W4zMdBenrOOIMmcIGbNyAgnikOr0m4LZU562/Vmrei5TlGHYN/j1CJD\ntYWsvGZWS9AkNLcfyqE2VkpJo180KlqyyWCr3G/hFFLDh9Q+fOr1Xrd1V3D/\nK7JURkrdC8kGzB/Lp8YLCnsIZXa2BDUmeijKyZT/5WksUtNAZV7SVs1nL1FT\nZSKVUc64yrCmQbI3laaM2slCbhCY6HSilNEm1OJammpMrGa46cR/bhIt/iQp\na2i+w9asa1P1V8csXkwevRKziC5HuZ55ff+8tzEFWiGImI3JFe/5Q7/wnNP3\nU0mij1CN1n1B5u4ZV2xN3UNBaj1DsvPTM6OwLDGm1/nU9wn37Sz2AYpgbqhq\n8Ew91bmf36cutAbwuWlmZ2yhL23MictZkDynoyDzOQvTqd2xlmFXNxH+QEzI\n5RnY1kmL37Z2ES7SukW0YQj7KPhtXNUUE7puLCQESFaXH6TbUY1dDk3LfTP6\n0CSp\r\n=mj0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/density":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.b83d720ee.0_1591723574746_0.8010126977298997","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/icon-button","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc34c34bf8d1761e11ddf098291a43e5eddbf88","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.afb1c11a9.0.tgz","fileCount":37,"integrity":"sha512-854E4RkXzBuO21KcnHEm1Fm/Cpk8JbMSdPo4TrXT5T2f7m8xc18qiOh12R3YcW6LxlNATtOLgAZNd/UZ/IxGrg==","signatures":[{"sig":"MEUCIALVxWF5nZs+sNSAQlFPC0jyWOaCmGC52z88AtXsiOcUAiEA4vJpM+Gto+SsBAULCvNKZjWVVpO2/z2v6iUsX3DY6mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4eCRA9TVsSAnZWagAAjUgP/3B8nrBFZc4b4XB650cc\nVaiVJhu9JATXaQ0gO8hwB5kpf+oJOw5/6wE8hsgYOIjnSFCz4kQ9B0FwRYiX\ng5wT1yNna9yXbdLsnvcXuTAkWqGtGvAClm3hFGQAwBq/YpajDyNhnIuJqCgE\ngqtfITU1CJ+xnYHLTR1Unq5tUlEZ61faw7NlRyV9sgf8f8VAJBefYxaTs0JF\nIej6aiD/5+1tWiC3fdLSvIdnEDRD4f2Zt0poE1R73j498AWrfgja3u10chmk\nAnOrvySrSDc09yjV3+VjzUT6jb3h008ofMWH/QU+TffXfzmL1T9Lu4vxWNHz\nBJbpNS3TD1EReJ6gdfQbSzyvm7lGB1iIsnGaT43zr0mVhdVlXXqmvfXPcVzP\ngeoc8fwFvQu47jhj/JgTa2PlIjZqw+C8KE0utQ3swDOiWQ+EAN+kZyW8j2y7\n2463b4YB8CXxOjqS7PwWu8dOVMvbC7C8uO+45iJ9XjvWZwYglbWwMGAUkGGd\n8Tkmu6xcOlLwjPUBEiSyNqLrMGV7A2QDV8Ztu4R0gVBerlrIm4LIhTpCkvZf\nxMzDF1v/fAIc0DoDFt9HrgRhT04HfyDmzpAJJ4jOmCmaRA+DguB20rEbk5mi\nBzSQbBqPUuceAW0wuPT/ZqSLa128b8qyZgZY5vwKtfQH6nqT2bVZSlZDv30Y\nfrH5\r\n=NOSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/density":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.afb1c11a9.0_1591733790418_0.029820986019186257","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/icon-button","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29ca6eb1c346a4570fb694830d03522e5bdaca88","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.39e6f71e2.0.tgz","fileCount":37,"integrity":"sha512-oemBSajLiIn/uvcN9y4kqvuHlAIKaelCXkIP5nJzfHtYIdmEuZkyqxZpoMARyRkkHyt322r8yQ/WQOxrCNfOmg==","signatures":[{"sig":"MEUCIQCbUNHuhjyIe8g9BQ60RvKJJ0gefh6j16oSjpmMQrQXWgIgRhsEhAr8Q6f0dxru/UDx/X6PbM+OMxqvTO8dLmCSJks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B29CRA9TVsSAnZWagAA1y0P/3SS+8YZe2QwFGlnP7IL\nRPBrBtWkVTbH0ZHto9aqs2ZFMkSrjIVUdBiZaFx5JItZEALS4NDIUdJaHBcZ\neH56YkP6rD+UIyp2VW88OL9kNfNZERuHlTRShamwUAZj27VrxZLd6HteDi0z\nP8GhR+oCp9eTcDq09ZR4IY5bsKPtpOfqMZvNDdivl5y8I4onmotBot4wJd/Z\n05K4EZbZcO7lfkchIwwUqRTaVe6dtCKTK0J/lzLJMs6CFLqKCBUUGBy/tGfr\nBZ5iguEpL+IXD/qW8Z+JeEkM0U9P9/YP5gJ8UZuVwZHlpWdcbdGG2QUUbjA1\no0kLUq+CcwstdMLTADPp8oog7mn/aOXtLL1UX1beLPa4TvRrlzgSkC18YHDa\ne8jhhdi65SdYFFhQSAc9TdtopMaDbjAWu1whvQc7HxegpRktFy4RrusX8VAd\n/QKBgWt5CAx4VwC1AvwSXngN+CnjAqDMnwamkhlTmkghpVTojGGIVV3HwvfJ\nObMluLyOQYo7rHfPc8coEQaIaTNCgGokcgBCe77zaA5IM6JTF99P1JNYTUUu\n2I4EeJ+O2BovJ5UsMmJ2qA8fwNd71N4qZk52fhUykBcIxs9skrNtCFI4PQgk\nch9SwjQninhfcaFhUiN8c9E3jYEBGUyIYglC+Bjq1pkHyrLbWLcgWKwOCkfd\nMrLJ\r\n=KIh4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/density":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.39e6f71e2.0_1591745980830_0.013663797549990031","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/icon-button","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d1401c4a85fa7a909c97113d7cc9e49e645ef1b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":37,"integrity":"sha512-TcGhKyMl5tUy7mEpcqsvZOZtSEoCL2becgdGG8Z+2PR2wUBOaFTKJAZFISZbFc558+k0AdE9vaHlo9OZ6VZcfg==","signatures":[{"sig":"MEQCIEfVmnD9gjWFvVfd+hViMVdOERrQLdzD+qkNZl5IgryRAiAuWw7uqbQT82EsQPaAK3za1IsFwhC4kVzZ1FFnQAWdPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3kCRA9TVsSAnZWagAAjnEP/0InyciEj6Y72dGvYPr9\nwfrYKfKVM6LqxqAdSbi8YO2gyQl1mOCFJsx0N099Po+PAMMubXS6skXcV90p\nlJ3LwHaRZpBDz524a0nD7B2YRAfsmY828xRDnWNoaoYn4eIuCb844NEfmTdh\nixIihvAEDmgmQYq8ILl6KgO4+LzHmWHpfT6ktoP/Lh+1/7t3dtqMFjeQco4N\nFepuefZb4M1hbvE3UFZ1YF4pB+5EKGhr+YmzxlH7zIWqOwTqAT6JuHxhrS3x\n8uqLqBKR467c2zy/PlWyDdM4FuXc6231w+QYhipxyAXriQoVhf+vZ4oc5eA5\n+BdJMAQ7rPEn7ZLNI3MUAbdAF7P7yBJielQ9tyspIBiEVX69wdQkor51wzE6\nfw/ia4PZL7C4KJMaLtmad6Mzf0VHaszZvPDSc5iLlqGLcKxcSXoLJia8NMe1\npGWTEubgY63pnNlz9GVvRv1UNhQ/RGiPkTW6l7TwqZw3iHwCoT121QWZffwz\nWaQcAQ6WGO4yNYPkXmucYzWY4QAMgM7h2myYBBrwkfPPA3MrMbq8aXM6u+Cw\nJeY44g7ia+0LaDxxAkDG38wNI9jVJx6Wqf7uzUDGpMQ5SToxk7LXjc0ohYYZ\nb0ey/P/6nlOtvUe295szHv7uAg0za7kElnKHb9hHXcNEZ8Erhd9Esl02JEYL\n7TdX\r\n=9zb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/density":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d4c66dc7d.0_1591897572272_0.9786560294712883","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/icon-button","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1158e8f2d4304bc62b97f43d4fd05c54d36208e0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.be4a19f9f.0.tgz","fileCount":37,"integrity":"sha512-qaINycGM6ZFPR5RzOWILln/rmpoow75D/8+RnGHY0XM5canS5zshyAf8bVMn1quEfICaIEilR01e1nfpSs9lmQ==","signatures":[{"sig":"MEUCICHyI/YP5pTlq4+EMv/0BomfpGo8uuU0wjYveSjU0YdnAiEA62tw+FbyxwtqoIrp7Ek1C8E1fnbsXdhx2XT8V/zm95w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvaCRA9TVsSAnZWagAAqegP/1XsZSv39tAa/ExmRgUZ\nMbd4r8sRLrNoUJ/38cy8zXb4VUAGCoV1IyOMbrs0qTqx4D2WKq3iCHUUvFTG\nB7VLcrITVVdtMuud7xmnjnwozJm2B/k47rL/ozYEGF5Xq/JVjipUZGsyfWdm\nSK0ocpyrexX+4v6ClPqpHadYbfw9CUu8li6iO8NMFZh+dhc3rajoxHkkRHaS\nu/bgOAj7BR+iCxOVIWb9rstN19KGMLQ//q7tGpwLR01JPgrmT7bilNYKNjxp\nktlGaF1gObYTa3L/Y/5ef3jT18dmWHqupK7xWyRsR8H4hnTfIvaxDp+6l2CP\nt5a5QpIFMMDDhO2JKaY1rAoBLoO83M5B7czAu0+kgMWqL7lgrdBavEAiEY9Z\nCIRCSlB3O8TqRzyT8CwDal1NM+1lf29DpJDiwPR7tJdfJZg84+dcZ4m2beUm\n5Bo9ln3BDltoKH17j0CTBgt9NSIVPCn39+7o3xT7xCNOgbJjh6mKYfwrT1x6\ng+3GErCeeyc2+4jReFskUj+zeqMiRmV4692A3DKFtll6NK9SFZd8uQGBvbTX\nC8d3YXOMHS/bZNanefHeuD+FvoRAag7Pa6Czit3CGez4Y3l1kaaMmZVsYtp1\n+hmf7SPYJEh9Xmbzc5E3XoKv/Q7HW1seOkADG49Ocj0GURFCL1HK6t3CGjkL\n2OB5\r\n=qv/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/density":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.be4a19f9f.0_1591942106154_0.45682761912207703","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/icon-button","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdbb6baadecb24b019ebb56aaf6d98c5c8438909","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a6ac8f629.0.tgz","fileCount":37,"integrity":"sha512-fPX+0chriejvza0x98DBgH6SvKgfAAwWQeiDj2A4mZpQqw5A4wcSIyJ8RYNEi2x4A5ug0A5JTeOjxZOkvpAtnw==","signatures":[{"sig":"MEUCIQCB28bQgHHu5K3SvrtqRfVBA+UIJbJddgQY75Tto65glQIgambQ5iefgGOHXIEQcm3ynmFi9I/UOtNEDWeXZepCLr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iECRA9TVsSAnZWagAAjR8QAJyiByTXxV+97jAtNM3P\nkHR+rWAGiMjCVEnN8pTU/nmPcqQzExbA7Ch37rO6dwMWGe8dZyOA+Dki33/U\nTRD5QDU+kbieMuLYDocID0IsryrCuReRvddR4VZOPYuyB4YmN/9Hb/t87lRP\nXsD9cRV1ZOLEhGrAeyHrAxyXRylAlTGhvFJHheLtPJdBtbnw4YUxN8UNpGMo\nCQIhazMLiUdtNimjuE0ZmdESjm66sKCgOwuHrr90mgcg1Q9eruJRNhyFTYm0\nomEaZCh6eONs7rl4ePD4G9vxUxsNiWdU887HMMPU/zwsZ3VbT3fZcO6QWn/F\n6rpvhznrTmbDTWxIp1Z3R22rAkX1sekA90bfK6yzZ0E6xJBCvQSaXrrWZxbh\nR5HN4cqSLcq3K1gLDgV1PffP5ObNDCGDUbQ0ZA51cKcJ8qxSFu3oDXj3Yzkf\nkydm8AtR6AWMnZRwwpJcJh08L7fb7UNU4MQDyqSUAbreUMEWy4bif6Gq+Gr5\ntJ8oywQp+aoNs483wyE2BYUabdb0hqhr7oXRI0H2csAPMKcaO6RpUdCZQyTA\nzT/bgcUNDXj0xVTa/QIfB1RPzhFvdPHrQf79m+ko7QnWPVnyrTnwtoq5jAvJ\nNlXjw31op8dJOrBhWPLYiSubxdYASkQ1PEMpicFVjKIWvVyUuXx+duMqGCWa\nrIcz\r\n=C613\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/density":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a6ac8f629.0_1592256644215_0.8081631739533901","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/icon-button","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa449c64099f53fe1b92d9271519f60660a2195d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.9833dc287.0.tgz","fileCount":37,"integrity":"sha512-/qwLpZifjbs2YPjeJC/bIPOLm6SJCKwTEVzrWQuh0wRVZ0maXoSGxHuQhU+T5pYj5ydijvyZGUXz5h6zyERMVQ==","signatures":[{"sig":"MEQCICLufYHl1ILJ9o46SbKiBpKp8tI72c8ZFyjLhERUPvlPAiBSdVvtNLx6dUDd2Oj2iU7aQbnT6C1bBRrRYw7jW1Dk9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJFCRA9TVsSAnZWagAAq7sP/3uVdNq8pqEpwQaKO3fd\nFtRq7WFnu5HhDDgr6GQmAkHkNtGuOQyS+vNraI8DU7eANF0fsi9uUJgHBFTT\nE5CAy6YXE1pYmzcK131EHkXHODNd0JP4y+9cbNVJ2vPVKIuPz36uSXwOV/J/\nFbdEPQHopgNTsReV8HnaO75M/mkHrP2IyAd/C2jvqXH0LpiPKO3L0WqBaTZj\n8K8lJwL0R/TaSX/ACvlnJmcEossTdOkmHq4Tw8tlfik5OsZ0q7Tj9LBzgcI/\n0wYa9rppU/kKw79To9W49oDL16oxOOzmPx0e2qwsFdvv/TCANtbatydDHuF2\njXHotL2qq2+dllvy0mg94QlKTbz/Xy/2ooavyNUn7k88VnzuToY71EdzsU8S\nsHLNwk8BO1bbCra/UPuQq2D8wkjP8yWSeoJML0VEDd4uh2B/teqjSesnZQsf\nSGCugCw8QHODKbVBdiaO5cBd8Cz0tgJXna72pgDRhUcOkoaTP/cX4auPl0/k\nNeTJjCNwn3LgRpFUrNZ/D0tpYI1xdmCPcGdjJrF54QGZOr5lETcaAmEFCneC\nqnNrDm621G7W/gMU1BEyU5S9UVriDtG1j1WrZL2s0sQ44xOc/xcM+87JilM9\n014Th7IAKnervWle7VFoGX6JYzUlmxYuVAVcksTdqh5J9Zb381yFwwbwiyPL\nuXQY\r\n=UQZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/density":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.9833dc287.0_1592336965388_0.7149471656104096","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/icon-button","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf765d976b29a15133d7881f1ae315f52ac279f4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.3aa33998e.0.tgz","fileCount":37,"integrity":"sha512-sz6lYDBJzIOnK4NrEabevimWhyK8UUvBbkSDeIEIZIMUajq51nRHyDEYtX/hphd3RZNjJAiCM5qNLu5wSHZzsw==","signatures":[{"sig":"MEUCIA6vVzcQRLbOzT52n9n35WZl/Xpq1QAPDRoKvybmwD+8AiEAiDs/BArjLGBaBJtJrFnmFS46rWJJihT+Y59w4/rSpEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sm2CRA9TVsSAnZWagAAYhUP/iVT/SOCgy5o/77KSe+0\njUphfnT7x21mgKJ69aHBsQc1KB5py/jEJCJ34Oc7WCpG16davXr6LDdgm4XO\nDPqka1yRoHVEUt5WPslexUB3kp5lJSVBUHUJM/nb7usD3NDSJt5u472mwZLq\nJu1xnrOBBbr1zEN1FLG7atG4snW/JG0qGqP+hh+1XZ14g2NMiTws02nXHYye\no2RRfovCpWCDcur6mg+muJJm+g0n6ODJ5nB2G6UvIhTNTe5vf6v1bS/XXFrD\n0DibYnd44fMvlgiX/vE0mBrsvbsXdxW/e1WNMusqAC41hZi47nqmH2HT7Zxh\n9Sz/7zlPAT7q7uWvVv1RkW9jTIrvS+IHfZ29WOQRV9534/tnlezvZsenFFxX\n+bDJBeH67dQzAjy8ExbA1tfU3EiGWO/tL7vz/fAp2Vd+3zqyN10Vyhw5L5ad\nbzg2LuiFSr91PDaO0lYCPyaNMgDR24dFkw68e4w1E3YIfi3oO9TgKMI1KVJf\nst/MtxxqY5eRKLZR2AEszmOvE405kn9FthxD29vvpKHtV7uYYpDPvOci5obt\ne1d3i0nbfl9c9sBNrVLCqYzRSxXEhCAylkmRUcZMWRovOSQ3SDhebA3qjEJ6\nF3/MCFL0dBdU50CZCmEmWs2Ua6abizC69J0z1/4KM5INQXC8DKX60kB4BQey\n1PDp\r\n=dWx+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/density":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.3aa33998e.0_1592338870160_0.5502880038722808","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/icon-button","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b5d80128bd69219efa6a10322635f4235fa6ad3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.d2b54d183.0.tgz","fileCount":37,"integrity":"sha512-PStHDEKuYRog3TqKKqTAQeJWywYwa4s6dLJbClwe4IzF7yDEQvy+s3YiIRGhoMfYoqGM5f6r0VGmXLR6dfMG+g==","signatures":[{"sig":"MEUCIQDHxko1PKnyFB76B3Q8rylaDGQW6jkPA/GmlGbMM6lC3AIgBUnZgIA2+S8NKc5cgXo7nxJob2QLOta+oz8gO1buCXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBCCRA9TVsSAnZWagAA3AwP/ic+SYx/990rxW5vsr9J\nO7QTuetVkOTK/j/G+bMI79Afx+fIhPZhUbi7See51SNk4JnLGrTiTMQpHsAz\nbLIW5MD+dwJhfGEnAsrzFG0WzzJm0uheA2QF1kUlEK6ra84MoAZjMopeRn5r\ni0IVgykwD1PvA/hoau9HbfaDpxPeVguAV3gELv+of+JdcQJsRhYK/6YiFSYR\nNGGg+Or3RSe53766iI8CJQ/C8qYwtfgL9B6K3mVWc80ipO5iMstOaAGZQVuN\nr4QeyrjyFWGh7BFa+hwd7UIOhxAoaUxkXO32crn6SkY8PpQQY7NqCSZY9l/r\n37/fj5dqYa5C2jPgeRtbRplRsBfNhoDTdHyJhDvciXy3hdZ8FhYXL6Mki/T1\nGPhHVf8HpzMs+/Zj1GuBhvaVURM0HF9AVH1EmBO4l0DYHjeMEtV6KeocsF9d\nDe0dMQQSBkgvXr3dzF7rM5/5jYAZlMfMzcBP8s8BiqaSHGmPhDlycIwDvwz5\nD+8dN74O1xpXaircsbLcJwb9mHjgDx+IRoK7o94kEt6XbLQubiMpXRZgpOH/\nfUlk5Wpttq0Z6F195eljCtndn3Y7cP304zrSy27AzGMeqdZhiRZs8IND0e9z\n5Kc2qf6bfBxGDDlRuBahSseHiCX1KmYGmYkGUZNfPUROA7dWVBgVrNS5gN5d\n0JJY\r\n=ikWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/density":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.d2b54d183.0_1592442945673_0.3076067527019162","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/icon-button","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35e1bb03bda23496dc65b45e409be5fdd9a508d2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.f2a488e95.0.tgz","fileCount":37,"integrity":"sha512-E/j8Fw36Tdc+zjD6h8qucMfTBqN6UsHpcHS+ykUl290ZS+M5H0PosJwClalZhGaPaNVz9b298gGkN6jRUDUu9g==","signatures":[{"sig":"MEYCIQDBdL5bdgPClBK/dCgq0oaqtqd3Y7M4LK03Fh0/n9EGgAIhAKYJ0Sh1eOJAvz6/bZH/d7xS7FWkUivtInf9MwZ6TuAX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JyCRA9TVsSAnZWagAAkTMP/RrRFNfQjqQALVob24/v\nC4ukj0UWiAPM8xp42QvLbncCoc+l/3BE7rplgK5y/QP8tRowe9ylmypaL+Ey\nGAAuetRD/LRlkmCE43kldH0avvqLm8Hr/ZRIOA7SgpZLjxvnXGHUDRSGD9Jo\nTdk7Bj1PZFwRGm0fFUaHAq2XKGEGIHZLRxiGJlppayJrmuM/QLFvABrzNH2p\nVOdhykSRVg+A7KuKpnemhPwfm7RvKyNIYHRFwriCKBrGAOLYik0Wp/7fRsmv\ngRv2jP2yVbMSVIJVWBy9/DJFBczfjz2688lPgFCU8goJXSMSeWQEbcqObriX\ntFIJPy5We7w3CREfPa+FiKY5n63kIRE6ClLzS7OY7ZgHADpT1+BuEOMj1trV\nXreMOB/eCBAqbS1bmEwr63FpuDNk4UQo4sZQ+K3nw9sdnTULHSJnf3yLLpG2\nLCbbBS/GGI769KdxwWjBAblUVCAmnksDa4A+Jzx175Fs5Z72p4RLEgfuTNtJ\nYDOWEQ1n7iSOSI5VSOtIof7TKolYsA4GWiEUwZIGaxw+qNVR/WHki3jDiQBC\n1qv1/5rTDXhs02RpXQq7b8A/lBWXh/hjtYAgKBolhEV+z8G5G65WauRHdGr+\ntI2vnS5BWAGG3LBNDjZXxzfk3kXJJaQ2DMTB8qrIPo+HzUh8u5nUcxPFoxCH\n46i9\r\n=aNNZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/density":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.f2a488e95.0_1592492658431_0.3636608133630812","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/icon-button","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8383b20c0b4c48dc9b58fede853f6ab35f08f6e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":37,"integrity":"sha512-LXR63AI+gE0clAjPJxzN4ZtzQbsqhxhhpISgBN+kroaGvs8NKcqkABg2RQLHmaTMGZcCGBpvhZV+C43Uup3Z9A==","signatures":[{"sig":"MEQCIHj3X/vA0MZiVcfPGtMg1q/dWpsISxuusCzVFoVhiwDJAiB16zjA15Xo9fpC9keN2/EZ5g5Zhx7D2O2o1ZDHo7lQxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VHCRA9TVsSAnZWagAATIcQAJxxR/Lud0dOuRCBrCHC\nHPelRtlMXAb95UUjHRX/RCbuAw+f1aKnNsQ8GhCTJBe246bjlegw8U6YWxam\naMmyGPdgkg27XwLCcfO/DKX9KOL/EBIzM4eYsaQkXpoaHUSfhy2OenkUcCZ3\nX9nYctGb0CuXTs/R8hl89BPm/Ui1R7/UoSuXhMkYtH1/QvGttwlQVu5R5Mo8\neeu9knqbRWFjBSLHNomkfetUDAF0jza5ZaCDw8xKKBj89+XJkiXBXtxsbHp9\nLr344gQ+rYk1Fn9sxTeZ0oZ9QD/1ttbEQqhwI8Sfxebb7iunO8rcFysyE2Sk\nWZM/koWdzOjIVqztEVzoJr0Son9VcG4f+cDCYlqDd1FWCOP8w3PL9HAHc3FB\nwIadlyiZqUN01MKOUQYRwqC9Faxt7wakSS91f+RqV1WAS8zHuI8d2LdJnQNZ\nQ9TIGy9teVqlMmhjUzA2g9z38WnBaJjjYnzH0MijJDj6oK3WkDiqiDmicVKy\niEObhsHpkJ7D/5dJb8Yd15VTDvseMJEpYjEvBgMK66n2X8khU6eRgdckNHsx\n9b2HQ8yCndmDMo/G6dgzIzNo/Uj1Ac7JhHBlx6+rgubGv601UmHsCfzV0a0x\nkfsAtV6KzZOMTf9EJD+iw10Oqv4mcqU5B9QH3zmozixl1VsDjrKQsmxPKygv\nTtTU\r\n=1lK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/density":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.bd8d1aafa.0_1592493382665_0.718410532638672","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/icon-button","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b12e1e137d96fe83e3b5e5605f218f7ac2d3962","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.1321eb968.0.tgz","fileCount":37,"integrity":"sha512-O4ZWsrqKzec8O+nnze5nZ8QhpjmgdUVHMxraSupCvBrbJGh6dWMejl12Qrp/1jth2U3FAZo/QIue6JNejaHQ4Q==","signatures":[{"sig":"MEUCIF3Zf+r+rTNV0XmDfzFghqyLPyNITXcSyXJj1IrAPYXcAiEA2zp86594o/+4jWVHukJIGduIXRNwqDDlRLblOf0cpnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAzCRA9TVsSAnZWagAA0iAP/jCQbD8fMJgVxe09fOUG\nir+6vXsfo+USAkt8MsdHh2h+Rzu5+RY7kM720+scCB9iTQAZdcC7i/79zU0V\ngOFN+hqSyrGOUOhEQKqXIfZPjIfE3Tf/2qlnvFh29S+RE9BY9eN/AycbwPuP\nDAgGCnyfJ2XUy+yiRsM3bNA4Iy9HHpG19CDkP/SDbJrB+a58OeiuMjp4eBgv\nO9TKtLQr3P2EWz+cK/SzuFe2gN9FJlvUu2QUvUzd87gMj1L2tiSQZOdP79wr\nIHTIjE+cdNYqrciUGnMdn1CoZZ+20zj90Ti6wNl2rIV30l7buWFF4Nzargjc\nX1qk15sHqol05YfYB4pIiXozlvf2klMBhK12v0zkRfDEv/ZCrEdXB+RjeAsH\nprNy/vTC5GI2wnIYV3p/YZCQmnlOTNqO/cA+w/pawQhILSj5ceU/VaczYZ0n\nJhFQx7huhNUZnb3TW81AMl/F9IB5tmmQz3wfWO9Umqwy6VS7/pJmYwbpZLJW\nW2xpv1ZWxi24LT1Ds3DiO54YQ3u/k7vPLHThS0Q71WnAQLPgVwdBvJsPY2sO\nLjuTAIKZuUTtDi8aMtZsOUunilzXj/AJ88jfKfmSinIM0FABla31Wr0s/Udi\nmHajPjjJSQn/C4HlfFjk+TxOzPPnmEIyuf9oU3xrCEjwOZuvhBgMUeaMyZnG\nMe7n\r\n=wFTY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/density":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.1321eb968.0_1592594483013_0.7739039859261612","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/icon-button","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79b27c773f2f6e9ef926187bf8dc107de20b12b7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.db5cc0382.0.tgz","fileCount":37,"integrity":"sha512-iRAmrT6W8uEqo6Qd1MY7K8R85olbzYULTTfoUNkKFNPbJ2+KZFgnlZ5CeB1fsPlLu9OJQEcruNgiXH3Eplnazg==","signatures":[{"sig":"MEYCIQDJFVNs0/Gsa/DCnmPXwHU35VzpCPRiLLbhbY5wtfV6DwIhAMZN5RTRBrccY4vdaJG3f/EKjRTWPt2jNbE/WYtszoS9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RG3CRA9TVsSAnZWagAAkYkP/jm+VMf9+K3E/Nfqqvdr\nn6NC2kxPuvU3NwaORO4LJyf061wS/PRO40ZLlaW4gdFVqxr6S+rXmjveFBx7\nBMuXxwvil0IhhfXGMLpp8y/hZgke4+/JSu9b1y0/RXq9WjV9QmyWvAS6Xb8I\nSam6VIhFhCq/CI0XvUFPgkktGWOJGI3Bg/+w+0TsTBw14kjOMDMJK7Jh8d2/\ni//VoT2IZoXYGNn7g97liAjeHvjQid2Y+j0fljRrnqn9VGQdqux7VxMTo/yE\nprD5lSH8Lno/MJtQ5oCzA73AajxyTjQsOhTgYlZIqXrYwoYvLvfXN6ITSA0j\nxPOPFrwRSCt+SzeBTkkt36R9rb3MslZleLDDOq6UWdS7jzXOy4PTNmpFJCPq\nrQ60r1ZjiyNNmtlDLbGZsajuuUa5T9/o9wG8OtXu9QJQ5AcCDRRyYyh2qzt+\nX3lhGgPZIFV/m+wiKN3nE5/KKgeYW6987OI7tljcCdXCg/qbELfwXufsHaI2\ngspjbqRz6pI5U+zGQtWRSCACJMuvWhnf0Blo5HhfvKEUoVW5YP4MBlzjEN/G\npfFGbukrRHqcHJRzUf9K4YMY3nugzZ5fNG0suUqkcsKPzukFZDKa+/1LhzKo\n/H0sV3HJgda8Y2NNbNXa6cbhSOZFrUWXfNeQnLCe7zBA9s8L/bnK3Ulen/G/\nFPFo\r\n=pvL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/density":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.db5cc0382.0_1592594870853_0.48873512240329453","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/icon-button","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9393791e4387fae6b335ecb8716e2057faa45a16","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.6ac9bf031.0.tgz","fileCount":37,"integrity":"sha512-YiKwzDMKVB1TeTksJ4DfqT3WvPwScosMrh5yDYZgcLIc7UXexMWGJBNOgF5U/nkOD7ulJIoIFTIS/yiNk7npyA==","signatures":[{"sig":"MEQCIFBEhtU6Rj3Gpf/SBfzIcdNm6a24c22smdY9QfNsaITDAiBrWBkKB5wQmA+0zNRuCtsTNd3bhhh6SalXXPxdrLwDkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZ7CRA9TVsSAnZWagAAXkAP/1l4KvRiRE9ziAs1L1gx\n0PEh5CUcf3jOEnKQjxBH+ZIUNa2D9VbbVwYGmyBspKpSXSG+ifgeK17ZWoRD\nnkWa+AvDmisCosqLH5s4XcifzT0Qa/DxBJJaRILKMvW7DbfTFa9M49R++7is\nzpfqoe/pd/JzsPQqjJ5Eb51RQngznHV5VEizP0DDQJNJ+3KEz3KG4DdRVUcz\ndG82tj8Yxra5Nejf8Plji1GJasz01mUk41XLL4kVPmjUSYulqXJ5Hzvi1AKo\nw8StQgIILkA16UYcmR+9JYl6/IN77lp9dEBxJSDSSs3OkbxpRhPSKaXN1jOV\nqUBqbhJVGUBtHu34uYQi1MzlfTARgO+3OppyMxaj8dVW38QoqoAJRUfwsSXf\nYdNuo7Q4mU+m73TFbisUw9MbKdMLjERFXFMbeF/jEF6u6uZvvFooV9cJ9TKb\nz5Ga70unOX6Q0YhTb/s/o9BT56h1DaSZ9m48Xch1xbjD+xR+lHUaSkbZsr9B\nDmneRwjh6j14FEmrSxxWnGa1gbj7EcY/dSSjLBf2VoiZC1shp1CSqjZIyWAF\nrgD0qQol165DihHp4xwwI50iOwgudKZKbYNU7p8S1EgLp4z0ot0NJS6nOGkx\nqR+ESY9p1UsumMlpEOMtNiF0OgUfxajBCC5m0nYy+qpD6fdX3lwns8Mx+1Pa\n0Ta6\r\n=/ZyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/density":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.6ac9bf031.0_1592596090797_0.049522994044189916","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/icon-button","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4399720755aca5b62a30f39ab2870b8629c661be","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.c21b5c367.0.tgz","fileCount":37,"integrity":"sha512-4TccczEz9UEcDq/vTEWkTRJPB8kEkXlJDk7ZlVMXC+1M22RfD+loS5xTjIeCEMx3i6cGBq5x7SvVY4Ij0vUYSQ==","signatures":[{"sig":"MEYCIQDVS3spb4+bPMWnYH0mh9tmIkxk2GUPbg8rQ6stZhUlUQIhAILAXWiY3ZQrHYoPq/F/7QZZxu+VNvGq68cNhQRM75At","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Ru8CRA9TVsSAnZWagAANa8QAIqiejs77aWOc07liwTW\nWooTx1je4ynSUg2P4t/COJM/gvjf8bsYVW+UW3zwcAoASjK+TEKZvEemWlBT\nzb6pUdrcfohf9RSqV6C3mCGU3XrJb0R3XeY5aXKgi7wrIj6jzEZATpHuYez6\nvjCuQQJ1V6vhvmvjJmNyV1kGsNvYiIWcHdHhB9XJStYKsuNUtTHc99P37YpH\nychrgloJt293WDk9vWBj08cmgPXQ9MwlGNiXR5BMNrbZuEpLCaYpK4FSR13i\n1fcOD/pG9QyFfDIWAWEgWgRLm/ZbTc77Za3g5wB16T9IbQFyMrLWJGPlTFWo\nhCiJjzyKw8KQQeoeR5sD7Y0cKTd6ZryvaUEHDpcD0PAoUl0BO0LUZ2xF+CDx\nMS8TYOG2JvojEc8R1TSL2g5z4uBvkF5nf5nKKYSEn6c24GSL/2Bw9tVOXwUi\ngx/jcPz5UlLzWHhncYOFipWCZbscamW6SDYxT1AE8Yyx+i0YVFebOypinsNc\nMH3MUWE0mpiyEhOutlWvmwjOE0dcu6JjG0GnA/vQaeMY/MsaJHSIEU6CgyGU\n6BV1I4447xk+h1FUvhvwtOIh7eEf/jwgWliiXvIecgDqJT/AAE663DvdXOMg\n0TkASiGrGuNKKAjpxV+9H55V8jR6e0ku4b14wtRH4N3a6SFMCOE6QcK/1qE2\ndQpt\r\n=3KH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/density":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.c21b5c367.0_1592597436295_0.4710296747109579","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/icon-button","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d54ed00c8fbfa604d8577698dff0481c883f61b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":37,"integrity":"sha512-ifzmwXmXHLcUcSR8emd9WiWxVVr+JFs4WNd9jvFvjTZ3GxIyFip/Dy53/MMjL8c3yDnq+4TEmmm8CRDJRm+VHQ==","signatures":[{"sig":"MEUCIGJgOMUyKdVt5jykWDyEqst6mOlgSrQVVWHgjs7qaYYRAiEAvGtRXyq7pePC9eaNuR1PtHTwL9rmP00n5yPd5bD23MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3tCRA9TVsSAnZWagAA7fEP/jdXiFgb93C+HM4UcwGz\nIpDIapUPN5RjsBbbzFgiwIayLj6bcg9P/A6AgEex/C1EMZQ6AkJ6+2qrXArB\n7N/+KqPccsAB3IWv6/b/rwfrI2YBQX5afN9NzQilGODWxcS2SQDw7lTqex2Y\nhfsYiL4kwo7W0mHibWsk3s3OKGaXVvzJ1SHPgvqldkJNGYjR8TgjxXdwqpK0\n7LHs/Pdb5imqM8WQeFfL6DqJSbQJK+Ej2jij1dIFKc8iJWZVi570hTlc5wrQ\nYyLZSpW46K6vRK3ue4J7NdVkXDBWC+bGHnweIWJbes08Ap85JCJMRj5FyLx3\n3TZSgbEY2jhoBFcyaJ1tMGzjc9szwyNljmE+9+1+513yvg/ZxKmp3wtJ8AOk\nLBjwz4W2XvX495iv78GiBqk+G9YUBTecHLMt/HjBkBw/YgGlyLvG65r+0Nu9\n1f7hQsbObeyFAoWS5TntvuSZ+akPuhIuVgaruIRnM+R9KKysmf5qQBHSAxK3\nJTjHLeIYoAHAQPUE/TYescMIClrBfcTGS2Gj8OP/z5Vtposdqad+mjNV99zu\nqvsZhQGy060voI4EJXcToi8fFCPM1EdZlMeuJ5mUsK9jiomczK2D5FNpbf6y\nq+dBJ9Xk/o1rbBnrVbPYGeKfTQM6l/Toop+0PLT6fzBuoDjaa1p+IEi3Kro9\n/Qg6\r\n=tEQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/density":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.bfdd7fd39.0_1592597997211_0.45861225114733184","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/icon-button","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d6ac6f0439638a8ef92dd59147c3cdcdb9320b7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.10b505785.0.tgz","fileCount":37,"integrity":"sha512-6Em3H0L6ojCSfKYWt+91EqD66R/K/uwWJRPGHVQN9NbhNE4pWQa0JQu31l/Tr6jBV2aQyYA/e2v5y+iuTQo6TQ==","signatures":[{"sig":"MEUCIQCY6DgmaK54SZ7oqn9Y47TQfYAij8X1m/HkGCjWR0fwDwIgHpK8yqCapSJmznirCW1e1tPlWWxy+ze0hiMaaPwLPZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5FCRA9TVsSAnZWagAAtyUP/1swaRBBgzgUoF1g6eFo\nhpac6hqbtJX9Xwq0t6ZM7AadrCicrN7tS3YNamUsistOnb0fC33FnWIO0/rK\nxT5XU/I2DCAVmnupkmhi+NSzjERLWh5YfLxkNO3Cy3rb57McB+TL+45DzRNJ\nDCezcn0j7i7zdVyTL1eRqOxQSeW8X+aOZKejRtMiwmFFWhFILbnswKoPsbXg\n5BCeGZ8PRa2wLvSCJE34ZSDF8oOEakV+EuMUhEzw4cnQm4cCHY27ujm6+zYG\nqTrUTDel0lxkqfbwHi7iUpCFjP8q6lgALuvD/BZz19P8bEB6AYMuG7lvfkXN\nO5Od38qKmXMFRUS7HsIjg6YQ9DhsuLZatd8/vy8ogAUKM8ckGccctetPy+kJ\nf/CrkpCDQWKwCXfYA59IkX/1tALHTn+zGYRpNCm3pgJ06WrG1MJYHtZWsN8n\nNxGMWoKObn0FbutsIS3bqPAyyxieWZp929XAldvtdRGkiTPS9yGiAM/cs+B0\nv/BKVeHpYhu1xspXhJj2nbOixphNGiz6uBUiMnPuvEN6Qyp7zK2UPVkW3iyk\nb+5EdOixz+MRlUu61wa6mJ6FkK7m/F7u1rG+jikUA+kBRFZh3jqvAlqYNPez\nLdRocCZ1p1QDWARfYO9VzFrBS/HQsTX9pB0aO3V/Djo2ESODgvBFHXxVWEVy\nopwE\r\n=Sf68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/density":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.10b505785.0_1592598085349_0.47277985073070683","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/icon-button","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028e7b06e85fb317c577334bd0b3cd50afdb9be6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.6483d3f44.0.tgz","fileCount":37,"integrity":"sha512-hQOPFnVZ3TDIQbp54WDgkaubK2Z5mrSSxbthLNc0uxP19w1/35gfnqAtuuNc/b4eyL9aYAYCUDrRJFu7svy6KA==","signatures":[{"sig":"MEYCIQDLqzjQS6IpBGkIS+0cGj9SnuUOFcQm5Nn5og2LM8OEvwIhANFQcfDjY112oV/SIaCOpE0UrWN1lXBEvBL/66Okbcyf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIUCRA9TVsSAnZWagAAZWoP/RcJ+BTRAppajlHWP/lR\n0pWkdNTnZheOxIDicN6suPehHkRQNGLnENBWWYAp5xJbftziMdb7fCnK09yE\nXq2QnLEVJpqnluQ8CyyrSnqSLCMRJGXZB+2jFsvzJaf5ztjQFF4KB2+iUbx+\nc1vqP2d7DT6AT1oGzOhlTIC7Q+jWQQ76NDjCbs+yN9IPDvsZMtq/ASg9FwsN\nusovseldE0RnlCE2+fld7iAmTVQ5rPT6g/nnjiXsQC7r2pAfIftcfh2pTkZ3\nS61NgPwbJt010L3SDHIvRysRewlethFnK2EWNoNayTIa3ZN1F+kEB8fNx5MB\nRSpoAY1pc+NPmRs6LGgxAXFDEinKINAtBTIvLdT2Mik1AWVXdKDdcmFTpKnq\nUC8AYyGRFZL3Oau0tMOIDzjO9UI1LF5Es7B3K4agB4R89BUZ0xKgjsREuDI7\nho9SUyAPT4vWkDopxbEf8ixww21Y8QAT/ZwRENQKoHiH7zyUlSm5x4x8xffb\nk9t0SCg9/3BpwT+UQNRVN1m1ZYo+JIu97I7nNIZFvG8/NOaYErKKHsBeklNl\nH1DRDu4Tbxo3rGRufGkAoQkTsAymc0SJCXobgll+oe/3XTiKOu2Nnsc/Hj06\ntJWqFrO5t+afuu64+hO85RF32ozRO9FE/et1H5lAzAHQUStSOlLIvf7j/JeW\nyUAI\r\n=1yuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/density":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.6483d3f44.0_1592599058522_0.1745655765661447","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/icon-button","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17174cab6feb76717feceb9289d0596e8b77af40","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.30a74e921.0.tgz","fileCount":37,"integrity":"sha512-yiQtlf7Sf4CbqDqEljExzPcINKWnGm/7P5jJoU5LQf9/EsEhij8GawTUvLTuRGuifITsAY5sEm+xRf0e/kyXJQ==","signatures":[{"sig":"MEUCIF8EpkFyt/b1IGG/83yY/ynxSauHoCVz8vi7TAW9JPD0AiEAhgN47gy4YSO7tkbUtWAHgfA0dAzbUnfx1FgbP6MZJ7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKaCRA9TVsSAnZWagAAHd0QAJIKcLeP+MS38jbWDbQ2\n3Z3pq0lrhDn2Db4DoXo9WLIGkTEZK7qea51h69WDkSFLDJ8+GsOlUJvfd7WV\nlqHL6u1K1UbShA7jCdmEvYy2ld+ZuGjWT8N/edMsQz0rFJfJFdPYZ4FaNbGB\n7aucd7brBv3/XZRVCIoYlU09aHZlk7FGFGGMW7OMd4KJBnG3MTT7kcsekJtg\nkfou1ylXFrzjZ6bH3Wpeat6wt1M6H1XbrfK+H2iWLM8Hlw1JsLNr/H6cXtl/\nhdwyFNB+hc8/JYRY4I5qRKyEbEK7V0PiVVvcQLkvHKpDny1f7i0wbCLmmJjS\nTglO2rNMUjzgb6Jnw4k2ifeEqEbx1mVFaCHJu+3xZUh5nONxhGdQ9c/We/JP\nYXJdZ31oNMIjufyyRfq54E4VUy496E5sJsFVuF9mnSy0TmErolUpHpIR774M\neXdMvcHFwr7bTjB9Dp0fQO4CSIwp735JOplsEE78RkUE4SrM/cfWUpDOJ17g\n2+ZRtu4QkAPRq1EermwHPlrlRFdEb1UpX39Ipi9D+ACNbv740PKWeKkW5WMn\nasntPg4udlndU9EPrZJh1DXqmGDdbUBHxHc9f4qatv/ngSo3alaveSOSyiT9\nJ96+wKr5v50x1HNh5UzG/Xlel/lc5w4FQYwEQWMBXvQbM4K2WqNq65ugtxLP\nnNBE\r\n=AyaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/density":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.30a74e921.0_1592599194470_0.9022293042329375","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/icon-button","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a92748d2cda18aa0433aa2cb349b4072db45b91b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.c20727498.0.tgz","fileCount":37,"integrity":"sha512-ebumYc403hcdxiPp98kElwjrtmb6P3P3YegutJzibq47PPeYgHU3yhVvFDF3JtCH1ZCkA62BLOMwfofYTSkDlw==","signatures":[{"sig":"MEUCIQDZNwPQKG2dIMCoSLeVCdvmIxDN0twemkktUkQASv3RHgIgKEyGAtjLaHIJ8EMpT+jbaavH7mec6IqXuzmvqVNzyLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNGCRA9TVsSAnZWagAAboAP/0Uy2JA10nT42rUd18BQ\nR2FC4c+PNQ0QhKIfqzmQpbGbwKnCTIPZ73R96R0abR4DkNEFDe6QUnZGg/S3\nE55fmfO5uftqx40DU3dLCJaZ4Lg+1aE0B2WkZwB9x4NLQLg8mTwNX+On8xhI\n+vKB38J2kJI0OIbi3SJhqGM8jFo3cfP0upRJdNdLzmPxAe6sEy6lQpS2brcc\nLd6B1DhTM0WbCjNtGjlEI9qk3ZBgPz8WQgdVtArYf995ql8n3X52ixMZTiSw\nhtutLc2Aj3cRZRKz5q+y9zC5i99ogSNGVvqZYVQ0NWB9eF67ESfcswDUJqo5\nmwEPCAgRWKz+M9tHuKur1pXRPwdH4KYa12f9fdIlLfcqTk3vaz5LRuLF8Kyw\nnYAqpOD1GmksPGw3rlR029edgEA1+3bkMvlYwOdgmjUDDea+uXgHaWwHpVqj\nFIGl3xkOC2SuuSQOH5O3DLSXTkf8jzU0wlMW5zUXkzP3Pg8PkOiRC7Wv6TXq\nBGnJmrnjGbeBQUqPv4+gQWkBsMT8i5WpwmbNB8ubq4DMSyz9fOudlo/lA3q2\ngIeRmM2xAvyYSkGn/iOCDtiBV4wwWfZd0DXZi7ui7CpjOh/QjEkgfNHIMbXg\nC04mtqXbrFZSYapFhdCJvrZaoBj6i7UpvTLn1hk/17ImS/SmBglGBRKcKgpT\nSTVv\r\n=p+tZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/density":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.c20727498.0_1592599365870_0.7476603527218362","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/icon-button","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e69b7479535985ac7537d75b0c189ffb27a6ff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4e360ae94.0.tgz","fileCount":37,"integrity":"sha512-YFzG/VT3Unfpvp49TLWHA7zaKQDzkBa/0jDKSKFOyMREs9GirfLfhq8VlSMahjVbbHy7v1h7AHCGXX0W5gwv+A==","signatures":[{"sig":"MEYCIQCQuAV8dArPhGZFzATZYOWa1sJ5J/F/+ew4bELQWY8joAIhALRpU/7wCQjHdoDT2Tlg1pqEgVV9uRuAcrZ7iCsgm/yl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScyCRA9TVsSAnZWagAA4hgQAJZYL1c5zRv0RgzWYIpD\nzyTxwtlctVT1u7YQLIs8a+Uz691VfdhXtsUMqqR4zbuhYj80ra10G73/EHtc\nlSdQZ5R9s/czSGZYN45rJyfqCkym5vFQX2aZq8OttL6gaK2Z3r6EV8+ySS0h\nvdyjYq3vthRZhrdQKSJiT+E34G1Kz3NLbLeOL65eDqOY7/wZrKsK05kfSLEG\nAJk0Q1Q/JRv05GSqBLJMCfndlnDo8E0COzn1UGV9TSVUYoHrYR23UHLKc0JH\n8aT2j8XhO4RWoF4Nh55jemaYVAInxm9Rk7qKxftvzx94OI+LdLQXGbKrtvNA\nN3G0L1TIAgLSfxCHIogbOLkieuL42UmIE13urbq7Moqeickr7Cm0DTqAWp6f\nZdQpMfbbgYgIneCGpw030wMFuogSy0sUaNOr0cBc6nrLaq4Cq4xyXruwSNnA\nSPfEy9vad/ebGMLBs63WlQOLjNa5b8LUOBEoDFfTlRoE8PaEL9bJfDmQiZs9\nT0SbkW3bQ+Tvw6JNQEURITKIgrVqNyTF/lFt5Hm+uZ26fMPBSlh5KsJ+4qQN\nnSmzpasVnsfX+dZlDNEDEc1wG76080jYn05SLeK1FaSHYd0SALnsh7EnOrNA\nqaNro41/345OLApZhGPY0z/JNqRuE+6sCQ5DoZUoRMO4NvskS+ED/6SsClo3\n0PxU\r\n=11iC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/density":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4e360ae94.0_1592600370297_0.35855297994020585","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/icon-button","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99bda74aa09d35daafa3ec44e50f66f5d50a1498","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8550fa53b.0.tgz","fileCount":37,"integrity":"sha512-Tymcesrqgn5TT1WK4HTnlfRJ9RKm7LT4B5eakJlKliyDPKS4+K2iqD631CLqaRxUH5WCMk7qdpxs10MmFl/PGQ==","signatures":[{"sig":"MEUCIHtEFhTZ9u6vzAs2zZh9Wijn8hVikdEOFgbSvt/tae6PAiEAw5YWwEzIj2axyg4JQp7rzOf9OfXWJh2Vit1uOB4X7mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Se8CRA9TVsSAnZWagAA2fYQAJJRt+BkWVrsincCC/lT\neSNgtyPUGbQrpGZw3bPgVf35x6DjR3sV4hkvgfAyaAPo6AOAYdmd6q4gZDcU\nwPsBkem+4GFWpKhx20L3U+2AVRgJ6mBMJI4cEQ/WBjwLcW4X5RutapbQnLwE\nldyFQofHFEMtpiGVx/RxQWaWjKgQiV09ekH1xc0m7xxqVATObic17kzGPmnh\nGl9ri8Bt2GWGG2gGKhFdX7fRyDuoCAlr/Pmx3ymI0PqfK90F1a1nLOD3IOib\nBKhCRIowdI/iYtbgohISlI+b+I5HJ2D9KmrgDD8mfR6UHIYEBYaY23aWj7Ys\nuy3w7COO0MYewTZETRkcVhTB2JTt4QMA9Ggq6/4oY0pvLwHqexyUm0vCU4bX\nCXVNjGHrOeNw5wCjG0W/OlBGJ5VVWzvdxm39+TzONT2OMJaiz/b68iw5k5qj\nyRuicQsvTAIYeqxLt254qgPvrf49BR4mCotZb1HM+VCvMNJ5vI8oFMiO3GWd\nKzrVAzuWc6/Rry024tyZuCf7GIcSw5l/m6lBZ0EYJNpnj/K1rpTi4/zwWWWh\npVxlV654pvpnWdiRGR5xBVsN5ou+otXLBN+rUUzoBVjECSwg4m+jKpshJ0YJ\nRng3rKnOaAQBwFT8lOyyK1FRTmL28Obr+iFl2Wm4i820hgtaMYByfHuEQDUq\nZXDR\r\n=9rBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/density":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8550fa53b.0_1592600507699_0.3192974782119524","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/icon-button","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3626e78c14f605e60e4bf44dbb97626964e1e5ff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.93ade142e.0.tgz","fileCount":37,"integrity":"sha512-T1hSh+dRKZEGZUPLIaN2gkQ1HLoa1AfgkZdGKBm0UoNMghOYrLiapHSIRDlGYNaQbyh7TV2PewDNm47bQZ3VjQ==","signatures":[{"sig":"MEUCICcJlfJ0Fm65wMYN6ZWRVp0lx3iTmO0G9CjNEG4CFA25AiEAl/0746n7YVpuui/0FL1qajltX9jbHHR1xYnqLCAnVKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgBCRA9TVsSAnZWagAAuSYP/3ZfVY8AWJ7NnCnTzv0E\nrZiCTw7likPwHKmqDY2Y6yHptM+55iVtKluLZPPvzR3C4+khteQhQfXVYg1H\nJEUus0C0B4em9ORfEHRV/Wf5HYnxeUetABfOBV+fKlJsxjEn5QFFjkVIX7mk\nlVulwap6YT65oHBmmPyg3xN0X9j/Te2BQyeWbIpbrfZmKdOPTZlZXMr81vzF\nzY2n6ltbJjJNeoQt/ykdcHT6dPWx62koR8UGUk0y6451w24DPFe/mTkEjptb\nynvH6x+D2Fjsm5uYtxN9yAE6LV/ZhfLT/87x3+o1tgLDKv4iHC4jJnWKcHvk\nE5MwU7efW54yBtvnobJub63WGxURsWh/lqRW7hnjedaW+K90mPv/9G5+KtY5\nM6caOVAOlTsFoOiQAxcj6qqbc95LxtKoLT1VKX9LgvJARjQQ0AU3L+O/OY9u\nyx+X817HoOcWZG4ia3LeIZR5LXsaE7hBjCG8nEC5tf67KxlVnVII5uL6hzXd\nKBnPOxOqPdnsGgL8VnENQPtx0QHY5tPipoLiVpMhdnZ7M7NXxFwAQInUmBGU\nLihvYdTGR8dLpVKqnN0xvDGdFbHNgNyrCO1GVODV/P16B2ils5vZ/B0b+jHv\nCRw3M8m+3Kwv6H6Pp3eI9Z3FzBl22xXnuWR9HSBvvnQlYrXrhHwAMbYuC0F6\nFqTj\r\n=N64S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/density":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.93ade142e.0_1592600577255_0.2503709376659622","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/icon-button","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fefc3b83b3d34f1b44c3cd97e0cfa1ea4bb6e9b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a0032f5bb.0.tgz","fileCount":37,"integrity":"sha512-vp00RwTYsE27yLEP4f8WTpPYwHickjBTSYoN4KD6nQUwQZiZMVrmig2QxptuqcTW6no5VkOdSzqLHIZ33F6euQ==","signatures":[{"sig":"MEUCIF3ccHbaeCer1XjABLEWa0oI1Vwf7V8J6V+DZxZJJ+2NAiEA9qRmAWDqDsnL2Q5uw2GCXK9fWD6PEsWGXHALSNHSE/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3iCRA9TVsSAnZWagAAs9AP/irGpPPmUU360iqbdoBP\nSyk+sJdhvprKP3X3tUxIzNC5X2atyh0M8/aDa8PUCu6tgt+jOvwFgaQ6v7sA\nXxu4VmoLae8NIErI4DMFebn2LuQTP8eZAD+ANRUEjeKnp5RNurICiEluodGI\nX/z/ivvOvwXqlVkABYvQemJWwoWystWM28P9/SGgCOaqOvSNC/F516B7iV0K\nBhshYBNUSxr09oFg6lyL5qTwKP4qOI+RZrW99XQzxylDArkEtUrNGpsTsuGB\n/Z+B+8tUQOW7XjHGotvF8i8OxI9MDoGYrEc/Hc1fCN7jR4U24qk+v6tr9Odn\nCNGRB1wn7VC1Htk/1pN31KhfowUhgUzgPh8DPgRHpBdpxWi9bd6MmeI4leVO\niM9cbi5UhRNUrWWFgFuFcVw1KbWDI3jTyCzf3aSCoHERFe9vWie/u/iWz9ZI\nH00Y8GSr0V4YZVks5Joid8/aqIopFwlDLsv8vTE+psQWsfoX0FPK9K+rMvrf\nz5m49eB93fKyQmioPFV/+MahJKGF5DPSA76al8jydf2jSBomD6k49LtfVyRA\nexiudlD/tl78f7m8BISnZ0duuf1DJBRf9+885AlpX7bT/Ub1dALmHYe8SwFG\nfEyZuRxbhgOOD0sAbBJnHa7xplRvwKgJtYSUSZMEfabTOhLoAlwPDiKxond3\nog9+\r\n=QGvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/density":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a0032f5bb.0_1592602082026_0.552096246345396","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/icon-button","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5072fffd209850843bdd085f20487a184e0eaa5e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.3f342e721.0.tgz","fileCount":37,"integrity":"sha512-uOipVUpVkrS6VpINLrK6F13P82WscthgPdJy+tSMAkjEmhNXJkbmB89ULk5pu4typo9Pg2F5OmV/TlAEaWQoqA==","signatures":[{"sig":"MEYCIQC4v7dNolpFE4gJF9sSqIjRzy/vjNt0E3HY6oXwRc8WAAIhAPxAwQZHxeUpdDFJ+ISG5sh7wYMwEQNM1dM+dcQ61nFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S52CRA9TVsSAnZWagAA+ZoP/jUjeCnIT18TW5V22+3G\nAYzHaEuvrgQq1aQUuo9GfLGIo7RolEw9RdPwHhY260rol8oTK5uc/dATm2O7\ns4uhEWdjTYxJQSOm2D1BQ+s8qO9ecOEP1mMDTqkc3OUATWl4lYmhda5n9xk6\nACzVn96ATmf26TRGxzGGFPTcET6ydu1h1RlmH9EGl9NWTHy05EjIgPNMgNX7\n3d+B2TcDIdAqyDBb38rJsnSE9wBZn/WA73IW8t1BwNvpH3MWo59r96sfjGv1\nWD1Qy8kAeu7KOgKWEoAVCziy9ig9obxpTw8hdx+erbcrvjQcF4Vt8mqHygWi\n6rmbtIO6hiuVsH+7t1dblVYtEm0HshT5ZueNscWpcJraac4TNLtCFPQYRG7Y\nLkA9dlo5XvK8r1h6iT8fEEcZj7zTPCFgnZPSIFZY8HELc1Vo0WZa5gv2nS33\nF+xaHVTSIp3xZgisUWcS34XMYFQWb96Xb0i77xdaSIf/z3uyC8D1KI/6CGua\n7Moo1xQ27jCjooS8qtajaiHY0Qzt6yyIXMF8yRdWk5h6jMHl/1C0H8jbpNFd\nZIwBN9kDCJ6bjOQFxBgfp9jfUQz6CRO75Jr+hgUKdU8FeRUGQU5CGnBmMhA2\nUCJlMR7mb8K/FXuF0HzSl8X01w36AIJOGAHnxxK4zP6f8xIoxfOUGhlrlgv5\nYmV7\r\n=ZuGt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/density":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.3f342e721.0_1592602229776_0.6898921427989384","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/icon-button","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a17ff92fc9a11f351144a6d0eab97ca9bf2feef7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ff89457cc.0.tgz","fileCount":37,"integrity":"sha512-ENbUzMRADKYiGxjD2gv28MbD3LDuMQaZCTHlVbNrUfM8EnYenZVq3pb+jzmrpqrnept2MBa6GPz0ZWSKDHKg8g==","signatures":[{"sig":"MEUCIAGKC/gVbuk6HMndFfAD6vnwH2r361us3gkIz0N+UpG2AiEApX+Rh2ZVl8uRPf5tLyiBje8kRTm1uKxbhuZYLPfRFmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6rCRA9TVsSAnZWagAAhbcP/1u5/FrCkbGPMXWYbJOy\nM+50Oe0IPZr5nNba8kMSKtm9YaB57JnLbAEdAjv9morCcm4E46D1QirGYKm4\nhbELMYjE+fciDPk7sZbDQRmPLUqWJlDjSEoxo3Oe0D2RN5VDPxOheFUIuMUC\nZ300ry0PQ84Lb12yH1RlQiH8Pwfk4QdjCJ4NkECwPCALR/pmVjnEzuWz0kyX\nbS142+PEQf63GB1jWkIIZbq06tM94O63hz9PlXJNO/YURkITzcwSvhTNqcHp\nQliW0y7PsivBx2IoLqlaIstkcln8xaAAd/j+tnvPrg2EXsTVA3CAnCoPYaip\nU0z+uvW/5/RxzTOpzBC9M5AqNFoqVu3w2lD8l9cG4LcldI2EtJGAiWG+hX4d\nwKUoa0e7rugLvAQX70SvsDvbrUDBy17POJnqKuovkjaK92r85X9/oK7P5MZ6\nREW2y44mvgsvPYPoG2zaZoyrr1euUNSUGZrlqVH3LyRlzVba/qd06JiQPC3G\nm9G3hn/xlqtJMxaUB4DVI7IdD9T8R9NA+mrW5HJlMU2UnL4YKHFL6Pe75aZ1\nxtuXZUjkVc3lvw5eXx1i5IVJtDSBNz/AdYs1CXz2aAzo7zjCVlu9nwMbx4FS\n4qKPL4hoOBVTWWSSdR6AkEGQJ9YkXDtEFVpMOU3hGDtsysUSn+60d0RfA50s\nJ3Tf\r\n=SN0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/density":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ff89457cc.0_1592602282077_0.8257102944799639","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/icon-button","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c7783587bb190e1726c8b7fccae0ecd269fe7b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4a1855cf8.0.tgz","fileCount":37,"integrity":"sha512-x30rw+zkRViXen0MyEPy+Y3/QhVEmv0s1FRPHA+6FB6NxMcoPrQYq+Yn9tcD1L+1p3oy9QVYyTKp8N2vDQNu6Q==","signatures":[{"sig":"MEUCIQCKKzFAPI3DzckgXsRFDGJzecSKzAdDyyjxPLg6zgrFcQIgFSOdiTxf1tyCtWJ0gg6QikvWOn/ZkiOb7Itt5Y7Zhk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9OCRA9TVsSAnZWagAAh00QAJpxOn+mUh0T8O+e4wHW\n/tlfseQ7nTinj+sTiVXGyT73LOTrk+8TCfKo4C3PR47/fvBJuHzHCnQeDOxf\nSbbu93e2/IbrKF75y/O5sqjEKOkj9p5SniFbxC3pngPnQ2NCVomShqllQJ95\nRGBaGQBOQodmNElgut1h7xdXKq0veIW1cuecXslSjNVFF/PpgAkbH3Fm9kiV\n08Jn0sI/45JTO8vNJgjfnf7klja93flM4S+Ub39gNo5XFvW6TpfeB3GcFS+0\ntiyZomh7pjHPPFlhItvjNLg5wzNcpPognlWjkDLsoOjjjwF75UOQFDjJuqWK\nMpXM/FS5GMN5bTsXrb6uZoOBSUFHLTrk6XRPNe0ayTZCSMupGx4UIJZ5k+xB\nfRd46NfuJSpXOTH5Zu8mLI58QrIxV/xogy2MGfRz8+ZvAFtKuAvsUfiFzJxt\nD2wrbiqzCuD12TZBq22EpRONET06Rcs2fRYdeAx4PhaYxaZ9BE223JfBdEnm\nJN9aCkpwSJIhvYoeo6dLb0yaCp67PUzsahvxVm+GA7bDQVDgmFjgbNagvqeE\n+x3k9VPqrHcBBIq4OlvXEVdi+JM+rAV7/mDSyTomNBfccIukTTaU8mZDR132\na/hd1UwcqY1vQGT/0njlx9Eo2kjkfreT4aPsu++ZKDO4OVLw4SMpfcm2C9G5\nmd0o\r\n=gOOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/density":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4a1855cf8.0_1592602445466_0.14885548360668066","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/icon-button","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d565e650f7c2201a0c4d5f534fd8bb2f4460da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.8602f1b4d.0.tgz","fileCount":37,"integrity":"sha512-6j1rcXJnesCPKw0McrLAPHHsCFFkU7fnJRGDDk0XF9t9lXeyeiQT3CUX2m0A6S38pssRCUHOy3R0jthM9J3UQw==","signatures":[{"sig":"MEUCIFTvwlebKkIAJOonzN7VRKfLao800/ffR+2UCD/ecy2WAiEAtQYZY4iRxUjms32a/nXUzp5FNODdoffYVwlw3Ka1KZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkbCRA9TVsSAnZWagAAdDwP/RaGfGVtNIypN5Be7H0L\nvRoqSXYbTgkW2jSppwxqi7X8VM5U7ZJ4dqVMRAGEIR9YsXaxGoqta0XsUXyr\nxa/jclltsQ3+PgcKMb+anw49dEVdlPue1NVOa9qX4vfyP0RAMFEnWLg82eOF\nSiJNaCIaRjTVywbKY6kNBs/dJtbCTQCSKV/e+7xN4kJCo/0j8vbD+63JiGAX\nIXWxPuoj9/QeUKLKZ6krFqTnokVh7k8OHuefrslLMVbNUxSwxNC03k8JCXtn\nBURAUdeUoMeS3qndI3738LBUWI7J7OFC7PoEfDtxV+ajXt3aMvl/Ff9990P+\nhl2wfwqv96wNQ4nNl8wyB/Ng90I43+9z+zVMKlo5rpEUq328vbctd4j2XTfr\nMm0/mTfqvwCS9+Qz7ftDDY9MQ9bEF9H5ZcJGEABah3taCMIs5TgDteH5s9ep\n1aKK2EhO+w/IpyX/sJQc+xhOpX8ULISy9kH6UbLa7LwpCTnx/BKc0D5SYPve\nXWWhqiJY+mPP+c+tIQSp985HJiImByg+FtHSrZkcxQ7oAKlZW8/mEi6CgdO5\n+kGwKRa20uibZmaQRx88oHlNPn3Pzgwsx55lu6CK6O+V9+6IQNXcZs0NLSVG\nyAyKGoWgrTdmxGJBQ+pnG12cOwE1GKtObud6uLWrEeFRLPTLxABOWWIFB3d9\nnL5f\r\n=KIKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/density":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.8602f1b4d.0_1592846618804_0.11019738331485374","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/icon-button","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93cc4dd65a15cba72698d8da21ab4c23d7492862","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.69f9f0982.0.tgz","fileCount":37,"integrity":"sha512-RVb1o52nRsPSJfCmeu5OZAcb4USuzpOj3XTLedr+G+o0CQu5zg0PNIVjnjqBXrIRlX9nj9aaZcD2YLA/+nfx3A==","signatures":[{"sig":"MEQCIEVnoZof1F6+MqnIIAco0D8+wqoMG0P+iOr6L1zF70iIAiBuU/33CZnO672DsUgEEnHj7FPHzT/e2jyU4W+EIuxRPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8zCRA9TVsSAnZWagAAfxEQAJ/7Jg+4UdJxPTPS/seA\nXImQkWntoTHH9VB+s+15HXWvIVG02rf+3shkSW8hyy4GdjYwjqwGpj5+mRzb\nUvHhN8PkCaMPpE4bWhs8MM2RUWxMos+8qka8jjfna84pTuzDiC9RVjV2Xw5z\nVVwIYmltvDwv2GW/anWAeo0cvRrnr2fFqILEeq753vZ1e2TwM78/3/T1iOzo\n3JriH6Q7IEewfr4qJDTbKDt9/CcKGA/Hv/5sPNS5nhPYv/pqRyl++hnq+npm\nl85EJQRGnJfIqtDkjuoQcoP3JuxciV3f1Wbb+yfejHdA6iNL8tG4nfhybuG8\nJoCH5pv66INxu+Ewwe3V/or/ZPMPtGEVXQJoMmxnWEa5gLKHQFPuBUZyCtiM\nFYOG/nJxKTKtWDx0Y+a3DhkrskgQBt7ujX10HJ65NffFogxZLvVVYJCF9+rP\nQ86sIiups0zrBXs7ZZ3wM9dcmhHCDGK78+dL2d5pzIgpA6FuHSAQP/DrTlY4\nntAio+GSx42CRls7hXB38HufefvjN3QAE3dCws158djwCXQZ68LEsdx+kTxl\nNkfccosN37zxr2rxrPtxIeZr4vQ1cLfXEf35/JwFolBv3V2kJhNH5X24jLBy\nklOR5y4Xxu1hGeQ5VCAkGqGnTxfvpgsAtqy2ZMvj+yLrYbEHJGoczMFMhmYm\n0HLy\r\n=51BN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/density":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.69f9f0982.0_1592860467031_0.7897354227412943","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/icon-button","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"205a822afa7ecabdf61a8bacd0e8689a7ec36fae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.369a293f0.0.tgz","fileCount":37,"integrity":"sha512-69md923sdLVhVpGpwQeZ66s7I/lypluG5OC5jSK4gUUPTNinFlkFyShU5NTfaAJAxmpx7P15nBDeZrnREO4McA==","signatures":[{"sig":"MEUCIQCISGLlKzSrQYSXPNwv68oYK1259gFmjjh9iAscNd7XrgIgTvF4og56Z+tpce93bMGsOF0Kev6Nt6n0dlaJ26NiFAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+/CRA9TVsSAnZWagAAfIcP/0IAF9ivY+ItWpTNffZ8\niEEtkyu2h0k95D4WZvmDHk/VWGh1Tz9QJc5Y9LkJCDqfcuzvVJGpFOaekq/c\nyhlUYzY5yvI7Y7mlZcGCn6QSjO4FOjqxJqkrfBe1xpl+3IwioqnmqUVnDdV7\n9iATlxaIZ56OEZXhmQ2g19RcRdTXBT4l7leE1EYSceMJK761SsPf6gsC3R69\nI/RfhrQbOu55AQQ+tZtb2/KcZcdScyGtqAqzhcvktWXp/JVNtjapdC1xYPsh\nlfs/K69MLQ/CYrgIWdtYCg5sK51599p4xzewqfZ4mcHNYryJcySyTBOaDgNV\nUwFc4xC5BCpoO9WtI+MWdZxgFKSV3rVnGXjTxZAmnJUBrAc/+Utzmf45R3HG\nmIAvrXN/HEKfQYYSt6RB9CRNpJzDBV1OT2rHotFwn1jJ/PFuEpoCQ9x7vOfe\nNawpY3076FxWmn7tN6LvBqb+G+ZWWXtu5ODUlAlFyZW3WMbw83+K/nlFwjRG\nRlKFiGgTeV2T2/Hm0kDYHjDhRoolTwRtCwEuPCrch0ZCFoJ1BUDyQmD6LIQu\nxxSFaKiKFC1n6WC5QHo6JR5QBeOb4POmdWK6oJ3HrWQQG5qd4CARzfFU8WOS\nPv+9HKBOsmaHbs25nkA9TzUxvXGfY5QsaJhQWgmTQ69Bci/K5sAO/V7XLLYi\nif0l\r\n=llzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/density":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.369a293f0.0_1592860606846_0.7315059152443899","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/icon-button","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"858e0549a9b319de1186273b857525c9e21d73ae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.f1432b5c6.0.tgz","fileCount":37,"integrity":"sha512-vlOrS9lQdKSW4TH8IPHgKVBMogA9Iaa1GI099EectDdi2AyR3uFJvy6IzhIGOfLz4vRWIrsYq9wWfNZLh8eG0Q==","signatures":[{"sig":"MEUCIQCx9uvmiWqURLzNgGOMhqx6fQvH0Z4lxOpyrasdHk169wIgbdHZBmS730NiV5t/qcaNYY1YxpdlYKToDD0AAH+HM60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SG6CRA9TVsSAnZWagAA5pwP/iHZN/4vdPwdwTqG1dWp\nVdMFJ2FVfa2yKAtu0zvC8mSV3tSjkRMzgoSjj6+hXck1USu4JPh9/BVRTtEN\nsFPQL+Clto7vd0Y97ppQG12HdNtFq9cI9M0bBX8QmU/0Zi1eMlFb0ZOiz+l1\nb/2H/ImHQEv9Ml0Jdgey4IoJTcntXz5tLn+64STt+PRvK217kj/8url1lkhf\n+4wnw24Q+SYhtQEF+mgMW46UuhdGi31I00d+HZtjOytyGFleslermixPjwAK\npk++L2yKe2xvvFlsMsumFp5wVoq9u+IndgbfwlsKs1eTv4GMLK6MQrli4bSv\ngZ3w4m/CuQIO9NRqSzSwDJyAYWxvAPAUb1VCZdCG/czExOm9v2XDLTOnUhgH\nm2cHxgsJ6juCn9P8/q7XwMGxcL4JL77Fef+CNAGq1JUA8V/aSt1C5hEiS3Ie\nn919g00+e4cWFU85+auiGXVxLJOuCVHn9twYGfHd1fARkjNZ8gF1kRSSozxT\nwALdDIHMUn0KLvrvsUzJZOZ5s3SrOPGEttL1restNYBozXmvXkGZFStA/fmK\nsAxd6JhQtIv+HgtYzfYteJRLl8nuKnIvpy4SMMeZTbftyyH0h1rB7v/dr39R\nPleHTYfJ3aOfewOlMgqvNBGJlN9J87mE8pqACORjyyGRen+GIPHMm5BhTg2p\nupKP\r\n=3hme\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/density":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.f1432b5c6.0_1592861114410_0.7968678733032555","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/icon-button","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a000265c11ebb684bc0543c46d5612dd8e8caccb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.4757a16b4.0.tgz","fileCount":37,"integrity":"sha512-O6UsxFX9tfvrsGx73biY5vlQBI8CiZpMvg8jRY1gzrdy+QzyPra3BSQY71bg8WIXlGPtRLs7F/opX4Rz2EWB1A==","signatures":[{"sig":"MEUCIHQbtpPxqtnxfZQXAt27XYXemD/lnMTX8CNueVPIxNmyAiEA+btqsKm8cHne7RjcUcP4Je1hrjUHnp86klBzpjcAcFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShVCRA9TVsSAnZWagAAD3oP/1PbU3s3RePNJpYVZwtm\nYgOW4d5bOdoRveVlvizh7uIAZ748IWn9NezXUG9jynmfKE7l9tzeT/Ieo285\nKmiX4Uben5/MQiPEodX8F4jjuAavKgDjiMwa7Od2xb4o9XvAwhRPugTjsIkO\ncLvoJaVuQMCYXZD3gr8VstmLN5RCh2qRUP3UverU99bWjm9k+AMkWS4X6dCI\n3RgrA/SBSImkpE4B2+XlQK/3xH/uKdELEsYbvkkSbucAH5pas+lGTFnOGH9S\nGxF85xvFtYWUqkXXTkFCLxPN8fTB1sugHSo4zSYV1Y3G6nw72Tk3KIoKlMTB\nKKZ4b4LMMamRv+2YAHxddrFB1HtFn5f9kt+XIQizSe38eIkhBaJs1wGc0LDa\n3fpeE1noE1VCf6MYF/cRw2/gtOXC0DBEhAWXQ7Qxt0Q9h8jvo6vzbSsVRgqc\npgoJeUnGqHB5vvXQzTybitxNsYKxiedBKPHZ7u9m/qNCE7gejae6Ne0qjRGI\nMz9vXFkrXs94igTIB0r3oBUR3pxDJPha1DB0dGHvFhQBijHWkzb2KcqrQrUo\n+Rr9I0MpCbRjS1c9i2Kb+dNKDJap1xG0Eysg6mcuwZLwvnq/oibRNXEvx/Oe\nnVCeteTltakG9NRAl4obMxbtyVwbOoWo+FNdQgUYf/qeHTB2KZsI+sFBmiot\n+ZNO\r\n=K4zL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/density":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.4757a16b4.0_1592862804868_0.4877600565204767","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/icon-button","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b7cd1e33352263d245dfcb8c9916dd8c69dc14","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.f8f472762.0.tgz","fileCount":37,"integrity":"sha512-tb6+FuRXkpl7GANQwTk+fsFB7fNk3aywM8E13los9R8CV+O+xnibw1NL4d2iJ52HZ8GPWp23s870VgUQD7I2Yw==","signatures":[{"sig":"MEUCIBfxijYrnJ8eWjms6LqeAK6wQHNqqEKzjOBUWHD3cuzEAiEA7tM0+n7M8gA9nqF8G3Kjw6yGnaOKq6i7dyV9cr/C1Sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlECRA9TVsSAnZWagAAjQ8QAJ3ySm22+cQjLLQZPLCk\ngtUn2xiGxJNtsUUmKxugsgLJJZcvI20fFkGXrVAN9OPwc9vhrAORebLrYCr1\nk0dsJvlo1zEgoEdQftbmapE+1GCGYaWaqUQeOr+dpcIZzJDf7MI7Rj8SDxew\nUOcFgovAxBdpdk7i1m5sPmA8iMvj5KpmsnHimJ0j4uUc4I05vmPeP2nWB1Lt\nIdbAiLW7suO7OW2a+YolrFuL/ZxKMfSmf6rxoUkUUpAeVUi+OAhfsfWUT3D8\nsO6qmpbcHNloWQpzmpBWCh8bgzUqNbL1afr2GdtCEFbxM0SHOu6sX4gQPk3p\nLj1Z4YRzayJOfhn0lf98/cH/3osSMKmxtGSg47FD7DReFyzJfCw3OdP2ebho\nn4yYGtst5jsWUlHd7LVZwQyRagrDl1PS37AJkuPQK9ggsGBqirfEYj7TXHyd\nYQzzWB2QnSpgWvb41wnVhoqUvEA+6yqydmBGR/F4y99Sk+/SmuGZV9yzOEZ4\nRxjXddGptHTYFHFLPZhV1tnSJKcD348RwYTj/2bhgKBzbR8r7sIKsdixlff2\nmKwRJn0qXPYeWVb4tJ6iIlytWZTEAHUYFoO8p6RRW/Xq+FSbP9WpUb8pADrH\nU6yZuYEThUbqu6WHFnVyP0ZJSZx3l2HuEqAq/yD/SUhOeyVhEBET3YURKonD\nXMug\r\n=cgu9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/density":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.f8f472762.0_1592863044268_0.6410432861036965","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/icon-button","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95caa52b7fa82fe27798d6773b3a58329b28880d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.7e4d55c34.0.tgz","fileCount":37,"integrity":"sha512-VrEYzC++KbIPxZo1ufrAcc2AZNDPTJnffFf2KN5jF7UvV6g00nK9b+iLBzoSKIcsKYpwAvynTlpPLkTWAMq/sg==","signatures":[{"sig":"MEQCICuF4dAoFUYUEis0f7Jrm2+dvwnc91eS1Icy7pZVz5QLAiBKGjqFrH9f3R9lXRemDBdpEh748HB0aDZismOkCEPsAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDBCRA9TVsSAnZWagAAfSIQAIqrvsWbHHhHqH2kOX1k\na7pm5mg7S4YVJ5xnqolaGxFpOeKA0LMSUhykYsp4uQ0aOf3Rd6RWZhwQfqSh\nIGc2sUi1oSrzkL3HPtgJmQq+0UfOVwkJjIKkrk4YUF+plMsPskZeQuf5EBXn\nUnxD8+SSCxQl6k4+fsltZt4IXOEHzNiXVw0C3CMJGxIr3mwAM4A/4LYoasNO\nZ1Wq0p1zzDQee0sVfhrLeIiRa7z84grzm0IIupozdP7VHZkOX3548OQ5TwNa\n1DPxOGR44QE4N3Gg0Oa9MpY4z6nvTBKN7GS0rjWkhdPuqd7BTSFT7YNWJaR2\nKlubPIfV+01/mqXbJSwEOZ4i66WregmQs/zOssR7TtsrIkoPLbQsPp5fNsQM\niWPbs1GnzTpXAkBiKBnsZD0rQ3i0DGK94ea5xQAIVvMFODfwLedzStZptZZd\nBBueSOMIV0spyH27zbmX6Gx/gxBNZfR0AJrDm6AMFMv4asB5UDyrggjiL8vr\n++SxottTKF9y/dFqY1uzEkqyjm8qPsF3S3Nc32ANHYVoBqGYw18ro6VohoRL\npKW0A7xyktVhqmbKmOu3lIeEfZ4XuKo7RiY3EN0jxbSsW0LCIptWiqZiCQvw\nQdIApVPmI7h3Layrk9sH0R9HpY6+ZoI8JvkzGUMvE8vkjeTF0142wGKknHeT\nGESq\r\n=gyOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/density":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.7e4d55c34.0_1592864960854_0.040422591461853896","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/icon-button","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc81bf4c77fdbcd5c8913f1e415c6fae5de6f65f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":37,"integrity":"sha512-FD24kJSUvJysupd0nbcWasqdD08oynVxljxYcDlPV2CBLWFSu9UGAx7HGJA6Zq78xw60TXAlD3lIQLGdPgJ+7w==","signatures":[{"sig":"MEYCIQC6xLx0qbP14bdoX9MAhTuOpqSM35WOmjcb8aNfYXO4vgIhAMXYklzAvUZ1FzgPlNYfy5taugVNs0j1cHPIOmBxW7ia","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hF8CRA9TVsSAnZWagAAd0QP/3FnFCHoO7m8DnlPSos/\nV5IneI35miZt5unR+igm7L2TFC9eoq3QnKWREGf5+nke0tgHIFJqpChl97ga\nmgJxpmwTYSU/4RzpRWVhXqfuFjXX/YkDaXKAw2zrSPtM4/Qie6o7iFQqLAFT\n9JPF+5qFiTurhczADlUX+9MC8jZ9kZCljDE4u8IfLYyu7s1CmzebwcuREZ8H\nUyPshAHe+NZXP5Es2OfPIQMtsFvqPiEZEVEkQEn4DPM+7OeGdP0lbdyeXJ9X\nWuvfOes9sTUH+K8a+BENTPO6N4qodnpOgfNZC9uQy9GzjERHPBXM7g+uIfMX\nJEU1rd84vj0jIvxXBeYoWHdg2mHCLpnVi0R08nhUyQ1uXxR3vkTEwUH/HheV\nmcDnfvoKFKhTWdclIWRnvNS+XiMktO7IHbLedt9hnn8HENZ9sk4jYycUAQhu\n12DVOsn2kwyZ4ah7MIHUb3YuN7qNbs0y/J87hlgqNXJM5ov6QCr1uKy2RD45\n4CR2HWPAqEufS+zuGTfCXZ6ZSV2JkTVkV73LE+JF3xFUpsPL5Kl1P60ZoOZm\nHvyxagdgp9OI7kRE7l2ZoNl2p6U71HKsFM1jfIfqgARkJQJYMCAYZ+opxYEF\nezAawE0UrODebANb+imXOOF+yKtqVw72EuZY/Fe22+1T0/ICBH/+fi7QXkzS\nLdQN\r\n=FNDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/density":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.bd1dbc91f.0_1592922491487_0.42071651901436047","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/icon-button","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce08642b903cda82f9505ca0eacab0c92eb3bce5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.31523bc62.0.tgz","fileCount":37,"integrity":"sha512-FPs54buZddPXQlKg3RrBS+9MY6ZjkoxNoLPNk9DF71Un/lniDWHdWfIALUN9C4/HptnYJdsNXKm+qLtoslHTMw==","signatures":[{"sig":"MEUCIQCnw0kxTqrFRbni7pR4t6hRtPHa8z4qIFz19fx6hss9mAIgC0qsxY7sWNQysJuosf58ysNaExCr2AixlQax9+h+X7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLCCRA9TVsSAnZWagAAJhYP/0sBmSA2JCYR9GML5vCZ\nYvY70QkgdzgQD/03ngVDvsF6VvqLtgRAA76zoCce398TY7oxc3Q62GaYjHh/\nTiSTvVzThDEz/yOf8SyQjrbSxJACthC6838dpiIR6pnueVS6DFveb0fAzddD\nxvCvHCoXUjT+G8eJ/JdDkbbbl3Q0tH2d35gnWBvldJpwg8M5porjDq0E/jej\nSBZiVQdvAAE6Jxcc1zlmwoGuTDOvuWnV6jLmhyR0wzVeR85zcs+6MdXyuD97\nd65fv+PIPZCttgaaDWLU8I1CCvaeRfRuKrJL5TtvfViAjuQnmId9E9ltjYbQ\n/KEn6kB4cxZMKDj8qUR/QIw4wUiL+Jo8caMtPEAWxN694H1/46KzbPKoZvz3\nRJ89b8r4+uoMwrTupl/MqeiSlxIjUIu49JMY2Yzg8Y0KFhzbrak8uFJsbHnN\nB2G2G2ZbNxdnf4rAzlENn8N6NmEVYYEDeGnoLCJxazzSukEHB5cKTvDF+m2t\naBEb1+7+BrKs7dpoirEZqjN1GvcxZOm5b6L3lZ6GrCZRAB9bEU38ChVDYgDM\nQApekGSEPatvbzu0auVlTU5ze9Mimn6dWYuaskDd0NAiv/PxmTNLaw1ZxdpR\n9oQfee+xuhctQb8aKOL8hCHthB5UfykkKBfbNhJSj6RcqAAMqVwepWfRPOcN\nt9Tv\r\n=BPp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/density":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.31523bc62.0_1592922818362_0.3743703602718458","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/icon-button","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dd48c26d864321639c38a1c987b9371583b4086","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":37,"integrity":"sha512-MZ01xNOyKztCCbR/0vyFdLS3JiQcDZMjw0OPwAEJAOi02K6AothLRUXUyOT4MHJZ8M95wiPqHDCJbFa5nlpZGA==","signatures":[{"sig":"MEUCIBqJgrSB1PZDDhlvS4YwmHdD/Ag2LTbTnD0i034BzDiuAiEAiBeZeR7jOtoLRkl9MLxkw6yJmT0BQ6v6Fg5EOw4c5Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRECRA9TVsSAnZWagAAw3kP/icSXsnOkldmSPRbHIKD\nHYiNOzW3/inpPB2pROkwieUeroDeH78IVFuRSoYDP84dd8NQ3L8tECJtB7il\nS/3y24HFKlc7sez9bBoW+DYzOccM33Z38zLw8/kbTrV2aGzoVVe07Mp8oMbv\niXX9iCaKDKnpRMD83cwclGoPSQSrJOdRTshnYd3D0j3DG5wGtDVTX39/lN2m\npJkJDKEWW+S4J+yUWP3Yo1+Qq05UDrxUgKJNfxHZmZ2k4ntlq2b8hJRuQZQ3\nNU7ShagNc2rRaotmAWYn0Zi5BGxDPhqzrdwtaJQZqYObd3RGTvYHPBFwTRvv\nF6qAKkqJgHVw77/Pm2vEjyXoXGvx/ZbPbKua8Uo1mU1xmtLSo4fbD14T1AgS\nozOgTS/Y6pZtTlBRgjCpCG5d+kwtYUVSR2sanFs5Deyq4q/y7oo7hXdd+7ut\nWo98NKRuKGA6RKnI2zy/zKGuuTaSv14F9NYnazDGje7X1/FhXiG8QceDYi6R\neT5ug2vklJseoczU3xmxp8sA/2fpsUzSDd1pnGqeJcc9LKiyhw9UW+UBbeiu\nV6/D5pf5uJSqWH6+KQURsuySBcsJE4DQJxh6e4Uy6GhoUJNDOGqfqIvA+d7X\nCKzjnFUFWR/2E/eKT6mKBC5c5tb0GLYAZhF1bxeBFjk+F4Y9Urwlq8Z6R87H\noBz6\r\n=uGwm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/density":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.a96b6d4d6.0_1592923204176_0.15710686814732422","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/icon-button","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5545e8f8b62a9df0f18a33c9b492c40e29d5dab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.ef3a09533.0.tgz","fileCount":37,"integrity":"sha512-95FCbFADettxJPAsrOTWWT6AMm/6PsKbCp3NMaXeoRHcDtrfwEA9tgiY2BpODdgPT7KG7OSHZqXtQneHB3LANw==","signatures":[{"sig":"MEQCIHfsoNu43i3brePTCCKz3qe/o/DiABmx6OjaRtxCKMZMAiAJ0yI6Nvkr7esj2114VMeRxMDz8pDxgSPlaYEMRKsZRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYtCRA9TVsSAnZWagAAx0kP/1cH5R0wdQnYRVHIXg11\nGQn4Qetzsiozn0zGzRRPF935UkvJ/tpiU/MWtZaxjhd6QEGes17XGx2YYbMq\niVr04OzplVw21EdDI2PI9/2OxvRxrLnq7g8HsVLRMTbB2n9POgtrw6jksy2C\ns8sloejhi8sklVQj8KX3NphluEw/iVQGLUiyiAymAa/Aq1z4jmckc1skDyai\ngtJq5sQjB4XzCktGKts7kXSWHRmSzEUh6ToH3yTRPDQPP7WIDPWu/SSsBKPj\nePSbB7T3OqdO1H2bxzw9EUgICcVmui0RTNLiQESMLabOSar62zzMLKQJ82is\nb2E8NhcD5gYDSyPHPeFOqkaom6BemutA1VaPfVFbluXgHj1zIE74dnWdiM1O\nEShqLeZRJMqOrkI52AXgmP07kqUWCtCkO3af5BOxryI17cWRqyGKJTQ2cAIa\nTgLrY7+ojlCvKpM/x5z9jNEJ1PxxLG118OSvwht2VJ8tx7kYXuZAGny+OjwC\nq0J3GJHVCf6yZGLDMtMzP2amdg6d4rAMX43cKXtY7bAoqEux5ehW/59/2XHw\nIaEBit3rB65NfqdyO7w4tVK52Z0a3t8+c17UbPRlIpMF/s+1Hp1cbH1vxdO9\nl+N09s0edt4qJxmAqy1MxCglq2a2fqE1oz0B2bi/xDxYLZkIow5ru4CCytNb\nCDmy\r\n=wOdA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/density":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.ef3a09533.0_1592923692920_0.6198644641652642","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/icon-button","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3023e2f5bb130e491f0903be55b1881dc248ad1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.080965f39.0.tgz","fileCount":37,"integrity":"sha512-WJePOZxESdPX9MHTZBuPsLDY4AWnwPq4sWhNkRsqJzJOWunGnK9CRNukepw92jB7Mr6xnXMJDrdVl/zXnFagMA==","signatures":[{"sig":"MEUCIQDJocWD30pi04/gZXOvX/kRYzzBT5t9RqwUm0PC5LtZYAIgDD9Ce6GmtiwRhgWn5AsASnYAT0Ybk+9GH95eYF24PfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0RCRA9TVsSAnZWagAAO6MP/i4+B5NhlG8VVJ036dfS\nsLiww9+2fwAWOXwAJZqpIiIRgtcY8Q1TVnV77bTva5EQIcCd8ywsIENfWQqV\nZcwaZ3n257haYbhY0d/FOynJUg3NFBWscKC3mJXuLav/rll0k3NccxjtUufL\nHDrMRwFPDgwcZPtxvg534oXh8846mmRQMX/hV3e73pPdHCSqig3teKSNCmNx\nGxjqLg11EbOYWK45YGJHTNWC9uH7kaLfHpuwrcNT+1g4LTN96OxO13ktDUoV\nUjkdZ0S5vuad6jwQX5BCVmPmY1M2hp7fgsCPAcwFzGqsPHy1gGHu7nBvOvX9\nnI/q86o46bbpJWkFSkGHgQexp6c1kkcLGGQjTcHHiE3uj+cODGZH8/YxOGsb\n06d08zAGy6wheNUKptKmFFNfqURN8JqySC0hsnv2YsoX2uv9iXnJyi1rWV50\nh5K+tlv4Bfe6/QxqluBUSnelDxe+5JNuredhDg/Kb+BL9wf6SLoapZNZ3mDH\nzHHhTteYCXQLxni5CreLy7IiNnG1LCAm4BgJKp4kQeELTiVQW5qRYdaohl7S\nfEJbEyOpLRseeyiatCbnsdkDwGGcuEbcHlpIVCI8kOeql6b8MDKXgPICOKk1\nevY2K99fLqSn4cmegTHrnCWr0Dex1wEaBq1jIj7LRA91JOueTAial7NQD+h3\nIkiv\r\n=EeLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/density":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.080965f39.0_1592925457410_0.8325343265676606","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/icon-button","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e69c0ad4e6862a9ca7767488895af2042e3a0ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.1bd67b65d.0.tgz","fileCount":37,"integrity":"sha512-+WtyJD1cLzVcY2ZtLTOtFsKyLvAoy+29Y8/SETaeSGE+N99gwHaG1hpl4Qg+9TykhtMGf0ZAMzVwiiR1oyW36g==","signatures":[{"sig":"MEUCIBxeGG5RkE0SPpHkcn1J8Kyti1qMHAM2CDXa/8Qu/g3vAiEAu5NmjgXLEGC1BriEfYen9usMmL+QSj1CfuP+iKNuvAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icBCRA9TVsSAnZWagAA/bAP/3xNmv8XxVPjGjKxQnmJ\neTBlg7/YOL66KZmwq170B148w29FWxFqwGLDlXlUBL6HvFnyGc8unHsbf6m/\naQZjQx79juMEQKCwq0NeM5EUfvXPfD22vSq2DUxIohUIiNLjEkdPQWandoBx\ngyt0FaKo/NsdGgwzMzdV63I15cWZpLvFu+Wb4zDPfLWlFQFFv4FY5lJcMqsF\nqeNb7PGg7DuayVnPw+B9AtGpoMz8IL7H2Iib371fowof3gEdw7FoGtu9zGCZ\n+DmsArpJb5/r7RkQl4RB1bfP/B1HCVMcTa18xA+eQ8x/kGEKn3iN8K0pU9jA\nsB9Wp/poc9A3Hs8Rv88CG8q6YOqERFRJwJamElaaat/kbDVZFELAy9+I8mCx\nCLcWgsnLGBaEVC4jWfGhAHjHXVtfv1lUFo/L0jfRDQsTWzS/EDJFR9QceSXn\n0mCiYdngJQ7fRptgwQwWSmQZZRqqg/QxEIHiiczn6aYmg0r0jdfB+HmjIQ8G\nwkHG2IH6o+m3kFI9DsBIlFTekPFiq4Nh0X9F49YFlWCgSwxylO/Gm92HkINx\nRFHEvDOaCOxfxCVunkYf6PT8Na8/1xaBY51dz6/wEBgB8yCvebUQ2yD2xdQO\nWF8XHbqXsY9vTle3J0ifDG3EnU0OOMf16r+ttKB2s4ZxyyMCtvUy+qWc7qZL\nyAih\r\n=N2wm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/density":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.1bd67b65d.0_1592928000503_0.05640529526085403","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/icon-button","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f0c0df85cbe0ee9790151335f81b261c2bc6a92","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.18ca31248.0.tgz","fileCount":37,"integrity":"sha512-CzEHMdYSyG22rk1/RdA7412r7br6sVRcR6cRqUZl4I47aCgiwaOzWpol9aSVX21qApVpXS6eNjNI5YhE45SP/Q==","signatures":[{"sig":"MEUCIH+FNUvvyhrjI82yPp/6rXYJh7N5Hq/qBq48bdY5M14iAiEAgzqh9VelaCGBK74sBWUukUejF5pAw7tiiu/Rnwpd6No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kj8CRA9TVsSAnZWagAAoQIP/jD+khvMdp3TAjSreMlT\nALA3ca08o45GAscQPJJdUaomEMao7ryp1yW1uFsF3uo0xypUyvlvCp4nPFpg\n6pYhjRj2AEig2oNZJcqcKVrTq8TPfwomREXVXAI8vuDXgoINoPRUAsOTqrO7\nCG7+Szwh+Fb1LDIGqtioKPUV/Bc6kEVnF41q5CFlcgt6A+IOdpOXf8liNB5d\ndPd1fme7VKFd1JxhdxI8UwT/4Xb9p0Jakk5RheZwfEPWyvxrFMo3cxcZ/Krp\nwE6dql2b9mYEdYB0q539Ma/zJZGbyxJKtS1/TbNz114OwUOo9MYWzymiKvNd\nn45p/52KGFrt2h+tvicw6UoNt93LBbVJ7CQ4scCD1y+pUf4WWz4WQb/MUiVC\naTSfbB5+5PHjv9godgre786nA2Ysrc2bvNKUjXHSagjKLlzdtBdOgARG1V2k\n54nobvuSfMvNionEnLfw1RZ4buCbZ63sv0877NDQUdb7popOR33y/+xAF9Df\nX3JXujrTU8Pjb7rwolxwhnYiTO3fSpRbDmghdGRY1ijoB7mShSNi03ataete\nl21vVGuagG68+jAWwxNjGuQBG+mJyWXuUlwr0t/qEfxMno4aX6AJ9RhwauER\nHNysCTQ8QlBwCmnSFPvY0XZVihsqo28BgJ70JFboKwdEvbFrUD6/5IYLeVet\nUvG+\r\n=nGn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/density":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.18ca31248.0_1592936699962_0.6766954480604623","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/icon-button","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9925910d0ce02464053a5576064de5b18c780c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.39cf00836.0.tgz","fileCount":37,"integrity":"sha512-5gXzrVzlWugw/xcTfPEV1I+LwB0Oc1CRd18XSjgXTjcOSWvyag4y4t9DcImfW8jz4Rsr8WdJLmrkcB/1/bh4Uw==","signatures":[{"sig":"MEUCIQCkIU9CRPLkrIF3ERu2R5BlSNLvhhWCpcUR10HuHTMYjwIgd1dRf4cZH1iMvxr8+jtX9aC8WVT+qwI28rKq5EZ0YF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5eCRA9TVsSAnZWagAAqF4P/0oqb8q5F6oTqzKzYzgk\nGDsI/1fKmz3BSV2sc72xGQIGITKH5XuZ1dYNzEmXa7jg4UTVkI/W8IOwSVBC\nrzhxJvj4XbFXQLasb3iDYkKq3qjbEhaPlboqyiolpbdJIbStqe+wDzMKCYTz\nWDQNq5/Iehueqi5I0m1je92A7hp4w7LpM5ULzEzfOj21CA6klKbcj5MvIOe+\nXK41LgxMfexKmNBt67AOcz7yPRHzKbrRNccMz/lcwHJKdlKbMsR9iRd2M7GA\nDGtVPeMplZKNeXDCc58e5K2sONjaN8LxTBl6BBadyf2l7Qr7TM7qODtLDAPt\nti8UAeqW6zpdPA91i5/skUQ8JAVRWUSGslcWayplAy4BmsKjvSXr7wUCjVi1\n0tZaWcMCcsZ3wEJLhDINA/jQjJB/pRhfcnUVVfkCWQ0TMhMVaj0bzi5HxuD6\nmgII7YY17+JW0zK6SOzEzpFUxG9q/zM1TnTuSDfNstUf2sttNi/EZKsXjlKg\nCGgd7FUDhXp/lfXj394xh6YiKak8PaBjn1bY4OX2o4SaBnGK4sSWnjvLNh7r\nQYoJlJ3p6AtzbjBs9Unj4hvfib8mjWaqHKoM1c+vqGjHsJiBK6g/Z7kT90fZ\n6sIWp8dVR8iYNBZL3gMDDy/rntY5r/6LQm/AwR6VWhqFxpt++UhjrvDAsIR6\n9iAp\r\n=7POV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/density":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.39cf00836.0_1592938078154_0.19612978354447885","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/icon-button","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff3f1c4833a34970e637ae14d194ac9ef46d3171","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.1bfda9e05.0.tgz","fileCount":37,"integrity":"sha512-llcnpd88CEEPh2ZO/1CDnfUdCqap3bvmTPVRCVHgI4TTui+KoT8+NULJNkw9NsshjrGFdbIVIYwx/40wnErcPQ==","signatures":[{"sig":"MEYCIQDcWoq/t8EZ0xixWG4V/PDIZU/szJ7VV9yfdER8TotA4gIhAKiEno1Ikuu+YxC6xaWbjz9/P7WV/n7LafdEc5Svq+zH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFJCRA9TVsSAnZWagAAjIIP/A8hiY3WIuQk1r9GRY3T\nKDc8j8ULU5vFUD5snLpEQ7jLBBCCy2bmGW3QHDO4nPfXaYeGcRYjxObqnnrO\nl7PWSiuKYaj1iB291tn69LxwbKq30E1Eq1oCMa5gghXl3Mb5ShBEFIfOuRJY\n2fUNiLiG7f1jdVraRSSDopFicJAXtRpU1u7DU8srUO7wBreaLDRirLWtNpOW\nnE/skDxA6tZhD2aZ25TobbfmyHOxXYTaKe/wJQnIdxshQATXsUwD2JeOwoL7\nEzLNl9dsmeW25GLmrhMS5/W6R4RzVQQvsWNmbq5NEWQrebcRWQcPukNEcbVK\nzMoRDMkyfcHTBI1ztvW2pVwFOEyPpBwhn1flrLju36qSS5EbsBPdip5nTYmV\nO5wTNAk1HWaFwCu4CfEXxn2sPX+x4udL/YfxHFheS5k2QMBlQzlf6Kxzb/AY\nJo8zGqkueBTS2H6OBiRN/fJRgXmOeiDBJuBAzYPOFosstDtLUE/g1KAM9TKW\n1frwYi9j/OuLErg+fMxgXv1wFANtgH8V7CQHCH0ZJ+nzjJXpd4ApEee752xG\n8HkspdoGR8xyRaUB/uOCbuQuRDi2gJwoyxyKRFpfbAu1UeRxrohmC5GzgQz1\n2QDR8J6x1soRVLCOnYaUh6I7l1OefjiXqAbjLhygpPWTZPw0lWMver/5iYVM\n3zPZ\r\n=DO3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/density":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.1bfda9e05.0_1592938824693_0.16638992529493213","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/icon-button","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14aec037f436bf7c1310a823117c97032396f5a4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0-canary.08731bd95.0.tgz","fileCount":37,"integrity":"sha512-zwvKZ/mBxzstopyWBCZo29z+PGfPQMSsxUp88M4ReGxAtyzuJEZr5asqnYxRmWebRSIWktDtAYLm/fqP0A12oA==","signatures":[{"sig":"MEQCIDFrW/rRk91xLnOHu6LhJ3pGRRrCOIOcpTAvsltoCDV7AiA+HICgUW+8CRvXDO6mXYmu4t3i00030we6sNuxtwWTNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHlCRA9TVsSAnZWagAAWUQP/3uIaBIkSfdphpxsAaxI\ntiQly7PECcqrVfJdQdKVwKwk6xymiXTX7ftpqESn4lwLAlvwXoiUumgMUbSm\nJki381RhWnxRvaU/qVa71XukueJjutH/YutAOMeIhehvo0f+Rvg+IXi3GzeT\nqvedRU42uwy40lZoyEzXrc+n2YsSuMvRQWhl1I1Bj0r47QkElHKl5XqNBdjN\ngQakeDbEGOERkWANS0bKNgYNNu179zeF3VtysFODlNZEnyiMi0sGmfSrOeVb\noYo15e0pycERcHy3IxesC4OXM5xjmvpCGrRUvK2YF7PGTmqlzvAy1PxszPG8\nRdJZ3cJWp+kUTAx75o8qGs2NCDMxqOqaB6OpBCmkPAPEKaTw7QCX4CZRpnD9\nUSrOYWh0KxUGSd15wCpDBQwRHRA2vRl2bS0awdFQkwG6RPRlhUg4D8yc/Fxp\n0LlloFOJbtVzxs/e4oypfFQ8he7WQtpP9uRzRiAMPktXulpYT9m7v9uegbUW\nt0/ASrxO4JhWxwO8KcEQq9/p8ywPmecxzW0k7HpgEUg2UYgyVTwz7+a7Il4X\nuYCbk4RrSHNCplq2E7hOVEcUv1iveeIPmffscZSmffAJ0f6/wAKzDCyMob24\n3Z6STWV6Eg1LsZn5WGM05GPgj70gxmkEjJtCodTtH2kJ45/nuS5n/ixLWG9u\nF11E\r\n=OFYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/density":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0-canary.08731bd95.0_1592938980764_0.36570922941101247","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/icon-button","version":"7.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ad9d51e51f73b033a9b6ee3a87579a0a448eb36","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-7.0.0.tgz","fileCount":36,"integrity":"sha512-ppU7yie70KM3czpBXMwYN+Ape6mF8FYQtv1iAYW/fLYQQV/iszB9o+s4CovONltLkavMj9/FQWGyyssSmKGAzg==","signatures":[{"sig":"MEQCIEo58+HHBNBuJPN6aQsAkHCIE30wmeOP57jfjcEN9tuDAiAVS9ZzawJ+zgc5fp1ZO7gL6dG88+1oeFCo5+9fSZyJKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lOwCRA9TVsSAnZWagAA8a8P/1ZmS1/eVcWPko1PmkGM\nIblK1apW2MMuUpxnBT8YbmAmWJRG6rBxOB5sLkFPHJ1XFXdmqN34z96yYkKO\nUMM0hXb7+Nfiyob0xveJd/lwfniIl+VknDzVVlhj2rfpgytAwrkS5DvGtAKk\nqNbfT1cJcGamQjHZZZsK9LxS8jDKRRfGnyRbpW2340pJwRFI68dobnOAOQZX\nv/CrBToDkgXHniV4hhz71pkfVRpjrK8M+InjfzIcUILWr40HfmqsQpbKqqVz\n9dKnCdT6lXZNly+sXJK9cJ9ulSY2PgXqD2ACz/vBf4Q1UpXWJ0uOemVRu2V5\np3tEZ7/B/59O3feCjzQdPRHHfLP4aNVL3wm7/3yJH+ugWCJY8KEIBDJsYKZS\n7NHnynL1n5oIoEsRmYG/fS7nc9tQNina1DhgVYLL8T3UmT1SrY1CObTAs2O/\nSVRn7nPCPI1vcg0CZmVpkfVsikskznYCsoX/upSuZLUbXYxoKCOCpXKJIenL\niNAfzvQEHEw5E5IC248kxAga00kOuh08wQamkCC3yVgv5Gk60ZJX3W+uHTVF\nbA2UI9XPy27x+20P3pobBbQdf3Qjc+FcTuQpwv93CrUK73TzzDN4mGUG5bJd\nKRrY47GzA7wwwYlBqhq0inQ3piG5EcaGBytjfTP7GR0a81VB1JfxNjQ22zen\nGD6e\r\n=S/Wh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_7.0.0_1592939440024_0.5522061727265477","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/icon-button","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a197abe22ba86e8f843a51edc2e45dc15fe5d095","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a3212b209.0.tgz","fileCount":37,"integrity":"sha512-Kt41gYTydUDFF3iVmsZclxwuHZKZHW7jswjtzhEAX1DaLcyYE69zCzhivid0xdsLqtxWrsPuxQAY2b40sUwK+A==","signatures":[{"sig":"MEUCIQDeBgaEGup+BnKpMOdvdlomFDInx8uQ/BZOCNZlmRs/GQIgUlBk+B80nlW9I1TiiZoozBUUUxmk0fapHauVtysUbTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPrCRA9TVsSAnZWagAA4vwQAIcRMFtVOgkkNelxAAQP\na+9YXuVmSW8FZlt1yt8InMq/1tSCNq8rKd01G7uiqrTJwOqpx+NKqH+MRyqS\nL6XPVODcTO/DNdDxPRYp49NdNlNbg97jATC3hxl8l+ty3OxMTLAemh3MAzY3\n5qcrDlmxS4Xjb7wg2+X8ubHNRmlp1jK7Q9Aa9q+0yL1L5LfPT4Gv/nMY/GBs\nDzRR0iYK7tvCi+7H4XanwB3QRmizPaYFftMAc7f+Lf0BMdQwCoIpLCrNg50o\nXFx1vVa58ztUA6MZDUW3rYAQwoDMYobqeQFeD8dvsXLa+apdSY6zf0LOaJ5Z\nkXaWvLsutNa1q900L29Mvpjfq3HahXZt0hjv/I6ftcvsiLXavd2vl0XqVf0G\nA5ECwKjmi8ApkDltH0sJl9uzNUdiYxDu3PBwIer9zay95XUa+9y7ZfOtGqth\n4WBfnPf8NLAJhHbm8oVsyjVylZKa+hTGhbb+KHOKo/PDg1JssOKChmxf0ZjT\n8g2poaPg8/5PYvmmDk3NDs2FJ98B8cvbPqcLlz3J86yMGMD6gkymIEq82liS\ngCOLxePKLEn4Vb7+LlKjAQZvMKwKF8hLT9xSa0ifhERG9lWLt5sGyrOHW+M+\nU5aauBHxZwaZm55sXI1mdvgffafZP+YjBWt0vAQpawBk6edTIaER14bOOp8+\nMz8O\r\n=jArW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/density":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a3212b209.0_1592939499459_0.03535204148182003","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/icon-button","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd5af9396ebd31e5153e46ba0d8580e0ca4ef30","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.15e81fe98.0.tgz","fileCount":37,"integrity":"sha512-liErPVZH8aHkJ38vzY21Kyxk7PsWpzAzz5WcjVanXJrEZxSqh416mafz5NRzqGDTWsRgTAIpi5nPX4fE7Nyw+g==","signatures":[{"sig":"MEUCIA8nQ0RiAesqAEmL7h3Q9YhS7sQ9PSG1aixMmCybwW8cAiEA/UJIubgVt6dRtaZOUfAyoDccPFPIWUXhqAHCmNYs198=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrUCRA9TVsSAnZWagAAVDIP/jmr01QqjrB7ftJZNXUb\n6vGgMeFVSCikcKBozCuFd3SIJqloiXkg3xDUuyk1EHZ+MVQqd7zOHfbphjKl\naW+t/eZl9YqwLsM95HobJUHYDq9zSqx+0LokyH8BkpPkRBgOSIoiaMenq1Zd\nMMfUlFEJzN6Ot4FrkU15fCWSAMO6IxE72t75ev0H/FmXIQQ3faT6qPlEsaTf\nRp0Lx45+BsTGXI5mBd8/C+6DUXQQSPbfooUb1Wt+gusTdZknEaPxp0MnUtWH\nHjFhgsFZu7QiQTc7xcAnm7AaT7MeueValOJE+asNjveEDlNs5QYoWfi1v4ZX\n2OnBaVRF/pMUiphm2bVwLWZ5PKmpzlsu02kvIUctYQMJcJ9sg0E9eG9rpFec\nu3ZykekYFcx+wLe3c7VD44XghkChQGp7liI5+L5A5udkfS7PqvT0emAeDpny\nzUdABaPGlWacx+0pxlbn8FPRMU8Lb8uk9LViWp+TeuZcFW0V1pSIHF4zDq68\nKb4iZUA+UlSz3M8bcllEVRcBvS2kas50FslVjJqps0LZ+mObJyoc07M7ztNG\nuUfwMdcMpjjC9l8NaUmqGOWMXGyN5+fi5yOGuxaaKoGS7zZk8JEvQeZkeXoW\nwThodViXQkGG4aUGmW5YGqYymtEL1FSwX/viXOnm/dSPlxTcEompikiiIivZ\n2qDc\r\n=IkxY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/density":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.15e81fe98.0_1592941267490_0.7886546004821287","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/icon-button","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"665b8ea4a0cf9ea70ac6ce81b8e810c716611cd4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.004c9d392.0.tgz","fileCount":37,"integrity":"sha512-7DrYamOMfICDDOQmPb1T38Q4g6lF7JKE2gBhb4j4UemGzdjxNM3AUHnCzcHogZNwizrxZy8udKiuDDVA/5/gqQ==","signatures":[{"sig":"MEUCIGDLLLRsWrq7r3mHIes0GhF+m3cQZqZbC8KbzWL6WzNwAiEAx3jlH4yP5XQXNKI2yTraax5xFIdvkvLunYOm3lFl4o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oh/CRA9TVsSAnZWagAArt0P/12JOugkPDKSv8AF2hEi\nWNGNwkHy2CW1arQa0Faebr3DbnY/84PrVHfLAWNTCL2qB9y4dW5Evj61+7Sv\n2b1Fya6OQVJ8aauMVn7KaPZ+WJxhdpj15seOqhLtE0NPXmclHmGbehyPZUZ9\nfFcLmbU5yaIUvb1bULiOmzeqldXZsWzF8oXlT9rHKanNRndTcYQ02lKH+qGj\nbL5Bth5Je42mdEUPrN+GcKd7GCQz7DyNrH0Id56DxAYfme9HI28awr+gfkNj\nSASmIhsgYNlT/cF6h+TiA4bZ2pdrVtg5VnGWbsadmEJcNXTc65OwzSgN8E25\nG5MWc6I4XlWDF7N/WNGIzpJXlxS6A6S6dUJdGeDpfRkN4U6+fT++CB+DHGC5\nzv23MCv1zaOuhUh9UK7lhYTkbX1Mwu2XeSXbods8EjjVJSORGMLfnPC9VAdI\nkmkC7B5Wru8xftYA7dNBx33wa9dcCYEE/aWE8505eYeS+/zkpdacuAm3hCLj\nuIUhYbF0uylKhYWvVyl3TGd+H67K+hEfWU8+ahehUw92Kxjxt72l1wRTVs4I\niJWDPmiF/F4e7TPj4tVFx6UdR++MPFziNH+3VM+UkX1JD2Rk2TEk/xRy6MvF\nNEA6DihsD/TvzaT+XAaYZiNCVUCNym/o1ANPtJWGVHcEL1W0JZyXkKvSOz6R\nOa0c\r\n=snXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/density":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.004c9d392.0_1592952958832_0.3058499156407337","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/icon-button","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"807631d76d79c06d2cced2096c27e1f002d2dfd4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.03bde00f5.0.tgz","fileCount":37,"integrity":"sha512-dOxE+fnrygCvQb3Gc7CHXczQH1/5N7Tg1IIB3EAGD858/BUtsltBy3YvKqzDCc4bjOlwWO+PUMCUuhQLabDb8w==","signatures":[{"sig":"MEQCIDVvfqmU7o5IiQu9JNvKlmIcySZYgdZQ3kFMwK9BTtSqAiAligPO3608WPsIpY9iDUgJLR3G06QGVoNjFz+amOw6rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7qCRA9TVsSAnZWagAAwi8P/RiuZVYudGvribIa5oT5\ncPxO9ZfsqaiCTj1MJMvs4mBnIzvKYXjX5GaijXdt6u4Pzar3gbOZ27IwHd7Q\nZoBnt6G1ecjqcycVby7Yzip9V87bb+ja4/BQg5drQuDVeJf3JbfVVVwKqz05\nYpG2styGcKPHDO3tUMry7o9gLzHlX86SEJp3s132bIUUM8F2k1dZR8nC9gRO\njlU36W4T/YJhD2sU+2aEJsoKlZDbjdn1YcwJLM2mqDPyfOzUPCEBW6OfxEm/\nv33cJ8nFsECXtY/SAT20GqxP0M2Biw9F0ApMbLH7EJeaEimWSS8nty10bns+\nzRdX4V332Zk/Vg356Q9iNgmxP28THGQ/fWFGjyvDX/BrWb6n7Ue4MnsXKK9/\nR46K7dCBEcvnuOEhkDEUUx/EjkfLwwd2456jotf8wTw6s6Id7lOp+bDUzP/X\nfkRb8IA8LSokGx6WZbNirVk7PVrvSVHg/1SRN4yqbquu98L6wim6PgPnZ/wK\nGPI1/vWUKbAOw+T4O/XnP9hTGtNFYuCPCu6HHX5mUBj5ZMpyCSC0MGDvqxih\nGscj0fRA66YnV/JnnjrwvKHXlC3nNIst/KrHdppnT1QzdfweoUh2cQw7kVqP\n+wI9YEjdFgIEV6LS7+8bNuUrrL+VEiHovK4kSc9AtLz+O8A6JEjrHy8eOuH4\ndKLm\r\n=MGxC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/density":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.03bde00f5.0_1592958697721_0.008700606501062857","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/icon-button","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e871d4c813708c0162529862cd2cb0cc9d32eb4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.599b8c319.0.tgz","fileCount":37,"integrity":"sha512-QnWDg5l2D8P/JyBvZ/EoJR5SmKgVxcorHhy09wnyjM5fX5v//wDTJnvAaXQvFUdBSRsGRmger0WphqGHTZCGog==","signatures":[{"sig":"MEQCIG415aY1GQaRYtllqpieBbH8LPxtVtJa/tw10HzIT7TMAiA3yMzpq2xyLterPPsfH0Np1FcgoxPVF6cbK7AnQrYH2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mkCRA9TVsSAnZWagAA9z0QAJw5ScgExDO+QZ7CaaNl\nSY+Or90cqqbnfy+FGB3eWHPkTI8h/A4GWN3o/YZscKRxx9k80Has1mjHpevU\n2zp6pRXKhfCE+SMfPNtVO0En0J0vMJb0/2Dmb2j4TdMX4zbyQeL5G/kLEC2I\nBwlFRWSaPkhK0zTq8p5AYC7O0BzYCX8xIw0YkJxQ7h9aRLSaJujZvOZ54VcG\nEX6e4cP0kt2p7qqYYkWglaltTVOUF7xVJbPwOYdbNISLt5+EWcFoW1+TAdOI\nQ18lJhePOmebtZcUz27D8LnUNWbc4YomODzWs+8irnpQVDX5zv6rSxKgy0Gh\nNp332ddD6wcNK0iQxLeOO4gATFjcWHFUa1Bx+N+MgPDH+iNmQbEk90ttngvV\n5mSos4NtFhugR2YNnPPv58AIskWenkaz56NMkRYT2pauESPt/RlhA2SZGAJ/\nq0/6RbzR9w5dredbiDq757W8/kR83Ei6TQPuTaMQt+m3zzXCaO+ewikAWHcN\nX67pGlfUtoXPQO5Gy7r5fgRy2z0V8Oh4MDvsR7NqJgTkUp/mJmgXodg1sroG\n0stRgh/oGG1bJ557BMzSxIuk29acxv3j3OCUGMf8i730Glm+RdVdc+i6aiuk\nBG0jnrUP2OKju8H4iR8mG1mcKDBcMtW9NkVri2z3zpkpHG4qutxtrCPvZ91H\n0iPE\r\n=zJ4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/density":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.599b8c319.0_1593010596371_0.7615025092025298","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/icon-button","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4efb353d6d25f13ca49e62c2c2076f6830cdb6dd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.87e3be418.0.tgz","fileCount":37,"integrity":"sha512-CPNPs7wnTuZuILZauag6R4Q4Cq/Fg3vUFiOzB2BR2N6w+rY3i0tUu/B7dFWNMwILv6YMnvcMOWX0UI23aI5Trw==","signatures":[{"sig":"MEYCIQDuCHHzYxpZhClHXQIl93jarS8ZmFSt6+qEom+9OMWhzQIhAL2tcgI8QFVSIlmDNYiGrI++OpQykIv4kzzVGaiBetzQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MMCRA9TVsSAnZWagAAIQ0QAIeTWRMlw13mPZi2cQmk\nAZwCGJc9Jf2sK5Ti9agtNxSZOWHrPEHGQ/gKXbhqce+7Yap02pOIRtKbEoja\n9qoDQulCt3wMxa1bhUK48C8MhWuwOLX6AwbXcX+8EN9pDdhwWfdKkPw3sk3j\nwssFSrtHQ823sUEK16sjOgMsyr0VAu1GqRC5wt0+PaZUye1MBoc3sLpkAHYb\nbBYGR4N/SYHeqF7YQUJjHtmgH+5D3MbHyxHpE4G1QRS799pPGTSXcCcSqOEG\nLUzIxOI0qvoY0GjfrbdCaFLTTpiFgJt/I0CxVfwbsbnS80vO/27uJw6BFxGh\n6Jb8LD2qXEf3CUIE5o0mb8WbJdLYOWbjdnktuWqXHWVFqjsUJ3X0PjsmdIEO\n3DSUs2LXSbu9Lnkge3lRaOqGS+uimeviahbx4TRFCyXcmd8F7HY7e84GSDaH\nm3UQZsLaBmRRzzsLZh0fTOEwWzfxMSNaD1lOw+Vp91QPHeCNAI6aJloRXmiX\nccIgUtpJDD304x8u4fe5+TpwdCnN8NY7AtJyyVpPnBZeLlCxYejrpQ0sG5Y1\njYUrJhxv5tHbgzz7zU+t7gCDZV+gPOUl21Vjnt4STQxOpcf2PqEMDDacdMBk\n8vinEgTE/wQfWDXxFsUSxos4M9/D3Sh6mbjG+wVkYSQygToKEyQ4t+wVHkRz\n56zi\r\n=FZKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/density":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.87e3be418.0_1593021196246_0.505693582672271","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/icon-button","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8b0e2f18475790d77083663ab574d374bf5f95","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.035cf2a6f.0.tgz","fileCount":37,"integrity":"sha512-KXpTUV+jmTUrtuniT/g+RlcErOwSx3yikmP01n4jMnp3L5T6EhrxJ1U/LzVXENVn3zRhFOZ3jXDFWFg0tg6rRA==","signatures":[{"sig":"MEQCIGUZqPDY6c2KHgP4cSOs0gkIUCWKHFfTS5EhlnTB+Va3AiBdAZgD/GeQ+BlGMB2I4nXGvuE2W3Exn6KvYjcH3KXF9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852uCRA9TVsSAnZWagAAWWAP/3L6WgRffVxbw7SQd7uc\nGjgbNCgfRE8OiffUCaYxPaBHQ1De7X66Xy1JJRfd/HWrxmxDBFJXpgsG67xw\nzIMWD8j7styfNPTvd/3gm+07yYVN1/Zw6aDdsnkjtbg2xt523DmV7OwPYTVs\nLXo1jJZGLxTjXXObVwsybQLfcGiVHBtFwOb89FCs0azkNs4wk36JVzhTd1V1\npg3lSaawxhTAilLHCVbd7pTD7OZvsb0bBe/R8JY0rs1xYCSEhZRSWDNfr8bi\nUxbfWv3G4QdEM/93+DIxRokss2TNb9+sGf/M7IL0CcoFNVK6sH+ImlOJRE6H\nQgfC3kSSuReSUc+px/YMAd5zzph3oHAaC+xQz5kMg7fSqMAA2K6agMgHLWfC\nKysRBMp7x6roYdxMhG7Oa6J6L/wa0qZ0lKcM/+WHRiRA642PhbEFwUh+/wPw\nGZmvyFeg2AISGJpynAVZf8yiOi02rPMbMnk9iraOU83c5Fq2g4FPFsHbELpJ\nDBf7dzX50o8hDymPSiIfcF2PPMV6wK0MtrROzuWHa2WTxLnhqmaUv49i6+0C\nZMz8l4+P5pqZPh8HDOD1JyZ768iXnVLG228dnq5EAkSkfwojv4ua3tNkv2Mb\nJD121aIoZSA+ROIcMdsmlh8HDbzkibutMghRYWQaXpjRSKT9T1bEM2yF5m3+\nAO/T\r\n=MkFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/density":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.035cf2a6f.0_1593023917962_0.8482085584562686","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/icon-button","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53b57db1ad3f13f03b2f0eac57f1494e008998f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2fed2c12f.0.tgz","fileCount":37,"integrity":"sha512-OiW4v8ZXLRUIcafetH3tXpt0A/ttW40x7aBq8uzOGxsQge6Vl1yD/j2OeC5nqgn+eaAHeO4GrJi9AtS8W7jMFw==","signatures":[{"sig":"MEUCIQCNFxluiWGFvzG/459eUzTefCauym46xIhK3rwBmG83VgIgYApSw/ec4dwdyU9V1Zq9NK1fYskzxHX9HlXzh+ug9XE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKsCRA9TVsSAnZWagAA12kP/j7f3x8WM4SK8CxjIsST\n+B5fP5NBY1FB2zFOxj8VN//NA2jQrSP1smsft7EEzwh+YNKxfAX7kvol2fou\nj7PZG2NZIskzULj68qx4RayxwtGD34kC7fLL1gBmFIkIUOjHBoWEd7oQfEkh\nAZH0YIZlC9eYJbtTMDjSBaY/trxqQXesoF5JtapBsCQVXhcRFA0g+PAf/Ad5\no+9xsytLwiW5WVOEuHu52Y2wOPL8uIuYTz0yjYEnRv9wQ18v2Hkl8PFtTGIG\nLRA/MSR124oioStFJZRQCMUel/I4q29f6sbatuEnGvdLulprfiKVNwXZvydm\nMDvqsYUNGoE7LNSeHgdsenvAr9fzdefrTKJbwXO0WVvm2fwWyJtzNkaPtEzm\ng3nwBGpB/nHO4GVLjGvfSzDWn3lbMhQae+LZPHanqbzlYyCPU/d1Dwv4YQkP\npzA55nceVHV76XWVmot77SbUw4H+jXnpM9o0hJIBcUNsuVjP66j+4w0R+DY5\nQ3DI/zQfwcyq8UYC0FS68/lrKhy3J2wh3MB5SsTfaX5vtQWuHpVuGUv70tYp\nTnGAPrMrzRHu6DSAOPB81f9+OmLZ6fc1bFtFgg+vQq36vCLmm5ond7ChpTjj\n44PIEzuMblezGx/MvLR9rcbVtKTg632UbOcFKhN0XZFKFiXNTQdKDnGoyhjt\nwFxR\r\n=9zrb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/density":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2fed2c12f.0_1593115308292_0.7165404240884552","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/icon-button","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4015e2d2c78bc01c236ea7830d9b144d8b20fe28","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.38197b443.0.tgz","fileCount":37,"integrity":"sha512-I9AYnXEHZm/bZFY9NLwEYaEfGRlQWFHLFz8dDhx2dzGt5xq7AI4D0Raootx657PrHDo6sHee1WwhX3es7pYsaw==","signatures":[{"sig":"MEQCIEUjjF+D3TlZDxpNkMVt4VI78TRLGJkxddiIWiQvhTInAiBEqQq0aAd0dr8gvt/U/PKVDBf8qLSxFbKOVYiBFijyFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWYCRA9TVsSAnZWagAAEHgP/iGklYHdv7G/vZ+53GM+\nuWZo3DKQN8czLRAYiRFifrshUOSadAnMDhqApr4lUNg0j2S8M6qsJk1ztIuk\nwLh40LpCtCw+cb/vuy52sXhB/BxAGO8r2+XkD1BhxJG6BH2NHaj11uz0YB/M\nxatDCJyJjPEDp5UjNHGaDYN9/jVcyY+vETEIcFtbPnQESon9953m7UBFJoJ8\n/eiS4Oybi7q7uO5MGsRJLSvQhD0SPIYNPWitGSPtW9e7PSFDbgmEXr55lPJv\n/gP4PE2nj+4TxZokbLgLtwJhUFIq9t9BOz5Cr9mYQXIgH/AuNj7qjvZG2baP\nzENqNBxPQIOlYBUAyaumepm6Sd3FRxkgb3IIGslY/kDQfDnxah/2ntV8ygA9\nEVfZFQ7yA0q0qLnMkLzIFklsNsBTq7/5RoDEihMSZAwzQT1zXGEvrbaAb2fW\nh02RY0E0XbDTz//yCFSQz9XA+NFhcJli/mItXdE6BoOPGEDg0tnPZh60XlWQ\n8K4KD1C54hxdUqyMLAss+swv4K2YnRkShUl7tzV7jRh2+yQW67Oa40J7vmov\nHi8zYAtmCwNA6JdS2PrN7O/Se9TElXiuDzSHPzpt8K1pUmCqhM84DnuPkFEX\n/K0ebmbZHu1jWdCQO7AdI7mwK5RO/pY3dEGy/03b6+E1NItSWwkypQJsPHma\nsOgo\r\n=7Blw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/density":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.38197b443.0_1593120151443_0.6991584202293988","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/icon-button","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"339f93916b1b28223b80dfeab7b5c75d6d30d534","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.69a35e80c.0.tgz","fileCount":37,"integrity":"sha512-WDOom/6fpWqxSjCJwS/9dYBlr4yVT7zPj9tvUCULDMocW7o+kv49oec9QGUaCIyqrx+39+WPclUeCU39PD7Ncg==","signatures":[{"sig":"MEYCIQDJbB3H0apB/4/lOnR/mMyGym+uVIsRCDpRcBPJqR/qHwIhAKLAoK7abGJUzMLW6XbTa2Ul6cfsIp4MsxEWMwRyZeKx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKmCRA9TVsSAnZWagAAjXQP/AvwQ0amQxhH5hNETtxl\nzxnYo3mUcuWGY/uoeKnDBQ/+8KQcfpygP+6fMT6UnekgTJUeO1zNWLgXZ2FC\ngWNHbzsO0bqUhglHGEPP0CWRQD1KyCn3ceq+UVib9ATJIaf8Q4lQTL5J15/l\njffhnj5QqvQd1oxq1uBrg5NKFow3acEZBreBJHgxqcSB3orwDnWJ3R70cgZk\nlfbPPFt48J5EUIDKxDMrD2LZ7Hpc8t+XItZIaU1HDG2Jt53dVnpbSx5l9018\niwGfT8SzwkelfwCJDt1wA6Dtb34djrR0kPkbji4nUMDwxD2th1orQcMSkP+O\nZm8c2ZyzdzuNXAyGhrs7kHx/W0rMFWYQrbw6jMc9lOUok7yb99/8CZ5K80Ez\nRT8j+7A9/TL2/XiOsn49/o2kY6+gGtRMdoI2/ydNUISKsv6lsvtyQFKP5M2G\nzuKYEeJVz8jdhkjqrXB6MVvKQ6PBF9d2yhp+gwh8BTJBPJDfu3vWE2rPEgOB\nQC3/82JPe8pe8Ei79H2pgSXGJ9lpXQ+3ztujVgxFIbIukGyc0oz6IxL45GMk\nB8L73AG7qnm5+FnHYzHs25JqPvya28Q40HKSulGaUHoTywf/mVB+qssgRkxo\nqtMIH+lCQnuEBcOWbY0bCahW1OSuo+Wg+/Tp5DPdidxHWMnyS08Kamnx+wGw\nviCX\r\n=Rdx9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/density":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.69a35e80c.0_1593193125791_0.9071046112395087","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/icon-button","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41706fb56fdda1c73fe787688e3526a525b235f8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.df7154fb3.0.tgz","fileCount":37,"integrity":"sha512-zSVPcX3nUPAtjaaoUbM7/qGwbjMxpOh/GQvI/H5qSwUpo7T09QCeU1c/Fil6zmmLPIZdZYuuKIRwyxNPrAucBw==","signatures":[{"sig":"MEUCIQDuBsFfPrnY300wyvRUuT+V+IRUFzvfLK5pvOyD9HdCQgIga6Vu+9t3BxfAZNPycyVhK6USmYlYP+V59ZoJoVM79H8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juQCRA9TVsSAnZWagAAYYUP/1sYnEcLon/aXQpfURNs\nd9lida2Ob1xZomd/xCG8Gf1QKevBzXTMMgiaIJbGzc0E//S/ofhun9S9oF3S\nAgNasFKO4SA7wvYbLfqQr8wTG41ZwbyIfryqru7Vohkjog49WAusuorGqwkx\n5BY+D/SiTdaO4yPM+eLfn+3Lul4Wgw3r179gJ6+2+075zKsqMwSHhSeGro/6\n76wignsMM61m6I1PfzBxigp4dvxk0ABKkQjlO0DajTUh8srkXJ92Lcl6akAi\nwSqEY81bk1qgdRPgNGTJoB/yzmeqHV7D8ejm+fBRufHKfKgMDN9iyKAPKf+o\n0MDS+H71J5CwcGnhu19aTfpYuFhs20dhgBeYDru+5TavSIlzZqStJERbAQvK\nEMwc95WEKI7DePPsI9h+AsGuiOuQqHGT6fVXH1QleIs2N36vwMSuUmzNTVIE\nYA2R6fws5sCJW/W4PnW6QbMNNpzDaCavwOZ7zYxgnR4TELR3MqCXuLF1hP6y\ng2xWd9HsLje8GYV+27uzR8+GfBaNRuDkZnctVdLrZ7zahcz+L2GoJk1e0Vk0\n5TB+WgLXPeSto6/mY8FnBgqQ5/lxqqXkADQ5VRFYAWpXcYT2zNvOWS8NYIVR\nh/Wo49Z0HYvW+zeWZP+yRDNvFZIUv+yP02tF9+8tZ5V9bijqOxHgDeMMvB34\npwux\r\n=EqBW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/density":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.df7154fb3.0_1593195407408_0.06595238793068114","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/icon-button","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed4bee3737fbd31b9b6b8d85a822698043fff3de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d5618602a.0.tgz","fileCount":37,"integrity":"sha512-S+e7DaF0qQWmp+BRcKFK8WEAlwCQ5/PiNmJuF8JHABrexCZ03OkbS6xVVT8VlDfuLP3Ag7eBclzC8U7JGilPIw==","signatures":[{"sig":"MEUCIE3xzrnrbJxEXBXJogLgDOpnNpB+CJfYCLDL2bPYM0Z2AiEA2BBPv7IlbByrUhkKx+RYPB4sbW/JYe/kNCOIW2vh3Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0gCRA9TVsSAnZWagAA4q8QAI8O12Ns1XMKsj37/Hwt\nqc6nj31a1dXpwUqbw3J/5Evj63eAyshMrs0dvMZQqBKQAbL5kc43hTFIoRZS\nG7Ilf60NANRPjSTCzP8jyydczX8BgVCI9ubpjp1Xsc+Ig7bDmptzA+GtTUZS\nikdMIGWGF1/dsV1tfTe/LBpYSavoP0MiEddRZkm/P9ziJUYoNs+hS/at3cnS\nOWLgVL+CD3ThQBe8o6m0ep1aFh+FqECgRLhFffsyO55w6ZNZRt0KK76445Dk\nZ0lkFyDob8RXpaaKjzCoLsnSbXaElRSctnCUdmv6UoUYQFz5SGkYxDZ7ob/5\nHNUBQp2+y4jCIOQwH58+zYiSse6hCvErzSRCpaSnuCVN5qvy6NbvtjO4kawc\n6qknIXhTv594ZUSjJyywEefZZQcdAjQhqegV2n6bmbBX6uUzuAmJ96moAf11\nZe9zXejz5y8u22rIQ2DsJ6aRFBx8ASO/3KyvxwnB1/JXiEo2t2tXzEsPQhW+\njUSC6V4IxF6l2WUf9kEpHclGxDr1EcTtBpvPu7dENO5P0ym86/M4A+CDxMjm\nicXZDdpUJjhUMq8qlcKaKSlYaWiSvONE1MCm/8vTIbkX6S85sXaj+h5wf9gH\nL+XyTodXB72L66tfiKkD9XW8ZKU3PaDe7VPKQLbkU+7/EfLeDGIsOexVyTbA\n2u5C\r\n=v30k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/density":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d5618602a.0_1593208096465_0.11550430436929471","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/icon-button","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d55efa69ef79fcc0327fcfe259238b6f6950d489","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e590b376b.0.tgz","fileCount":37,"integrity":"sha512-Lr7J2NjCQN6Q6FtAd9dAmKH4T2wmml9nfOgBfpXvDnm6I5UInv7MUs4+ZlrloXzw/laVJeaUSuX3Kri3F/Ee6Q==","signatures":[{"sig":"MEUCIQCLz1SeEwvGDM2EZiHD5M5tCjXoG6SXGMWFJZeNZMKBYgIgW/1aqfSWjTo9H/JzhQRGfXJHeapLUt6dPRroLZFKqLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oN5CRA9TVsSAnZWagAAjrYP/jzYB8ckSQTMSKKMB7g2\nOowvp/GIjB0gKTJFJJthvB4kJJdDDalFpVZhxcHoiTZxdezNEglZHTRaJFsZ\nZdzB5eSKbtl7c++NqSXvDtKYynjsIwnKWppCnziMWozHUcquWzaXTXYhOe0b\nWBuzVs3QqOw0W+7XAGFy96WmVeKKJ/lU9evuqkcP1Y87mK4NXODB+QU20y/6\nz6N0A05vcqVS+jg2h/1gZjy0psjunA7B+uZjr03BAEx+SpV0UJSwOavjxHMa\nZhvlPtBzMhQYpPzkN+n0fwfAlqHFJ8z5qpSuC2jo0luTduTr12azwOTOJj2h\nO+gv2t+jZesIzvDCMoN7FZcryFfoth/2/KCCo61tZwKfPRLFLN3b/u/cPhwg\nhnVbXDdJzDHS2u8W70P1Wn4Z4w6yILYrtaC0Avz8oBJcTNeUVuOgyhoQhyZo\nh12fbInWUbwGGQpMbU5QfB8nQsmRpw0Ba0HCRTx3cX7RQsUgOi4XyimOEFdT\nDcdKxH+VQ3hr89/TosSR8ZbDDSNu47CX1C6bqPpLgmCED4CJdMl8SpvzZ9xm\ncJ/ytqgLl9SC+x9yIWoihW3Jga4DXSjlQjtdRdaBJPqwpTFP5VsnxMBKf3Ta\niHiBdUuBsgv6fE5EtrKSnbV+75JGlDaEr7Y0UGWZsRzXuYd5Uja4brfFIYJ5\nAevC\r\n=Xwol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/density":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e590b376b.0_1593213816918_0.5964204496771355","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/icon-button","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10f8068fe741e7e0bf28b6794718dc1201ba0c8e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":37,"integrity":"sha512-nmnpU160HJ5QUatauPT7+B3HLHpCHOnvXAXjBE84KX1kjFftw8+mW/Yu2qNhEl54gavElTb++lR/TH0YUYt9VQ==","signatures":[{"sig":"MEUCIQD6T3Am/bS4hjN6CzNQNQPKZcLXX07H7gKvLJotBOP0eQIgP9TuV8jjXzCfSfRCIMgyG24Iz9C6AhqsA34iFVccPyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGmCRA9TVsSAnZWagAA99EP/1FCNvrbco82yD2J/W/G\nMZFMEeTqsOUc59plnetOn10vhsQ/oyyMlWsX8+tmdjusrZTpc7AGG+a0mM2K\nxRbVI+IHA4V5l3ZeSyw2107RYBQlsYJVTyzSKQ8w2H9BtWQ6FqxDBzTOoCdd\ncrl/ZsMLJk368eOI1k/mWY+eRZXxrO5XJ2z5TRVVAmE6BGHH3hYnOonvaq7C\ne5k7bon4K/Lim/Vs12gJkskNIPmMDmuPwfBI7yjS07sBI2Oy2uaF6HC3KTBl\nz2F/e7nKnr/52jdW4Q+vbOB/hsY9vhihhcVCXEpjk2JZO9+vcKSYdm2pUTeP\n6Txrh0N2oQUecdlOnz9ZyZ4h1n+Bu6X1Nrq2hbTasV8DuMz/8i8ek0N6AIQm\n0VTVbkFyenCciQRzXdBs8w5sExk2iI6CnAhd2Opu2X/WnYHL05nMEvcwzaDA\nbB0snxHXOPPa0BW744NBUGeKEGRrmshkAOlyUQTRjWKBDQu62ldvxbmA7ZMc\n0XamqV68+u8ejbLAGmdgIzFW5OvdYE7ueF4NRiFbq3I7QKw6atWtbECFcCpc\ntG0/CoHugGIXrbELTIeiH9h52n31gusdsg1M4zd6uCRgBf8DPrfBfnPOM/s9\nmq5lyGw3aXb/oLkLKpGbdLvF4q9U8Q9SqSLvaQXPdSRuxGggmqM9xFqb96m6\nPLbS\r\n=40nK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/density":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.0c9d6bd2d.0_1593450918453_0.8850180353334005","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/icon-button","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"114ddc7246396e9eb55051d7b8e92e4ed646240a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c1fec4246.0.tgz","fileCount":37,"integrity":"sha512-bQrXKp/XQ0uZBCuWRHUgPmrxhWcuPZGg6it2O6Ff7ylX3tdks1Nqij4wyIhuC+HA+siLQnxLW/h9Ip1j0Maxyg==","signatures":[{"sig":"MEYCIQCRjkxrkrn/bjPaWXlPMJRFKJF9dPpvpi6vlBMYYkzZwgIhAP/1p39iLyT7TJhqQ9nKug2dmMrRrYn0dAlx5qLPjI6L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iU8CRA9TVsSAnZWagAAS7kP/3v0H6+mBi5yyMY+gSW2\nHPLaNSrQtuNdJkVKITeOGD8z/f1ZQP4SgzFz6R7VKsA3CsYTBoQO+a9Nn1zc\nqzDOiaBoZBtRMVL302tugPQliCsWcVd51GnJU2mEX/Qna88FFfNO9L20cBlX\n+hv0nFzQoPhROzB847rCW8UwWkLBFvnJxKj4KOngP/GK+wflaF158AgYzT5/\nusf8Y3D7k5U6p5R0Ar8tkvJmr5d+r5wAoRNbR+4vrLKakyu2z6UYospfqGlm\nIg9y94H/O2hLNioLTTkWpMt7pjv+AYOZa5/jE8DWjYCO70ra0LDxpoG2sN0o\nyMD2N6LDnkpaR34SqjfegM3CVQaMnwo+MG0KDwjHVJnHMEoOgtqWXWkxBhub\n7NK2sFfbIumwloA7OZtvpzoTjV0hdQ5Qp8iFKRkaHvmYpn80JfkBtsTd7u6r\nFaTH9gSMcmc8zef2YPbONWGbHLOb2yc1qiG1JYtqicdLkkB9tQxQa+9IWHQP\n2Upz9GR6gglHZNW7u2qGHwA4QRLmezdAGRbDhlTnjmu8fk4C8kE8QMKqO9Eh\nqA6YHTfXWfG1gfUCv1wPXreIZGhLFoiXqBjGok5hgOO5QAjzq0Eu4Yz51z6z\nF5GFlKqnd846cwpraLg45stZO+zpxOW+bOgIxZPTU0PpyLWf2N9dG7tT7zq+\nJ7Sh\r\n=1iQ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/density":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c1fec4246.0_1593451835524_0.628774313190333","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/icon-button","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc4658b18e65fe5bab5dcba09f2f5729184334ec","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c678a9d34.0.tgz","fileCount":37,"integrity":"sha512-UVT4RC4z6XgEGaiPTW68fIyonMchiLGzA80JD0pv1BUsk9botTZhZwznro7l69WsGkrBRS+Uqth2rgA8DhkM2Q==","signatures":[{"sig":"MEUCIBc8Zgqg8oYnZJUPCEjFYivYN3J0QCk5ETaFDgTTS2MKAiEAzvKs18L+smXa/iX4ZDxMTGPj2AFmohj5kvluR5ud69s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iotCRA9TVsSAnZWagAArNEP/2rHyLgbfMPT20UxmQ0C\n40lMG7wTWV1UBENylviwM9BvSP2KGSy91gbN6asxsuRAd9uOFWx828QNOnYW\ns0YIwUv5FBb5elMOexv3AqYkx55GxcmjyAo+MWEc7c6eK0SCnbmZUuGPV8as\ndYq2gylzcD7QoastQxfJKcIZuP+tOoyePERVid1V9iX2CGE8zaSgDAdIdjYz\nxwuqjjfGoPzG3odXoZIdA67d2arhPNf8ff+6uHOw6w06U1ecegQ7OwFJ2OjS\nd8j1QEDCGB3Gg4LPnQWghFDkMUgGE14vZ/a1z4RGYxSADkXuWXzkWAQHNjc9\nLxy0vHZjnmIEcDjcT0bYfWj9Ib2gsOSDL58S9MxctOZoh1KCEt26ML8mMVmT\ngXsbP0SfqRVGhdG2iV2T5m8+KfArHhI7Bq/1mefOIJIVr+sB6IMSl4xx//Ts\nHYpHRdMm6SjY8/fJ3k4c8wSpsg2Mfk+1xFdGoRMF6XIn6WIJZUdvQtF/jm/x\nDcyJnCwfbpd9QrMMJ2nCAhp/QVSBoxAie6wi5q+q1QrG5RJPViXbnqeE35Ms\nmvJOyOKR/bHvkNpp0FOlU1vpvK7ZEevsP0GngPUb0Yr8aDayBLTKH8vURm15\nYN6V3AAXD5MMX71Ocg+5hrXCJrWLvFUrUCrVQPEWFwAz8eSf0IMggCraXnlM\nsOdd\r\n=Z8jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/density":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c678a9d34.0_1593453101491_0.042920805079681656","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/icon-button","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"503c90735238d818f456e1224217126ea8816a40","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.521afaf6e.0.tgz","fileCount":37,"integrity":"sha512-9fGdfE4q9hmzsWkeZRItVQRMAuPz9cWLcf1nTwiq/G5xop3ZZAwa68wL5bluJhLr6Gkcn5dLmqykPSjOsKfOgg==","signatures":[{"sig":"MEUCIAOdUNOfl9l4WcK8AsJrVBBU0mBjZgdXAv6b+0GiF0wDAiEAg09jxOsf2Ez0mnYXC7rCqzJZnrWgm7AXpOvDz2ZKUHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1S6CRA9TVsSAnZWagAA4twQAIOImskLJLKLJBKKMbO1\nKBMHsoYKNHuliD4LhyH7EyUwQutqfVYH3YJc3cObYbQCArb/asKKIdaGPOIe\n458B0nqkkmaBOC7fOBiII2IwUmWPqOdVcyzfI7ZNxlmlMpGxy5tiMm/uXEzF\nMIc3Fm41VPb+4joKcAS2ldAIwYV4bNndt8khRiX8ZJoYdrgQAAqEP7prw4hj\nXDZkdc/tnBE4XQeJ+Hpsld4E5r29Fxg/2ENX5KrdnAxUT1iWdj5Fbc6rPUU4\nHswTxxu5UfhfJ44WXLgSDHbVylh29judOqzybMNeUiuCzS/q88TBD0hN2GPR\nnxBePYG+SadD6e70gLRo1mNHrZnwtVxVssAc9QnWnvadNps/edt2nSTOZxBy\n/lnvN0sUQl+wesjekynGo3gb+9yUJX2xeIoHVDebbcuZM4cAgeE7c1Rlze3g\nO0KEyQgMz8cngrUli0Pe/kXXwMlx9yRygSjfTctyZrviYT/rbgheHDGglDU/\nJFSXsokHbEOwBYbkZwAJa8yKWd3b36fjwBouw8Wsv+DlfdouniWEPMigiRP+\nVDPfzGBCYnfw0VL19YTcB/g1fmt/VkQMHuB/2bVQ2DxkUqdbCkrLsBenPMrO\nzeJCVXyzyytaevZDYuFy+hZwCGBnY7Gpl5KWjPdhpLR2aRJ5yKxqsrtI5qs6\nbEqk\r\n=4b87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/density":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.521afaf6e.0_1593529530334_0.19247176204778338","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/icon-button","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdafc5a77659176d11cdb3a833c0206660eb081a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a2ad48839.0.tgz","fileCount":37,"integrity":"sha512-tZO/jpWr01mFwVFtWER8eTAk39bVk8W/qL7iVA1DNWaKdNinyF7KZkgtHn/zumnpCP+R2ejfjB8C5gQfdKGwTQ==","signatures":[{"sig":"MEYCIQCo4hBTvCH/bjeo2WH/SwK/i5TQbDrwtGKgAk6B7xKj1QIhANk38dFvHm7pySWM5S9hvhFXMvHJKJHy6DJ0h4xvieR1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48OCRA9TVsSAnZWagAAx0IP/0YJvXtVEjp/48qz+DMW\nJFlBNvLtixQEvUZdIsHdblnQK9TCuOdwptvgBrNGY5SdQvMmAq6Lo4gqen30\nBAazjUg/+hpXIZEn3WF7oBZqvwRiKhwTl8LeQjZ6OHE0tYtTJEbPY2hxX9N1\n4yhg1uwB5yiMtrICyb2EIyqAJHc59zokXxwGGzRwIWE1CUbygO8/aTLbWa4O\nX7GIyEDNPkIbj2iIYdLSPA0n748t8q3j4zrHRBTQgUBzOgV6XIHqeWGuL0KB\n+5N3GtN98j8Hq7VaPArLUXdaKB1nYWX427TkSplJVg2G3VtbJIRZTlLai4gR\nUmNDWUfzIE9NfoYMaJSTLkH71R31LDsnA6cRy79YDjf9J/qSzeMS2fzI6Jxf\nCqEQww+n/UXjB2m4HKUuYHM6BoM3oY2XZR/ZwywoX2pbHb8S2EBWsUTZsgSt\n421vbo3HJLg/sA7tTDEoTiGnmCduo1YDZxwWRMk3tYAZG9dS98HBXNjTldn8\nwOyjE1tTFTq9EWaSgyLBGVcz1Qi+kSArrA5FerZwANvLiJEQ34THGCdcNRgl\nZ89JpDm89DGOH1bXHSQKeKB2oCV/rrwcf0yL82buaLjQ/O/CDBiDzcQVFyhi\nsmGbtVrmrPXvbwRE2G0n6YOtDxCf7jCEBPICgs4Rph4hdP3n/wrcdJSDgUtm\n4l5d\r\n=2YjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/density":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a2ad48839.0_1593544462144_0.6096060609415073","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/icon-button","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e286883edc4b19c36a55510843af989b9f1bb46e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ec2385881.0.tgz","fileCount":37,"integrity":"sha512-ajaHCt4B4UhQMkiv40zM0JUAfVblIPfozgPDFgbKvUg4hYUdSyNMGL0iXPMiSQP8A2gAkcp7PWEHpCRb42lwXA==","signatures":[{"sig":"MEUCIQDiTV5YmhHApo5rreOCLIgKvQKQZw10IWP8olN5WURqoQIgAPPjNm1IBueSwkpVIY0uOHYozB3pWBrInVmxQuk3UyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LRCRA9TVsSAnZWagAAV9UP/jsSYoBm2Ulqan6WO8dI\nZXUeJD81emMAMji3MjmCtbajyDEVk1uUyGlQl0wOCXkUIxBQLiHpa1vN1vHQ\nGYZ297KZGQRX2t2XoYhOjlwkePUarfhNK2p/RbnqqLipvSny1fHdeWd35HxS\no1O45KqE5eDN0m2mGiNjkmB+Q0D3d/JRCYi98BNn/cA/jwBV/kq3VeNP/SBT\njT0TnNhD8WKZj8+NSHP7K1b2pIGHenFbQuZ7Dv/iXJGn+uZF8TTIUzsihA13\n+Z7KisY2OPkTUkzsS3fC6HCPJEXmJ9UNjj/8cnoH0zmk5xD6U+kXSiLj1tAJ\nYGBFwvwVKy/xaO34crx/IgaGxw5mLptixVe3BxC/9R7Yswp2POz1yqhJPEs/\n0fkrN5YVnQW6a/1RLGbNSNrBEv6cVvv2NU4izlMAU6k6oinsERThCOimnuEb\nxaprutqu99pty0etN1iWLyJUN3Y5Q0q+f8+JFjTJF2IFAZprzHGJGgqP3kSZ\narU1X207mQpC5sinbjyAeHKvtz28nXvPjO6zyd9vvafNWjqXYnjYNn0Mx8Ac\n2nEoaKUzRcbjFjqVRt2NPCAbANe+HKcn60VtzmciJHd5boQ2Iwah1XRKYpV6\n4Ky1tGBnyxlXPBC/JuRLFVlYBceGKkxdsUJPWSTY2K1yd8rBLWY6ea0sjjZr\nerbH\r\n=l0SE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/density":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ec2385881.0_1593553617490_0.2561754386918702","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/icon-button","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29d300e38de6a7008c187ae44f816c28fe40e90f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.610c26c4a.0.tgz","fileCount":37,"integrity":"sha512-cowqRrELlwilZnMIdhDnPSfryLQZfOOjIaAIuMCvfoGwFpwDuQxuY3xG90B+YyJx0R8Te+mRtYOd4eYv4FCqFQ==","signatures":[{"sig":"MEQCIHg9B+DvDqUjGWOdcXzTWHHNPHSV6TnS8nZkOey9C6RRAiATpkEvfsMBI9GsRmqYGV+mk2YK3sPGu2I2RMFe9+v03w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQHCRA9TVsSAnZWagAAfIoP/jnETOaBLKVdhHQyf14a\nSvNvhTsFmV89yJrv7lRgetP+Jh3Nid07j2fs1g4NXn0qQqjc4XAFdDNs/sBf\njMpOCjHszQefSau9ESYSPf7gET2imPRB21QrdPN+E3q/UhaawsGxtSMKHX6R\nj+NnOpuau+SPUDh3XEW8coS1ZBc7pklJlboPGYTqN0ONuxxoqYTAu8ji2z6j\n8IUZN3AJ2P1ci8J+p/8R7Hz/0NkZcpulkDqNCzZM4hOhDkqVdz3mjwC+QC7N\nShT94V+EjRmi6gAaJ+vktYPVIztGL35E0xIExzFuHU9lOsGGFBPzzmnPbVHa\nG+YugNA5VqFy4RubEuytC5X0GlIpXA0JW2GKP0NKVLnOol9g3iwqHa11yfhf\nHcUapgqG3+/pYmYhEWzUEcfvoifOaU0DAt4FB71LVd0wHHhVoSdzyzAgCFnf\nT/yVrOGLZIFRcxMe0Qp5/G+zaC+Zmzx27akCtDp1SfjCyF3OUe853foKd320\nb2OCGia2YqR/Vb29foAkDcbK6VBEPCU1f0Ff/YwEbHDF+U1QvQPmRkD5ilFf\n1qkx3Ec3NCGNrPMWyc3Hm1z01EUDGIWgLg3v2affgES/na+JPFaAhcx1R7k3\nlVS90JgYAdtY8ODFn9XE0ZGX024SfHvy+aLgWG5Hw0UV8aZXCJCz9Qj6FzgP\nVlvA\r\n=b0oq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/density":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.610c26c4a.0_1593615367507_0.3506861078419341","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/icon-button","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4659d2e4722e0f17b621c8ffe0c824a946989222","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":37,"integrity":"sha512-N74oQbfAQWkxan+vjCc7k5PcWWUGHHuiV+xG6AooEzM4gF2hV9ZY8lOy1jkhi+FEQ0W7pD/n11DNwsOSht9RVA==","signatures":[{"sig":"MEUCIQCnjRkynk/HTEZoJh2FRxY9xCu9FB9LcxAyfPjNnlTRnwIgbBG2TRCIrQ0zKD5tJshJ+1jdKf7wM9vLWTg+eNwTtDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOQCRA9TVsSAnZWagAAa4AP/iuvsKmEY1s2VBnApXmQ\n3R7uyfgXhEbH6YjKQiOiIMqk5LEphucR0ZT37X3UEHM/m6lYPy9Xk3phv531\nWUX2acLmUvUKBb+fFPlWetWOzeS7Co6kHexlpk73DfJ+MkfZ/+bed3lbFkvE\nomLBVCXWeUeIuS6U/qFV60M/vSNj4SMkWi+EvldLyPRFwZAlbZCmvrnLbl8k\n2T0G/4TRDiiehNr+DxuXl3P8dZ6ykvCGKb++PVNCAXupRGr0XYDeS+Eo58FZ\n7N47lttGOUnECSmYTZlxJAgrFKA8gYHjnYOJC5F3b5fO/w9bysTT5uY+t0IZ\n42VoLr3divuF8TWOikkQjOSkCleHtueVm9XAc+Mr2jHBIx8yfylMfHsj7mQt\nMnLlTUu+e4Rc0J1W+3vMOEhXH+l5s7fA9g8uolha4vvbx3iFukoE0XYYKKX8\nGoDR1JRpkz2pKa6/MdT92D4ZcgMULc3hCJ+6ZuIDM215DFrsDeYaYM8g1dqn\nblHi11K9fpjDRMGDwl/UT0BTk5eMvrSFBWrxh5jhwwBKlwhvos4JS9qEy8t1\n+oCnHlTl4jFGisRgHKZOn2zhB3TChZpAYvhrDUSLvp18+ytOy0/ehTga1Uyn\nPByzGY9AeHrKeiL4Wvpn66+Smmo4XiFYB9yUL8wySYAe/aCVZNmxuctlRIF7\nW+56\r\n=eWAA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/density":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e2ea4a99e.0_1593631632004_0.897819793172822","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/icon-button","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22308de8c3c69b78da0263308a877bc1ccc69d64","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a78ceb112.0.tgz","fileCount":37,"integrity":"sha512-EV3pKn6RC6ogweT5ijyDSvusv0Hodwufy7jzk70LwPD7Gn5nuZFrFTvFSR6MvALFXCRdPLLYL6uzE+ncRkxaTQ==","signatures":[{"sig":"MEUCIArXlAUnFZpIznEBz2C4fwjJppfiMdJgOspM7I09u3tYAiEAuw/7l2NNoCx/DuM2fi/1w4A0aYVRjuaDKHZfLwZ9CeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZQCRA9TVsSAnZWagAAFl8P/2dgBbPTR5FCZqABWdM4\ndvoquHVUrLuLbjTWhOxF7oHGOU+X1qBnu5kz4c/AtRMkMw6re8CbVDc+5fEB\nzvqVoMXMWV0kP7NpcRJtb2pjiDMyqaWNvxCuA9WsULn3PpL8bZnkK30YMjEu\nhDEgWXGM8HUFkrRI4vbrW59Y5n95lFjxbUFxP24sDHdnlNkhJRSul8lXWf3s\n1xrEaHUltcSXt1PAVFe8Ufaag6pE7e/r0ir9+/0vkfcOPculzDLoup6O+/va\nDpUewBTI9Eg0qd+Z30Z1jKCjqzMIo6euzaXXrzLSMAz+mqhrvqTaexTUxFQ4\nvn2EDHamjiNwOjNl1ssn1NCPcVlRN3tYmpWY37cZfXiPIbcNZn1TWVkGdO6+\ndSKsRXGQxNN7DIQRSRIF70N9bPCY0Axch2dEGHBa6dW14V2XgNyHT/m2YD+I\nQSg54HqTS0kaA8+79ieAZxvEYAZwLuZpzWHZBzLwpqqJc0b4OhfKVtRSqsqq\nkBcq2ZdrlMOfrGmtjhotRjVadJlD9u/p2E79BrswXocz6n0+YndtgEiXe3Uo\nWsydyYMJQX6E3LBBme8UiXNrKJh28MB+jjJ62MPFnqAwzzXGjuCvwguANXOC\nwDxqw+1vbT8lMloK+cWSxTFKpPFamrfg2aZ+0YpR0RvVyt5EjmJ4PdIsfMoz\nch7u\r\n=7HfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/density":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a78ceb112.0_1593632336308_0.5099151015383445","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/icon-button","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83c7edc0055dfd7a9fa48bbdcb0903df7b4cca37","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b0c456d33.0.tgz","fileCount":37,"integrity":"sha512-a+mn9yUOJU63IhMSS6mqob5BD5cqbAk+vrk4F09MNCrr5CKON8SbEMS9k7ia/rMkTnCx8co5M3S5H/6LD5eqXw==","signatures":[{"sig":"MEYCIQD0c3QCxgx8SkvIfwhPUCdSaj8c77B4upmKkPavcOUbJQIhAOV/P0fQ8uxDPXQNBQevmYJgSgGTf+RgiOTk3TLkky+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iQCRA9TVsSAnZWagAAU0EP/jDnIzDYFKyJiFGO0G7s\n19hU62jv71TH84KKpHfxCKGZm9Hu59HvTCy5TRCiNXuhCt6zxiD4mzE6Dz4k\nIxXytOVG5x30xsnnJATMZV0stTATMe/c9luIF3usPsPYymncBnQAmVkzQk5z\nxEwPs/72Gt7jH7hCdXr2rylBr2jw8NYdtCzUAmHIdlkDLUIf0gtLZpkrH7PF\nYAZBH0VQTZPiYNFO8UiuuHNFLKTsjpFLAAwP7tEicNCLpHff5d0h3Hup573q\neFdcTJ9JXwKryDKlhM44zjQbnKn3CUi50NljwhTGtyd3T4gD+PM3ypAZQatS\nMIm4/sHON/T9ECLgTtXfBswOzAH11jnES9+XtAflHIMtMK/suoGISys8cxxF\n/SIYX8grFAuZE3O+SKFosAqaYiI06DSQVzmk4T2/12LubIYtoggUfZJ3S/BN\nZYeYIKNCvpOkkEenJBcvQ7BUBzsQR9jA4tmRr3jZgiiOrf01c+bdlLMCwjmr\n807E8+fkVVQ6KK3wNYQdJVjRnQ5GeV7+WKbtpidabxuX4KDdMCQ0oC4xmfRO\nMUYEVVQQpu3iwmy4nAHoRp/LbyPXP5wTB5GONYAs3Up5L+sMIjYavnIJhzro\nILjrR2kUsyPLk7J/atn1iGDjE+8tmyblXcoCxCjReQl1aInizaQsbDuFWIzb\nnZyT\r\n=aeDL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/density":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b0c456d33.0_1594075279508_0.5590838768798687","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/icon-button","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cb8ef5f3d6f6521fcdd3377d27bf09c42634342","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2e5711e04.0.tgz","fileCount":37,"integrity":"sha512-9KHt6Ltyb5axar6vcyipuc6TqzXT5Ic6kB5W0sLcfOHUNgDRYXNlBz3LEcGdbOjgl2qHtroKpdUpFpfe7paTRA==","signatures":[{"sig":"MEYCIQD6dSENSSz7EGAaLTFqcJmvlUU6rh24jvb4u8efJafp7wIhALMhsST5l0RMHg7/NDrhr1i+myy7yh8xa26iwownwyGk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjGCRA9TVsSAnZWagAAyXQQAISgRUqqrznkh+jEehEF\nMsj9L/tzaAQdPFY8ZIEbSiRC2rW3+fDnKkqqNmcLXH62bdSReSoCKcC7L4Bo\nYO8GiDCpXUnsIkBD04p4LMFwkWoJVQ8EH3+6nOk2XH1FfvISuS17ADwYFBRk\nTussBDpPIDMcApiVFDSTzn66Rra7PqDCU1vczHqnYQNyuGk/QXIqB8dMDTcl\nO+8dFuRCxHtzNVXIdwmiD1Q5MEd/27f4gGXwSQMH5ZzwgaPyoZbXvzfJ4kTp\nwiiOeQERd/yHbPJeM8NzpOFMa5sXD6TXu64y5SNZBadbktjMCtnSUlS6+SlX\nqor0F+VaH1Koi3LtIPIBHeHbngKvL2T/0tGTWSVOWrywMpofF30k5kGmJVWm\n+G7hd2e03gZ3eyBTTH4+eef/YKMnOw2VT1Wb4p1vPnl7cx/legM2gS57skvc\n/zII78lMUKUHAAk6jNQA19tFhtijs4zycjRk4epVrW2v+Cr2uAUlC1HGILQ+\n4/+NbS7qnCPxKrgkdcav6BAZcJm6RPTiww1B/GwhFwqLeQ/bcTYy3XM4wxD8\ntIWmEqVqkHlg0WsS+n7LfUVOqhxT0wPkmFivsRxpP6Oe6wT9Ork0tqM2z4R6\naiUExKjGh+BrbuiUPxieADJrBZ5qbRnJwG6XYQurpZh/LG1UH68RIUjo2hnd\n5vOJ\r\n=SvzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/density":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2e5711e04.0_1594226885603_0.9581554759457258","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/icon-button","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a8edd1b659cef3b1c8168aa7283bfe12b86002","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.811fc5d24.0.tgz","fileCount":37,"integrity":"sha512-vBAJvImItDJldspcO8e891VWytwmPh3UDzSgWJ+xk3takCzIPIbJaRWJP2Z4JnD0IeUuMnUmGx0Tb75pVPWjvg==","signatures":[{"sig":"MEUCIQCJzBDV53gfTp+p7f62bklkEpaKS9IffVWy4ouA61Tw9AIgBegr3GvGgujU6eK8ZTaabvGtA8SyZkB2OZlVL2FAooI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9ECRA9TVsSAnZWagAAXfEQAKICipzRSZSRu8ijUQEG\nh/o1//qN0dR76NwPy5pFl4OZmneJiWdiWcnuRp0dnljd7jQeIkQiwhOgu1q3\nmTi6RxJWAZ2vlN+kSiONo7ZcUDOZXV4cXsTfoB4frgZZvfQaHKf1fZBvivet\nmyMBMeWYoRJs/vYNad3YByV6B8Skev6gFckY4Dv/1/7/13YrX7QzC5JP232v\nIUMNAo8XZvsLFY/KraKx2POn0l0dJYvx5xb//PMBKXPI8/SC3rx+D2ZomnUm\n9y6zAbkjjRQzNR6ZXlTfd5uuI8pMVYJgK0mEJaaOV9kPz5AnBKlsr12Ebzbv\nan5E1f/qb1kwflg9Lz0Q8nAeCwx97EoYSU0w5a4GocbGVnC7EZSUKi6Kmg5y\nLJwD+R3wNTZ0P+k9U7Sgbd/GojJcCaIuwlskSkf7ggDLPax5CUiXZw1yIhA9\naRT3CIu46CYfDHmRXN/JzXn1hrtik10BiFe45tKMZjnH/SHvGRiamWb6oKve\n6JAe+8efE+H6Nk/70Go1+1OlgxwwF5xRCGWmnAPTuxiIgyvsbdr7fuHBzddY\nf6ZRlj68FqELkzYarBxGZpIBrJFJ6PBkp25wZ+Qg4pJ2Vke0Ugov3wAFnTV0\nDtuwjtC00xLmQwcHiIX1JgVMlBx8R0jvSNpAaPIe1xKvWrM1ftKlmLfrT9uW\n+GMp\r\n=UhuI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/density":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.811fc5d24.0_1594228548429_0.13746522124555627","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/icon-button","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287f37cd9431d604aabdabd8ecb1d082cc069498","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.6ed717ddd.0.tgz","fileCount":37,"integrity":"sha512-rzsU1PuTv9nubO8LMjkOK5OH0mZunhps7pc0b8ySXPwtIVQOpdWYcCaHgjQHZQGTvLJcXCwGFoHeSww2vYTT4Q==","signatures":[{"sig":"MEUCIQDx2wuKZMPOmPkJ0yC3gr3TmmYB90SeJ50bo9Ogu7gc8QIgD6Fi6N2drYzEzV1q23ayirzubnqIr+5xSL8Ukq4chbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIFCRA9TVsSAnZWagAAD1gP/RBvUaUwf3w18K5pa01+\nncm6Ntr+NTgDOplo7rnfNDQD775BQiuPVHcH9XOL/3BSg7IG7/fSz0cWTqBt\nehvglhV4pYPFYUWn3/LFOWqmQdv53umJd188hCVruO/6e+x75eamnDRVT1BQ\n9Va6dfCW2Op5HIbCVjvWiBbaZpeL8pvaObA4JftRf3mmelycL1tDhM/ahh3T\nTK+4HBTVJ1ZE/maTYpKfunCKAhpqruuo/Iq0oiOg9uk9cI/VkOyQQaNGcHM2\nZbyNuHiKrW60l4B/puK4LNYSuoZMS33+PLs7ftHrUSp4MMBSVYpm+cT4SsbA\nH/X5iwHVOfzGB9tywRxDI9heDPJ8diNpk1V0QLA4ylOdDRkvzJD6+w4gm+H5\nkSLAFMoPPSmPioV8Oun9r53APOfK0P+PHM40L/GmW0mrER2kUxJhj2NEGctD\nWZLIVDMUZCllGKoEKimL8Ai+yFAnXVE32zoMAvF2JQtF860ldmkyLAat2rns\n03CmL/jHKQg/QlIuCgUsQKy70m5reVIkId3ddKf79lv8rkD4HoDzycHGATro\nhba/ArZX3umlhJrcj+PjYKUCcRUp5zk+1aQVMzHRLB2RJc016FS9+v6VGEHb\nQUjF/VbkK4962znSIiU5d23NWdoW0k/UhxmRLrV/wxHqJ3eJnBw032TCYMrg\n9+D/\r\n=tiJY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/density":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.6ed717ddd.0_1594237445364_0.7581792967854779","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/icon-button","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e79c9003fd1b2c71ee7f8c3b1fed22ded532ef5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d850de590.0.tgz","fileCount":37,"integrity":"sha512-jPqto1QdfC0N9UEVumPlTKmfZATE2uRcNvwTLc/btwkdvCkcn3kRPIiaZ0ZX7PNx/DcUpnZrpldqskrFIa7HVw==","signatures":[{"sig":"MEUCIQDA+zVySJWvtRBgn1xtLgTaTDClndsIgL5AiyWdnFqoCwIgOZvG1oGnyDtuV2bGE7eAd5VVmBl94q8glS9tlja4rLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xpCRA9TVsSAnZWagAACWwP/11XGcTMjVVBWgsH7I/9\nsT6cAGqeIH0v9barWQ2ucpUNWKWf/V3QV8UIlHVeXbbFobC7fYk1xRLY2KR0\nd72COBnoXvtzTX/mucZKlSz2DBtcH2pUfkVSBeXliod00D4AH8dT/aOj88Ab\nH9XlaF0WUFmausCC5n5PyG2B4EUfsQhUtPGV82SSGMKu4bR7slZf/ye7eh2s\ng6zu8skeaUMWX2wlbvLimcgGVJQr/jYau19lv1T3Mzw1ykX/28YU4MZ6LMN6\ngW4J6yDSPyhUuEO8xAYCDjIREwdhEeB/NfX4IkpiPmRqrM4WK7LWA/vmCL1x\ndqc9pm6QQUSPxf/N3p+m8L4iQhfh4eGcWKPIkkJk9OD8OraMJirc/1zoO/Ym\nM052PS0Yowju94IkevfNJVueqm4iraSv41YZhg6vKfmBt5FMTBXuUT0XPyf3\nFibM4EWfU3qjQDFp9YuWLTUemh5Kviv+6v4mRvMdwiBdtDRgcgspIsKBt8C+\nIznTA8RufSwXg+e5gSWEG2mSnY6ZKXynDghYM/85l905C5Ab9QaPj3vDyDAJ\nmxFSNNu+zoZyv6kdS+ulTBUkJ5l66uSy2DfOLT2UnjHPv/m2xsjmVH6Up+3d\nE9XUnGkwASAB2AABY38eWSJWtY/ztWCaWZAnyF1Ya6feQA/jkRR/YwqnqjRc\n2aCH\r\n=YHYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/density":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d850de590.0_1594317927706_0.08748644477327994","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/icon-button","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"087e8bfe14c6b6db18a0b0513663f8316d6b8926","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e07a70841.0.tgz","fileCount":37,"integrity":"sha512-retwOMVdnfQw/IW2UgSKWBtGQqOb3JdSumYt7bOjvIv7mI+wSKLIHP3rKHbaEHeXmZgDVxK04/+fwTfIG64u6Q==","signatures":[{"sig":"MEUCIHs+1UjX3VO4xJXrx+KXMKdo72jy74aGu7kB63B6fb6SAiEAjFXw+XdOJBEjPtr6T3CaCnlplPlcRBHREtpUE0oGYlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NjCRA9TVsSAnZWagAAmD8P/0lSQMBiuhrBzqfsZA9W\nIkhX0uVlE+hoDDWVHVgUdhTSjVMOF0eqisvrOU2BsF5UmgaHfwOJID1gWklC\nxiP8ysz5zXwGFIw4WaB+dSxSEAX+ns87bwXC4DBhmBueWZeCjUp3v+o2WxDs\nyJvw/nk4TUBBrWP88KYH6vil/o8D9ZFWWvPeVgFvJ+hsxK7oAfN9mxqEX0KG\npuK1uo6kLmUTJC39Dlg96EEJkHa1Lyv6kyaDnXtzows/dVLRBsqtPNsk1pUp\n8DY5RbP++LNBgXzktcJT1SW1CXzeDdz9DGdNfAVhCEzmzT5gSzYorI+UtyMF\ncDi22kAJf+oG5+/SKnYh687ahG0Zx0upmhOn2O7A8WOJF8Kqbtrma+ETNuDT\nm5Lz3/T7yU1gyh6N2r7WpEkNGyPr9uKp+ErtrT++8PQrM2P9YxjcJSkSJolc\nnB0byTw+1j+QH+Fdv50uC6KVTjeK2LvtipNdcUfjEQVE6dfKkdbdgjU18+fY\nuuPbBtIqCVKAlGgm31W0mEwsVzZWFpe0GVH5CC90TG09eSRhT/0dSakSReph\nS1RXcPkVWcOyctu72FF8HABVB5o2Jfr8HmdDDjtjGqj/4YPlH6wfhzsSfhRZ\niUy6dZwV3wK0Ee1nKJ5w46m1mKTU20lrrOJkB/4jsy2EDLfK7oQu32mSkACJ\nqQ7e\r\n=aY3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/density":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e07a70841.0_1594319715181_0.8414351463121892","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/icon-button","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215f5f68043ee9eaa1887cffc79244ab76148670","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.37947ed6c.0.tgz","fileCount":37,"integrity":"sha512-HY+Y8cuU1Cd2FRITFMoagxxbWZ/Gisql0uM5wP+WezTlAsymK5ghU7YncV7NvRd/MRnc8hK8QGYSNfnnL2ueLQ==","signatures":[{"sig":"MEQCIDY1hM+IeHP6ei0URxpYFAXSnDSIz0rpoEyew4IJyGyPAiALF533GhdnZ8i0sLJ9aUCtHmRp3IaIiNY6tfH5eaHREw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+7CRA9TVsSAnZWagAAizsP/2jVQxlPTM4gklwN/kG5\nkpTekDvYcbfAA26VupeUpwQ81gUSmXZN0ADa+EM9gbJk03MAGKOALUeoemeZ\nIhIx0o2Hvdgm8rxorvHaZRy1hjMVAz4MLYvhpUIp1qNkwmhEHB7MYZS64Gki\nfYuSzJZXxys+l3wAM4IMVMxUHQfdXRkCt+zFHIeJACrcj6z+Tco6xr2IiEJu\nVvehcCRNRLhSygqMVgBMuT6jY4cYNS08Ch9CA5Zem7fv3Hl61QKK7+F8iV4W\neQx0LHTI0Up8E75R/Wa1c42leETG3rmcopdoKbYgpyKGbNfCGmT6jIeL7EfJ\nnmBgGDjRt6rloNuFVncDr5Y0jZMLB7ksg0xPso0c/YmQTaPhCOGqXszr02pf\nk/UttBAqtF3r7jDzAUEAHCvtsKCF/6uijjXdncWE3+AALG4nlKLK78qJB1XZ\npV2O8q87QF7/ulTJo/pXbRXwQ/jVoR8Rx2WvMAcqcKZTiySDDE+IBhl633IV\nls4GDQ3/D7GCF1jTUa2rxCicEIHI0HxbHbqYPvXfj7AmyK8A0eo7shEBRHtE\n23vQufve/Wo1DUvJkW3+Y5YGDExntXS/0L9hiZiWp50Q1lI4b8CYW0O8A/kT\ngpqydV6PwT+4iIgYYhfi9yrn5f0OGxDFAW6MPjnJoUJOARq77i48aEVOKmLh\nFFWg\r\n=Nszg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/density":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.37947ed6c.0_1594326971507_0.4452658859211973","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/icon-button","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32d337769611927850b6c21337348f4aff4548bc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5d443afec.0.tgz","fileCount":37,"integrity":"sha512-IG1On2Vu9T6mLB3sXsDzck8RgeDsvQHx+zHx8YlalZFjTltrMM4LyW7KwBzEe8yNf5iSqSJWLrNCOv+DZ6ae4A==","signatures":[{"sig":"MEUCIEoXr53klVHdAADhkKjBEi9ugSCN2iW4yP0W8LlQXm83AiEAwnE9LiAQvyzi1DsYD6al+a+lTeWmliZPbKh9SXe03Vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NiCRA9TVsSAnZWagAAfiIP/3il52gg3RWziseAhUE4\nbpmgIO/B8qUyLCc5CtmJk5Lhjnn2bqMGQV5rXX+39QBO93xgLA0Sh+KErBf2\nFmX2BiUC27yRfAyVePNAry9OovHWjLVJxKtKklPnJKNsv9+/KZoUZBgjeNfQ\nhS18LgFNLGyse2tMIW7U3PgmLjDUEOQ8paNObDsfRpbVAESOpE0+XF5zifI2\n7rpAU3PC1zpNhtkBrKPTGVxsVjttCeDvizOk6ZUqYSP/e2n0rGRiLctRf46a\nIRDMVaZ/0HHXbYt3Vn9yUymIyQ6YSB/YVVE/V+dV3IotSyiTVmjigy9TjJlc\np6NAQNcX0LDaOatmWeD6DQkLxlOBgUXiXhHdBJkhLJWKU56XSk8/v3+wVwR0\nxEmJyKN9ltPgVLzXGSmTY9rnNofBD3g70/KLWKJ0d7ZTbKMXQPVl5yGlQu/+\nZZaXHwJNjlUaNjDzrs0bos92E+5Ips14jiBpBhWsdSu6BFtdvOd+ZQ7vJq5i\npIrvdJ5x9pMTxStcxJfyQavIX0V2eeIDPpL3Eo3a2hG+hUKfSrJ5MVlMv6gA\nDjxwpCLWzcunUhY+j0k5egOu/8GjLDedwNQ8aeKhwsF1TS+fdHINJwzhHhie\nQaMr04grgzkL+Wm/thL04S4P2IzObgIrgfW5ztED+c38D4L6OrAv53h/O39F\nNWWD\r\n=H3Sz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/density":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5d443afec.0_1594327905706_0.7510192553058397","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/icon-button","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d59993d123dfd10b45a675c692cbe85c9c15d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.9ac1ed914.0.tgz","fileCount":37,"integrity":"sha512-tCebwHBgj4H2KA45PXowE79w/7+qhGYRz8iJo5TJ9qNPldiqhWsVUylvVwHqw55Pnjd3I3HqPOWMTpfhum2XqQ==","signatures":[{"sig":"MEQCIHACh2WAoE3g2nfDw5h70f3DEZMicHQR0SDN4k3VKtOHAiAVHXWv51QYkDVK69vWQ+KVhjHIYR/DgENjXlx1dXSJXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4onCRA9TVsSAnZWagAAu68QAJk+UwPQDxRxZnaZZrvp\nzlEX5sHr0IAPx7lFwlYhGUJasvMZeI7PKiO2H7WlVfRUoTtFkNfIS29Kyo9m\nOnJjj5+pkbojPju6YFAkh6FqWbvm/zDwKK9QWT/mpOWU1ixallGdNJ4G/Sg0\n5h25r86fEQyVw+XK+GA/K2BS/+r7Jvj6E5PbFL0UNQHj9smDguWSwSbXXDtb\nctMRsRcUzv+BazTo8l1jmHQZHU6vXhBIFvkaDgEp9b69waah0f80ukcg2av2\nUaj9NzJMQV4ZeP78senAWDUv6ir0wr/e+0YWEss275iIbpYjar4YF62q4FSm\npjDmDgMfL/Fb2HJYpkgUjQ280YxESvd6Ox0+3P+QqRvTpgeyqZmNN7r5T5ei\nRnIkQiH62v7ekeTIr2A4UgHhLyoIeRRacwgkBSBb3cR2ye85/cRvjIh24TlL\nL1UrGKBmEqhIGsdXCRoIiJr3tD/DmVEtHDB8sIF1CQIfSLlGovUBFXvpORUW\ntznrrRktdR4e0E2f7cb5Thxz8fDfTvcYYAn9f0Xt01VSwfKOdO4GKowBeZJ0\n852EWEo3G6OCJbEHn8skmHymnVDgUII15h/sGZKGan0pUadgrELziMepjM2m\ngFS8JIAGfce0+6u6oIaEQsFx5uxUWpjotxJAZ8/f5fDKgPRgnPlPNYQ0NXGG\n+cXY\r\n=lGQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/density":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.9ac1ed914.0_1594329638916_0.45154946260469897","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/icon-button","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe71914f665416e9148b9bea024f5e09c7c6880f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.1e7cb6198.0.tgz","fileCount":37,"integrity":"sha512-kUEY7tAyEIVN+hUBiVYfMLqQOYVzZr7E9fMl8OaZsgwYZYOmRyFzJ0jLKKnKM1ksVhABN9L/UfzZQ8CQX17O1A==","signatures":[{"sig":"MEQCIDa4ntU7UpRDjTK9RRdrxnXjDtgBb+i/yZ+T9yVtL70HAiBx1O7qX8DsnyhiTYGA6hGwKHrOS18ypbU+vq68dRERNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZNCRA9TVsSAnZWagAAmSsP/iNlsPrT1kO0mgC+Mouv\nF1/yRB+7xLUnqfgHuPbY26Gswn+naiM+TKU7d2s6YEO5RUTGHfCawkBILz6O\n7npAAgklUKo8jgdMrV/hT4lQFlK4b7oQTxuFxt8UIZQOs0llNU3efDDccCAC\nkXg2O2oeLQuzu9sOP+jXMqTVvy88JYBqCY6ahWlG7MQkEicml8B6KvwoOOKC\nGohgNfTe3Apab/zeuKrR1bdDMhv8is+/URUSNHGEYgvBUV0mO8hLCEO7w3q4\nma3gmQv50TgXSTmfTSXUXNucUXwtpHFvi5f6YT3qv0jJYIFAKRxmnFmfTgCw\n0U22cKHchITu4erJbXfymydpNBgFIGr/sjVEvHk3R6mI0fcKmFit44Y8nOLd\nnYbNvGCTd0glYKna7XxJPy2ZxTf3U9ehFiPoYsmgTpqrTz1bAsLNx7QkV2N0\nrGYd0vAiTpoWKkOj6CMVgGtCTD3eSDschsRzcmon4v6rmcOJVr7cozqlEL+Z\nHBioo5TGmVcVLfv1sg36Skh6oVsunDSw+RHpPJWdPHf9fmnz0cKcdM1XYuBH\nBNHD+kHZs9bHII604DRbklwuMFCvDXyGgDY7WawFmUXk3WTZPSiMy65Drfy6\nBt8BMmAavclkCX5xCKSW7s32lZ+jYROrnzaX28AO+8CHSvDFaIY2+THoUrY6\nGFj8\r\n=xIsZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/density":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.1e7cb6198.0_1594332748743_0.2781829976302599","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/icon-button","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668178b34b54745b760c415295a40728f5929578","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.843f636c0.0.tgz","fileCount":37,"integrity":"sha512-NGv04dnziyc/SdEqUmQhy4yCIBVExFKTXMrLPz96bUpBRyK4xUd6dJhO2ObTvYJmdv2DO+0juAL0U2/cdSEVUw==","signatures":[{"sig":"MEUCIQD4qvzNJ7oWr7xKP6UN8T9h7fLn+7WUMhwpm40O6E816QIgWlnxNOP/XxE0Y1NM+mBNoQxPcoBLoZDkrD/eYnU30Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiTCRA9TVsSAnZWagAAMAkP/3wrnf5f1OynFLJL44eT\n9WaYN93pQTwJvfrdZSI1ZsO9OmYW+ake+D2AIxCW1SA6BVVgKWpLACe/8ZmM\n6UpkT0177v77q5y4xdHSzt0nU2suuTXwpq9q2dWneUUVMvfdDSSMt3W9ulU/\n6cSWlQf8IJFDlGunFaDCQNykIIOtXwbppzh16LoYc/QUA0b4Y/zzSXqxqVKN\nmRVJLkx033eMmQMGpHMSQXgt4Ut3FqlfZqg+CyfALEndnSic3l0VCB8ifiXP\n+vXXImvYe+b+Hmdf4RG1M2bruvZt/Tn/mIMb3NAvLiRFSDO0ufBxAcsp/ZFF\nXYSC7jnTIcUreYtrLODWf0mcoH3lTRy+HAhhAir7bzrVEFrGfTIkM+KkIWZX\nLxx846NrTBs4H3hthbQG53fUCbr5cJklzpc/lpGqiByXsnEi03jKdi5aXFcm\n4K6wJmvXucx8poLW/w26+llFe0J+Tsjls6VFuMkOgKGOUUZChqielW9kfQih\nqzOqNbEIURzlPw+JZS1xoZpEewhGw4LR59saTgVS9s6PyBxHeTYwx2Hjs2vU\nURa/0gZnK9ag1IRUspVGCFgjkXvDkhlpPm6pzHLDjz9IuRdP0kKaaQOlzyL5\n3ooSQuTpErpGCW0iqkUV59oPcYmNMmhcbQ9GP112vFvkXeHbnroZNsVp84oK\n73oZ\r\n=zzzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/density":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.843f636c0.0_1594402963153_0.16017146455100661","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/icon-button","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdab8ec4771f32db591d5076fb6bc4e9d2b119e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b2edaeead.0.tgz","fileCount":37,"integrity":"sha512-21b3MDNcmwEaBfdToKBaaZrncnrg+mRseoRykfzPPqNfFEh5oH/JoszyqoeAYzCeZqk22T83nCKNLgH++QuBRQ==","signatures":[{"sig":"MEUCIQCp/8iUvDKCqSjMzkEPw6L594ptwbLZ12ob0WcBDq3k1AIgNxWFLFfgn0EW4Ckk7+Vj+LDrpJfLcGDTYbjssGKYSms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5UCRA9TVsSAnZWagAAgugP/1ri+gXE4vBXjP9QnzIt\nU+g9KcoJSVT56Ph7VwQTVIrD7V91FFHp8grEwEpEKv9o1rYXFdjvE0hCzQDU\nek+1bcE/IUzHYg4St+wvu12wHuoz/fYZ54St7AhNjOqX90H7dwSNMXbNavR8\niaf0lzfOWURd6KsHaIt6BeDFwoVUCbMShAT62JBqrQfcT/O2IZFjC2776Pux\nGDHXzunR68jOqIqauqRHQakywl0OL5ePeDHdXFebGJ6PbuKiHLity+7ips9S\nMPH/lW0BkUnIk11X1RNjSGU0MJOavgpm/LAC0qlj6dgsYhjq5hsB9gEKU1Qx\nTvmzExuZUGN1GXxrbLZ5mxUXD7rDhPEOr+v/woJw7Oue6IHltVbm0vEjmUhq\nziyqAEwDrboO18QKQLePL6VGQbB+HeraPfTQ84REqjc1aNKUff3DV+Ffwj25\ntpNl4Q2/MebX/LORg1BZyedJjWBS83QY4IrqwHQCotbEpH4mhMV6Po03VhL3\niwiQvjidw/+YZSqGbrohjFSrpX7yWLZYoIHS/ZCOmBRvIgpf2c7B1JZAz3OE\nHa3cXEa+YjMAKeNUYGmMobqsur4q0vlswNm/3EVfI4s1mLoEsYzQHA3mbs7m\ncI2eSx6pHEgPZXbt4LoSmrQgZ+m9ED+d5iuUgf+JLi2ncHci5AnD6RgW7Eol\nnF0l\r\n=+XG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/density":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b2edaeead.0_1594404435488_0.13962021069225705","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/icon-button","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade00dbcad45259bea401ba74b91c7391caf07af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5dac1f624.0.tgz","fileCount":37,"integrity":"sha512-O1R9d32YJsMPiRA7PLUmhX5QWL8piToeZJgkxoNyLbkUpDujWs8lPX3eKpohmNcoT0eTDFVKDE34ha3+M18n7w==","signatures":[{"sig":"MEUCICeeCl+ByA6IBivgn2lUO49G/AS86hpv9DOsSIbtniPaAiEAwspORrMnqSmo4bdyl2nBvzCl4T1GgXev3ZG3tTO9qDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0LCRA9TVsSAnZWagAApnYP/jo0tUDKZOdInJk0+sVI\nd9K0rdx8ZEc/lg3Ew2mEIHY9gdME76Kbh0D015QtzuQddrUFIhMe29qkD6l9\nDqgucEb2DyzhyhKQE89bEoth4HKyC+fYGoT5eBzM/MP74qT4f9nyIp9JpeNO\nJfY+t/zPXlrlKbYNFB8rT6KlaXLhQ9J/fLEP5r5KCeLANCT94ig0sDn7vDuk\nBCHgdVsT61tgiv/9r2jWpLpZQu0ksyycbLxNf3fe1fy1Df06Ba+oLqqidwW+\nAXyHuveJQ9hmdh1njO/imDM1OhfWm+dp27piow/GfL7V58ql+oTnlnWGX9+i\nWVDauSb90eteELLQ31kThuOetr4ZFR0pVaVkLXbWUXB3ArPCh28u7FYsP1zD\n+lIgrUKWippSCg8tWlDm6sBJahiHBhYmF5pA3o671cZbBJJH4pYBSz71GPk3\nXpmqz7r5MvqicMkAcVhiHckPtdXhuSnqNIah6lRmG00/8I55y7BMSuvc331o\nWMXt/YaD/lN/Rivhnjc4HJb7qzBzwe8klNHT0SkxxBT2O9ptBVYxDyfIFuP8\nmCce3kqK1A/hKEmNb9Uc9JdLT5ABEw6FEFU7l/leEhziREM5qkHFnJAVbJry\nmc6rQBIduGxBPUshFKLCpLQSOCIDl42Rv2WpfjBQCNvbcWIq9Q3XLfGlGzo9\nDoQ+\r\n=E7dg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/density":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5dac1f624.0_1594658059340_0.43606787524567525","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/icon-button","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ab7d9e01f8a7e7def4a6d9574126cdb2ecd32c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4497acef8.0.tgz","fileCount":37,"integrity":"sha512-osiuLcQVRiuuns9BAR47JdIhec3APPMwj16QmBID+8r9A9WVmKeUCqYoWKyzBB4U3aknmusSI/FgFtFGvWGE4A==","signatures":[{"sig":"MEUCIQDEeDFP7qnPuXIi9inAQfUr4ZwE49CSiXow7nvJvAK0nwIgbAOaFnsDCN/LIaejuYH90BZgM6gsJ7L2acu9WwGoiFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8VCRA9TVsSAnZWagAA3oQP/0bmCJKTvGoHBjvgWIFr\n1cG0rXkSuObGI/28jW9KgESY8zSq/d8okVIb6XkfBeKWPLsu/oB18IqkpIJ+\n4+Uke4WVop06zIHX+71rABcPCASPKmVIJBNU7G79K8v+wVr20MkOehfcH1aY\nzB+mzAPGAwWMsLujSoyBImMsUbIqKNFFDR9vttdXt77pYS7AKFzHoJ8SQ/uJ\ncfVuFb404XB2NBiinYTskQRIH8BMX7CGZOCZ/z7lZzSsqsmsu0+sPwi7u5Sq\nbSPi9uFrz/mG58j/5Tsb0++ZgzLnKVQclROFmXUUWM2emz+K0MHTaSQ5gb5Q\nK48XK2vNSQjqvdcfnnxOXww2ibErEn2QtHHbnKrAu9igrOIX7zo3FpgkNu4I\ncQlJt7vR4uf6uQMgCMgZHnwXN8ppjyNIQF/xa1IzAJGhGe0ZQ1ojbn7JgZvS\nX1tGAIxhdDomVNsMSIt5ruHWrBMNlaIBiffIYnQMl3zNa8ZSNEZJwUGqpXfz\n3hLphLfKmCYhMXpENzPnuPRYmwH5CzQJ9LWQ92ZMz5E8Km5fReedeo43yGx8\nC8rYaSp6CPnjNHia+BMzMxyC+ZflZ9PEfpMjB1lo7UZceDB1y1NbNfHn2Wqa\nz24exYknitxTv7/+0b54yDEsEcvNZmGAjqIJHqo9zpRqW/90X6is7ipMq8Gu\nTiLr\r\n=gCDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/density":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4497acef8.0_1594736404762_0.15389157598638525","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/icon-button","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd30a9723a671cf7731fe3f4ab95932d35cf94c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e6e23019d.0.tgz","fileCount":37,"integrity":"sha512-epNxJv4BdUUjRuUzfQbOlsyeXNHqaSjMWrRCQU5ixhTmrxTH34iIsDAT5L554qaRYSjTbsq3/LOCXtKkew0KdA==","signatures":[{"sig":"MEUCIQDOB6qptdyeD0YMeKVK64r5m5avAAqeBk+W5XeC0uz1yAIgarBDQUPbv2aEWv+XKpf77E7yBkSpy6OSbvqvTa6zXuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhE2CRA9TVsSAnZWagAAHXUP/0AQ4m+pHMVpVcp6N3Yx\nQ36dMtaVyEaB9rxTDD8VCaqWrzX5k6pC0SDLMzQE1GHkdlAJBBdsj9PsRxud\nmSbdG1SXQUe8F5JuHj0BD79jb+N6gI2/23/ePI8mZLME3F5FvHKHtnMxrPOZ\n+B7bPGtr38F7f5h7pqBsP2vn/+LTy7ePY1w6raM052gJvDsVOQ0OA634How0\n1z6K3i1PrqaTF66MQhF+EVGspLp2i7eSUAE1NwyzRD8kpVsCHQ70boKZpQPA\nfvcnsxJtKGoeswAoXhgDD6VzdVlW4xtONAfwLjnzd4WFah9X6To1OcZWYtVB\nnfGblmdcU7qkS0COPdObojQ7sf1kdH18oPLUfqUMCr2OuX87ZORvZyPAlw4W\nM8RFvMJKHWybmiIrTY3t+soaIjNu2Sc1ISw/h6dkHb8bIEaK31HExJLXI8g1\nCYwHz1PkeGBSjegqierLigBp0OY0x8Eojkqgglqcdx1l2EcISl1Ol7llCdtw\nrd55nn2hHe46S9zcrP023x5U91JyGn7so0R0KF6xJVpGMHDFVRz/uTI4VO6d\neaEvt5U+JVLaCnC3vrG9DLhK9I1yJXsGAmX4YExHrPSwKi8EGLWwQTX0Ey8K\nVvx9HLGy+6xSeDlTayrN1EvhrSwiYSHk7MWiH+EwHhbIIf4+hPhGHFoRaKE5\ntczz\r\n=effz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/density":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e6e23019d.0_1594757430142_0.849011315573702","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/icon-button","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"692645ce4aa141d2e40058dc84ec746c42a14cf0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d548d7a92.0.tgz","fileCount":37,"integrity":"sha512-vgr0J8Q/GYhS5rAOvxA2MDmjHoaZjaR25R7bHTAhEGg+8y2ojTw+bYA+lNZteTmjcy2WCVyE12tedWjw5UefZw==","signatures":[{"sig":"MEUCIF1/Qov3ywVA6miTtMaxY+5c5fZjiVFk4dLqStx2FCt2AiEA1XFDWXBOGk+mBZaz2kZyby1dvEZJ2hQsrQDTrEr/dW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/fCRA9TVsSAnZWagAAQH8P/2RIHeIP/ZJWjdYCeYpP\n87aH8tK5j9OWUNRdSebnXjIy7tb0XrqaJUfBQlyTJVSXXRRAQPlF4OLOXFaS\noM7tiA4xMgDfbLQvN3T7fk60aTxoxFjYLBMNIxDBvxYCESihrB1dYl4vc8/c\nt9Cqa3EKgX/v31QJd7TTNouL7l68lIqU0KJSbVPAzjyH3XXVhWX43L1B5/k7\nQ24ret1kOlnuRCNSNYElBjuK/k8JbV0WErKUiKrSduxeDuFZuA0tKhh6fxLa\nVQx/63c8kVzftIG5caMOg0tFN8/PmC94Nd586FRADq4HgT2z3uBUuMtQxW6V\n1luP4J2QvaCzqJ8LYU6RTwkTYiay4RTxTSkiD5mJpOKsT8CmSzQrnjsViNhO\nFYzMXMG7TGwDtjq0nfOuGE4vXAcgsRlwF47yD0LtFfflfcZgrMtTbm9uiyTz\nqKMcDL+BEFmFVqJUbbpJuAEHdsZRLliL0Kcg5OX8EAkoYibrmo/Lgm14uWec\nYTOZEALEYYij5LXeV6MiRnAjAYDFKAApBIaz+NYO2l00sz9u2Yd6lUkTGAK5\n4tnEp+c7bUTS+dDsVugq/dBHc6OQ4H54Dw6Bzm5hO2eXgoszWQtWnMf8GKEz\n3Kjob6z2dU1XlxsSehIMlYpyEcUQrlOUnLgJYoWSjiWnwRtQPvrDgjp2cxqe\nPxtk\r\n=N9HI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/density":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d548d7a92.0_1594761183347_0.7418403196264975","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/icon-button","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dba5e2110286aff003aebe99a4ff7acbca6320c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.58ce529cc.0.tgz","fileCount":37,"integrity":"sha512-cLUt8yxuryRrtJ7FYByFJ1MsOBnXDBkUvxzqcEw/7n69Um2xFBANLUIlga3awy1y4rk2TFk38m3brvD5Kj2Eww==","signatures":[{"sig":"MEQCIAatDRjEGl9FfzN1Jt40Taj7B0AVVp4sqKpMZ2R0geGqAiB38WVCrn8PTLKB0sm01BlDuysg4pMoKwPgkNLAXHEHdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBZCRA9TVsSAnZWagAAH40P/jreJCR2at8ranQjc+4L\nZEltPOZBWjtBGmM+pCcdY8F4IWcDUaTC/CkiSgDmYbJZ8KkfY7NHxYzSjQSh\n5t/FYw3bwTEUhDqVJNMNVA8omWEb/a5LnZd8+rdb45Su/vzbU/0ZMs7YHvi2\nOwIEmfpbgMXTrJ/UeaagVRs9u8vSgSMLFizr18eP1M9qwwYzvaAJGv4oc+0e\nLTQFN8aMZ+rr9iLVB9bl0j2GCpDjx7JCspv6R1nEgYdSegfCjt52gnAMjDGG\nlPUL8Z2Fl3F6aqATWjuDEU6fX5zO5RIRftt6bGmQTvHihXAsO17hDmUB4jsk\n3R0u9fWn7JPKcsE6J58aCFWmfKvYeYEAV9gudXWpgdzwx44H902YI7G7wZlV\ng7+KUsau8938IcLyp261jmjgYbVmHGmS1qK8HvbPqMbBgG0q/u99LRRWUDc3\ntOc9Z0JUdGdoV3YNPMb3OZskui384u4qq6GV4+6Mig8/kKAEQnx6HmWjKWH0\nh4rWJjItPJsveeKyY8Q9sOeE+G6o6CBfh/aynUjQl+ceKmHDvC3CKgwc1oAm\ne5dJwPXTmQTmvF9y+qZ6spdYShPb/zK5nU59GXsqF9/aDCveGyXhXL0wi/lh\nVr9zHM+2VO5B+k7YzYbSYapqDhRLX73rMYvQG60mMiIm3Q0Jag0P/++eDQaa\njenq\r\n=+1UB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/density":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.58ce529cc.0_1594761304864_0.9110637977479086","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/icon-button","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07824e8af07db9761f3353c0d95ababeaa1150da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a0f1202dc.0.tgz","fileCount":37,"integrity":"sha512-m7njopfBJbB4Pu/MhAAEAQVAbForxQlealg4ze59zQPGmS8t33qL05ecKdD42Bmb6siAdRATu59w02eo1HczKw==","signatures":[{"sig":"MEQCIATw2wjLDZDbwhkVgEKKfvfUdiJj4lrTslbICHWuLq2SAiBAOkQqISjbRrA5hYz3dDGqGlSaGu9MBolDTI+4TaD/kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTcCRA9TVsSAnZWagAA37gP/0SUEpKMcxCohB3I7hlt\nYusNEh8FacVpKD3eFG43naiBjN9nq+MNV5KAkW2LOjPEpoUqXVnhletj6hO7\nsVDeBskUjEFwtT6spWRp4wmaLpdfsF99AA/Erxbepg1Vl7wz8osbQcctskmL\nRz/RjXAy5vjuaXNqDj/dVHxaZUBCO6H3hGgE+HwrwJBq5zsfipon8DW4SStU\nXKzKwd+G+TB52Jw4/z+Y4X9x13CYBrw/GA6WXqslh+ZXJ5rTo0U8lvmFfEz6\nnBlAOUtA8vCAe3k88bMUZ0eFn0lVcRBHom5stCWYGAlhpbPO8Xov1nyrbvRF\na09HyLAUJt6j5jkUQBPI0NPLxBiaMkrzF0zAjme6t0FJLjBL8ELZBZ/oZdOi\nWDaLrrdAIVPn4wDfkatUQIi9geEfb0krbJosfSDwf4AK+XW/vlf16JAhQzBS\nT7j9KEyoEoWcx8xiYOIGe0yZnF4nWUvwi12Rzux9qN4lXxDiqVnng4g+z1tZ\n+OcP5YIG+DiCtYUTYTHheomivnyF0Rx5Lb3QK7meiS797wL0NWntJnunauLW\nRnKdwywFsG/eQeTUva91k4EkUHiqDRJe5hCkTanIbXKNoAGfxsGHq6uOaHdS\nAe1cZmek3ixaCmSxsD3ZMMmSY6jxklqNs/FUmKEfOseKq2+2A6xaNOyPKhfz\nppSp\r\n=AhnL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/density":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a0f1202dc.0_1594762460144_0.858094023853978","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/icon-button","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf75b5bf0ee7304966ff19d42f1a4e9c45834ec","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ad4df58c1.0.tgz","fileCount":37,"integrity":"sha512-tMk60dlaEyuw3tXzWTuebWeuCSUPPqziLN9PXPxc7YTRcX62RHVXjGgeldJkTMfY8S1uPQBB8zZQ3mhujAwPJA==","signatures":[{"sig":"MEYCIQCfFjRvjvefladBUmlj18onF9Ljt/s24gNlkvcT5ssOkQIhAJLKp/ciHD1kW+b+iqee1ahO8cHQHL7oqK9Tkz6aOpWg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkwCRA9TVsSAnZWagAAeusP/j+nsQYVAtSg7svr0ABo\nwWVvyXtS80rl6mdK5o+tBQGZAfGaQFMDyA0Jxu2cbH+Y4fIkPiJklpk5wISK\nFc6OFpfE/y2gVvU9iuQtlWoGNr7BkuDi/u0OhZZfz9KTaS7lzYmk4LTkMwWd\nuAWANRVg+3+ECHeXFhUykvR1b/Ub6jVIn+UOWVfoTUEC5iMHudUDIvlo7THE\nvxsaf7vy2E39LFbr+qbX6M7wSgXGOtfu7epyIkcAkzOK9oqkIrjt/Va863L4\nhyubTP86vsFotpGcf15o2Gy79TTGpHD2Q+iTGnDe4borVpPI/WOoQLvUzHSU\n0IAa06VZeQ7F0XV6mRu6QMFvxQ9RF0L5g/KAH45zE7Uoly3fBVqEp+9HT9Fj\nr7Yn2JVzIx5uXZTh+rthASt7mPeoaZgXJuLNMzi2XSRhcdMkuQv464exTUIq\nyJm5E/Suzm7ZcNDHFXAmDxytt1oWZG3EuVlvrFHTk4SpS/3k9Hb+/CfSsQYn\nZjTrlqNkAUVpqnaxsgJmuoQ9Y/obBBTRdIG9AblQBdcP3Ql8NUXuUkCNxfs0\nEo1lgM8aHjbpnrTlQ9wuwsQbhDtRr8TRDPkv881nUclZAYuKel4FVMfJzPNk\nI7BKMqBJDmXiBF8QFUvdbPJXdgSoqMclEqJ1d1/JaSeNksukDc4b1ga0+Zg6\nX7FT\r\n=fWa/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/density":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ad4df58c1.0_1594771760274_0.20894043964017928","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/icon-button","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b1530ea9ee1251aa2e5c28d2c27bc92b673057","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.01db89053.0.tgz","fileCount":37,"integrity":"sha512-QWJkSb8duL5yEhxNwVbu3q14laBGaYiPKTpgo0CnYaO15LSsXRFrmRBiMh30UxsdupNznqlbk4irjTSUszVlOw==","signatures":[{"sig":"MEUCIQCvKlT4Jp1Xo6bUh5JqOCHGHul3vayhStI7+Ox99byofgIgVKH+LV7A9E2a4ZQZLaZllKjZuVKuQKvG4wuwxrGUpG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIK1CRA9TVsSAnZWagAA6ckP/RECMYXne1rh1OAePba5\nO3bM9Rww3BH9ur7YPDCY5FzoRlpRijaG64Z+aJoG8kNow57YQgt+MT/Cl56M\nJU6exAa456kI3X1+DDWVtrUxsTzkoz/fJ+3zNozSCFOStZ+eHV36wRnyN/AW\n52qNKq1M2/K21PUMbfCoG/x0XYLROzWpTuOUaHeC+BlvBuqJf8dsDimOHSjg\nSel7JOV8tH70WSwp0nPIYQNDSB5hp6v8qvZvjsIC8pxrPzh+clM5PyeiIMJU\nGmXhvSb7laDtwI5U/NjqsLqcIe48sh8OiU5wNUG9KWBAf6NGAQTCFzM0ScPy\nXc0taPiTVYA/pCpOYOKQHLD3F8Lda3fLRkoE06hYT7GAz3QUXb1nSasmBjCT\nGkr6tKKmbhTh9yOKUHSxgEhbWNIVdBjkZYe7Oa8O6WZFb+ByHQHm/kvmDlqC\n5LHzWL+TxuETy+ngN6RJA5b3BZ4IjPbD9lrKbuewHtUCrC1tCRVyR7RpCvRX\nTLVUckEVdtgDkbr8rVMIJg/Q9gi1u6CVPTsK8DYIswuOgJpXJrMMC2aSJAGe\nKJG1Mg5jhCoJZxQEGf+CX8vAEJnj0InlR9RfYtjwzR6/ktBV0hXwSEPz7QSH\n1mDVvCMiW8dmnd5W7KBmKn8YtJVbBhHR9r6hVTuv95RmPlUOgonq/LJZ2wyP\nZnIV\r\n=hq2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/density":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.01db89053.0_1594917557299_0.1675210670590377","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/icon-button","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47695712ac8e767dbf3b1efef8822a83c9e104ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":37,"integrity":"sha512-yZXXPOTQZWLholqnU9XNk3ainH7Jon+OgKQ/Iwfk47p6ECnFzp53iyZ35DXVbhZ/3WcgQRvKcnjpy+iqy0o6cQ==","signatures":[{"sig":"MEUCIQDk9jIOyL/9giRgyI5rE+4XwDR2jc+AyLJzZn9dhASHywIgV2Mctn4Na3jOmRUsTHnNrAf3GH0O7VbTSeBL7+zUtHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5gCRA9TVsSAnZWagAALcMP/2EKil+x5r2Kl991SXA6\nRl9GhIEHSxTUvh0FUuRg8Kb7DwbipZJThmU2WkFEKq7cLWxM327d6jnK9vTb\n2QVJ2rkkjEw+mf4i6voJUmerlV0BHOiUtwYgXChqJFwBDZL8L8Knro09lHYq\nkHi5Rb+rxc4TwK2uvgT4rD52ZXiwMlevYV0mkH6ks/5pTbj+anEv6+p0MZcr\n5aVDsWBq+cAoz1FOvY+c/NAciWBNgHasDWz57Q5xu/N7nKc8+WCuQRf4IIi2\nrd5dVxChq64c8I57GXW6tuWuJojxiEGFQVmz82SbvF5JwhODbiOhxuJaM0fD\n6b6cSp7RZhdlSod2Ghuw9UqeLF0GrYJ/cfotN4JMCKDtEqY9xD66Bfk5UJPj\nGGJZDlLTTMsF63RP6VU0HX8/2l0ouCcBFYR7Olvu6deLAtItSQiSLZVX63E+\neznjw1fIpox/wboZOCm6/g77p+vn4M5usOJIUVMmK3Vb14ulyrJRcPPRdbSt\ngNdLBiGTFuEiOt11wc+GQskNoNYtxrHOAyE5L4at/3W5L8iX/gmI9nxH70Y1\nZ+NJ0dM5Ow84jBy/5ifEMrpwknSfkFwwunORnsBoAq/R5dZuFYemODv1x0Ak\n/9oJ208UV0E2oN5p9F034m0hoOncuulD0IQDVIuMDWGeyg+6s9eRexKTPwKj\nFtkT\r\n=shyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/density":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fb5a4cdeb.0_1595272800579_0.2716513601465942","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/icon-button","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3634f296acecf52c69fa81ff5f2ffb02bef2d159","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.8df0f517c.0.tgz","fileCount":37,"integrity":"sha512-cuPkmQzPQv/zFusOWgwLcSU7WEnS3jUvqcdgyUq7werQufg0VNUTJ30CCISPZZsd0G+TZ0qTgQlmxOLJZixPgg==","signatures":[{"sig":"MEQCIBFD2VDv8EESRQCPVkpjScTdLD84rlrxi6vfcQxw3fJ4AiBPS2kH6QDJ9PJFDNWFKFEDdmLXq3Tgs9gQaTOvtqL/Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi75CRA9TVsSAnZWagAANl0P/RN0NYicniqvRscyYsWg\nshIkZijNWnUqOBNG0TGJFIetpTc91zivfxoEHLoCQh0cGBtsN9D3OeNBPvkr\ncj1bNhHMJljDIB7Qrh9CSXWUbif9Yf24NVkpNNMK65rKRufDUAxlkC9nnR/Y\n0/ckSK5zupobps3/3xxOyOBLYLVF7I8FY8jzG/VRXs0Mpo5+ab4o2PXhNEpN\n7vdQkNVOb4mzYJUzFru12FwOyjISAZVnwnhW+AegU2P7EJBMG/Lge0MDX1av\nQy48teKdkZTMQpxpxmwO7kSZoc5SSxhrfvJ11aXXgax8DMpLO9NPICU6XnQV\nbFcx1KS0FnTaIU5NPz5ulDuOwv7iZvGJ1UCaSLDKkhClmCLVNrpAkLMu2QLT\nUDaQRtirEE+6DvmnadS4ecHP9pSyEzDEX6IB+ZEzPRzpID8KTGezjyJoenNa\nQADK2Jrb0JH6UGM0svN/O8/EQICE5IEWr+RJL+L7Og+clH50e6BJKSl3VkVU\n/jKbuwLGEPrxptELUyymXncWVOMO3Sm2/vpxFKRyFjuh4K+EFuudkVSqKySA\nj92fBKfO9rohhpoKy0KNnza/qGsaZsv8LScZBjEIFw9aJCTeDhcTr8kbeCVM\nppYm1t85887PbWghYoi/Tk6eLClh4DOgYiSTPe6aEG7CNZoN1/E9QRwULOoz\nzCGB\r\n=Mj7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/density":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.8df0f517c.0_1595289337130_0.08433276301291959","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/icon-button","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"703d0238733c2e2bc48940654fc4673879403e49","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":37,"integrity":"sha512-qGkVlWKmuglVqNQMlsbHIWKd07vdMf60QzDSB+LDqDLmpkB+5GLyVww9+XWDJVvRo18lF25T/vczKvyrTN+ayA==","signatures":[{"sig":"MEQCIEMl72xBlDCpEpAt+Uvjwxk+SyK3B8LE7D2cVOS1k/BMAiBnIv1kc5SUN8tQNKXSc09vOKGRe7QhfOJ6uM4N7WC5EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvFCRA9TVsSAnZWagAABxMP/j8n/UTnhOjx13XsL4BM\nSyXt6QUAmcdFzpZLlX+X5a5m9tcjAcPXitvHxr9rt4Y7vJh7wldkVgGifIhX\nHMyh/xSQGuwWIKULOtI2etbgu0KxG65SoSEUl5QVndwC9cEbhfAMK18AWQ1f\nq8fFV1XPj71R5WITBQziSHYzBeqGY8Qtv1+lbDsFmSqrX/yaTUs4S63arN50\n6Gxyc4bJHUarcd5aSK49zn/ohIZzffBISLlYkYhYpgbyuU81EPRui7tBMykc\nauPqxZVMHV2Trr3vBf8jx0JndHzYwocoI+5g/XIloi2yFVW3R0CvyY+e5ffp\nv0nNmSsGIfSx24cQJaL4rwz/oP/EYHJR8YxfwHLConPBwl2pzlOyFaBkij/O\nuFAZkbP7+sSpKERCXkP/3dN47NIA0RUoGgN7ckwy3JAP8TaQB+ap1MqNPlU7\n4t2Y3W1HLIm7N1D+IGw1RqdiEhAKbS/p4ZVdSIiJdwXufiavmvTmjbTUd6lm\n54xyPNhO8+5rBY+d97yAInp370Bou1iYRD8uRrnRMAsc1uewqqkGloKXK+zi\nwlws14QYfuFGsfhx3jSEb1mF7M9+3/SQJkEa5819QEQUpuHQaTCAJJvSylFW\ndaP623xaKoUutSkrVmcZNb33bsdjlgaY/exkmcAoYydx6XoCwruUQd/4KHkr\nDlBd\r\n=iGe5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/density":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.abcdbcfeb.0_1595292613179_0.9408915092827708","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/icon-button","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e59eb23ced0bde07d2396c77049753d48763f402","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.7bd5075de.0.tgz","fileCount":37,"integrity":"sha512-Mas7kPc08XwD0uOn1xq75koJfJMjtQpvXVYNQgW2fCh0IMmMnj5yfDB6Mx+o2ck29c9w9visy9tV8Zva26PWNQ==","signatures":[{"sig":"MEUCIQDVIf10cxj027htaWrGcqLgArr1qaxmcWltQjgyU4cJYwIgPAZSeZLP+RhyDJ2/5A/qGg5ZZLMcSer4F326yQgIZGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzguCRA9TVsSAnZWagAAdBUP/1DOczsjET1x7EgaHmjB\nxCYq+diaxaBe+hDBEMtDC7PV8GGkKPSvCqk/kmqJVw9e1QekdEdEScoxtxs6\nFnsc11xPSRiEekswGZJrPh35L9jh4zQf3ApMIftqJ3ELGON2OHf0cRImwFlz\nWBgWisEaYsuO3ZOm5s3Rzcj9jsiXJTVRChEz14eUmHfHtmtb+RQMKYB5Tx1s\nXUja5gKQg8crcmi8qnnJy209mPvSpvIoHSiVPFSmrrM+AlUZLb5AhcxVBkJO\nq+0XMVZm6DsY6Wza2CQ7p3im+B1of7Ol4Wl/GCPnJ+xbdTDJFCjg6j3q31EA\nCkGGGiJm522mBUSXOrwKcLzyXNgQ67ZYmW7CuBjeSlm4BeLOFWdJdChslnfF\nYKj74tLIkW6a56jffWWZmMbvq29NxjoIESFor1XPN813e77ytlNXhv+4yaqK\naHmgXstZ0q9LeyKztas1FpSAXRDNXf9EM4tCIpBx4qJJThKa5KA3YR8N0dQX\neYKplbMV5RceckmrKIg0EnX9YhwpCrgw1W98SDpJc5r5ieJ5Juh3PeqYPpIn\nPE4V7PEoIk5XEehxfbwojUyYvWZR70HHeQZZApu0/40lf228gAffI/AOaDLv\nc6ExEXbV8rQl9NpwmCLV+ItOVT+C3EV3xbrHbc3NMCqIFEm8OhSITYsJ/GJf\nGMg+\r\n=4SwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/density":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.7bd5075de.0_1595357229873_0.8047123149120117","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/icon-button","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519d68cd98db6537156802cd372c8819dddae1f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.405a29a20.0.tgz","fileCount":37,"integrity":"sha512-dzkVOSshd6VOUxdDxso9MkUX6AJdBex+Dkm6Fzs1tkZ/dUWIvNdh+oOzGo1lyG6Q7rVd/BORstT9U8AKrAn+lA==","signatures":[{"sig":"MEUCIQD++iQLR2vXSU7mMLDAdEmPDaaGKrPjItE4r9WKQciE1QIgT8wwYGFqEa/nP6IpVen/3HsvIo+YSJkw+zVrz0KSt8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxRCRA9TVsSAnZWagAAEVwP/0BvkO3WeAF0YzYJ7maM\n42gwq3LvN5UpxtOMWfvfc5QHpsauf+/IvSWfdZLz1GaKwYv5if+H7W/C+Z+Z\nH8S9wfh+ZYQ8V0+x0dEBxpL/pY0Cg9ZFX7udG6kwt4ihjDbD59FNzKub/Gr/\nq3cbXC5j7m+EXXev0ZUJVMY08VIHEumd57irrjKOtaH7+4/mEXOKCWM9cank\nYK4/ACQtcSWOcFDaBNwxG55xcPXY9ztr55YbTN0MI0iWlTXk1LTi7g8bIVD6\nMVadJBpFyTSeL62hpmNk05cs0QofIOwJLsE2bU20TV+2X4fHc0iBxCZav4Qd\n/7hlOYbQ+XV18Z5pLFpJPlFZV4k8Z3yy8AttOln/rtLKVcs+pf7HfGu3DlMU\n+4dmNDTierPp6d+o+uMC6coC96qtnKxpTQtlhedT1wk1MuvusftTh9wuw8Ik\nQVI+a+Hkqm6n7uNZSjHNxlQGGMUyZBHKJKlSwvmCaPYRfYjDamNZLH8umkqY\nEOp1Rz58G2ffr+rDO4vwGEWFRe78355pG4maVfgqA/568HHPsBxZWaax18fN\nI0KF8XbLCFTMYnsc3cXM7VYf2vSoSaSR5AGXM3w7eThlbb7Oo/dwqdPN8X/a\nxsAjuh6IEMhuIZY05oHKyfsj4u5Fjwu1rsdl2kz2+UN2aoD7hevI2t2FE5zQ\nUo5z\r\n=5/Bf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/density":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.405a29a20.0_1595456593168_0.17997554034111207","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/icon-button","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b330fa775ad5fe12c22fe40fd18c17a0438bdbe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f3693ac4c.0.tgz","fileCount":37,"integrity":"sha512-reP/5oC/ZLWlDq957ImgJgjN8EjC6SYMiurfVNfIHuOXeCT+gNlA4dL10Lx8r1wjF8nmO24Ug37VUy5EwQu3rg==","signatures":[{"sig":"MEYCIQDns3yw7blVr8gt0c7GV1LCKChzSzF7Yr2sx6sO3zfl9gIhAP/IdxGoW+RhZS+3bYB3+uz75PGN2gxuVJKzMpnLKZfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7KCRA9TVsSAnZWagAAK8UP/iq2+Flt6wl+8rDkt7xM\nyOcs99uNyBxtJ4v9DluvL/zGBlxoTcZpzhA//S+DjzJbFjeHM1/unlgqvaZ7\nCx5Y6euVV50ZJ0+GFkMjqY9S/WbQt2WhlOWYaqyezy3MZfiiZoLC+ESX6GTl\ngWXl5TeQaymFAJdjOrgOantD1gf3HyR+VYb2T1YQgGW6EdC8ri6y+ZrfPGuf\nwxSo9zCEox46c4KD+Inefom4q4ygMYYY+t3sM8TyUhE/IQ6x0uL4Z2M68NVz\nwlhTu/wibBPQeR2yZn4yr6I0ROnvp2AheWvQSwXOAbRJXXq7KmfnUBizYEHW\nZ1Rj4u4dlGUVs07+b/FCfM6tLVuJ7IyMFqhS5XvxE3+yHO7RloePsFZ13/F/\nDmVFRO4/pasBZkq/u93v4DSsIV2rTl6Vr+zaWU231y/D12OwoNvjSKghGfMN\nVYwKH1Evo4Ttdt5SWF4vvH0CgN87lG3okiZp6dcS2cgwTXfDp3xz+bDxd3OL\nB2jEbyXCEtUzLdPceAVWZD9YPn2+q5xevKuhlmAAyj08W26H9OsC9g2f+bzS\n4nbWubQZoALrLB4ZJMgt5sRr0DjG/G1w5EMhaqGgHIMP9+p37LLbP2tsVQ0w\nvbotguk48TcfOExqLH+pD3Iln3M94MqapUl2qf9sjDqauj/4btpw34h2Tcp0\ny7U+\r\n=Yh8O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/density":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f3693ac4c.0_1595457226233_0.8029852755863334","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/icon-button","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e261921b4ff3f0ac089bfcbb4e013a095ff4204","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.12a109680.0.tgz","fileCount":37,"integrity":"sha512-JHSTuASwTVJMyAKvOHHb4CBSWWEmAInIzqPC7UpCyASX+1Tpuq411R3g/nNRek8DX26loo1smjH4LhS5SMLb9Q==","signatures":[{"sig":"MEUCIQDwK5RspboONolRKX7ml4eUXpbMA4mBjtrH23B7q/f4dgIgZDjtBSnecxxFehfeO4gmbtA/nZBNqUYN9mRoJDDdpvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXECRA9TVsSAnZWagAAxukQAKHiIjXXQm+jIHS58BEi\nGHBn8HyzzEkhqCs3Sa5XvVq9Tci3JB2gzwZ+r69vmFUdn6l7mu4QutgbgFEl\n/TaD5T9bwiqBcVM97qDgD/Gwi1sVqqVJ8WjYL38kQSvPyrU88cQ2yojPD2QL\nx453Z0E8RT9Cdr8iMmknPrnuOQz4FAT77AOtMBMCIx/lsNk7C7vL0SSinxeP\nfnnShQgUZibTz4e1G4TFV+sxhh8TEO83KZs+FnwQpL2BUEce9VCy5zCAlYm8\n0BY8HSKNks28LJ3toXO/0XsTEco3wEYS4sNTz876q90Rmjb5o6KDUBaRX+eM\ntqX49c3eBBYeEzuP2krjrqZfffpOLWMcEHr2xDSVvmMzH52nAz+T6pZnBMER\nHHCHyHkhgJUae84yRzrIpL6WdE+d0IPuP/6Whohx1YiR/nYrCwLbnPL21Viu\nnbcuTZKSH4Yr9lIejl6R2nyy+bFFPqAX7V39rj3u/0UkEi9p5nxJTTkLbVHK\nO8PU7GkceooUMs96zDrgxc8hfvvnCO1D+cEnZ6ACzGpwOSCUAEg+5N1Bql72\n0gxwAil7ijoS5nOzDL+IADTdBxcSsvIWzsiRPOjNn1i0gYidXpjAXPmP76jV\nlgTkBJEFG0JnIX7h7BzdXYFHqGNETX7Y+jahNZ7jGEqzzNCUF2HjEB9YLFGH\nxAD/\r\n=JtSV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/density":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.12a109680.0_1595459011659_0.9438067017164651","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/icon-button","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c86eb0b4b8106975d9b90315143663df52bac6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.bbd06696e.0.tgz","fileCount":37,"integrity":"sha512-CMdS1zMmcIWbblALU/m3EoZXrmfporetB9P1JaWr4QItxVf/IIz1VLzEUnSGWiyKSmSJhtGqZ/Tdjt8DiNS+vQ==","signatures":[{"sig":"MEYCIQDh61czNLCLXBP6u382fnpDY4vbqTTc9A7HroghC6j8uwIhAPgEtwftE5ra4WeGZPg6JQBO4aj9IqNakdtrZPAeU/by","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFXCRA9TVsSAnZWagAAxh8P/0g1Y7bXWu6JYlfqmj3I\nZId0QQCQkw0lhnD0V7+n3jlg/kOZannzu4QP4liEu0dy4j6UbvUHoeR6SP2k\nyIkNez4lNSRKZe6L+8erIw8r1V+2meqWQyU+xrRgqcFRTyneohMBHSCVZ4OG\nBKHroVC6fBslWudp75E2uTYJF7ncjOwUNY3fSLPL7ld5ApJf2MfX5AXBXX6w\nD5I6eb2MYuDDvgzK7451PNWdR5x8fFtUP1DiY7s8d74XhMYvjeK/VCHNz9HC\nmGsmNBwQGEett1ZA366116BOIH2x+HCyoUDJhvTJ5oOXoXRsEEAJRoWqixgi\nbwlp7EhqQCG1UJaFhf9a4ExzLvstXTaO0XJJ+NYSeoosEt/8e1rZolqXbhaX\nBwqerRAqW2ZTVjOgV5hRGeqKozSbphxmrDlEeTXe3CBZ9eiwh3LqITeMZy+I\nJVV+jKNLIHzIIreD2hZivYzkxGPTfrmxIj2y+XBhWnbIdX61CMEfw9NX5JAB\nBLJOMg9H7FjERo9jaEUqrl60N5U8PS70r3AJdEXWipC2dWnH9dLFvLMRXphx\nGRV04eFfMmVutFfh6gbNyPJlbE/y7GMT3xgtxXrTgN72GDKIvyAsWUe4DLZl\nqcAF6KLCEaokNF4FvShnIFKd3g/qoClF4iFfSPVKkZuYrZP85pTSu7rSQD1j\ny64A\r\n=xslL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/density":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.bbd06696e.0_1595461974559_0.4470270502690503","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/icon-button","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4f86a248599bfe1223e6c48fe1c64faa5d78fe7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4951e7651.0.tgz","fileCount":37,"integrity":"sha512-K8Z/g+nbyt5zzxGPc4DNBzFbKpUdjNmrPttSHRDAQIL4gscufDK0RAr7X8QHb/eBfc6dHulRMA6NtXrK2jUyag==","signatures":[{"sig":"MEUCIQDUjBqIU0lsFIKnk9EMmvjUq1VgRWQ37g+x/UiYm/eBFwIgZhxBJwy+E9HeIgAhv6Zu0cJ33gQS5tpIAv3IiPErXfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyzCRA9TVsSAnZWagAARggQAJh9V2wPzKF/XXe7ghF1\nEP+9DoKpgyJgs8OkZhD2wM9T7xiKbIr38G8IQZE76NwJoNhfZp8J17W36rfr\nKm9DdHW3XcoJQZNpW6PiMzu4TqwgzkrJKZBwALJrD01hla4zotl+Fxbpe2HX\n0RAp5nxgTyhKYDHVR6MGplIoLNYLW+RtiaFu3gm513BTX8jJSugwA282POqD\nNjIz4i4yUxN8RGNiAkVs6QTXGDctZCmmrVrXtOz9F0a+/L4Z4u5705lzMWlr\nu2jW7b6D++ooq5kAWRx75MMxR+NKJO0HnubXd9YzVcAAMPATo2BsS4atIilH\njbgdO4KuZIbcr//5HC04cnBr6vZQ8iK+qr9/GXvDdYUJtR8YQRBlmq2un4Bd\nYMfERp1zCpg2wI4Q1K9U2hQ6xideDR8T+U9FOB4aQKHOOwUS+pu6Y84E8+/M\n9iqz52A4Qn1v0oJmmFfTwo+iv9apDR4VQmEw/z1FATYd9SnyS0Wc1V/6t+T+\n5vU2xmT7ixD4jmSNalrfmILXyTwz3UaCg7B32Z74Fjd7Ad6PkXW+O8vuksfx\nVhvHgM0my/n3m2ky1Y4moCRTISclmHvCCvwCZhNuSy61Q7Z8MT+UrqBZYuaX\n9frNO+HNlIcLHpgxjQAnm4KezX/6ZCLWC3YuG6QiM/3QPhRTeHbbGL36xnW2\ny1QN\r\n=IzIF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/density":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4951e7651.0_1595468979175_0.4362524924291342","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/icon-button","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e842f62312aa61108ff245ffaf91f0286c6565","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.75deebbef.0.tgz","fileCount":37,"integrity":"sha512-RyX9tTS0ddcmEwKlt0eSzwkIG6zgWCewEihc8PbDhLQTSJfMFW2fSPIXu1StGR9rpiFyzUKcqs8/Ya8ogMcsqg==","signatures":[{"sig":"MEQCID8BhG9tnzm5dVY22cmCDdmmWTTxfUcC+VekKvfRQ1xKAiBgpL8Kqa5Oq2iZpQBOOOhiUIH+FeyFdQ1JEHlmBWITlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczZCRA9TVsSAnZWagAArnQQAI8SaF9QVLqv5Frj/Wcm\nkdIZFo1OhEB7Jp9BDpd9lTZTX8H+rIwWUP/naF41UK13+hptIWKh3BNoXZTz\nJc77mQokdQqhZ3XCzfsv0CXzDL/DJ30ft7fvdXr673TdyMmiRMy9vnDofpEU\nh6PUTX2CXOpHJltFuSs1ucD5w+AZ9XR5ETRyrsO9lBSkuW/gQujE7oanpF3F\n1TWOHxe7DUHHTWy38WiRSO/71DmGWQ0MuDVfCfok0W/Ohew8nShH1uAmEnGI\nTPYfqk7Oo5wrN1p398tTvcfuhw1SzzSqFLUWVW7+RjMKkL4xOG40XLw3vU/b\nWP6SIp8dIDWqFyCqwrk+y2B7bJHzxyrijWUFrqoieH9E6MbY0VWNsTkUwul2\nXC30ytCLBjMg2is68ry4/rOIiuY8czOScxYFR//V/pWvF598IdzL6PzE6tYP\nVw3A6SllmU6ThDeSz1vnmLUIqhJHilfZ8lHGNQNAxjZhTM1CCl3NbYackCOc\nyPMS2w5ytrbNHMckzceWqfh4Thct6CGY2/YzCsyzYwQzWwQhnFKVHprblBfV\nC3sunGJIetESnTVCK4ut7J0HLZIRWfFYg1UIIM6uCkT541Nyb6hkWNVp6zck\nzzDpd/iztj5goJQV+nxa0aJ9Zww2VbeWxKbRJV8BVcqYBW83bVgEYkC0A7ok\nUEuf\r\n=ldsa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/density":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.75deebbef.0_1595526360889_0.0904106897934489","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/icon-button","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"364cdf58476863d2279462068f43c95d79378dc0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.95aff33ee.0.tgz","fileCount":37,"integrity":"sha512-78aItaHWr/FgI+HQImaVDlI6WSMm0gm5q/pqzxoBZi9wk48ddclzeB+zt0Ez3QJYCgjA5CFd+Vgy3Zw3Y0+v8Q==","signatures":[{"sig":"MEQCIEOU/opZVZgALljlkN2zcDURbY8RZM3gLjJT6y0m5gJnAiAn2Z9Tu7XEzJ/iRfRjYNF1I4igvs0hZUNaqXb0ZyaS/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGds+CRA9TVsSAnZWagAA99IP/AsID8Zyjinjy46N8w4W\nAc61PnxrcZ78MRlOghIDEv0af5URUFzmXYWKOq7AxaPlD1pfnu2Rp4/4oZeU\n5DbtobCWGq5tILpxHpFUTnlRT4/+5YCzt0v0fBzLRsJf5Nk33Cf2DfR0IHZM\nO2UYbeZ2BEswPv8qKNhSCBiVqg5vIyktMCriYYOMlCAsWu13bWOb8BJzN1Ee\n/DMLpmA4SHuGmMhqc7xvQf7ePDlOT2YTOh0SeAEhrvYuS45cSFrKYgx9pFod\nLBgYDPT47srr5GyGUL/ydK7KRphz0pM5eame5gBy1WgMm3I2suzwDEK4VZHa\nNMXosTBOh8hDO00oTbQnJZ0xXvgcGLnvFyRTk+oRKhuooHEB6SPnJVHj+cxQ\nHBPqSwhENGoAMsIP1zk9631dV9FE4bPlSxaV6j6XUao1cI6JmcTT3HaviQZM\n3PcuVBKS6DzaUSMRmG2D3UBsR6nOl3ucYWtYGiqcsfmdgT10i2STO9nsHJMG\nNaRUNTl7av+qSVErhSlpzIHrXQm5h6yMFKQa87e2MD0PZe/Bfgy6RjEn6ahI\nisPVWI8TU9w18dncMEsqfATQ0XnSsHDexTe8t4o68PRvCVzyMsYDKX9tgKut\nJvbtbvCMFV0wkWERn1y1orgXVnQglEZa6LZSJVYNnIWkVgBa+b+8QGPlJcQu\nCBcz\r\n=aCMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/density":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.95aff33ee.0_1595530045722_0.9623550297054422","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/icon-button","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ca8a156cd2678a9fedef7045c000d833c4d021","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.9d9f47473.0.tgz","fileCount":37,"integrity":"sha512-lSltzjjG+kx8wlt6TwtUPtFj06vowhqmlWKoomLZWdJvc5DYfT2p6StjwNzzw7eoYnFhA1gXrQSJN/IFtQsVdQ==","signatures":[{"sig":"MEQCIQC8HOaXf5V0YTy0sgF9XImn0Su5TbYI22TeMfvyigUT1wIfeRirN3Tl5zF1+H9nQYixrufxi/pDR9CSrtrIAUabzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGev0CRA9TVsSAnZWagAAEBQQAJ9W6xHFYmP6pbG0rt3P\nyNBx7ze86Eq72hH0Ujv8Fl2ubvBTZi4NySeWgUZu0aweysmpPWy3hgAuuBym\nsfjqoXyrd/Dr4FZK43bKDf6Ufyd0JaA33sF3sqNVGY6poRKhc+YHWL1PoE0M\n1tmwor9+Q8JxAGQcSTwuMtJUeIr7bE5oKSqFW6KfYUL/HuSK0jRAIwpjui3H\nRDJaOef9rOLQCutsP8pkyDI1+XSeu2JljI9F+V5zg/ZN9ZyxP8/mXgvqD9EY\n84egOBybax7PZqpEFksER0OO+PIOTsqKxCGZVSK7E2U+1FC755D/nmXyq8pk\nn5rYVfKXfvrL41CYuPcboaSLBP6fht60Z0x+q86O/jL2EvocQi0pibE7Fz6R\nFwB55kkRqcGuNsmFMsA92wxfwRutOP10JPMgIRIvGrvtdlGvd10lSc0hzPTh\n67DBpqjI40BYsZjj5qYSHGtatLN9iEGMBoYnF9GfoU1NXAsF8lJEa+GT2IZ6\n9yDHZgzD1XUHTDeYbJzhwMA3IsBqxm5qcJrhmyOcqBGt0vzORwL3RK77KsPr\nfpbJN5PNoe620vhZMQRJvsD+TUMdmFIiWaMLRlsnrWJgO4FMfzkqci5mHDnY\nG6wdLM0p6S6FGO6PxWgyx+0yjKddWivB+KuhlITqoO0eQeJa1X8/3zp4IBfW\nt0FK\r\n=g0E0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/density":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.9d9f47473.0_1595534324179_0.7072856734200428","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/icon-button","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23c2b943b0c07199cc83d65f51c9e45f9b5f6909","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.00dfbf6be.0.tgz","fileCount":37,"integrity":"sha512-H5ILV8MqqfhG9HzFRPZBV6Xeavnxrq7rHrlt2+bMIZqQL5eS9aHPr0FMJAx1anYRZquTASYv3Tyy4KTAeb+YYg==","signatures":[{"sig":"MEUCIG3LBa2iibOzUtmX/zsC0/A8WZ7rm+jshXrg7qFmHfXsAiEAvrb8Y0pPVR2UdyHT/OijT5PRQTMYh6SPN8nFRSD0q+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfo3CRA9TVsSAnZWagAAlh0QAJXsfkpw0HvxpJqFF4Z4\nzRF5FRxnwePbRqQeqpUV6fOYESOYaLS6aX0tWL+lzY7e68zXY0Db1Sf+4/6g\nTy54KeqIqZ5itrQ5Idohn31EAdQNL6597aS3dTmAoTceqi+jrJo4shYFlUoA\nUnxCQOmHb84QCseoPsZXDi2BqjiJ7o7ZtQ5qwfuFAuN4xRnGdgjMtG5XijAk\nlV/Gx4b/Beg1ls/nVpIBUVZiW/ay44OyvsfGLpQY9XCb5dlo8WY4BfbYtOY3\nPnoiqmru6cBSFMJvF70KSgsLMFN2l29LQO8u3+ZpXP/3/RLrzL0JI4378Scq\n+OmrSk9JhylxR0+ioT213CH0WEyF09xmGETFHzp2T/0WblTluSmed3rQ05V+\nDJC0BzpX2+A/n4w1JSS6EsqjGZtvNsCjE2a0ggT9S8jbY1cqXJF+FkyW/O/v\nx1lsU8xJuwiXE5sONO0Ih7MOJNc9C6YfNzr7DAI74QdKCd5tVwlxQ0vSFVqQ\nEzlucMfzPZPrZoPHAVE9FQwXuHdPhZUzt6+HcK1MVYDTy2wDoz296UaWiWIP\nUvPzVGb4NlFWX86bOksWTp3ud3j4UBnEOK1N6hVW+1T6LmBKnq6NkVygaifB\nXN/uBAN1yEpA4mkemMmwdrF87DN999CkDEpZ9r95OzK+2ffAos0QuqPrukDR\ns80G\r\n=7d0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/density":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.00dfbf6be.0_1595537975225_0.5041238814022111","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/icon-button","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c56549bf1f2e988f89143ade2c607413ae7f66","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b87e522d2.0.tgz","fileCount":37,"integrity":"sha512-2gx0Ry0+z9YnhjVgI5T84BSKGYz7bGkGrgsb2GkMxHZSn1x7y0V4vxivBJG2JZLUuChmoCRlELAjksuaiVGTMA==","signatures":[{"sig":"MEQCICLZ1TzYc0Z/vTPrkuSN+AP2eHZUjH7LU4VgoYqz+AKkAiB+jt7DSqLaW2WJ4tUHLRJDShT/HRNN93iPd/gui2mU+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/dCRA9TVsSAnZWagAA+fwP/Ah5hGoVwzUYO3uGvmjc\nKGrd9C0RQa/48duN4prmfYgnjSodd7qne927rjRBRk72UGoc1rDyO2KhJPVM\nlhY5TmMgM9vxXP0Wgce0PHhG8L4A3LGaMnaP8jOWxpyebKyepWIdX09ircfd\nWs5msOI9quKZYbHmKPA8eElIq3LKA5x+Y2CdWKGLNn6KK6CA/af/VQG8Vz6y\n+Lac+tbPsSIMV4MNBAwi0+kcSHb9HreaQnsOw7FMqUG8ofJpUzSP/fLWl/X/\nQcKEQ9+tCKsZda2xgBANJ2irzyTUJaZglJL6DPqUIn1Hj/h/TcTcJqG05Lsf\nvIvIE8fsRdTLwQlqRODVc3YYP72f+mgI9eIV7Xh7ImKcVyQ5e6wjAKoOSAb/\npoXYiZ2h8e77UPql0e5EskzMUjnJ1AW5b1xQQ6+TQ4KsuOXr2H+cDeYo4WXM\nFl6Av5t3pL2YQaIqQtuyy+W7lFbtyNyM7ies2I82QX0x+WDizJCvikKy2uPt\n/s0EVVhpvjzsHOfwxrh+cANMHWZWN6JjdouSGMGfwaTClQbZS+hV6dtDVG/I\n7Rn3f6bO4h5n+gNpyMwMOh0ZGrBNAnSHwPI/OHEEIm0EgARIsURPtp9DahQh\n9IeJDkaSVuRb8dmo7BsfPdoiQikvBHBXp72cjM8G5GXDA7JAhNn8uNeC22D0\n/ltE\r\n=XVdu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/density":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b87e522d2.0_1595539420744_0.3820357109190342","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/icon-button","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e980fa550d7c25ace568f42405cd7dd9123565d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5b3e150e5.0.tgz","fileCount":37,"integrity":"sha512-AOEvZncnJWVfdmcuA1WbylxTaXrTT6SHUL6CTHJnwLIYha9fnYJHUGwwUVAFDE3/g0hV4yLNyx9yxyayOeoRvw==","signatures":[{"sig":"MEYCIQCrxTg5/xN22aRl5aWDhzgNDbvmaUNuWxqVmHkHR8iUwAIhAJXQ0X277gao3ogYHB/d0G0v/w4T9zrW2gg/Sdk8uvFL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgvCRA9TVsSAnZWagAAYJAP/ihgav8stxEhinOtKUGG\nkBiOpu03H5MGxnkuxoSkF8M8rdpuH1KAtAyR7Wi5Mk7gnTPBH6JMR9qCMfAf\nBetqqESUnUFi0EA5TQPZBNdOdMOUZvqeabyUbYrTltQdftWeGKf6/52hk6L9\nYfNehAe69Gb+gIumjuVJ6c5kvExzWC8kgT+MnyWUM5oTvRqwiCxmjqnWUdKA\nHhr1XCNk20snPqqB6MKhwfHlGLgGtusToX86b9Mjd5wsu0GjImMMtDYuk+CE\nKYjCjt2COknGe84Y2m662WvQHmS/rbBEX855mNC2N3ZWkwzLKv2O/mpNyqvU\nDSKw/FNEYtuWh2HOtNigElFRaYIrgpfH8PueWfV/sOFMdnQZNy1Y+4T+wa56\ny8wh2BZqmNJZoeXRYuoq1tTOg2FQ0g6WWvZg942zzm3rAz14QpOFXila7Yfy\ncJpb6z3SFrubsj+8S5Kh4QSOiRjHaAhlA4YNr/NrX1vDftyzGMtiJF7mpIan\nMzkkh0uv+mhasG67k+ymIxoiyGLl0GySFvfUkpZRfYjNFq2YNkPDZYarrUcE\nA1AnsAqEhHPqc9657aQeNRsIDKMc4MRiKFdoawTE+fihho70nA6r65IX6IPR\nk/XBeFwr+Jj0DTVyCmmxneIXuNm9qeMwU6JpL/0XmUzBGUwysGbb4zd+w3mo\nspwy\r\n=/Unc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/density":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5b3e150e5.0_1595553839137_0.17824323343225146","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/icon-button","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e1d78edaf3fa4938edb94a4fd20c3acc8253ac8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f0ae11786.0.tgz","fileCount":37,"integrity":"sha512-5dr/mknovwWsjl1ecHx3nSYC/tIkc9U4J1nXDD6z0m0TWc/U3zYcQGg8cnmfvJHA275/gHTWhuTlh/Ix+0IDGw==","signatures":[{"sig":"MEUCIEDV4AS3BE/YBuvb0mw9PwFF+nmZhGC7jCuuX1PP3FJ4AiEAsHaPWC7tlv5H2TNKmrdPl+PqnfKPm+2a1JENNqgx/6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzLCRA9TVsSAnZWagAAcZMP/RdpjkAqtEKbpHIXbc7g\nUQqN1DbQ/wXyK73IfgQzG4LoPqLM+se+jcvaccRTVJoTBaQQSO8AwqaPju4i\nzj4OTSMsFt/rg3GWLDyKMIIVfG8qQD17qE8IQCUinfKWt0alFYdlxGuwwwLO\nPX4YQqXbKnnLSTSav/etaUS6X2kAGpLMe5CSmIc04IG3G+kjH2xWxTHjJQw5\nxQehIoaHlsUaoYKGsE9nySVQxzAOlSINDkMkIKL4thqrNCrjWCiZXJ/M8Di7\ne1tw6UODalAKyuhUkuTfCScIFsldvn5F4JJ+683Yqo2KBlU96q7qcLK+Ug0x\nnBpAfX3w5oP6lA8S1egkmyh4rLh3CwJzyupUcaI2ld4hWIk0I1HDTvK+5bWr\nv9b/xSmLED/zDYJ9cG0OK9pwBLk3kPRAiceChF/deaiOVQtH8NeVekiOJneE\nyRyiXlhHcu4ZZom3Y7ZCzM5yHrsurhR7hp2KyOL0WGfldFsuz4440irQz62j\ns4BvwKf2vEUboth2p95Ur4cilCziUK7mm+DnJ7/NDAjbfsazI1zckjv5ex05\n4bqC70MT4xkuaw5UBYrS+8R57tnwXhYHgG0fTgEs6rZjLRYof+renVdDIb/h\nR5/W1nRTDk6yxW1epxq+UBzwm6GFQOSjMR0QySmQEVydCtQneZ9/6NtnOeoP\n4MlL\r\n=7cs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/density":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f0ae11786.0_1595555018988_0.6425325273320328","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/icon-button","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32340308e201278ae85b10944d4683b2e8fd60a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":37,"integrity":"sha512-n39tinWcz1x+dFkh1B6Gc6GW07mE9rcKcYDcB3JpfL224mYOrfz0B6yAMpmjHyg13K3GqeceUrwLXlwFFR2iVQ==","signatures":[{"sig":"MEUCIE2PfiTWtl7jyOW8O7Cyw/Uv6OOjUfwiE+qPNFZ/Ge2mAiEA23gGK/uu3c+OrZKaTii9t6vRLrkEoN+VJti1PWySJqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMoCRA9TVsSAnZWagAACjoP/1QC4UeBF4g1YApRet1Q\nG9Ef4D0eUAO5gFt6+MhapY0mvfDO5qK61tzHlkia65ZiNZbxhO1zQkaT3of7\n8qd1ED8RFV5GLosWK5z1XD8JFGNkvSJh5qf97fA6O+HIl6NDqFWzh9eHRQfK\nG9rI8SzRZbC2f0BIi3aotwobxLHNePu+Tl0T6nX6N6pUn6RFay1BgDhselqi\ndwiS1zlQ1ucNwS6xoX4MiGkTZZX/iSGkfdIuDt/gr6Cg30TscMEfzuRw40SY\nrXSQ5LCWBoiVWw0nHCv9lsZpvPnzGs87juBZkMcXa0EBRwD8H/lD12sEyqFh\n4ENo4cS4G5okjuTC9Pzcnl5kK5BnGMLUc+3op3tWJ2aSurWv3k8FMKDt1ySD\np1z0+jezklkFOcmgPNh+QP9PEKkI/VvSxEHBcfSTC3NK6MKy5dr40oXX5yGu\nOgefNTXymxsqtmlSvOxchQGGMCuI9/kGiFkKVMSkZh3cloX+8+/P/lSqAuAB\nPeaisUtIuELEDB+tfOzae77JymuNi2rbr2u9gdacCr/cno7bIboEAQd4qjdK\nbBnv6OXclBq8az3uVueCIRJCj04u3j76w9TmJ2E3All+41GdCMR/Lm0gV9gy\nnMEUIwCDnhCbiR2tVDCthrSgAccaVH6noUIvcIFAi4Z3rjuUCcieiaI3woWo\nbdDt\r\n=u+Sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/density":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fb4ee66c0.0_1595556648444_0.9580008239651989","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/icon-button","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f1e7678e211cd8f0d6246977a5e0126c08db647","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5511e0aeb.0.tgz","fileCount":37,"integrity":"sha512-YSM7HFLZ95Zw4cTDkwLUgQuupzb7C13lfhhAAlz05oIdYtG7iNbmaysnBq8+sqKC4HmK4MNEaXsPT429FNCgPg==","signatures":[{"sig":"MEYCIQCJiHS9GjetPIsBck0GUxIPxZKgbQn9ZiWkzoNrXoly4gIhAPDXEuY7nQHz63wY3vNRSNUhFK4QfDJNhcULDfm24cd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLUCRA9TVsSAnZWagAA9nsQAJh5mC11CWIzWN7yD4Iw\n86E2ZmHKDq06UTFsH0yik4psBFgitKPFpKxKgeSoSUvT/TbKZBf9GWsqsJfz\nn8+/6O7oPUIUbIG+l7OEcMqq0npm8uFV951Y/R3A5BIjbIKXWa6iQBekAjvM\n65A5gBfQ9tF79DWkrPneAMP5dQyaJpiqO6FyJuIBC05kyInligT8Z9lxM0F9\nBXrq7uFHtaSlNHKe3mJjQi525darMK7NIUKIrKzBn2P/t7XX5Z5goELlDYLl\nSHxIH1cHpRqgbBIZ8dygq4ie2XV5UJqpLkFUwLo+hO7zSqLOyLDZ+kGYHEFw\nsrreYs+AQ+XLnvLBDVjuc0vlWXSrIYYbWzrb3BvRzUSvQ5xLESImU+yPu1dG\nJ/WHsGzSJ+eA3MV39c3+svFSQnwu2PhPnOaGfXcGoJosRJC/B5mahWdrEuU1\n9fiLQUKzcgCnF2009krIB8iAYN5mYXbVFioak5F3OLt47/64vhIiOEOdL7vC\nWrO9JDEcpDUyQNupUhkE0rO1EJPbCkFlDOkvv3bz00GuQ/lDOHh7zbIvFFiQ\npexeqspTxMlNcFpCLUly8UQex+WPSjQ9lngU6Ka5UmgBNANvMUj6beTWzGtu\nd8KFWA+B4GZNpG7j/wNr75o0jwXi0odR1q0vBzlyr7wQufg9aKV4uskg7Cvj\nJk7/\r\n=/jid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/density":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5511e0aeb.0_1595609812160_0.9271289179595632","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/icon-button","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f61e6de4bfa3dbb85cd8e57d5b11fbe659af758","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.8388a9bf6.0.tgz","fileCount":37,"integrity":"sha512-oXl2KvZrEAjvr+y5zX+QppmofW99+S0qYajywzXg15IG8KM3cr3VZEyLr4RNeJzTkqG4Dsmxg1MytnmPt1Bm1A==","signatures":[{"sig":"MEUCIFf4PRiUFi/cIbSwsN/Wohd1ZkpgBDDoDdAcmn90J+j+AiEAjqXsOi1el9Kk0xi6WXTnsSSbrZ6pNHJjx76TyZ3Tzj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DdCRA9TVsSAnZWagAAiDIQAJF+Sp1nA8Zal3J0ZU3E\n7+UW0rLixoRisVPb4LODVYvNYBjufHn5SJpZf45FcXiSUf8DmhvZcsTo3t2i\nNRW4o5WBNBhDOikpo6fuRRRBd4+9aZcmstsETTKIe9UZ/FLoPitKaPnTcxd5\npb6bZwBsFkoPMZhvcQUf12PruQfD+fwHS3IfKhcE7wiihqQpAIZm4CLT4ntu\nCCQEHtzzTiKygSA5U2+GKL6pr7Pber8UZmeiudF25+WSwVZoGSRCngduE+Iw\nSPxbqwPxFjMG3ff2AzEscFsdeJjNrKWzy5JtaXE8JRiDWMYQltVZucWXsqlm\n/aIsAhXzFKKpWAXou8lt4Ln+Tx1YEVQIWF8kKe5oGqkZmRBvpYq7/QTRoI3j\n83s7o9izwBmHO7nYkQgKR9kMveCr3s40Rk84vfHy3ZYdiDB2H33Yb4+vGRfO\nvitJAP9BN2quoTSKjO6s3W19+Pyi1lx5EDGC3Z2xkr4h+XzMXaNDzxX3wseg\nRwnqjJEI2gSi3nZpffqSUYI8vygENo1omVU9E63XMk5DnnuCKGBXHnnjzhPq\nXw6flpkPng0L+QZpdhX/r0tW705LEUcY3S6+9F+BLkwrbqCahDfZSOwgwz5f\nb1sWsttWsR9qpA5xOTVFjc0qDiId+rwyVKT1sgQRTq7e6K09xsOFoJGoEG2I\n4diE\r\n=EnvP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/density":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.8388a9bf6.0_1595621597210_0.1378273135041297","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/icon-button","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb5144904416d0dd2032fcf688752effdc3ae2d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ac405eae1.0.tgz","fileCount":37,"integrity":"sha512-undftVDXD6P1EFH22lp7ovOmApbuZUNrtkgdMwZwm0lk742BwzYSQn09aekdDV40cXp2wOBET+ySIoOn8ajgKA==","signatures":[{"sig":"MEYCIQCiRWR5gl5kkMmIonyydhhle7pvWS4gORMJM9MkbQwSZQIhAKF3vUulMnx4CBjxH8GbVkshLIE/8WMQ6/sJ3XJUa1Dy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu12CRA9TVsSAnZWagAAor8P/Anxa6chcRLgTG8IywQn\nIC37tcpK+V21DUgV3LPQjbhDDTu3F0cmyuUALVlCIPY9O8tdZzLsT15+nMMK\nVvKOpUgeKQyYCn1q7duYijsJFk2UNPw83F+IlzcRgLhFAk+MxA1txAevKw7/\ngJL4GYJvtCyjXnt8Q/wgZBwA+Q9/nG92gCaDvNhU8xZrxmAhzuSlplduqvRp\n0pY22BKCoA/FHPMJvuC1aLOJue8Qho5pKxqMNzXWXRaZRvC6W/Y6HzOYw004\n0MEv9T1tAc333LEqjFX5xb1O7UITWbYPlipbJ3tunNRUoiKqW7lTVUzKu57w\nsKXorTjv8ZmFjTapWTPxnBpNu+EaqausML3iKVGHbMxoaYqcwG4RM21V0cxY\nrbpc3zIJBurg7N0wyFVFEkbrlSRdMqzhpVwLptISeRh+R1qv7OmnZ+EZ6Ad4\n7e/XEj+vVjxjIhKCASpp94T2udtkwYhhmUXpw8z3L7UggBOCgz1eBbtvWKDf\niV9WWWdTKx32CT463FDK3ndt6rRVZScSjJdMpeJEGQU9fRHUerzDJjhZZsRz\nzQvNU6exSXuAi/+y/GZ3ADUDtxEZfkIf++uI6n/CZWLX7dhFssZfUasBdLXz\nbXYGMcYoDHzHwiAnnw7wVYZZmMIoIVqdYbZdxcPYKx033yUyRnrB3FwWla81\nxfzp\r\n=oavx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/density":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ac405eae1.0_1595862389786_0.4876138679736499","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/icon-button","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9b4793d9d67d842b0ddb37f4d5f8198754dfe4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.75553837c.0.tgz","fileCount":37,"integrity":"sha512-J7+If3HD7o8mukdhJv6Td3/plObti9l6T0rBybpkzsHm0s+vOqqWTj1dnd0FrS8AcX8Q/15zMSAfaGoROu2J6g==","signatures":[{"sig":"MEUCIQChluHBQ9UzjvuH3OaM6g25S90+TJMClfXzXtkQUkMuLQIgbufIGwm/c8Xxbonco3VOZJNJ6tM2qT0vPs0/9b2d+k0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7dCRA9TVsSAnZWagAA8ygP/REMxtCDO9aHao3Fr4Wl\nc3pvPri9VkV4w7NdNbfU8WQVy+TmTfISBiD8miIC2fHm0saI9o9+XEwE8kwC\nhP1bxKxd7fowu7VajJsHWAJ0GND3yqMpLr7J4k+ucgKD1I7S2Qfzmh6QDVcc\n5W6L986QJ4uFbx2dpEKpuG5OsXNtLWyxh0mQAUOE6tDqqQAnkZQ2fQQlUGP2\nPSWLrC/t0Dap9jLEU8lnRi9YbYckzSAwq+ZE+V4m8vJZfXxnEg3QmN+0DKRb\nphk1HCzjEBTw9N1VOnVOcYZXC/UjhKI9ZF+l12K5u6Fg1LCfyCSEaCNHZND+\nsNNGja3X0o96mtrn5gmr3UkR0RaWT5M0/rIcDEI4+hNWssEYyZwvVwUJFxVm\nxk6Sc3UwAIoLjiOhNBCNPaeYxF31Dz1RHUU6xcC0XyrtWQLdjHOxrxzg5VBC\ncMH4F0TIIXdxQOJcdz4s460m24FkAv7HfX4KCVRK4oH1VFLfcxWTyEXwU4L3\nzGUJIVVSbNGIFPcD8YjnROYtUHnPI6rYPYpdY5aOiToS26Sff180u6JAhmtC\nvdcSj2e6rED+rPimEPsgzCOEvuJ7R1PW3n+dOzM0oe5JpNNGJslY1ARi/0VP\nbNQRh1F6EL0jJmfg3mGFWPAOYYJNtU+5sOceVVNT+VY+VS61GIi41Cra8k2M\noopB\r\n=C5CW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/density":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.75553837c.0_1595862748628_0.026038078270682385","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/icon-button","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfa25431f0b87e5fb2c87a02c4a355e30d2ac271","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":37,"integrity":"sha512-zPmJ7zX4Ezvc85/b6utjnSr3kR+ZsfR94iGpxL561M4P6PQcQ1uBTGEQLTIewZLp4JVCWHxmklCYhE1DBFQmag==","signatures":[{"sig":"MEUCIQDgOqUbm1tWXbbfzg7dBO8k6Xq9MN7WBdziOPQQ6ADPHwIgSYkfx0T6zOhf69NTM0iNLluK3qFirBPTeikai3E1qKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTcCRA9TVsSAnZWagAAcr4P/jvHD3vWCzKSkCcq5o02\ndhx7vPW25iBWuaCpZ3SvlDeT6HHB3VCU65+OmTRz9jg7J0CNpGLHQRO+WpUN\nkLDJ3wp1DRT+ZD/9YMY5sDC/OiZPW/03sARJdc8xRplYJusbi7/57qOOdyMH\n9KWPAMLzOjAr8qyPWIMD5oTYmFVmhODF+z/qQxJIntycFZxAFG1Cfg5iRhaW\nxu/bHQtI0w32sD9fZuFrYF1AMuPIBgsYuQxGFPe1MKX9noDD06lVSpx07m5R\nASsgzQwGyHeS2siklU7/UUdjb7OEIhT3/qOofKVKEa1GM57GfWwD7eKw6Vcp\n47eJuhRuEn/QK5btONzLiIU9ou3pLwuVdc1bx3/QOe6pDysdG29Tc1JGq2pr\ntPrW/cVF0cVK/M/NQxKVRLkIXUQF26+ezBBch9cGVPNT2u1gwxKvULTprslH\nMmePdQBjwm1OWl9rNptAATMA473evD34EIywDzxV/FB+MxXxqvkpC9KJeGwn\nvH3Sz8Wsi65tOEWHIIzbgVTFZpR91BHU61ntXHlpiwNAxA8MKR8B1MzdzRJe\nNU8jawn9I8Vo3PXuyKtwGm+SJ2v7dGmHt9OlzO+OB6WH4XvPVXZaBOW23W7t\nROa8qvzAvlIB2/jrwPhumB+a2iOTLxLICWMku0sxw46gd8scLo9xzMnVfe5v\nx+7i\r\n=xpPL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/density":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b96fbfc7a.0_1595864283729_0.10838543012588064","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/icon-button","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdfe50a7d81f69b21871b3163f372ae23e3617d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.61f1a8d85.0.tgz","fileCount":37,"integrity":"sha512-sZjoBtg/7CyCq1L4F1NT6m8rDo3WIl5ZAqvE2Sg2R6jovSu7tcscdp53HzkXCUAr0ZSwf+GT9JVTF5BDNYNgDQ==","signatures":[{"sig":"MEQCIBQA4nPdaMka3s0Lbf17XaBgYlfvL8huBaVXjtK786QIAiAoZ87W5tG0WzZBQTnF215FprtEjDwJZGWk6vGFlSE+nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvb8CRA9TVsSAnZWagAAa00P/AsO3wK2USSfxx/K2L8a\ntHrFrabszLvU3laEbcz9WzUraSnFb9GYK+p9wLmEWCNs3zaH3pIi/eCpSeK+\n/eZddzhy/FIsAEH+ATjYaoQ73L+sgb2g68SJOh+TwNgeNfdSOUdTB6RQO7AD\n5njWIAvc2TycYYsjzlWwk35EDRxTemRzcKFLxKkzW9DpztnNIneSytpMBwdB\nd8HHYcYm6tkaIMuOyGbkY77uclR2hwfMfdR7GB9iYmhNeFzPoHhhJ9NR/6Uz\nJE7irKCc5OVE+lH5FS3xcgTNP/yTfMhk0SL+rpl3nV/d3hYH5oF7mcnJ3q7l\nDac3hG4hs43lYstHBHhgeWuAfRdCtoLPMlCXGTGvDf9wX3jphjnFSQu2ns9u\n9B45DF2OWtHyVrMGZcfhTN3R3p75NFIrqWBCMj4DU8mHrJtCY33/XxfgRl9Q\nqga2bJp7KQjKL0Vxt1M2Pw9HZglYQNql4DlMKT8voi2OSyX7s9gepzLsiJKg\nwVZMHSEqphFK8hyevY+qEu0XAgqO78F3/9PKX8EB+uSWj8cWxaeAyFcAZRCf\n1M3ZdqI+E0+OB3onM2OBUGLJaHYStYHYuRUg5tOdUSZHAc8BJB98H5m0k4Rz\n3Vx/XFh+HOQRtcTNsUkSyHciDQHEDE6UHF1sNTvh4E/hSIlYOWHLuuyAM8LI\nAlV1\r\n=NMma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/density":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.61f1a8d85.0_1595864828271_0.8220829237392464","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/icon-button","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed2b374458e9aab10cd58aeab91dc15b86b9b6a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.81dc33377.0.tgz","fileCount":37,"integrity":"sha512-WSATA4eZ1IpGItMjjU4H0UZ3Zl5rjkusrqbTahQrYCmT9umHSDC2o0Yt0GIU4q49TY9tNdJKOMlSTuFe5+AS5A==","signatures":[{"sig":"MEYCIQDtYeJEw7wsB6fJD6bFGhixgLAgEanZwXbE9Kf/5IDeaQIhAJJs4HAubXCuzL4Olgkm+797Ys+fj4+LVmieM2RgcZtG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnTCRA9TVsSAnZWagAAbaAQAJPKsuMyrnnujvJWuTc4\n/+cK2HSmYUNPDPX286bNKwcKIVnixQZNjjaAFdMtzNYNWAr2TGvC+J2UThL/\nLgKbzmlqS/YVn4Z3wsWojj5BzutegIobpcEmLTJ+h1KL81z8wqq82BP7jarV\nhy/O3gUUVBp+DTL8Tu+LuUz007i6lnOvS/jaFcGI9KTiFIYbRrrYHhchvRVR\n4VnM03U+hQNW98++YSf+xtTS41G2clGCkNl+odJJ8QmdnP8LPJ83cH3kJwcg\nrksfoRFweRd1YUD0do2mkgtGpmgNYwyCzTMff7AqutRGD5tAUlajXJ+bRI1Y\nnJgOB53Ayfd7tijXPBRBjefhRodv54P4G4k9dt6BxF9qbmtsl0z6n4Kfa6gG\n130iu98OJxmeBppdT8EZgOdKLc0kf7zjgx56E0Iir5csVWBjgGZwcS+tAdr2\n3ztgLyGN9AhiWwA/r8BtcaG+jGxmVc5TrZe5YL3tJldFsZf5Fo8UGoO2+IQ/\nanrfyTbdbhpDFDJ5A0MSObZx9pjBn2mKqO6xuArtH97xAlk/OrWI63rGLPRa\nj/fPOsWK2f5GEIxHxvgCWWWqAldyKY001ejNn1uuIgZFrKzszEPUfCA0BeRT\n6CoDqFi5/rWroxRhiwfiYh5qaI+L23lzJ0ntFN3V3RYplrZEBBjxkEWXKPxa\nMcps\r\n=RZIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/density":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.81dc33377.0_1595865555286_0.29367592101828","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/icon-button","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efb1d91de899c01c94ef5f519ca532ed79e5a20d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ffd9ede58.0.tgz","fileCount":37,"integrity":"sha512-GkOYhxEy+Mlfbr/nAx2+wzNX/oiRsYqxxTKZoZknnRh6d20qlYA3l++oMTfMeh9qyQEcc81bl1PacGZ/AZLeQA==","signatures":[{"sig":"MEYCIQD0N2O8nM0wG2ZZ2j36zp7MNcd9DyZr6FbPIPy6QdK3UAIhALgfHHIHeHi6HJ1g5E+sWKeoswaJ8xUR16CYCg3LxyQs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGgCRA9TVsSAnZWagAAW84QAIYziBtGQ49COc3qsyYL\nvB9xoW268l4zlEFtMtkYswGaKUpyBWKTeoK3Ed/fOjsuLDuiFvrBoRag0QnK\nF7HzFLZdgddjMn5jON4/Xw/DthDlGIInLGBs5kPTMAA6nlf2iFq0NPfR4qQc\ndZqzqH/cA4MA3ogUXDfB52ZmqO7x1MvSi84SNI7DkXjK1nGn+mIyd15miLlS\nh0qsxC2XDHv16RQCuwvgwwDwWitxuOlWQpqZVEYzOYsOHhp3TuAXTFkXH+jS\no+yALqu8oDeiwbRLoyjl1j3jhloP7FBEzplYMLzCswDNuLK4+/jCEA7lfIad\nVpOaeSBTxNgILBqdoswvv3l6djUqvtTR1sjrQv/b6faNk7Wo8euWaDKttL76\nfr0v+NXKNEtmJ7EmRob5xkTp5Zar5VefkZX0A75Ikzf6ugauwvtWUgm8Jed2\nPg5aQRWqMJj/tIn4vFWY7DyxOh/ERa/ATm+2/zsv6JJbOE2oribeik+YeSg+\nkIk/G4oHuMPlAbWaa5elhTzoRP27FlryVDX8FYwki4FeTQeKaIvIWDST8CxF\ngwH97F7KZ4Zsv+L6R+X3gCRwVwN78yzQ37v6aU+YwK1D7cTGP0pmYRimCM3Q\nBNLHjge+lPQxC50MZzw1fAfJLxzt6jmJhYGniihltA7K1Kj87GY9WDkv4yFe\nw9nW\r\n=qtJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/density":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ffd9ede58.0_1595867552490_0.1291768957741708","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/icon-button","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82216d8e1478e68dca04d8ec6ef3048a35063707","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.52dc55acf.0.tgz","fileCount":37,"integrity":"sha512-2REBN1jt1EtNA4NxUk7O64262twtYufo7H9L0/lYA2R8fd+E7F0wxsL9F4LMsgGkAGK8vjdvhCsaT8Yvk4Udkg==","signatures":[{"sig":"MEUCIEQnQUPHvcdTBw+gLxtJloyyB3RqQm4H2et4+2AFc+IDAiEAtlkewXg3pXDze3tO2aCJLK/7dtM9XmAQjS6xS7x192k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoRCRA9TVsSAnZWagAADQwP/ReV9f+6aev5sr0M9HZT\nCB7bGpHF6RDoMFwDl+VTiGBBpxgDrjLX6Ulh8MSkzH/48roWJr3Of/HwHLm0\nh0ltrjjao4eZqH3MB5ef6T4NeU5G8LxaXGcvUnIyDWOXNk37Jdy3BotanHTh\nlFFxBSsPlIZAKP2Xsk6QITzBpdhCE0hWqYWwTKCRVh1BnKuxq9yeHJBotdGF\nXHT15QWIyzol1FhZ9IFKxLCSyy0CcUKSw/G2Iij6yQjDkeXgHP/8ZCCmCoEz\nlubq+yf+oAwy2JGI8m+4rJBdk6+RopD8r0MF75X6ksCCdfcIETabbTo+zQiz\nDlMeRXZVgv1JecEpIXrDxUNGm4WIRyQXa/SDEBEQZc+YyoAUHmQHOKZ+jzbb\nGXXxv6Ob9EkJI0VMrF9u+oKevyjCAvYps68IM9GE+TbOsYYZzLVpIvLRWgD5\nyCk7tTuVG0afalGj0D13NzG8H+FeVVjY3s2Sc1QO4upLN2QVrOpB738LeHVa\nX6FwLYT8b0A0ejxmc69iejaSG+71WRu64lTbwv8hc5KMeApeAKKJj/F2o16p\njvqcJaLByiNCtWsh6gFMb2s1TUGRWcyP6ljSqchW6AxP8LtzuytwHfdeOu3m\nbEzfPrkdS/rdjUZaic8h6PSddMBWiAlbqvaXMDIfGnL98ywz16770L3GmVzW\nW+5m\r\n=69Ft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/density":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.52dc55acf.0_1595869713158_0.28404248489486617","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/icon-button","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5292eb8a130a15657d80348e0bd83fbcb22db8ad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d4274ff05.0.tgz","fileCount":37,"integrity":"sha512-AEJ0wZ7bih669Q1H5o2pSm3Xm4Fk76Q9o667SkIVNvYnwoB+QmAgzeHoPztLvt0R4AG3XUXaMlIbuS9UrpHSPA==","signatures":[{"sig":"MEUCIEH7DeIY6dWYkdjaoBLAEea0gc47TYjx/rHWH90V5Yw4AiEAhXhZhSTghCDi/3VWunnkR8BDxxM0mpbhvtxFx5XXtek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBHCRA9TVsSAnZWagAA84cP/j83C5k8xQ+ODhuOr/69\nDEx4/TfiTcCIVPSct1hNgAJ/vxYtLEKmbq4gjUwXAc9FzXjyB5TRJFAzxb+E\n4gyQJS4vvyfvvMdxeyVF4B6/91PtsJSLoU4BQgQJkBWKZ6LnIVKyCexNQ5ei\nonizc2k3ireQXNgsDNgoO7omr8t8PzfeOlN5L9gDBMtogDNgvMaCWhrykLtV\nN0E2Z+xabn3gCLBCYjB6TXK/ZAF/7Mlv7Le6nGa8OlZT81JuBLnXTjashvVN\nwBWFTbWNnyGRP7CH3x44k3K93g+C4neBg880LD4OADC16K2jbzj6IEPDJfih\nGCc3JBqDjF8+ZoDEGHaxGv2gGZkuqZUbUdOHswvptL3BXrU/ExLs1Pym6KJ2\nFogdwGQtiTyORxGRKlODF3BK5wQbJ8EiPIceBAhYOES06AnAPyJoc08oxb4I\nZn717gpn4RQ3ttto33vqh0t7AKYEGuJ85sco8vMwYlQeDRzLHuZKBpCqu+XW\nVxXI6I5CChEeaQvOtdyd9SliWlind8znqH0wC1RWWHSNVH3C347dNWuaRJQk\njZl4xljwrAL3bUoUkxesgxu1FXM2uIb4Av1+aBE9Ugv19S+PswAuT40FN//9\nIdxR+UybyVBELkPqtKG7qjoSewm2k4o7uKg3Ss/hLCEBqkQ03wByQdM7+Ead\nd28U\r\n=OEGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/density":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d4274ff05.0_1595879494685_0.9464989471451108","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/icon-button","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8caec0e2275e5b9fd32bd8cb4b54595f6fd22df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b82d0696d.0.tgz","fileCount":37,"integrity":"sha512-Qr4Dw1g69wRABPl4nu5tAhFNfKhh+7yAB6vdVtPYBRFBdCXz58Qbe6Tkn3Lx7wTDqLF+Y1tE4XKZSeMmdqe45g==","signatures":[{"sig":"MEYCIQDwMdjhn4+cFJbJD2XcYgN80xZ7BiVHC14rP/PAL9KjZgIhALrh283U+yn/fciFFg9H2UM7WsUP3vSFMjRP3rCn1W+u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHNCRA9TVsSAnZWagAA698P/3qJq5+Qj3FHg7uFHn4e\n7ilIJjCZFyHKqoxdr2lWP+BZn16HIvcHQRah3SoZdS6pnZkqyhk4o8R8LoV4\nMpt8EfoPiHqmnguxRyfO72KoYvKCw3eFc2p4g0XgXtyG0NgK3KCCHfaolPhQ\ne1Ls3R7YLhPRaxeuPCUTTpod+3jSYNN9qwzZE0QlVhe57SasbBTm1YfIIb4P\nGUOvg9bVB18vp44OSN53NRSCoFECYjhBSgAIxmcJ2Bb0xuvTNDNUpMVVm+vy\nRNVEH2EwQsXAPKI7DYFYAs2TiQ1kbB64XA91zxRYXgZ6MO/pBUGLV8TsGtlV\n3uzJZ2OaLfwwpMzoIodicSz2XXXvjIwwz4eVxKNqf7x1N/vlpZY6XOdlI4gq\nV4hDrkN+PVsXOZROlo48PGNIHUJVlK0q3ZmZYCLHlQnyzoflg2JEWF/dGZb3\nlE7th/HLdpPQNUTXQeWsJ+ELvV6pNVlOtpGdi5KKhNZWIwPW4aioNXG8AyFY\nVul7wes4Wfyl+d5hrUy1E240vmWyxJ8zV+8g9La056ganuJQ5M94FpnkXjTV\nQdl34bP64Uam6eSrTZFeWmgmfCQFDyeCoOu1SY9pICDNtToNK384RK7jv2IT\nrOIESPyY5JiMNlw4j+Un6BGAQem79PRv74QEHQ2jzOEQ6l4yE8jXrM4vuFh/\nQVxs\r\n=eiSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/density":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b82d0696d.0_1595879885037_0.9134519995306993","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/icon-button","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f58b42b4ae228b02bac964a137426c3390d7e353","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c2852000d.0.tgz","fileCount":37,"integrity":"sha512-y/j4yyIjRMDVoHdFU2B+rHIdsMVWoeZQI6o2XZfQcXSmyHtZsmxDZ9OiOk3iYQZSMoErFtlI9Gp1jFsVqLzxZg==","signatures":[{"sig":"MEQCIGhzKo8/on4Ge0UenVR1olYdgdDRsQhvPf884bsskIetAiB7ZmGl0KiIi0p9IuXD06ULBs2RoecY3ZhTc8h6OTT3aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/tCRA9TVsSAnZWagAARoEP/jWSVWLIzq+75qMWK82a\nkhhoN5YC7ydPaK5VM+ToFnIf9Cf1laSN8moEL+jzLZGk9o8QVyRPhvidVPch\n0RTCEGHMB5xeuQsIpVS72zkb70hecd0cHpCcfUxaKdkHhSj+qM4/+EAofCRo\nJgLUyS4BvR3HkCuO+l+vwz8M0a2Gl3pPZCZMSG8yNWRR9Yferygx7WjsOn6U\nGPeHJ+FeStpUc2a1d0vWpUiA08TMIKAsYX5V0n3Q/RPoLRIsItg/gqCbJc+Y\nRQkg/iPBtOxMEVqAIAAyXyetkMLrYu2T23RtyBuxwnLVNOmcpB1Waus2O8vC\nDQSFYsBZIzI++F95oAfuNoZ8yuAvyaAAROwCKlfRwHCQl7j1XsfIpEG6+k5N\nF8q8gEf9UZEM2l3nad+n1cvmcHuupQZ6Q5yq0ms7cgr/YyLq199CpqIvH5Jp\nkjRb7QooloX3Kl0+6DQigAN++71bnRILQT3tHELU0CHK3jZi06Wo1s9FuhoY\nyQtJb1ET/EU8qai9RPL7Tu5OmLmkwV9k/yr5HPs3p3m+9OZBeGV/fWyf5Z+S\ni8II2dadQk1ijqN57vXFmb+T6RWIpO/XwOSv+cIjysbZ5WCbWnH6ppp+nKKc\ntXM+phMoRdink29SSDhV+YjnJSbdlD066g5h83q2Zh0YEDI/uyG2iK3u1S8S\njgF6\r\n=m95e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/density":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c2852000d.0_1595883501096_0.5218376970944492","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/icon-button","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06d6568437a53b6f102e8d69bc173a135ea71bae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f86f83f54.0.tgz","fileCount":37,"integrity":"sha512-mzTK32kFKgOxuhAoxxnumXUx1tgPjoBUuSDyh4YyO8gK19oDthjuESLSsnCEo3M9ZjVthmQauzajOukMtakUYA==","signatures":[{"sig":"MEYCIQDD/lP0b+ZlSZ+Id/FHSji5ZsKNwKbWVrk7vV3QlBtIKwIhAIGIgkQ2wPr1QElPxm2nee1vf/844qEyEsA2fMiUfwbW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0z+CRA9TVsSAnZWagAA/roP/AoJ3Kma2ODYOqOx9K44\nIu0SLpK/jno8if4pIzESPdZjWqGH+rLV5My0gEcGXq8nSJGVLDXmV1HpLjcg\n2Niy/ntXoSgzY9X2Ihmvx9kRpmv4EAIS5a+p/i8a4J7iUt8FSNKncs9DVehn\nSlVtMhzv6hA0irHCgv+ulQ4gHFN9NyzJvn9QpOeGZs51TxG5SigTlFrTljjI\nVtXyJXqHLlYSkeUFd9BUZDm8IZklvePOZ1bcckT2MnGuK+DNdyknb7JMaUi0\nvagsjHyMDdO425j2N/0gBbokBvhVAjAwgKKEPgES/ygZWT/+uCRWFchEiABv\ndCrGdEbWLvbTL9BsXfa32tatRZNkx7uDyNQD4ezTiPUgGlwnB2Ax2vc+JxhN\nF3uRBy/lbRhrMpsQd05jcsDoyzLsbWwqhxG6jxZmcv5lZNy/QwWJIx9RdyBg\nMxEGyGTenSwb76DaFaLmAlqt46bRRyJNFqa8XDvbEHDVVmGiLM1dWF5+Tzee\na/bJ9JCSmnrF3zTwO2Tv3AMq06ZvFim2le0IxKE3hDRW9FcqcNlPNSFx79Aj\nEyypStH3sw5Lfu6zyrOd50wJ199gTivp783hib3gqHBpERUEwvKXHG61+THJ\nMagKULBKCy05KNqS1Halyu8XABOrhh9mWQTM+GuMRMgf4h3cgUCzgc5C7spp\n8g1W\r\n=7fW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/density":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f86f83f54.0_1595886845722_0.897317102803036","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/icon-button","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbe202bfcb8a51771d9149ac42aa769b431b0cf9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.41eb1684c.0.tgz","fileCount":37,"integrity":"sha512-oK3ex5vEOFWWk08DBa/Bc3ziVWsgKtxFjjKR4dv6Kn+RyPLGGo5KmWW/XClq0NYoXaQ35CFB50FuutHO+nJxJg==","signatures":[{"sig":"MEYCIQDoCFjfe2Jz0KgemyodkA0MM7EF9OWl2BhDYfDdVax5PAIhAL1zEe+4ewJpSjK1J1tQpOx54EbAtaZmtoSr/btithax","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVfCRA9TVsSAnZWagAAs4EP/3ED/vs75okrMyQE4BAg\n21ACeKB1x80KCgUCdBc4V7ba2SDaFmeLBFzane4SWX//aax8plxxYsk7oNnK\n501MQ/y+v6d3j3kKcDLh7hoQRk58MQFksqUSAgLsLXox1PK++0aBg61FIIaY\nIzN+rhP1aadOPGdu2nQhRtJfIuBOZ9pliKwKUd9LiHPPneTJflI1icoCVPkW\nvPg2gj3izujN5e7c708zVajQAvyBjLKl3mVXNKgWrShvMqDgNSkjdgiqLiA6\nLRKkrr2ZwC9dOtPsvbox4B0uryUfBwpyhWyCpFbMlTs/dAI07xAOMd9To7L3\nbpxqt0smtZ4h+3JRYDJfVUbxULh0TGoof7XNxm7f0+VQ4bgotVfaPCNkw87u\nvrZghNIoZmM7pxtrLNov3O4B/WEcmreR3UivKfOOC3MCOokWdL0SxAMzZ4cM\nRKrRzbCCqRKxj0SqBIGWFN8ZOogUvaFmK2S2KtoMeBnPp8PoUO6S1aGPJUjq\nIboeSR9bqE0NZp/LxBcEtQYLs7K0u74gJ4rVE9we07+oG30AAgAgWzoYson8\nqcxxN4Z1Gy8vxMs6EqJsJQ5Y6TG5SQpgOGKCw1Ok+v+g9zF6vdwswsas3QRq\nN02X/ahy+TYJSVeBnQ/2e2hY5vpFwmytr5AmZ3LTU3dm2wQz+x6fNjMF1Nba\n2jty\r\n=fSYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/density":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.41eb1684c.0_1595958622542_0.06302287403012752","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/icon-button","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"558c950a6926b803d84c4fc72f93842dcad9bfda","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.9e2f6c450.0.tgz","fileCount":37,"integrity":"sha512-jOU92z6S8U0PNTEMhfDHDGWoQEuIjtuBjqTTrK0BhZ2JMG1Ol8gLRrfRQybTchfAoPGn/5c9fDsnaRlDLkiPPQ==","signatures":[{"sig":"MEYCIQDCCPJVOiRN4qXnsclR/sSz4sUAZ/x0VzlF3+wUa66P4AIhAKPmdi6IyUaHc3BGjRgAKvqCOmUSCv+u86yfMYgPEgLs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkTCRA9TVsSAnZWagAAU8oQAJh2POSZhZhVFwqUGces\nU9klpRuzOuE0+CvJTEPZoYRK0P1eYox87lsCLkxk2fO3YiC/zELLHLqYP8dz\nKrF1NyJrcUhQhSyc/TQshmsiYmrjc6YPmOf+ACUuRCa0gb4cZVHEeMPHrY4x\nFDQlHEV4B61G8//HcK/h9wae/FzuHr9z0/8lFXobpHqKNUg1xaE2brOCXlYl\n3xWWWBP5N/N8Gw8iSoGY1odVlZhN563lCeP9vrXAXXd+8NPHgaUOHIrLqNgH\n3XRPDwRiXi8OvpMrEG3cZbvAAg9Jx6wk4QxP8U+Nn1QRfq5AC/pGaj+uNheL\nFVRqZgq9aao/qzAQCSlxHqo9ndABzJhGfXjVsw3YDdBjZPQp16ty/nnNLHY5\n5MiZw1cqu6QgOJGfPJQY0eBQIPdAMYvDM7G8qHDHLnRi9dDWI61K8EnxYKhL\n99PzMp5gmsxgT3Buf2uAaaZ8gBvv3keqgHpUS5V9XePGTe+nhA1kSwjtDYJG\n1i5to1zc9fWbnlKvZnotY0B3YualtZ6/cT5M8g+KNNQyZ2oyNhcPCPUTWvi/\n3irNu1WhuTeqXaTTtwVjN8B9YlgKKlVLZYRgEyoTDONuNFq/2MWRlb6lQOIX\nJmAu+rVMXA7Q7ECN1LrieRZ+QbX7gLgdAFs8qOvJBwVirU0wiaIiYdU/CPpI\n7AOH\r\n=sQ/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/density":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.9e2f6c450.0_1595975954725_0.9167489378008176","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/icon-button","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee54b5cac6315a4bfbd87f745f75466df072b3d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e6950b55a.0.tgz","fileCount":37,"integrity":"sha512-ubjSVWc4pxYUcQeL7PxZGaoandfK+V3emKiYHPrP9/qFjwCiVHIqA6kn/kadYv5zrJMwnUWHC01gLAi0DMJ5xA==","signatures":[{"sig":"MEYCIQCBlMMhlcsqSjxzbvgxJi/HuzrJS4LSIJDwGa/qyWsnLwIhAMjRzHarTcPRwKBuRmyC4Xr4kvz03/M4V94Rjk6fR5pw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwpCRA9TVsSAnZWagAAfXIP/AncDutaxFL45Z65IxyP\nDOIYclNvu9EahpjiKlpeL7YSz4eSDQf42mQRKuIahUVh4Q2sOWQBXchrAfZ9\nRq2ORBOIGTiDf6NZ9szfh+PTwmSbupdTmHPYqZ9Djs73WX1p8Mwfu1MED7XV\npvUeaf41FRaLsoyxd3NrqiaOFRMgtfdD0jvDvy8c8hfLR/CjxpfTDUmJjAMf\nIKem1EjRooh7r0rR/doFS3ATW3Tg0GJ42crxBVpjJW0NySbM2EMXw2pteJkZ\nz59fTDSQsD/wFM15pmfveQ2gidd6W4fVX4BixbvcW+HqXBXoaiZVazopJH7I\nNgUPuTf5nwzyJ8NtMorTUEdhig02IpX/mYpDNyS7wGt0nH3tz1ANm3f/AYKl\nunaH15AhdteekCzX8alUyy6ZeLqcd9Hq+hJGpVy5KQU8t2sTz3ZlCHU3iLob\nkEmW+vNDmgG+OEoY1wacYh3LZ/5vKU2nw4HN1VivZ9Wh8pak2GbSuC8ZDSa0\nP5KqDrHOyqs1IfO8zHZbjHcgtizk4h9CrpEpfYphDNYTwpEu2yAlvbB/cnX2\nVjIBznBbxcn5i63DeIrDZY4GqfxgI20YPlHbTInEgXJL8VZwr9MkDepE7GWN\ngyKf96HRpoKe/etjJJMzI2PmzwrR2iF3LpnQvDbkQiJOJTYLqoElmxzAH1Xb\nqwN+\r\n=MrM5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/density":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e6950b55a.0_1595976742124_0.6370941945217088","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/icon-button","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53e52a7333c89f2f1f8b00f591830cd028020270","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5e51ee38e.0.tgz","fileCount":37,"integrity":"sha512-7Lzdg94Nc1KmXKjwY09f/Vv5pRYMphYAT5Q539vsfgpbyOgwFpFMXjQBr++hnBc0J3jmeyubqTjoBJq2lolQjg==","signatures":[{"sig":"MEUCIQC5LoTx8Ik88jUqs6ZbhXQctawQg7ChELY8MisPCHbHIgIgapaTLfxul9IYObw62nlKqnwrKdiTGJkc5Qbh5pK3HGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGsCRA9TVsSAnZWagAAvLkQAKREmbTVymvaVci/RxjX\npW1nYYg3Td40IsHs/dx62o7uTRExQbuq4Sn/eLlFHKwYOO8Kn6SXh1wnD4vL\nqIinSUDEtSAFxT35nFm9L4rovetR8dRcyiR0292zJS8VcIcccKQlPjAPwRQg\nttM/PC9tg3vKL2T6tH832afi0Wc3wZo3pchrPrwDk/4ty2Iu0aogK+brXfdv\npqDDBiPLJgFHASFart+XPJwtSqrb15vJriZwSoFjeX+MMIFdVbH3YTwjc8T5\n6O8yht70JEl5h4ABFjOxKy+XQpMwD6mVf0WWqrpAOIbXewQ4300yEHFn9LC0\nCcVGYRKunYzcwBLaRhcLt2Yhi5lN5Msw0XjQXV4jyj017LnphlL5MDVRYCLO\nY+jTauVBzDLMFLK64M37T+q4iyecaAJEXOzhHG0jWfvsQCIxGFLi8ZwGk0F2\nDm2dF8Osa4QI8YnORG3FKsxusnnMmWZmW+z0nWHPHxkm6nQzOd56eolr90aj\nw8JrbJ1VXtec6gkGClXgpmJJINE9QDJE4JRTNYYL/kRvUeMH1SY2KXR5KO1b\nKxuGqMN8RYjdyr9v5ErGohw2MjDFj/+kk2/T1T7J1fEhCHXNzddW9LPb8+YL\nd7VkOBF9NCI/CEdP1v7m0+A301cfSJSABhr7IUwh2ceDG9mN/bWwf0KMtVrR\n4Odh\r\n=HT5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/density":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5e51ee38e.0_1595978155718_0.9691231085387177","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/icon-button","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d252450f8e58818b4bf9110c742781990d921ad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a3898ffcf.0.tgz","fileCount":37,"integrity":"sha512-sCsrjMCcirIm7PApVIGpFGqh3KjrmvKv81QbGAdZAtbrksGJBdIvtJVQ7fgKr2jxMF5MWnC7SjdCLjugHZrKbw==","signatures":[{"sig":"MEYCIQDoTVB2/0TizVjHY9G5lBfRmS9YBYSOEAHjhdiuxVxUBAIhALO+8K5WmRfBZXDR83KtAyiDyrP2yyAbeI5wXvyURWxy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSGCRA9TVsSAnZWagAAnqcQAIzVe+wm/KnKyw32niUA\ndewYB2V7IMjhj5Dud0rROdvqGrzkCn3aN7kMDUEAdl25S/QtQ+jblBqlb843\nWFjhXBJe+1UTV5GMT2k6aV1q5eYrwigt7DXH4TU3qp1QX5qgClNzWgS9t4h9\nuOyI/u96OEPDviT3NlumvhpQCatCyaEyZ61xFxJOlgCuNZx6cy7R7uSNxb3q\nx2YtIRADwcxTG0XDo1XQ0vtV/jARzYyDMSfXHVUNuFUOW+n6VbKT2wDSe16n\nXVfMg4Q9KpU5gJacBMHnnTJsxw9PlIt3kDECh3BJZK0c3+eNuMuAtBPH0OYr\n97s5Th074XYpPnbHrRFPhwI8PL/3dVH1F1ca/mwXHIFC2+JoOGqhXNrng60s\nD0sQrmMfhEGsHS+ZlYM+YOiFQ2+unqPBgqAyifFISYIs8uVCgZT9zGjxEoxD\nP2k+bkDOUxEAlVnmwbgSsT3gtFHGKk42l7MPfT5pow3AxlX9AESXgU6fMQp2\nJeAaCgvs0AhSsUyor/AMI/voMXEEYrwA9V2i3HQIqbnsefHkDyUy9C61X8DY\nM4N9rhq3zs//XZTpxWsNtkAAhzzbN8+4LfZPhKQ75MxTnF6+Ctq/52T+718F\nvudUxJ4lMTKuMsdp5aODxv2ziuzY+ecVihPgUjMZ7PNxfWDlBArFoAsRbAto\nKRkU\r\n=Mucf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/density":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a3898ffcf.0_1595982982504_0.3876902779713052","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/icon-button","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad655265f5c1ada4364fe961dfcc753b291faba7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":37,"integrity":"sha512-Ol5lvqEAHpBEG1cGPjXo14hGK+5ExsS9XcLLsgkiD6gjO61ljf0iQKXiBTkwrMpH6P5ZYFAh9LeF3LZDH8x5MQ==","signatures":[{"sig":"MEQCIFMUwPS2GgImtZu+79c/Z0eIi3ebzLZIKy4fLoF1OVNUAiA0wsJks6q53+eYEfgJZ48WcH3GCJ4pexu565HBCdlEMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeJCRA9TVsSAnZWagAA7ccP/3p58lFghpaWrpgVuq9o\n0A5AVMl1MsM3VmDZXGKcll/8lk8MS9qxqgUceg5gJfoEvzi4O5iK49+NwmFV\nyLm3Wtw5z9iax2Y8fKVAqr15HNCtUO8RH120TYWDeUuSmpiMX62bJRUespTR\n3HB5Qf2pkls9ngAma2T2XShFv15eRstBzfAZeyaHvCv+n6QZRpaykUROAfG+\n/S83UdeJI+M/eARNQztAqynfHgmLjc0koVIak87xTOxYHyZxFQ24+Uy36yIp\nqAWDMHuCWyQmMV/ExZKj9/a15hWdqMH++Iou53/ltb3JORuKGbK3oOZdBAce\n+5wwrwq+E9EplgE7DissFLz59MzEu+R0i4mxO3XsvLDXtGPrVr/gAOFGQ2bE\n4ezDidNR51eNIrMqWscYFB/ajEyjWT1myXdgxIt90jMuq54+yVvKu50Csx5A\n4jsZpCWjlbEzCE07sxFoYVR2vJ4QKdEF+Y7O6STU7yAx3K4AhbBiFMUzhgH5\nzQpHu6wWS+k6uSoQOvGA2n2FMcHEv+mQW23x1JpubE0jXWlcPr9X7y7wqOGm\np8/TZStSgibRKi05vaoDaHxEy5odiCRjJ3wtkOho43GrYU5nxbHCBj5J0fXd\nydLDjZRgFvve17CeAJ2BLI3dhePxBh59qj3J3c4e+qYqDtjpnpeONFdJ8Sl4\ngnnr\r\n=xjhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/density":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.bc5cc6c96.0_1595983753274_0.31278962494700013","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/icon-button","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d32622a050ab20004421a0e732d32ff649d460bb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.9bdeaf928.0.tgz","fileCount":37,"integrity":"sha512-zBr/9hS8VOLTkDnwsioJ2BpOW28mYvWX6Zj3q0nkRYRnP3oDeSkzS9C2TWdFor5lSdjopMc9mMGHPn0iQVKCSw==","signatures":[{"sig":"MEQCIHDGRkN9AvXBWXKvx0xOMLCH1/rCycw8WnL3pLDcLaNQAiArPFYcI/qhk5MBeCAi2QQalZMGYUIwW4Oqa/lxUmwkGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7sCRA9TVsSAnZWagAAhqUP/3tAD5bLyEyMEvn9F/1F\n7bMLAUZgjOvH5fz6NRSmEBqEj/P7rYS1q7gnsoTl0PiGwry6SCAkl1I8jm5h\n9rvwTVjpqBiEpFiPD8ntKk5eUPZlpKR8zk4E4KSyCrKGJuu6vSiCB1Jy9Ej+\nwlyiK2zNO109UYwRYnxt7DYJ6hBCGT6r1vgQG7+8x6EYMUhQYbuIGrXtZO1h\ndrFRdIDAxtv4qfJ9vx+JokmGELaLJUIZNE4aKXzGB9HUso75fyh5aLEpjCnM\n5FNDoLAjq3zywEF5YC4ws3fg7RM3Uie1+6PCKWMGCVKxGykEPFTT3UFzVI8c\nPb8cSH/bQZVzPIMR358V52RamBPlHmYJqpR3fzA2t/u1i2OmMA46UNkRfjl4\nw5sGUyhMTqH4Gf72Gn491kzZmN9hV/4/5KngskeC7W4oIqXGD+rw/op5/q4u\nMxO5UPsoY3O8zadM3IqIBe3ZPFi48IX6GqDnVLQ7DSaqP8kzO53NrQbUPJ90\nYwLDX90l9Zy7ANu/PBZxtDPm2IGwJd0WjEHlNvFFDwR+VcgXZFy+FYCRhcxj\n8kuECXX4a3upCYb2rudPyyychCyezhp7fyik8a8kvTtJ6meOZ0wqNeDV8feN\noUdR/qrcfjb8AiloRQK06k8/uEbzN2rjftUIwveYSujvaOkeBcz9k8S7ASuw\necc3\r\n=0Hhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/density":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.9bdeaf928.0_1595985644254_0.14948469088594685","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/icon-button","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20954f982b9a77f09b6b00e8949c1997d0507a56","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":37,"integrity":"sha512-pJJxEk8QlqVQFVJPAcxX0+HmOLK4LtT30mUFYVjoTCN4QF322Ri5tIEg/Lm1441c6tgMG278L4p7hN741nbmwg==","signatures":[{"sig":"MEQCIDVD7su2DTrAiDqWK+6MaF9GPY9G69ZMKiLglZwntJt6AiB97NatcHu2W8+hPQRM/QSs3gsiF+QjlegL8/xYqJ1q0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJBCRA9TVsSAnZWagAACscP/iPndkQd0GSebSt9sjHH\n6aTGtmicDaEEsiLGjybuU+i71ua0xQone3e2B3pXqk/E3ScAVW3sUQUG4H+r\njf7eH3JQw4iIdKIak60ZOIQT5EuMwLzJ+v30xwpIqhxncYzgZ6gg9Pp+X4Dy\n4AkSoaO/0HXq6HLN20E+6NMytosQUNu4YWIJG34tSlP6wOngI2w61cDfwdPn\n9abTKACHnAXwJlHpVwzYO3kaabtMmWhfuYPgKhjH/Qgt2uTCeAeZgzs2R6uc\ncdP0qKpSTTcT+4gyijrAB/IR2Yzob/OOUW23zxVuLdd5+9t8Qn+j7v6VR5ZW\nIJxg3x68+Kyy8kjrKkksGLLBPEcTXFqz7/BUm/8jeO0vX4zrCGG+goBX6NrU\neFHdW6h9fW7CifhIOzROvVDq63WHMaNVbR3dCEiLUgHEwAjSjFYBJuxZMWp9\n/kG4ji4pk8Qv2Uz65Fom1nhw3y/Vosf8LRosSSsX+L8DB8z7xQOTA+ZdP+Ss\nqWsFHd0aF45Fd6JEfchI0VQq9cFO1suXtCKI1VioofrwNMCLSKcvNMD7JOse\naR7t7R0mfyphzEzYpNgF0AGVPqwvo116zWlt0F0qm6IyYyFT+ByR3DzQeC9s\n/zdexnezq6fFZnyH06/Ko8IkR6HyExFXImj0nQuPyw4m1rdcQUPWb96NekQv\nOXRc\r\n=olPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/density":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fde2c1f9d.0_1595986496872_0.023213395252921876","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/icon-button","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf9953ab3ddf8f9ab08802e6ff962c32b30a73f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.6b3876d5d.0.tgz","fileCount":37,"integrity":"sha512-ShFxjRxun0mC3xPLQHamXR51XmG2CTHEatnmkmlm0We11YO5jBwsH7dO95YFrKdLerEBxTfTKbz5MB4am1bH5w==","signatures":[{"sig":"MEUCIDeFjgwBPmMKD7qPcqZdO/x6v9YQDnHX/hvsmv9sn26nAiEAkC8S1f+JhP77MOxGexBs7pNeoTXXmDOLzZeeOjmx5cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMpCRA9TVsSAnZWagAAiFcP/04LHVkwERiFPuBFWfQU\nfamxGq2XHz0bGDrQpgz4a0pK7rToe1F+2k2GOqT5DsDUhxt6EeRXAuOtAmL4\nR8JE6jj6fzkA57MI015o7/b0rnx15JOzBjwFVqfk1Xjv5b0cm8J6+j6zyyir\na/2g8SgkNTze3RfTTQ0rKySG+mWcm9qUouRIVcSRrBHIar9iiRaQxRVzYJSx\nkji4JTuhkjKlyStFSnNwPxWlHVvXxbHtZWu2oPgKpaNBNj5oOMBMXR49qEy9\nEbOUzwZIbBlA9mHpSDpdJaS6pRIemCRf+/4BHi1eZXeoWavMJ2UyMkD34CtL\nemO2S0JU2jvMivPbkbW1Wsnmc2mNp8C6Kv/Rwai0MV8ja0vUrFpbOfCf95cG\nKhEQlMCkY43Pyf2ocQujw9ZHk7ldzhcR760VHGJFBZ4TxnPhM4V3bclwI1s9\n4coMgVVWH2k9QbXBAEF7yH92ufcFNP93yYgkHsHiqyHy0b68HwQkTLm5VLSS\nF+CyHfSdYeM4T3HHCM2F9ZUIotbjInTQM6mzHHUua0evi+AH7VYKegoDduF7\n6GpxL1Lu8dqoCsXqUwqYPBkcaRbX+9dc2ypCf8AMBKZAmhIGlWxmSzHGL1/U\n1stwdbSul9dLTA3UWiYPdleZ/eo7OF7ikYjifMnmInUUavaqaQhiCSSQXwAm\nYr+8\r\n=J8H1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/density":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.6b3876d5d.0_1595986728742_0.14112757309301527","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/icon-button","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e4d42d5d16abb3462aa3e7aefddf0599e55d9df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.30ce17873.0.tgz","fileCount":37,"integrity":"sha512-wSzRREafbFco0+L1E/yrZu6hADLWicb3uTuc6TMsEaKtETbXuQ86aiCbkSo0667stjqCoGt084iJtBXWzkr6JA==","signatures":[{"sig":"MEUCIQD7ktWmS8eERrdnMd2rA7LzMFYgqlDRTEmoE2y2IahwNQIgYK9HH3enclhj13SiQ7isCpHVq7y5+GWSd8Y15kol+ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6JCRA9TVsSAnZWagAARugP/j/dysXlFkMaEqS9sROI\nTRiD9rQJFnuqNqDx/9we994DSYt9VdOT65VBQ1LDg9LvZtWQ0A5p8MR71koK\nUK5v30LlA7rKX+hsLEVOe0MqHo5s8QCTK10LbBhxXse6eEMPXq8rd7R/UEmz\njeBAHEX3tSCalhgwP5sbrqJOx7H3kP1aeFDli50XoxwbUurlEvCpm//Y2TGC\nQwvds28+q+QZ0Hs6wXJaFqy8Qvd+zrjN0AoPvOrc9lTxk7q1sL2nvlJnvG+N\nDB22GOx2/w24l6eAgj4zKpk2hFjnUHeAgL3EY5GwSKFmD+3fR6q7+MTbILxQ\nyDoRhUQJVaIGvUedWTAF5qN8CzDbcExbmI7Avm203toAkUhVruOIUAO9tzuS\nOp6Icv6o8rgMD/j2kXtoDpgKkUlOctPJ5/62yvOToX+j/6EtTh0dCFGN+iQR\n03DYuY3Rd9xuA7AVCAANuBAmMzQ22prqqaNnCRTd6A9d+0TNyxn9Ts+eaEf4\nPgpFHhbSPd6X564BaMSY30qQawFrAYNQ7siEnyOJxXVJ/iOOlgNNNrVHyAW1\ns84JcDhB/uYJrufd/1d3uKFRI97l/hx9CTLpM2ydvYxvKSZwm8vviYoPBsSv\n34YtWUjoTxaNL6gHhF19euXQOLHI2aE2NrhsrczS7zCpDThTB9ld3k9+PRQ6\nNJCT\r\n=grUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/density":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.30ce17873.0_1596042889202_0.15671995044153952","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/icon-button","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91664b9e12e4941d6bbe0cdb67dc15f8a32c9542","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":37,"integrity":"sha512-WY171UjwXbbpNbHIJBV6SqLyGASffVZ6aDlPjj5z8XvfOCEOElBlPBqseVmRYvpIG77cIsOGRfnsTLQkht+48Q==","signatures":[{"sig":"MEYCIQD4wKQGeGWT0u1g/ozCwe7dRfFnMisD642ZFiO5lChzOgIhAJWmW2nvP4748nNXdF7Tous0vLOZ4C9FKQobvjuqvHqH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8ZCRA9TVsSAnZWagAAu28P/RDadcJ0fmjXJCtF5HQL\nJIjhHOaE5YfaysK04GqYWBMTYOPIhNaCLuImGeLffA+ispuEgE7Vf9iH8ipm\ngzpZcDS6qz3vdo3iSLpk2XGopheu6e+qhj07jzmm7gmavwOnKET4pjxdAFvt\nRyXHz2j0InM2kyCnwjIpvtYL+21zKxhgSSS4zwb2gNC/k431qF7I+mxL9iLg\nsmTmygleRHFvS+yL44RYzCzUEiQCs3Jq7MM5UOM84ba8QlsN6ScHrX7/YfaL\n0rURnkDLgnLt86JHs/ny3yjdqWlfgQEyZYp/DfNJKuWRDgZxjTuprSbrOie0\n4CmvP5BHLRV5g+nxS2ZRPQCHZ+lySY6B+BNhO24ZDBnrp/NVYCeSD/XpwG9l\nYaDpSvR9/3ICALkZizAIjZQ4Uc2SABg0ZDelnqC0UPke/ECLoL2K8tmtMmLL\ngHqqcHLq0Y5aYi+LB+KM3L806jocYDrktgnRhmUcs4n1bCGK4I8RtheoYWTc\ny6vLED7LN6SO06u7ERB5XVfJrKa/i7OYQSB0bGnZRMXVlc0UodeofFTOvZ/7\nReBGEBEh3glO5U1ldsSG4vOheqpj8WiSgVW21+YRpzGSLBo/1mbR0jcM1yWk\nU4j+22qgz693q/IfFMpph9+MHYybwyo4hskZUxYt+lRmL1c7BEWWO6hL6R1I\nHQM2\r\n=JE4d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/density":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f6bb43bf0.0_1596047129080_0.46768742904664484","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/icon-button","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73912535f9d378a57892bc095d8fdb7d55d19b93","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.6af75f6ab.0.tgz","fileCount":37,"integrity":"sha512-fVUraktsJWjPxpXL00ZP5MqGY/MVLw8AZXDt06wfs1Tjf4lP7zFNxvIKQRDy3oQhNx80e1BL3cQ5VU8k1dDUkA==","signatures":[{"sig":"MEYCIQDe3PMZmX40f6utKp1xkKLDmZTt+5wXIoFdeyuQLq+C6wIhAM/FEKS3UyCqLkVKhb0kekXtpzGkDb9mKzqYXrd/G3Nb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3TCRA9TVsSAnZWagAASGIP/R6NOgGNYK7PxA+gfL4y\nVAi7D6TM5vU86oaBaVzz5P2IyravDzi7uygChpyQwt31R/dOiaWBmvE8nnGi\n+FERWy8BpaOsL7Oz4swt1V+g0qHJT0NJkbuA4BXX7yONK/5GmXETHaoPQzHD\nF8VNzm6goIbMI2eNdNtYFukTPBPBuXhozrYCYHm/1RIB2MTsUiJEniahlfNo\nBCLdc9ebcg8pAlQaA9qEnTpgyPJi6BSXoPNrRilODiZIRQSf45Lej6ayCnbw\nhizF0EDku1N7rAVqwGDXRCEnHE4HWsz9Gktz+wTpaOnMUxNcNc1SzmIVstdP\nKMOfE91B89VewUNNCk5RT1KicTiA8ffUoe0QGsgzoF0cKrpBsB9xRZhF53/H\nKlYth0bBIOVyXi09y0NeAmMOqZD2pqimovil1lJQDhtlRIxUufIRfZeEMfXM\nMQ2gUHwLmmxT1KNtKNaCMGCz0q4T4z9UbFIBn6GDATcRzSfMJYwtmK/6i4w2\nzgUE74+TOqhQ4UNmZb8sk0hFDS9drjCyaTQrw+WvPG9NBppXGymOOJc4gVeN\neOLo6ibLS9IsbEiZKfYFrAi7wzM6cf5vH4vaxdJP37duSiasSkK/3xb2mEre\nApOxL1XPilE7qPEOs9iB8+U3EM6KbDxPHpnp8yn6AEAkv5IgeRpzsZpKfaA4\nbfjP\r\n=weJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/density":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.6af75f6ab.0_1596067282894_0.8941442143454663","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/icon-button","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8493acee55c5413efe12d2b68933a52d31301e7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.42d7a65aa.0.tgz","fileCount":37,"integrity":"sha512-fZduMMamPtaSF9k3aCeYRFwFhONE+d5qMnqxd+ceGsTWqd5Mz2Iznik1eJ5Mdw9rOigw9u5TYDjGBJ54G6KUiQ==","signatures":[{"sig":"MEYCIQDzKs6SRxnQN4YiljHLYJdeK/uc7kmDdIu3gTIRWf9e0QIhAOnlXXMYhnjygDvm71aYrW/Iyf91utSwhAYTzRsqrcyx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/wCRA9TVsSAnZWagAAx6sP/1ad97m8DmbhoCI+0WTA\nLY8z8JltXj8k8C/06ULb128kytfrwPNGEtjPJXwZ45hKPzX0WRk3m/cWpYJG\nSR9J2STsAUWTxsOicSMmQ7XfZ2oKbNzCkDwZEG19sP21EESpyYA++HXt3OoS\nxQ39iaVje0sKgRlXv0o5aYSO0YDIkeVh4EazFlc9Gp7dKbMGUO43xc/dqND5\nlTGfFN4Zamx5VdlSBgJVRPD9gE0MmuqXUFzquFrYLI4fl5deHvOM3K7CjoRb\nKlEK3KOuQfqBgJy6TgILA4laED3YN1eGiLuuecJN3mCYGuoq9sftTSHh3rms\ngsdDu3DDUBVvyng1l/8WY6qu3RfTnCIKorWONDaEwL9cL1avKLMjjOiPij/a\nxnFKLMsiMZxwEUl9r1JIBV3RjLMU8ntU7Hdufl+XlXLTdlUWNNohom/gELuD\nZgdwE38ikGeyrS1s+dvofp5VPhvXNDqzF3w01rCwx9tpfoKPRclL6+XRqFiB\nv0J3ejU3JymTLFRFC62vPXZU0zZHpek8k5LG7280JEOYMzVmUEiCJjBK1hE4\nRzB5KhD22zxZ3SxZ9Nt3LY9Hr4fuY2XtA77rJdZi7LpHqOeJ03q9OWpamZkw\nhljJyB/ZLOcxAgH8wqlUSQoV4AeZT8wWBzvS2UFqrCLM9KMRxQTWdqe/I4uW\ncwMB\r\n=Zyb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/density":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.42d7a65aa.0_1596067824169_0.03305426712383808","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/icon-button","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b9e9a2899b67804b2a5723c46332f20318aa72","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.85abdabb7.0.tgz","fileCount":37,"integrity":"sha512-iH5SfMmMkpNDBdBjRkkinMSQblkoCyKUWzbV7W6XBhHy2nlJIyi14k0bHfApK3oigwfTHNJIybNRtlTwcyAsZg==","signatures":[{"sig":"MEYCIQDtEt6Cpbon1Mcj4kUJ7qRV52Nq4CTh3A8KQf4qXk+DbgIhANAu9LZVk6uqQPjBLEm5mfpjFMosg5Er15FZmk8maFlM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEYCRA9TVsSAnZWagAAq0oP/3IlCYqXYvUl6nqMfcoZ\n5HwJngoqHfGXd4c/BP4oEv9jHUaMjQWsb4VKxTgnwNmSw4hxulFlyh7d3Mtn\nzXsDlfezV95XWkot4y0QPS1DS3bbTrVIlXwuTk56n88QQVfNGH9r26+327q2\n1mQ1/qpgCNHnWUXLFgNiVN3ukKZ8EsnmlL2Ujasg9oS5bRoXqXhUmWMpg0DO\nXtSuIlITcGatw3k4fCrtd1Hu1u/NK7t3/gGGUfVJEg268HV/wjvC7pjD7xC4\nF15852OI5qKLgiNtAU+P+tvoTOIwdbHVqx/w9pazTRk58NsNPW0eQ93K32+/\nFuulH8bQ5xheuxdfsnmLb8VR/hnEyRYSefrFqWjXMRarCJdKotbpo5NkUd0k\n/eNKl6yQpXRKmUxF9xsNo9g8TKiXFPMvI8b6zerY+91gxMntUmHOooidVbl8\nElsgHjQOte8evGZ0T/zFS+Yi4sq+XL41rHyagPM+hiC36YBQqz07C5rwP3Rn\nbq66AT3ZBiicD4G/mrPDd6xKghtyErLO7G1+YORhJmcOvR63TCl1eKIcv6TU\naSgqIAzpN8z2AmJBpMH90ztvB+Ckn0dGIpInX5utOmvSknGeoWoZ2f2UlM6t\nhFaLbZ0irk2zElVeKpNJcpLcGXTXtJM2w8vTFFWfmnM09mTaBUfts9BqaFco\nLCbj\r\n=BUA9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/density":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.85abdabb7.0_1596068119938_0.09373958848921915","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/icon-button","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01f4058b9da3176b3363391e397a341efec8f4b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.49fb20ca3.0.tgz","fileCount":37,"integrity":"sha512-atbzP+X2AIUAFhkaoHhNTGN0tgL9azlMw/iC2Lz/MyaoMx2R9JbS2nEAM//jZypr3VKQhEsyNGxNacR7Y+iq6g==","signatures":[{"sig":"MEUCIHoZwtklaZ7IpKg7Vmo4TOl3IFf5CnHn2/tVQP2kH/h/AiEAjjLHTxWE82cOZ0MtZ5cz0LpyoZFbVSfoD63G/7Ca2yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIKCRA9TVsSAnZWagAAebwQAI4Zk/nGNmZ6RtJW+O+9\nk//DU/8Op82qnhUGtluwfnN4uAW0Yhhe1hG3+sMRba42YgrUNF3RHdmjCdW8\nmX3S9RDAtkZCAz6C3ZWVL0l3M76RFJr9Lng7SHGZFS4Veq8FpnRdpHZHIH59\n1xjehAMVp/h5Q2qNHW3AfUm09RijmEJ0rtT4yz0BYnWyQgW7eer/TcLl+eEM\nj9M+jlSmjf+uWZqpdEaFRZsI8oBlzqxhJQu2bVq8uOyy6Tgn4VvECv717NwD\nA41S7meOMB/Pr9bmiFDnwrPWICCpcTkRSiNXY+d75njrW4elry3z+BbcMvGZ\njhYWXsm1YMCdw1852LxekbcENpg2eQRa4VtQd0tOHIl5t3o/6ksjDO94MOjE\nRI2R+r+AgGldn4mz4kCuxG0OC2eYAtWeg7e8KCRe1tIAhxjbEV4r1NUnFoXL\n4LOMgcoBxh49CF+29HbiQI9yjDLQVQBPo9Soc0SN3CrfLf1TfNkskxD/EbZW\nbcJFVHCmbPqtxshFSkJYZbeBhocNT1yV3F0y8C2YRIrtUA/jlWQhXV7M/Hcg\nzPClsyFmuZQ1osYcpfuNwBK9D9cFIfSTz1WWsyd0Hm2iwEVd4gVW8ym+vBOG\n2TEpBgE71Kt542q5DZv/TURDfBWY0Q60SQ3vgMJPHzbKntuT67I1jZogJ/bz\ntzAT\r\n=3xo/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/density":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.49fb20ca3.0_1596072458458_0.7094631489684331","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/icon-button","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d771a100598c70897e88b909e3d1eb21ebced1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.962d4abbb.0.tgz","fileCount":37,"integrity":"sha512-9dqdfSukmM/+XQ57dxeOAmK3JOjfWOgLYwmM1ogfurotf1LknGgNmWDs8GjluA2PGGAeJkq0XQwkr36dZ2TMZA==","signatures":[{"sig":"MEUCIB6EIDRHT2qogUhX2VZ+GC2m+vC4YNnytxCWg6VoqBkkAiEA/uyVQGqU/AViY9dZPMipWLFDx66BOv5NtXVMe9VsWLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDnCRA9TVsSAnZWagAAqUUQAI/JllCD/eCni1SWLajg\noqrV7D4dKOq7OhescnIHzyLHBYqDg17YwjEdNqGKFpbMmvDs+tu3YNibhGQc\n98DbK84s1Zgw0xMFSpIotFTXJqATwVtECi0mluvSzw21+lvuf+5JVf0zsjqZ\nbRK1Xhh/4ll7pTQY+LugnTjBTZ8aPAlgps8Mg8K/91YsugeizKpsYO4Dut/F\n60rcW5o7HSWQzFx8bVU8iEmCLHGAqVIoQRt8jYNzFhT/8nmym6evWnJc2U0N\nlz2RTf73TYkq/5VqiusoPO/OAjh4JiM2HpS/XQwJSxFO2kQL0lJpcKFS0ImO\npWRykFunUw5vPa1fzyRkXRY0A/qqM8l0TKE5rVgqdpDpwatBcAflie0DoWZ6\nxwLy6N78SStYTDN+dlqbY/ZnbsL13dgIO3CEswxBh8AozwLtGjUt6NS19a4+\nWFTVja486i2nu9VZ8M1pN1OzuPWTVE0Udm9IbUMXSS7aIORZgxSR7TXbxfs2\n/Kwi18rckrTHKwqMgLRJPx7jxY8JF6LG6Qxl4ypicSFzqztm8BI/QSO+cR0e\nPxlBfTvGIWyl5+8HR3W2VIwEpgrRt0X1LXcAIL8btf4mRL/rWHR08KE1sf58\nxszkDeoA8roKilhZOANA64UdDFFuukPUyZRNbeD5fPyaElcvcKfwFwDQJEdo\nlySb\r\n=jExM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/density":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.962d4abbb.0_1596125415068_0.8914213643257718","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/icon-button","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed7f798cdf8428d69df9f16976935ddfc07eb46","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2fcee40cb.0.tgz","fileCount":37,"integrity":"sha512-+S1Sfh76Fgl5IjRrwTk07CogAe61WCC5qnJntRatfmNDEpWTcVqrB0ri44jF+JqYYb0EDcjdcZf1MPDViTapwg==","signatures":[{"sig":"MEYCIQD6I/6ulP873lz8wUzOBNyE2dnatVV3fkVr+R6KbBUsxwIhAMxVU87YX2NiamWF2Ej0Y3DibXAjYjHGPWSJImiHEvAG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGbCRA9TVsSAnZWagAAvP0P/0Ck2mdkMsoHnM8rb0ec\nDW1jwWP2IH+XVMbcfXEkY9Y6X6BymMUJJTkR8Q/38TycmH9WybLID6NTqDsf\nEcrLZwOTAu5XqQmJNX/xVKegfWr76Uz2yAwBK7dWXXlONel7ZIslzeRXzNkI\n4BRg8rJ9hWlG9Mr2oS5R2iKsCu/nksvh5CjOMvPgIAHKf4TVYWx/x9xYaISA\n/WGrvYvP6Wbl1+Vl1arRvdE+KnX3i9EzyLBeUdjpdRHJiMNUBi7VuslanwBS\n1SknCjFd3AYW6rUwlhEtKHBsC6Tl1fpm825bxQh+jmqjlzFBmzj58dX6uxvd\n99Ta0dX6Zikh3GeRGz5+bXr4awL219EOjyrdwnlw/ik0RprndlyvgSKQJNob\ntVDyGh+9cqrms4pN1pkBkJz/pU6JRP9c8o6tiB89ojR7+LBRxh7k6tIjI0hh\nNjeOVUkb/sAtejMFO+HBGNKmpItnKGFAd+MV9eu1xeJqPC+pGMGRESL1+92I\nnT5QWtaJjXM95poSyzhTVY3ivVxK3qOtN/ZLrH5bWeneI5Oce4xHXqz0wRa2\nErmNOwkVZJ3SoSU0soE6YJRRAraDX55qDl9ZtMVvGHueZG1hVWPaqoUAPfT/\nZEtiNGpXIFO5bB5R0sPGBaSkuRLQpvO+QSWt+N9cDza6CBZZWz+auGgE0o24\nCWuQ\r\n=iXuB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/density":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2fcee40cb.0_1596129690539_0.030655980011739636","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/icon-button","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5241496ae340bee9d5ee40120f71a60de06d0e44","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.bd5987f5a.0.tgz","fileCount":37,"integrity":"sha512-z/cmK80ykvrsdIeNo6eSQ/gnV2XG2xa1rpQmEvJlIsbnXhYy/0quDwOsLMJWN9RWrl93c5g4PSAIQXr1EUXT9g==","signatures":[{"sig":"MEUCIQCT4GH4CgBLnPREEYAq5VExcBvki5D/RzoNhmaX71eKawIgSbA2c/KjwJo5+3SCCHWLDs6wXeTXvJNZbm6Be9qq0O0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdhCRA9TVsSAnZWagAAvSwQAIY4vjSdIcB6a5Xle+Oj\nye83l7Y9JLunQcnJgNne5Y+idY/+AKztnSfw+58y8tTOAJAu8fkI4gwNam+n\nGQ9YmPUrrqP7+85LoUTo3J8Ml8AaSreLZYpB7DkKTEPDy1SGu/06WZLPKejY\n7D1NCF3t4xgTRNuhpEPDOTE6xKjUHSRE9aULs1MtTqkTG8sjKAhk1lSj7M9C\nDoyYkc0eVfvAuQQKLMpQnr+N3uM8C+QQoKw03ZVRiH+8MnZoCdwZ6IG2ZjN3\nVnWhgWH/qHVGJtaH6AIDTHogcZ18Rl4LGsSvx6fUl/NUfAuaDBnUiqYdSKq3\nkKGJschJJOOino5in4REuDrYKhyNSAqcgcaF/SyZyUXXckCWepTCEdB5S9qs\nJgV9apSlE7Z2pvguVDbi88DItxz5gT+Du/Duw6jIdW41i+KCVQiqYZpFus+g\nJK2C06hBXMT9gDdsKseqmWnmrOp3cN+34X+lVO+N3y1rBsdGLvMLETYRVIV5\nncga3I9JSRNSW6bEBzgUD2M5h7GSY5b6MQwu0MMd5Cfp0Yxb5Vptdu3mn0yv\nKv48Ezt7VxPWF5miproUdDZ7UknXPkMGGwfhGNKIPoEeTXS1yn4zRt/w416X\niUAVXtw+LwFfh+EpHK/xhRjyvHs5doBYVIensqXlAN/mq6c3wOKwzjATD75e\navhi\r\n=Qetn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/density":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.bd5987f5a.0_1596131169452_0.48582447713662114","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/icon-button","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceabda97e628011e284f6b89b5bed5e795f65082","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.005e86a9b.0.tgz","fileCount":37,"integrity":"sha512-wm0uX981DvQST+N5sQKbAjPvH6LL028/YcXzovOXclMw0mGU3X257O1+wZwZEEVaecbr92LANvIe8lsJAm+Bcw==","signatures":[{"sig":"MEUCIHOITAVs+R11DwcbPc6h8p30/i8DcteQHm4/97HnnjWWAiEAvUPQZWG0U0ejHCNbZgfTHqpfpYxGkW5ifN4LaxDDs4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqeCRA9TVsSAnZWagAAiIUP/ApWOjGhvGTcV6O3GfXJ\nqI/RrjPdZfLcVYK4j4aiyolpHRXzwKPilPFlaGPYG/zVrClEyWPuMmrVfCJI\niux0IK5g/qp8jMZOTD5sEFesqcgbFgFcKsMNEdo7CqA2/e5TBsXpprJSmLZc\nT9s9WxMi7SFhN0+OHEM8ZEs0BzitZ/l7syiIU90xKsrNNnq57y3CNifptDfW\nwoQ9BJE9BJ5wF1YisVpbRfp0UDCS8+0h4VkMH0/mq1U2d6qgqF8//LnLeV73\nSSiAIYeWOYr6IBiuBnuDMinS1hYSVEnhdZzNaQHsdY+/7aGmhMRBj2SGrlbr\nq1jMNDEjmhPlg+091igQgFHdIuQILUs7as19kYxbUSJlDBwHaZOyjBtZFLyH\nH0PFdthPXDVXAZk+TzxPgXbOL7tfpMqVsZB9qLYrY6iv8ZLoJt18IEILCip5\n83JIfB3PXGFekXZlsOGGxPzegv+CHeYV4PoGZSr4hP3PERVKktjfuzcWVLXw\nnwCrrykoVsgDTtD2ZZ25Qpzi1Ho+ssxEYmR/ejA92sfy34GmwduRyARjclmv\n9SM4ucW3K9x3Nq5kjgT2vNRGt5/jBVwHdPNLXaIUcwZrRCCo/TptScUhFEMN\nRkDvspO2akSRE0+Rg4lCmv85tF9kyVESASs859aeZc+s5W6cFRkO1saz8ZRV\nLx4C\r\n=7tC0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/density":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.005e86a9b.0_1596131998332_0.26499671151210835","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/icon-button","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5622574e81bc2eeaec9dfa848a5bd7b01905cdb7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e309c7c68.0.tgz","fileCount":37,"integrity":"sha512-PgJB8VE5oWJKRc09IgChgVJnk1qfVOeJ+tmp8LnxSb9MypQD1wfwymAmxqK/XRoWITmlvyIKuK+jiBi6+OYlvg==","signatures":[{"sig":"MEUCIQCkeeEYiywg7VuPMTfJ4rd+cXdTH2bMDdRsXj/mAp4BxgIgZ7VpV2JdKBdLSbPOWQNkXs6ZZjh5U+m75+ACibdMs0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwyvCRA9TVsSAnZWagAAa7wQAIxccFFYMrIwzwkatPbu\nAa6o/NlP34nRNLasjFlJ9ptK/bnoD/i9gANUDZfk52jvaOlnccivpFkPcIEo\neMT9w9JSeas6fCrdpi/CyWc8gfwRvY+lmaxeN4QJF+NqZyEWtmEvf+UXBL44\nzNwOKWRycwmvbylGqlhI1T1hXgve6HPtJdsR8fYXRIHK5hHq/MkI+bljU3XF\nkgx7F8OuaHsavSWamZA4XiuSeyuXtyqal3RfUw+5Cn0xojVzNPQhNrYQw4Ja\nvSc9Wo3foLhxpMCQWJ5h+ISOnpCfzxJioiU9ctGnrgSidvqV29mqIyTCATc4\n30kc/iyooOTKwjNMOG9kWS+84Yas3tsplY00NeKoj3B8vsS1AQiqTZX/V5BR\n+CwEjIwJg9hCbNYcQq5ju8AyerTFc8ThMOK+wr6YSNNj4Pb24YURbl6bzbHU\nJLIM0ywTw4Z77RUHznQwBBhW9++HXCbH+NFawkXsHr5dmSx5UDG1e6E0x3XL\nS9M1LYB9NkzJr9K/UBISd29QvR3pieGJCGKLXmoDSFRFJoLMN9AKbRdFck+1\nuro7XFNZ5ZHMufVr1+gPLh3BljITUk3NO65YcxVJMC8VqLoJ25wdeCTAy5qR\nc3LB6U0B42PRPJzyS78xRfAwDvSxzk51/TwDWHcQTPZd8r4GhVAxv+Qi/eia\n7CPg\r\n=SGf1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/density":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e309c7c68.0_1596132526525_0.45603397305233884","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/icon-button","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2e2a8e3f9c32841969032d50d769be77c55eff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.935a51cc0.0.tgz","fileCount":37,"integrity":"sha512-JYW8iVwN5KiWg8oCO75j5r7wok6HTpCEicLWrmfFr+ijRbsbSnA4ARlNr/YTtGOERnJNshbx4HIpw9/mFj2Gbw==","signatures":[{"sig":"MEQCIC2PNMoX11s/oNFDQaS/i5NoOtR+ql0lr3c/ZH4gBsoQAiB7vrjFGN3zpgGvKaE3EE6SOGMdUa9cTbBAcMY1AgDImw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9oCRA9TVsSAnZWagAAfm0P/0Y6XQsRMxT0sdQxfLVQ\n2qXQrIZAoTmgURLeoZp9eikn9mlUg7yKfZJJiSQtqKWupW5Pn5RJMFd4JJkK\nLktbM/ygO+QS68VBFm8NhQ0QeE9vrlR1HrAKjP5+MwYlI76QTw8deSmp6pED\n0DJ/nCnCElPnro9pCAzpLwDKXqqnFTKSAEg5wVp54Qj1V1ucCN8xqDWc8K5m\nILhR/6u7SoNFhGmFsvlmI+cff1pufST9kcsa2UQcqzma5gdJTHvdkkn6oPXD\nCD5+cps2Byt9jwNxdLIyVAd1iiIjRsnX8rylfMkauqP50snV1Lj/7PRGm+QN\n7lfK0bWoyVP0HckfZg8WMPC1hX+YPJj5x90hRf7MQJOpZT09KYQUlM5Ub0Xw\nfxEfaxgNsVQeZlLqkhahXomvdQSwfEsUbGiDHn3vXSlR88GS0judqWZCevTj\nnTqnoEuFkUIELLV6MD4/1KY5+CYYeNfKxGHFx2VU+SVMRonxuJeRqefYdXKc\nWHbFNxFLrAwlOQM/pOZ9LyPGndQ0aj/5D/HmFV99ddixMLfFXBRKWpgsfbhy\nXaaZRMKuXwnXJf4BxM3iSHTyYX19G4AgH5cK0YGJmDos1sbphiapoFKYmHdJ\nL4qspVP9vetnKO27bMF6gQwJ8R4a9fuDvpnhrp6qAD9Y4ca48V/SmxcZoE3B\nWBFK\r\n=zKUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/density":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.935a51cc0.0_1596133224231_0.07439625094816393","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/icon-button","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9695dead644e36db592b0a8da00c2020a0ca19","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.74839da7b.0.tgz","fileCount":37,"integrity":"sha512-x47UEUA3wxUrfqp1ZO8TrdKEd+XzNt/ZnU7zu16ecH1khlAzlU8e2VKj45ylzSDAzBsfF2HfVDaHnZLhzAGOCQ==","signatures":[{"sig":"MEQCIAaTBjEPyD7C+YAJU5kVYIvA3iTbhxpblSCzr6PfgnHeAiAvlErDaG6i8WHO/wQeZdu+/CY9zx2j4yvZmFo9Q9qGJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxH5CRA9TVsSAnZWagAAxQgP/1MRhdFxJm9z/ivlPdSa\n91/EG44Lao274/yPiFf0spAz9q/kPsx6OCzGeyD31khb1aW3uxRrS1pITz/V\nEz8yRQmqSwhKSKGlRYD2bUGVGyngEoS9KRtqN7IbpdNU2cLKtgkKQNl+fFpB\nwkyDtviP/PIGtXWcJC6YLYgLnitbpW9RW7eNEeA1zaSydLU8AQ0oi69uW43S\nNhpj/iRnEFgOPphT5ygCa5Sh4/QilurxEiCjuOToE+sjtofAy1T95sKJhTuy\n9botdcqu3Rjd8UXsVY84qni6XEUXqMlZRLXWgvf/zE6734UUofxZ2oy2iiB9\nDpIfA8v3deNxYMxI/CAmNSRpuMUrnSN1xoGqXpIO1OSohFnRHDyp5AdTbrKF\ndP1WFWWBYEi7JACphf24vaVDjTNzu7lU4pkfGF4SLlaD86NI6ZsYA+cZhpH0\nQV4/gq7ykvGYnnuUyAPPvJw25najdf+H3pv8eJEFmpZka/T9D+XsrX7aqlaD\nmp3spRxrgoAsnIP03z6YN1LMLlf5Tgrtcjxrr4FkrAPqmu/AmDgC160f5HlE\nO9n3gicN2FBR18zEbetGe48p1H456k9qYv4japuwZehJRLpAp4Hdv7uNRn86\nwBTLOAZ+SVOUyIVZTq0BRWu8387V9t4zd6Sp9o9MWnnYL1mXa8IBIllDEWEA\nAcsv\r\n=oOlm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/density":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.74839da7b.0_1596133880608_0.6827837338145184","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/icon-button","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1cfc71804c4f388fdfa74fbcf6f147afd750796","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f041a48c9.0.tgz","fileCount":37,"integrity":"sha512-hcC26imj52M5tfO0jfTTYPOILVAGPAUVx6wuPDIig3fAJ2wSlOcurrPX4qXM2V/BRSuLdwdpGqB8WIW5AnWcZw==","signatures":[{"sig":"MEUCIQDsgqySHsQjYT0zvjkXVNw1No1EOS8CtlTdQ3D6/UTwtQIgOMO4QyG/lWgh7rhYp9VoqpBvRTQMm1FlV5HeNP/UtS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DXCRA9TVsSAnZWagAAARwQAIvKWzYcEL9rUC5EvRLq\nFO92WPQIm7HmamTuOUdTmv+TG5AeiIeomGJi75MdBzL8Pulg0RGm1M7VdlkQ\nGCIRBzLbX4KYL2AgluJmzCPH2TQJbcfetxvc6vKwppLwYSeFzu5onHzbPXXd\ne2a8nWSZUhH6fs59AoCPUnAeChn64oRDwITJwUhpedCEIl49tJGvLHbfL5dM\nLcsQC0hvUdkp8RTBcSqRnPR3wbhC6kFXiN18uSrupInElZimYI73OQEkr/xH\nHqBwn9Y6gpI0g9zKt7ipWW7ER07ho6i2G2gz8wYETrPASv6ygNC/0HaiYUWr\nYO0x42wHmDEhOJyg4w/RntssYv0zaQhiiDKwSuxiTj0wJiGJ/9lhYozHaMB+\n4mxTg08BOMJQ73m1eorTKcVyFvWHtJgn81ihnR50HmAFcfQgm9RNAXrpdBjs\nO2ryHUbXIWIk3Xa601606ER/PVAKsvihSsNHwppt3EXY9eFXz5HQc8qo+hzC\nUsd+G+QyEP6sGTEl2XoS73CeO/Ukry5B0aiJCoXYosoLMnevnrVfpzW/St6Q\nRx7vMjlzkfSRz4pvjmGWYUxs+jcFw92en4irm8zJz8ESbdsuT1MNWYmqQxy0\n+emnLeyqEihI7dGjNOZcoUWvYymbPd0L/n3iCKNFNrO6IkxarYfQiC/onfZY\n5Umi\r\n=eT2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/density":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f041a48c9.0_1596149974618_0.9059100254755692","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/icon-button","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfb834dd0de9b8cb7d1697f60c6ea779f2d30ef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fbb1381e1.0.tgz","fileCount":37,"integrity":"sha512-rbbRpoBSArYSPsLjqyb85SGlIK1qP9yUBM+WkkHWlvcjJAbJQOJyLlRJcusAwcWIHDFlyRQCcZwV+fDmBx0gtQ==","signatures":[{"sig":"MEUCIQC2oyzau3YIH5Dny6FK1Q40yC1L81GeiGVWbQD9OOrBtQIgQJmixzuwf0CCUeiHkXl/YucSw9eArhK/xYP3Rixtgc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3DCRA9TVsSAnZWagAADVsQAIAB6G5LrXzpvzwuZnta\nd8z+2lJj5omIk3X0iNtwBWDFT8nQUBxSgibBdulnl5X06hdT2XKxOWKgiNwb\n0TYQeCzk2qYHxxNCinvLg6H80hCsCBZ78iBCvDyqtmGfzi0U+rElVQAG5gln\na+nFClpeszKTgXQrvPRgd6sT7h2DbnO615nL7f8EUuDaeGhz7B1Tm8iU3tWq\nDsdgXGTaDYbAU227JoNX2FDwB+Qv52QOkDzoeoISC+YEaCuHzs5kwFP977tL\nie/+dy6pTHX0BJBHC5KwMCX+yPBxa1+5h1EB9B+il4HWl9U0Hfl7BSmSexly\nsBFz7R6xkmod6oaxWenaDyB+9UY9owm3ls5vMuY5OOaG+6dAJZqjPKFMMU4H\nIwixU8G2T+dMkLwajqSTdASMyex5+LLF63FKks+bPhM8cBMch9WxUXZxQMQI\nI4gkgscRUFZm5kjrvGzQYjAMrlRZDajwAtYBLrJ7aA82zBAxREXtKLne++Tt\n8m48I8EVAuqrZ0MFAdMtXs8qeYYeSyOxi+BxA8K1a6LoWV0U1iU9BzSoeuPC\nouRXzCwrpKvJvLUPPgzqgumT2i7bmrYusl3hxAiPEvSaUkmfUu9KlcTDFijv\nkTtv9RH2+IrShxsdtk7NEpnnsQEqcwF2UPfLsZcM1Br7mAUW8nlhJzQOqSBq\nQd3h\r\n=8Aiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/density":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fbb1381e1.0_1596210627572_0.9755191590667296","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/icon-button","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7fd033728fe2532b5c6c62c7e08a26192f7b4a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.7f61d5785.0.tgz","fileCount":37,"integrity":"sha512-OaAC2knpc7RlCiqw+ysyYK/xuruFvROtfL7KlYPQEHakgA11/Hjco0HfrYWyCqxdHqEA9KTFbWJk2bPYKJUYjA==","signatures":[{"sig":"MEYCIQCs1uhtb534X7mRl68ZZCuNdhVQw58B9dqjqo3HWMpDQgIhALzvyDwivjgP8O/tL+9Mndvr0AgqJmsevSk5s/fGbhAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFN3CRA9TVsSAnZWagAAy34P/203O29LHo3nAYRsyZyx\n5pqZlASjX9tXfiTJ/+nd8UXqMyeiHwVrLPKWOR53bytL8c31Wl5HxbxvNrgL\nfs8dQpr7pArg+bTzOvQG7g+o46tLXUnS1vq5JBpWUCjvG+fq++k93frj6QEx\nT/iqPn0E3f0YcKmdoWobqhSA7lIdj3B384bhogi9uvJTTigQxkFbVGjMw7uI\nKguoim7Z+LQ4PWLa42rKrxcwpNmEG8pxvN0FNQ8bZX/VaqpickDTGyraGmwC\np/oEsjXsJLau9fRujILWlisZ/9F+yqbbF/PXS6alqBCMpdS87nAv9jcDdsjM\nfRYt+eRcHxz6SUdP6jlAq93WZb+rL0x3UPneHODGPZ3K9k3/v3fu2P8h51H9\nb2vGxf2GvV7DQZyB8mvHaTGKi6jG0GWKdvUx0vm+PDGeLKhdcMObpfGtVQWn\nqzpfPsylsz6QmMWAEIZNwu1xP4Z1mdT7ELpBPBwlHz02JnVIxMg/htMoqXNX\nJyKYsCV/s2+dhmwbHw3KNI7IIGgR0EVkLLKJZ1Ld18UbPvJsTpQqVkjVKv/6\nbrzdl24P+zRSILRwlwACgmWl+10zyutfeemb5LvgF8FaIcH5WzayWr7u7nVe\noVk9HGKd8CfBouVnyf0wT2mfws3iDN/pUkGyybIUvmlUawbePX+Quv3Ao4WS\n4Di6\r\n=0PPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/density":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.7f61d5785.0_1596216183170_0.6809385648019959","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/icon-button","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f861f7df00acc5f8b20024a46087a71774112f30","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e1bc84d10.0.tgz","fileCount":37,"integrity":"sha512-JSPE0Z6ym4zL6UnA8tHJnsEKbV9qBOblYE/ZYdA39b19YlZwco7qPTGakv4v0BzJeyd4hkrD6la36kZpVRGpjg==","signatures":[{"sig":"MEQCIGXyGOg64gAxFCn98rFp6Sq6sTqKoK8qoloa1dOVGQuVAiB14ZEJScNIIghVsFPLvORSR9nT/xjSVU/TULnf/7V65w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE57CRA9TVsSAnZWagAASTMP+wbf7iv2Urqa6RT6lYbA\nyxwZxJxxBPprPjv7UW20v9Z5cynIhaxmTuMy2C9VgBIZmRe9RWiiLrLjJwSw\nTILdF1Gq9rNW+XZIJ9PXzQR1Kj1DgETEia/L0zwSK1E4qtRzfXLGC9NEIykE\nGefnZsu6UtH1x7MqkbPZRwMUFaiqitmAegnEiNlK6ncruCb7kNyNSmTQO9SM\nBr4OfuozaHCwMc9o8NqTuRDZwG0TGC3ImJtvXpAChX3t7hEOqaCJW8BPYv2v\nCgyR9l3uzFCqQAt6zaTh/D+O5v6darPMUc4s2D/VUTRITs/FCfeWb3+nI554\nPc/34niISBIw9t7LRjzkrGzxLK4YFfDVWByjXqiuLRX0QszDIiTNuifvlqQR\npPeDc9XFkUYEk7d03WCxZcUuDtcjM/52qrjWbdI84R+KKt2yRMIRSxTqm9VH\nVkwXR95CeMnR902RSvCiSQeR1mkU9YwynzJQAPDVrX26689yagrFWqMQaxZl\nhgsZg0ITLELlf0ll6fNJU3G334rvQZfUmM0nD79CXo9wXkpc1grhR8oEteiD\nTiL4bu4e9LjxMAbXn6mng31Yc5XWAc3RzoyJaFHV0JEDDCvCQvKC82Mcr4k8\nJgiSeyTmm570e0AKfpJGMq6xKbmnat14krKun+NrX/7ImpVMYCndwbQCpOHQ\n6kbG\r\n=7dL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/density":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e1bc84d10.0_1596477050805_0.3935337418923117","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/icon-button","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20dd5459da9bdd58e059b6e6201440637c1ba497","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.096a7a066.0.tgz","fileCount":37,"integrity":"sha512-R3zBKNKuezPMFuJiCAGwy25iG6y2BEFyLQY9Ef3EJzzulUFEr6U7VruNENH3Vbe6+KAJqfiaZYWGx/gSzd0ajw==","signatures":[{"sig":"MEYCIQDgGb6t9V6U7jctOsfWH1TewgtB94cwC2tzk+nMZEIJxAIhALrN40Q6oiF6kYchOEGQxMzKUlE3PU3oNLmaHSAUrmzD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8kCRA9TVsSAnZWagAAC0YP/j7P6IKPq6YCiv+HFOJa\nVGxHykfJskaJOdTTivtfnLoyY41eo7SADe2VtZX3+foceuEgtJIl6+GHbzGP\nZRGzWK1bFlbfJcCGSVQzr+adHQ+QspHATsjWnNJqrsC58So3MbDR8Arra5yX\n25+RsBWB1e37wnN5ne6d5ehMMQp9/LgvLlT6dzASO1j5sP1+WgMCHs9tdOlI\nAkJnkZOjuF582HSmFzhl5Ho1a3xzXT7+UI2cqXRpKcguuk15Iy9adafQz7dX\nyX72e+X6dTyDUy+oSg14HsWYPLR1cptTFBdvedNFOe1QgUsNm0SCh/Ms4DQ5\nrnnmMJQBxn92ULk/lamRQESa+A81EItpI5y9rYOqUxH9+wQrBAJu9/IMemks\ntzBItW6slx5rJo4meqYMJWZzrcoHtwLo3J4SepVLFccTxZOjT0/X4/NTNRp4\nq168WKxLdDZ4bp1XSSn3cdxituCSUPVdHs8WcS2UfXTV9/w0+2uzz6ZrbP2a\noVV8eCBSe/+AkkWqWUoALDBv3Vw0qgJ/YDTSw/hFOMjf5IEuJIU1GfJC0Q0Z\nSqITJzZVvu6aBzFB2E3LCoJncCk0ZStpGlggjWO/nmBhZbmlBaJNz0evdux5\nVlYS5eLVjszgNtx0QYKmD5EMItUMoxLIIOxaSLzh0X5pEibLdAZCpecwibvD\nS5ZA\r\n=CbJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/density":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.096a7a066.0_1596477220135_0.22582769941345537","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/icon-button","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b3f5924924b6114e2ed2b69cc48fb9750d0ffe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":37,"integrity":"sha512-POm3a81oCuTd3kP1BpXuuEWWZ6/d525C1zg82mje4KYXAEShv4Z3FzV6OxGp68rfphLiAwAY+Ifr5NG4XTT1lQ==","signatures":[{"sig":"MEUCIQDIAq7avdPql/lG5Tpg+0sSZwkJl4F2YN3l8/s8Ly0PlgIgBB3OAS3WUBIcSkl5idTZvyt6jYKLtk+/b1UF795XDvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE87CRA9TVsSAnZWagAAB48P/3F2togy/RomUD+q4WvM\n06r/uwezOIwvnfzy5igDT0HHue0LC2W2q2AkjEuks+cYKzeO9wGes5sQmf/+\nWZUKRifHxzOi9zBPGIeFrVWkezZ+OteWR2Yled+mhl/KHZ1+OR3xUfdshuec\n7TTHeGSZNJ5/3lzIx4nsu+CfglGi9JPTmt+uQb4zKwmwR/jToFvt+8nzMpni\npvRDHSs1dpU6pJN0i8/2v6nJW31ZZpqbYUFEgWgZXZdNQPTZMIqEKWa+/cqS\nqYzdN4Je7nBu390VJAZenuZI49M44UGsD6XRiRcXht27SCkxPPKMeNnWIB7S\nmOZyEeYtW/sOiOJXTpk5bVY1azt/3qJyHx8jcd7XtlugaQPJzwtPJ0Ae2Fdc\nvWVl1zar8P8C9ElD19zPDiyU8tfCituHDmTsIdU5Rmlc5EeIPigibaAkAANh\nQswIaYeO+UL+bff0HD00c+3k0REUWiE7B6ofDTf3yedQLerry0gQZRjhjaXY\nGCXNOjxrGePm09agS1yf7B1Wckq4g+cH0Y3YJVHVjYzZ7ClFgvyiCEsUoOam\np8/rffvn+VRZWi9ooh6akCkgu0FX+2cUDVHefGTfHETwTEndxCnxPwPsmpHt\n2yczCKzkXuTayRObB4O7rQJbC/zboOr9XsCLlbrNXGSc9h9zbgFykxtTNU8H\nPLrD\r\n=MASZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/density":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.aa3a3e5a4.0_1596477243373_0.21812363424623205","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/icon-button","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8600dd4577644afffb8915d2fdde26b49ec3364d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5903d39af.0.tgz","fileCount":37,"integrity":"sha512-ZGrasHfwYJX7SqeIMw68bhqp4YBY5vZsU+GwjQN2Tp0mX/QmF7Oa5bqutH/ZHUSSZfcw1jFIt9PPG4SeWUjC5A==","signatures":[{"sig":"MEYCIQDoA/lLGOwVtX7HU5etCWRvx/cwBWI4IoCA8DIO9ssPQwIhAMedu2OCLYUNRWDvNoEpwvF9V7SS3CWXzxJiFMQbEKG2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9SCRA9TVsSAnZWagAAJo8QAJJtDPqXb5fBWdLY0HDQ\n5nWBFQQmja+4dHX20KDiKlH7PvIcAUhASovamAw8RPTEpXvwu9ZUspmdnpLZ\nmQFdXNuMDEX19XIZHIkE9OeAip7MMpTatT/l0d15JLl385PkcJKWmPeIqIYB\nmaoBgSdRYDzOHj1C/HfwQ8t79SsUaptmBrsTShZqq155An0dbwtaNkY0rqZk\nv6HVfv81zOszhMAdMgcnoZN2s83zcAjhRSkicI6y1qm3eqbYWsu20/slbvkz\nxbCLqd68rFn0ODHFOUKiSCHF4WMSpq4RXc4ZQm5arILfd3XqZXkZJKnQ3UqH\nwghOiuxW+M6hqteuySvQcA8hOR0eMOXs3rNIcl5lk2gnDX8TkmEPtkgdjwMV\n+ss8ktdYIfVdM13/K2viPttCNHB8noeRLVYOMHY36BDHEamqLWFoCTft+v26\nXi6R/0XPu7dzLZ2e4tHSjsv3Ijm7y8knWdXoBZOTcSCD6Fq3eet9qnFdO7MQ\nc0Le66cXmlzTmkkdiwz8GRUfMIV2/gpMEPNX6+bv8EdG7p7lYMqKUFn/s7Vr\nZG1wymqZYgDA5ZNs1m4MkZid4pIfZB3E6ZAMbps6TK1OpFbnppIQSzgvw65y\nAtZilunYpudgJ4B7TSSYObwcFd6Ju3VHNYORUsynoHYysgdy98CGyH4bptVG\n3E33\r\n=uzQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/density":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5903d39af.0_1596477266544_0.642094774781246","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/icon-button","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b604fb10154d1e218e637d848db5154db4db4c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.72258f898.0.tgz","fileCount":37,"integrity":"sha512-EjdK8cvJ5pqD7aqBB+5s6MGN53rdsskz6oFiMHfBdLgjnT2/UZt2oDzyHUhgsOvImLCImnJwyrGE+qVL/DPwLQ==","signatures":[{"sig":"MEUCIC5ph40kgNf1KX/nEmdwtlHJdk6gwPxZ604ex0kE1seFAiEAo2TPbB1t+L9qkJmqjpH3dab0hD82svzjsppOKXST56g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLchCRA9TVsSAnZWagAAzLwP+QD70wszHWMmlLywwF8n\nCGO9ubi5masBQpVcll3wMADFsIqWrZv0mp5RezTNrdVvvylub5aS2ltKPuD6\nAp321uSm3ZSwoKSVtB7eV3W675kPYA3vVUhjTiQWAUaHbbrIa8QBM2F4IRkb\nckiOAXrQlnHuE4DNCDFgjJx4Hmmvuuw/q5oiBllvs1DTPNnAiJ96PT9srHV5\ni1aH2ieLgdHjwFuMJwRg01nwT1R7wm/2YucsDWPK5qWKEVhIHBszKZ3WOXPq\nbe1JdIiKHtQFRaJwkUSY4LPZeQ12X9GZi+pkj4OzZiDQI0Y6gbGTvA3L6i4n\ndaVSwWJWPL7A/2/t+1tJvUMQWasLPd2Do/Oof9T5kONwrIfcoIOf8L3G2mUd\nneQG8keHk5JZrJGG1TQK1rMXvil1F+u3tdBBLMaBfMHXvs2LXpILNZn9zbHL\ndm/CF0zQktf7po/V32U1ovdiq2Nh3zrNWnz4ExA09uBo9LF2oX6bFxyOMHmN\nC3AK+CaVBQSxK6Af1+xPI+PIAm6fbNIxpvJ9dk9nyyQpQZWUu5y37ygozok+\nuJt4C8ZpFEk5aoSAetKR15REjT2Y+KdaJEEQ3PF10X26KmbeHnqdAtpKpBDa\nFHYsNUyJTUckE1shSZM7hrWkYUywrTYhk5Cb6WWUnbs5DCZ020Hbk3hUhMXp\nqy1K\r\n=+b1k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/density":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.72258f898.0_1596503841352_0.6869294354282329","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/icon-button","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce9f26330c01bfd9225ae2ae1b2410746aed004","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.1b44b43c8.0.tgz","fileCount":37,"integrity":"sha512-QX5jN7lSDtRcSCmg/cm603oOIrBheF9vqLNoFik9cvmG0bX7puruD9uHLOY+BORvek5qtcRuXSAylbNsOu2U/w==","signatures":[{"sig":"MEUCIQDL0fD5QdKExLA3GIfTI5vyAKCA8dYF0DcdbCfRP86YgwIgS4UkFdStYdaN3CNxFGx0NFB7WoKULEMnR3uCMeSiPXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFOCRA9TVsSAnZWagAA7J0P/jD1ZxOG7JCHrjx8msyM\nUq7zH1j/AvXTVQCxpDRjV0SwT5rrxA1TKWEyPAtf19/09eHB1BG+wTJMIL1X\nytFkktDtSb7vCXIG9O0c3c0lUh2IoEzUplCdhEdg46TMoZGwErxie+PDIdkW\nl6PoDIIDQ7e1o9bBGTFxO9BHX3JKzHXaJRnOxufenZ6pkY1lUp5lpiTACVs7\n8PfR94ZKs2Hii+WJFmkq9szs/ZQWZ9+WP6s/gxBhRZSs5txy1VhAEh1dph2c\niNaLWUoS6nT7IGjEneV6NG/kgbHmkxcY1MtEeV5syyb5pSqr9oXggkOGcacK\n4eegWntFeSKbtvbzq+lJUhZCuzdEOLOTN9XUGo1vJcSaw5nMqRgOeO+l0Wiu\nkEQClYlfELfugCMJdP7H4bAf+7BrI2g4YN/4IyvVICK/JbcccjXQuhSxtoqf\nFvnVwPUsxePV5FKLfGjjMFlHqRps/6SPieOYRu1dlAK3dYQd7bYnApNCeF6a\nL+k6Tipb/+GP/LCiWqKtJTjpoXcQE4dj41lhuNl0hYA2DjyJ2yBOrdMsfJoR\nIsf7y9s0qJiOGYRH24GbWFCOPAfA9BFgEtnheVbJvgurw0XBGz7u6hrPng7m\n3Igum8Dfia+wc2o1f5FdeOppjgevbM2zoM5kMCqY0kjI7rAg9evE+GIe6FH3\n0U3A\r\n=WsPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/density":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.1b44b43c8.0_1596559694276_0.9702134469942587","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/icon-button","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b34bf66480a3ae537bba5747b67a58f06fa1a2f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":37,"integrity":"sha512-WWI4+5l0luooiL8h2MNKaTErYDzxoRS+Uf28YWU1UTKxjQK2NXCNe9HXMYXsLpLjiVR6XpajTAs/mkdo0nbJow==","signatures":[{"sig":"MEQCIEYJL00G5cpp8M8ScidWJgj6v5YQfGdoE0AV/4P+LyLpAiBjDl5mOQzIIlJPEE36G4VvU30ewnuGZ95wzboAY4Tv+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPuCRA9TVsSAnZWagAATcAP/1F8IcBuXA25r3/5ZOKM\nweiGkKGTGynEEmWIsHOPl8rdQt3JLtJ0gp5WD0WMLRySiQ7Y1kBRoZ88/yMP\nb4wNBnuMqjs9CKg/eLCmzWsfcAPqHU7w1nl6D570HIf68uORNY6YhJLRwg6N\nCMSdZFM22CYTKNtwbLqQ+dXNXn0KzriVczgfZhH0aheeLo3vClV+nn2Pscb9\n9ZBwXbvtpQDRVeRW8DUUj+pREMMFfKjjskiBXhJGOIMhCvLKxqJuxnBpAJhf\n1Zr1ZG0oiMKjg/33XGdXjT6pflVypymPvKD+Ox9wvURGFfJouZwXEBB2zeVU\nePbqvOU+0dn1vvoxeWXCZFcl66sf5CXiDAFrPFQWZoymLkTdqTw20tNLbTpk\n2TP2MUV9fEbwwdemPavehaPpjCSyXUszYwLt1kFFVVC8yydRiGN7JGReGJ0F\nVE1JwAimaZLfT9eL9HlTIeeYNxRXFnbWDrWRP9HKKMjWN4PiCOvq9ZtYBaDr\nqXZNITzEakpXIP0UKgH3om/QwHZeUuoVYnDp+TfgLkTVbS2gzDERDiecpu8o\nRRduPl67ZYafUPGSpNzCc9JlaYrsu/IHYsBoVUiQeTMPtF9O5EnxDjn39a/n\n/RD9JR7aDFYcqFwofqMgyAnnwD53NMn7E8CyrgeP6GPCgj1t5aLyIZ2sy29l\nL9Yt\r\n=DZlj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/density":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e9d2e2f96.0_1596572653486_0.49050226422598064","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/icon-button","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c38afb6be6871cfc58f45b86ca290762565a44","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b9dff0a19.0.tgz","fileCount":37,"integrity":"sha512-4QfGDvZkIYF8oqFPpnlVbJ2VesDbWMilDwukmpGwtxZKxWEyKgy30jWOv2I99cT7+Rudi9nsncLT6MooDmFXww==","signatures":[{"sig":"MEQCIDjkIdEigPZEGA/wYW3QRTPHRncpRDx1IvDJlI1//TWWAiB0HWDfG2Y18TTtTG/wUVgGWxQI5ePdkzSnXFw66/IzbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwiCRA9TVsSAnZWagAAl7EP/RBdFN7P/xysLb6RBvks\nzIRWaYf7WtOPxmMa1zhC/vRg5urpZKiUkjCrq5oyfCW+9pAb12Xm76+wY55M\nhquCmFDoZXY5vq2Gzb5bEm0cJzCY579ARmEA7myPE4yDPvCyPzo9mAfw8JxM\nd6Mo6m1sVU+xvO6qj+E5kqd99DZt2rJcs/zH9M8TP41jQspkCeQW9R4REjnc\nVFxoCSfX5ymGAHg+gEMWACs2jpBVJ051OVXxjR1jU4vUMDAAsyLC1cwCCDeN\nVmmr5ycQWEyMOj7f8q3u18G9rnaG1/QX/2FdfQcTvhl4M1SaaCGNY4rBg0yv\n1V6C5EctzY9cQzcH0JbJZr4hMTJeSezBmLSbfPGbJ8ZxY0xlZmarnK/E7LmT\naz1MRk7hGi3p8kvaKBtXHbBWJY3jJhigSvZ03Rb0xJTOiGVrL4bcYJ2LKpy7\n0L3lHlS9YzDxywm7FPi6xLpG4Uvr2FoXYk9ByayAIKPnPlut+frJe3K+NbMl\nTEW3Zq2sTHgUEvh4vzhrOqee0zQJfZaMNRhpTDrsIZZn18vcBcBzQdbeNC+J\n4HCyDOfZxZ5/nCH8Rj/xL7C5wMMDDWmc7T+kS/6UtnidT77UaEJPh74PnauN\niUqYlFqzRKdTMfMu6a7fF8uaiAssxzwKL5xWX5ubWrJf40IklneYl6v8BxOd\nbzJM\r\n=gYLK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/density":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b9dff0a19.0_1596599330154_0.03511198346777045","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/icon-button","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feac1c1def59a5d2a5ce0ec5f9bbf68b86f5fa28","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2bd09a706.0.tgz","fileCount":37,"integrity":"sha512-i14Y3QyxFiq3Ww1Sx6C5ZhyqTsxUVhx6nW/Flkw1TS7X/Jz4hT5rgtrZt78HXHzgnc/HUjLo55rnotEq0brKYA==","signatures":[{"sig":"MEUCIGw/+W+WTzds9gI+Z7WPnPAJblDkobu+TWCO/e6+70awAiEAxSHF9eASFfOedu8K/QPmumBDaen8+GZDd0ne9fo4L1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1VCRA9TVsSAnZWagAAzroP/jWP/C7Mr4jzNNQ7LoWo\nsumLk+iMj1BjKkHijQVacrCGOJcaElz1sULJdydL6wkEBr+5AJ9FTo4RewTv\nlDbj1Ax21Qpfs5juLpM+DZIwC5nlFw6J1ZIzGErlBRmcXLkTlFYZbxJHq2jM\nY71pBD9kuedX5Pwleaw5/SYJD5BX5JitrSAe44xbd5TgLxWukaDeNSKaiW99\n/W4N3AG/hNlW71nfpriKlqmdSoujZq1eKrhuXO76+WTb3dmhTb1WBgrUE3Xm\n6XSo6Mi1MIh/JL7aIftZr9J5tWgL/BCi4Cs5vCSxNLCbYBbStlhccGjlaXGV\n8U2Fy0JyNb/ibDWeqZIFfY6JtTXamX0lEuIe2XVpqLClQK9YIlooFoeZ1BjX\nyjZ8CB8XMt3qvlFSFVqnr6S8trahe68qoiFzrCsSqRIKSZlXH/upYGg7XchS\ns8mPnPKQVIymd2f3A4BmEAKmWVn/9vLfE23aGkAen3cJYomhjvQccfZGB1pb\nF7W7tvE5oKjIF1CKLdHAYRn20exObuyiznX0/8lI7jEdskbShtLeMR6AgKCT\nMlC1m6/47+NsT9nlxl92ZW3FxSkORtkwtTVc2LVlj788AQAFbaJQVcf7jTpF\nyuNECcPef3vNUb9VhU9u7EezgTiFDXRE1k7zY9utIXGCSAWKW+pem6dRLjNF\nFwrB\r\n=kQyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/density":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2bd09a706.0_1596599637382_0.5569178338388827","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/icon-button","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18ab76247ea52afc4e7dffb72e1803b5f9060b4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e0560522f.0.tgz","fileCount":37,"integrity":"sha512-UdbfQqHuEZydTTaBz1DPrNr9OkYGSdUUZTWdk/Jra27ClHLHWkG8UynY5QK5tyoJzBsEQk42XHV66FO3Ps8Rlg==","signatures":[{"sig":"MEYCIQCXEiL2r3euO/sKo3wBcZ2OTxN55G//xlm+xDpOMeUbkwIhAOcW+LsIgDLw5e6aZguX/W6qOc0hs0133LccNfl6KWFq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuoxCRA9TVsSAnZWagAAGOUQAIiaRBK22U+jgY7w0lhO\nc4AxLQbnLdFbS9G0jmor18ygUMkN6AAszG0tECJO3g5Sy9s5ieJkJhp8TyX/\nDyI+g+0qJZBv35G7+8gwwlzyDuaHnb2q0ICOISKBtQk3VEOCcAgtWDlW+fy3\nU8upEV4uSZswzz8WTYOweqSpX0kcgy3La9CE1dbi1eJKrwUnHvddbEqFPViy\nWK7D83y+fL23I05E5RG/MwBvZaqmRI5b4DJ1vuizdSVl9RJPOGzndkq3dBYQ\n8Y6N4l8W8f4d51b7f0pCSU5x+htgW9Zfnt7AOt7hAuJVspDoYfjOiG/VCIMn\nTZVvlM4m3WvMuNuJ/pGrEo1BKWIEwuLcrCiCNtaJfeaMNX1VQRESFwkghxVU\nrYsA+3oHtjE+td1vck5T24ZNc7lteIBPP9neMhLDz4sfxj0LX7q7ZywUlXBv\nZfazdjFzyGJxqD1t+PaFWy5qcSD2gQDGqXDK/DQB3RNABscJz2t4o1vJ52oC\nO+xIGJIm2crHQXT7fjghjc+CJC/fJJaxHIPgIQXIa3yajUbY68sASK0IGm4w\nPFt+vfk9Nhlu4YYHT37Lcq2BF+7apGGdHHh5FE6jfA7b6DicDHKEEFp5/rXZ\nks4KQF95Y75TSDUL7Hg3LSacEV0KQzDtNlEG9wNP0IfV4TPtudlrCUqwZqSD\nNFrP\r\n=Apr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/density":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e0560522f.0_1596647984822_0.22335504965973163","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/icon-button","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a65200d9522ad71b5de404c46dc73aa30014b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":37,"integrity":"sha512-ts8KcSvv02oXAfxmIXLaako8P+5uENB06LJOkf4OMNjrYrPIIgrLh4BooR/N1wYrsqPqjtR1vB3ffGLCHnZu9g==","signatures":[{"sig":"MEUCIBp8CMZf31FT4tJeq2L/aQpFGKu39FOM7f1IxvM4tFkUAiEAyPchrKON01IvEUXFt9vylKUUhhY5QCC6unfkCmrEcMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7OCRA9TVsSAnZWagAA5N8QAIayQDNGAawN+z7l7i7v\n2j0yQhpOdaDH8zsbhY+1rFbeoPaxGnmA1TrAcNBeW2qw2UPr994N/TuaJkEN\nHYUeRJytbwyaqU0DQlV63r6SS3hSqdpjvdGQ3ysnM6k4++WeGRLMsDZEcWBV\n5L5uFCLEO49nKVcbpqXGSNiDCPadcL91Pm+6I6d72DL1NZQK75eiwjYk2nk8\nE9BanuWmqh1siGweDREbNGh/ECwv2P346mA+wiOj2czYB6FIUzLe9DFsEexC\nAcmmBko/xdQ6UP4OANgPOC/CiRdGnte/x6yTQ9rE1MeCpSYL5eOhGStPSCzf\nkV0bDTA5eNd2rCVv/bEvfWG/+w8/R0uNBx0lZ8m34lpLFBZa0Wr1peW5pEk5\nT0B82sRXuKjOMoKcqWz46B9aL6HT1zfro+HK7vLnmjusm1rbK1exX5fbUk9z\nWXP7xJSG/PGPglwM2f0s8wIhekK6m7/u7mjaOjgeVA+IP6A67VzV6napg1MT\nSX6xgm5mm9VQHyMeadDb0p/VzFjb8zRhn91NwTc0cwkM01sGvyQ4oakpKGGw\nPruoeQ49OFQGgOnLtFa3ITz0BAXHisXZTFwSaCwfRwGzN6SF7o8z24nh43Tz\nWB9axO09zmzr2Qxf1Yhk9hY5GqO3L4JhGSphyGJwuV7+YEsTCranwfON0CGJ\n4DPu\r\n=F+Xt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/density":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.08ca4d0ec.0_1596649165482_0.2272428531213675","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/icon-button","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea8a55f9192c66576fe1a90d21feab90aa4579b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.08090126b.0.tgz","fileCount":37,"integrity":"sha512-XHu5b7H0cUwTdclNXU6t9WCwhXWjEh8UhEzzqoBbeYouqL56BoYRoySqK733Fgy+MQ4F5RL1FXoMBfaL2tGlfQ==","signatures":[{"sig":"MEUCIQC6/6cR/kblTfLvT6AugyBFbmUXl7ga89xsrTIktRZ2RQIgJOUvYcwAs/ZEyKdjuIQf9jiV86+AiOKvwsqjo/wvYRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrXCRA9TVsSAnZWagAAvgcP/0tSKpPSmbgIFsqYJUB5\nBN1kt/pTsIZa01UnNpoxZD1dbKxr0Qw0WlU0UB2i9CMjTI/oCaQnAqbndrdr\nTzI+VtalQmnkubTrT4bNG7xzGbED79ygxE1HThyJnQ/roc4Wf480gUcg/fN9\nwvWTcCrHXZDHBDzrs/h6XeRs+LKmTa6Snvau2NAQiydSXIl2it2uI4/P1Gdx\naMO0UQcrrrb7RvOOGHs/QAUtwVewAWjoMMTiNSnEmNxPXczlP3nWXnlrUKMg\nOVaVTbfW647yapnCuh7EZRuFIRVCnSZupIhyI6Zq/5Ra90KlwX/HIoj4Edoi\nHMXJzqIWvtg8yiw45eOTt4iHTCt7OWejKVso6zD3JX9v7RnWfnrjdMjo4+S9\n3Ynp8sW6eG15CxZPTqiz8I0GtJrmHfQJ/QWeMJoEgRmTG77BKGyVqW2Xdj+E\n0PdiRLMxJt7lI+AvIonXePX6U1FcYcq9hZkVDceLi7rIVIllPAwuB2hSLWzm\nL8fN9zHvW0BvmadnHcVGhR5WFQJT7q7psKVV4JwBIR4ywNVOoOKditr2Y8Zh\nSKofhhC7cKwLtKgvbzvu3ak66KKSGHdp+59Wl1/0vteF/h4vbUOikEm4DqfB\nZcvPAq5LNJq0fE2mUqMib/UG1sY/17mjUB0TpQuBfFD21Zjd829ws9RxPLxL\nCfl7\r\n=wqFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/density":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.08090126b.0_1596742359244_0.613633283691517","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/icon-button","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0758194e80d29e48eb4b5f26e04b889a758978ee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":37,"integrity":"sha512-EDpH/WKZm+i0AR0xCRcgCmwMYuteOnZhjQpf2zceg2gVuBdK6j4cDZb82vAYbcRS4nsEO82PP6iZ2t2Gzh2C2w==","signatures":[{"sig":"MEUCIQDD9/idLEoVf+mMpT1YJlQgUZfaIUWBsSsdmCcs+oMzSAIgHw+6xxkL+EWjcM+hWL8kgThx8N/z2aai8YThjvJ+6No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsHCRA9TVsSAnZWagAA4ikQAKQj1FFkqEdnORdKowPG\nkRD6ssTHZCFvxBj3tkxy3dggDf0KuGJuUxD1O38W5aIJqGzzb8rXTbgsMLJq\n/U30mthonME2DtpIpdTPNdj17mIkfdr1TcasmepLq60fH5UZF+BvPTUhzEJd\ngrQnzXvNjBnVbSR3Mwh13fQ6mgh1hIqTdN4V9p3dkTQTQpxSBejVQAJ+SpFX\n3B+S+X8WY0X/xB397JtmtnWoCiukzqpWDKfc7LqeP+gtcv2C+ZivaXjGIC/7\nnb2Tv+NQfLtSObbKQdbzzJqhSfGjS25QXANQ6mogWfQNEXX36nudRB69X7Aq\nnAd2rWfPm9h1KaB2Sf5Ut9BQUrf1dr9gpe2ChNSyaxE2l72HO4m3aKbwKx+a\n0LQDMuuPw3KCDIPW3su/hkjK+zjHyM3fbp+ltqNyDvr42Uyr59pxBpODjgij\nrEhMLKaYk2G+ulcx0dNDSYvOaINKOq3/oLgLC0ZLk6h+VZ0Xw4B/msTGMF6+\n3wpV2URvI32YmKAZf6DLvnpsNuk4Usw2qlTHQ4wevo8wuKIeaiuac5g+SKyR\nCanfELIRlxDaBTFKfbmy4rgMzJNfbzk0JsWUkaZEyfjTXxf8rv+QmxP/7fxk\nPUrmhLosCL1/Z5s8OwV8LN/2XscELvb8UpdbmhIXTJScFpjJdp02ylwyypi/\n/YQn\r\n=Fohm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/density":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e8bf5b2ac.0_1596750599224_0.038285738958843796","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/icon-button","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"384b961020bd72bd0af5ed02ed98077c38155f33","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e3b746208.0.tgz","fileCount":37,"integrity":"sha512-QjURCwdlgP88KkImw1sNJUuHgvu0vGfA1WUUquTYJMBjaYt3/l2ZvDIY51zum6dH73+kU63B6/KDZC2okI3pAQ==","signatures":[{"sig":"MEYCIQDYzzvaaGSyTi9DD3FN2ogecIQgzLgzbmrdtDjUo/STiwIhANB+lmI5LGZrj+sAo0usF7junOjUH9EQuwlJn/SsXlqL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOjCRA9TVsSAnZWagAAhYwP/0rIq3Iht+L+ZW74XHb7\nRPmgBRS33QCvT4VA6NoNgieD5tjILPLUrlS/XEGz3QYY22Czl3uwYB5Qjb1n\n0rMjlDrOV8TihSJ8MQ5sOCVCFZ5Qwhm6cU/FW0CKkOMrwvQb29UJRqBFwbwN\nZXv9eU34D6ogpY2W5+M0G8OLcFuxxmHhT9mX+/HNORySeGK0Wid/0b8F2ZET\nwmdnwMBm2hZLSIrLr4PapS5rmmKxwumaFlg+7pFdTMvZGNj7gD8pLaWZMeKV\ne6HgQN7CLvM4wYCZ9XOfRx4FSxxUNFLNenp/Vem+ok0agk2E+qx5ry2TUPVb\noGUYfjSpdS8WZbVKKJUet4o5f2Yx6s/ljtUCE1t4CRa+sh4ZwACcY8c/3lkl\ncTCEQS/kxFoinmFO11rSECDkMt5RxfWjoaVy2HgLHDzftbrsfhxu7U6Xhhxw\nldtY1HqkDn8edgojEPYe+qFY9cA3p7TITCPg+PjJQVkuejTMNpUtIp9/znv7\nW8kOEoi9lXyRjqoNNbxRYo2GZtlHDRJodlPWanbxSQhvDSWGBYnR5/U2j43C\nGBQysNG5Qi4LEriixbNg5VIDv/qygkvZvr6EMzgZrt6gMy0DRg7SsMZ4HBpW\nmc2hj011gtQxbTJfufOrbsDJgG3X5o+etpb0iZASaFYxlwNsefwVPhX/tGO4\nwfSd\r\n=Ldss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/density":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e3b746208.0_1596752803384_0.9728851191369028","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/icon-button","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aea2684f6aa0ef33c30ddfed90a4d5d8d9fd4c0b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.96a640534.0.tgz","fileCount":37,"integrity":"sha512-0WelT5OTecAVjIk9ynG7rDlTwv7RFf9JOpAR4V4c2a1njevvm/Rej15pIqR+dMQWIJyiCDYw/8VqQb8gg39jXA==","signatures":[{"sig":"MEQCIFUjQeHigMxuEuKP5YGcXNoEOCgmC3xEyEWMFnL+jwZ+AiACY8D2u6SV5hKI1vrP8bmNXF5SEMjYTbTcUEpYOWGL2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcZCRA9TVsSAnZWagAAraEP/jjnp3G6Gn0ozdXjES0A\nViATP0FMoSkB1RsLEfLMFyWQdd/atsubFEbKPdQufPI+oUEZh7W5+3UD70tq\nJJGHuVAkPbEyBCg8tZtEqaOzlKyLy8Ltm/8BIxtqril+OMrYMDdDCjn/h1H4\nZgDHfnQoxrCj0K3LoOuzMvnfwNFU9dNFElYsMHQnlJx1hpYe9tpqUUHm/M8e\nxtzBBo1ITzSw2j7O78z661nhIyYw3l8NNrtTJRdNkbOIleCk4sSfcgGa32XI\nZ2s12g8EAJEWjJDmYs5tu+qX6/n9zd1Ukob35yHXJtZAuBfGHnAn3POxgJmM\nEZ5qI++RBWC8Ol9V5xfRTgmQGgVkjETNnuDs6sdzm83so0RBSDTUciVqiFLF\nOgUeAMsQHUFPkVk7aaJ7m6ICGx9XSnTzC0Fs2olBuaVK51EIc+LFKI2v0x4Z\ncyxd/6YPYIMRwHYGsJcw2lJL7gjGEx6aSaduNlT+VPBRyLPLcbHL4eUkajlq\nqfrNvcLphvRwgpE1q3t75HjHKN6eu1KezdJlfs4pwKk41B7EeauhDlsgSNDa\n+kBs0ttnq3J3+QQxW/17I/I5i2RCarFA9/yO6w2S2qNDoekCGx/QqjCqFGOI\n322IZRcS/k4j5YtEePxtAfjUGF/sQoyjbOlLTtNQQQ8AYOdQkNVajPt3sCJV\nty/u\r\n=0HMU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/density":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.96a640534.0_1596753689434_0.13738629557228088","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/icon-button","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"077fa201ec182fe28cc0d93845031360b06d8757","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.9f9aac825.0.tgz","fileCount":37,"integrity":"sha512-75D15b7qqswp8TBlk9GM1OvZBSKk5q03AewJP8XOEB7+BBWLMQspM6CFT5bd8jlUQcjfzPHSDiSUyijY46K3fQ==","signatures":[{"sig":"MEYCIQDzKMQlI4F3W8/+1zhQvnDHFSSr1TYFF7K2Dh+TY4plFwIhAPWKk3vMgDDelxrmtd8qrqbRqS9/LrO1M+O5w4YDtqUr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7LCRA9TVsSAnZWagAAo6cP/0ROde7AXwXKde/+A+8G\nhK30cJ2hOiNDsYk32BxE+yPI+h/L/2hgh4GsWzO3jlsFwKzFSlHMY5P1PCu4\no0+UedtcOQpTt9YsuSaMnhhCDih3B7V0RlZBX8WefhatIaxBjYuruHN6AwfJ\nJTg5smBM4p2jbcO5yCGgvL9saPkX1WLIHFHNaw2SwpouxIgcsky5tADryEGu\nL7Pr9GcdXrf6xSg29HwEX0/5PTWhKr2tNrxbvWrEGgnY+Hy+tvT6TBHasBRZ\nvRQv4cH9Ok0qtTZQxCMWjrD9To+ZWbCp/CSPu5LZMCY72Na8kKAUBthDKb+n\nZDlXCnl5/PaUo13qaCe6QeUcfIanzmeEK1AtseGp2V3clOh8A+4YJDzfnafh\nY/EAeZN115yHOTwEq07tDmDYwkA5+WSqvJPNWof7uiF5//yecGPXb07KVYGx\neoBv/RSsqCXXnQ17+HQmz89l85OFMHT1ppdwfRujHt9UNRePYO/n5KZoPwB2\nC75pyBt1lK8TRbS3kDIQp8nebQbgwPWv/2ni+M20uOCsrG7MOAE59P9cl2X0\ngX5yK5qXeqtiCZcbmwOSst08TUgsTF1kIEhwV9dS2iEkKp4LZwr3vesv38id\nle2JHnYJSzdbh1rR19bUXdq/CrzkOELb6NhSR72yGvKZT16HRX3uQyhc2AhV\nBTpl\r\n=P9LS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/density":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.9f9aac825.0_1596833482896_0.8080298770380938","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/icon-button","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0d74ab4f0da3bc0b3954597c69d66dc234400bd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fc65fd00b.0.tgz","fileCount":37,"integrity":"sha512-Nq8G5jH7xebPPvX0xUiv+xEAGVqWkyekOipfbq1GfR1VrDnB83xuixS4u9144oMeZBQZii7X4dr2pbuTykkarA==","signatures":[{"sig":"MEUCIQDsoWhWr3EpFIgtxM3af+7ZD2UoPJUXcd+CP1YSUc2LegIgBJylrHyq1reUfSnP/qefJujwVqgziZvRnMPyWbqkVVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWW2CRA9TVsSAnZWagAA1ngQAITlV9ajMZmJwYU+grKj\nIgbXDrCI8jJjU1jwstLAQxX7WTPzgK9TQzgHhQkECzMgdy93lYvBBE7Q/YyL\nTBr4qjkSNUNFzyDqMyE/IEgeAY7GhjycrrWJQVb9A2q3MU3BTTUZvuZ66zB6\n5jQUPtOZ5u4TUJXDxt2JgT3HKGT31w1Xy4XYtstE3TPVVQ9HTNd229KjEx/9\nXNSz5V0sIDYTNjeTbtGjt6bZ64s3S9IDVyfPdSCXT+L9J6miNNvzx77+ppyl\n6VgLQ8RIV+v/O/bQMnPIkk6+HLG4NuSKgWZ7S5VVPWk7ukF7RLJgx1LcnB21\nxJHWqALjN3WEt84QbGR0QJ7FDel8G+8BFu9StNzm24aiN9f800T6RJeYhXRH\nHDsfsEgexkurLGPkFiYzbAygasCfF/uPb7xA9kEqZA/iSYm+X15nBShEO6b/\nTnxWmaBADv4QnnC1uOfG7pBSEk8jeYer52BLTvbt2JZldZ/J+dZtIZ3sGvXI\n3sRA79MPyMwTBEpZlP8X8SprhGWEHL0ugGLEZLMmqnUPqrxaW/KWn0+kS4yS\nrQxUGAgL5kUDPf7MvNsfqbMYuc4BCyK7+AZazqSHblUXkx0b34Kc0Vt7T8pX\nACTRiJcJ+TppeF5ppAPeRsjQC+QlWarUlGLpY17BljfaNdaeD7dWkKkjoCMG\nCQGa\r\n=towh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/density":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fc65fd00b.0_1597072822192_0.08907484607065563","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/icon-button","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7d6e38819bb9970be854d22fa7643f969ff493","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.02e372c5f.0.tgz","fileCount":37,"integrity":"sha512-kOws9uKFCPOIPvNIkLdf6FMlWPc82/Wj8Yk5ERSbAs48l5brQYZow3Wh2HcTGpRzlaJVCekP0gp4QnqLDK45Nw==","signatures":[{"sig":"MEUCIBQc7IBCm50Tl+kPnoILyj3omgc98OkcPnHV6OHvkEkiAiEA4XtauXfarDu0iT8uyeCWPRYtuhrQGTVrYDd/zhGf4LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxVCRA9TVsSAnZWagAARYEP/3Y5E3rj0NzjpJvIcmDw\n/Bf7V21almLxU4yWdpbZEhnGZ2CPeN7dPXvMt6DDEbHcpXhu35uOSUg6kCVv\nob5dqookxUm0R5oCLTtkZDpIc44KB2j9RD2DIX7Az/1NU4oUwpHjkp8aNvPV\noaVPXZ3rNOCOOCo1FD36iVpeu8HUBksuVgCYcHEOtrxePlxBPQKeZHPGq5Sk\nlsXzZcgNl/8vyZJ2AUBFUC6c9y1yHqVV/B/BWHIl9IbpCysHraVAs83U6cZD\n7d9qFJvKW/W2r8jr3ny8OlF08BTJClvzNog0UAISOqMFqHbWF9RID+BCAvct\nAwvhgEj81r6wWLVL4Tj2yd3JWYrej/SOs9QQae8+hTBvqQWu0gFG5e5gO71q\n5Cl9wa+oE5Kpsiek0hD3WNgEJDgVaI8+rx0qwgx6tu7bSq5eLu/xB6sLS9x5\nQyuI/99u0vj76mRMnzfgkQjKSI/PMuZrzZet6rFGfiFgpTsKVAPdnhG8llBt\nxBWFfbcevWOFM2i1wkiwe+PzrsWxyvQpqWcQOJ8yC76hJV6Ox4Gl1ebKPYeq\nENVuQUGG1VR0hj56xBWknkibENhCAfxA0FznACsPgxaS/HR8/Ahxpt2O2+Qb\nEy/ZVQv+4BBaHGiEkX6sPMfj+Qo0DoNJuZgde+G6HJjR4ZxQaOc0kSkzfFWv\nW2xK\r\n=lLA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/density":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.02e372c5f.0_1597074517096_0.6693709462026036","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/icon-button","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898e9779f8aa1ca38a0f8bb0125154a28ffeec1d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.66669e3b6.0.tgz","fileCount":37,"integrity":"sha512-jaXOWd8NS/6qiTb0FPHVMjagsIsxKjbtEMVG53Of7riVXm8jIAP8PgPvRUqzcEfxilQ7ByrslzesXlCJD1jcqg==","signatures":[{"sig":"MEYCIQD8xzGUDawb8OdG+eJNgtgz/5D9OAfgrFQyj8swB0oDPQIhALaW8GgBtWWZwcqose8OuTviEEKzPgWi/VTlaTjYgfid","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1DCRA9TVsSAnZWagAAoFoP/0OY6SGAQojvNlKnE1kU\n7CTC4ocA5ejFFKAo7EbG0itbuT4gufUI+PB99P9chaS3d72gLuo/ike8oVNf\nbgBFahybDEp4319GUY0dPxfolz4UAkPpIoiGZ/aVme2aQ+zTF+UYTE3LZxqU\n81iFjMwKEN1k16lMZkvvckWfsbgV0YLag684G5aNrxjAuVuxCi2KTbdiatdf\nl22fxBSJQ8OXXhl0gY+vAQd1oMXMFwx6VypQ1g6LiGwVHPxO5gjHoV/Dt1hs\nc8JTUZ2B65q95QKeA3M1+z4c10SJd6nW97moXq2JOJczMQZwbprPlft5f1D0\nz1pCyq5MXRN9DQ9RxNADJqO8C8ockNq811TvMuFr8tA14SIbPdVjebBKLI7t\n2S6IOhnzFix6r0eTriyUZNJm4N5Xr8VuoGNUx5v/nuzkCUlep2UEdTn/ErY5\njaUMoa3tlZrOnpqaI8iC34mnVKcp0Slxw/aNCGowwsQZsZ8Baar4Rv1G1GfR\nJGZHuzhetKrglSVkFTpXatyRpb8hMUVhZZ0HtQhQWRcWWw9Ssta9QZKlbKbg\nbZlN4Kx8l4AL1alK2uP+4S1+wONN+RJ+9hDZ9QMjciPDxUGj/JAKpOXjx6bk\nlZNrA1SU27xFUaSksUXyv5p+HkDRAju6iV1RGk+/UHH3CGJpGywrp+XDyPB+\nTHrg\r\n=UkV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/density":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.66669e3b6.0_1597074754775_0.027543165138351533","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/icon-button","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b893b0f4fa5c39d2a710ba3326e3f67ad2e25f42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.6d1ea9761.0.tgz","fileCount":37,"integrity":"sha512-vHIalCksTYqI1Zbb2FRcLUsKpjqjrt4MbTL3cbr66DTVef45FPMz/qfwoQ961czjL5qtLrAOejeIQs11vXNEWA==","signatures":[{"sig":"MEQCIA4iuYlZDXAKbduo20Jc2iFOvqDpQ2kukIcXW9sHLgpvAiBNO6B01EkiwAcj1voVSHEzy9l5SQLw0bK/m9XAYtN3Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquaCRA9TVsSAnZWagAAvRwP/34Ej5ipBR0qccXRawTR\nXTGv8MMlAAAARPimoCJH9EznMIPWBbuWJpiMU/eSJN7i1E1DoazjWiYrSOg5\n2yL2GXjydIyDw9cyNqHq5nQBTalm5OmZGcRBNwgwXTEwY6sSouI+OC1X0hZT\njn0eHOYS4CeFvqL/BzHbxsCaAMVBuHvSjqDHEiQs+rRMFrv1gkNIWagwvLid\n0LVLo/PxcCe5LCiQlMbtJC6VJ2EBuD6iWAiHAw4V+Rh3pTZxxUKgaQyc5dZY\nNG+cYDcajHnnsdai3IO0Cb5tK3iTPY1La91FHFQ8tq537d9ZcgM3p3W7O61W\nyLRK1mPdxnTdf+50gZOJ78zC3ju5bEvNZKNGSNxpRwdHaU6OfRt4lGLkohFS\nI+CDjR5pCu3A4eX+y6LuSaopwW0OFWa5GXZyLvY0Be6s6PJh2EdonJj6jvia\n5iIwWE5UM9L4//AXbhPr8Xp8vvFJDr66on2s2QHLXX2HiLN/kPWAez0laq3c\nKXSwDBWkPPC/R31ijKLnJtldHqlr0BGyG+kYXc6U4uOlaHg6lwEQ/nARKBnj\n3tagTuqcc4nN7HtRQU2mDa1A5QBT6s3i/eBL5BZopakpeVizZeF6PBUUAu2u\n1DRXr3rX+pW+Rf0rPOgzF2hMGGzX5p86xV5GmUEa3HoKvJ33uq6mnAO/zAw7\n5Z+0\r\n=PeJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/density":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.6d1ea9761.0_1597156249642_0.42800609302447623","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/icon-button","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9063a0704496b47d96b523ca487058ea6593ae9f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.79414bf9f.0.tgz","fileCount":37,"integrity":"sha512-UTfW+I7oRDYeOAaBH1tUfyMubigCdkyNBkTMnK2T2DbdNrjpeEsrGIA/zCOCIvqpfGt9NMaYxFOOoQFIB8bFJw==","signatures":[{"sig":"MEQCIFFhJP0Eymbgk4fHIiWkTSJK6aTPDlREqSdtcIL8Bnn1AiBEX0YO1YZlV5TQ5UfESLRP5VxN/EW++oXYuZFL9hg9Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusfCRA9TVsSAnZWagAAib4P/0858cChCpse1nkpTIwS\nXcLUfiHt3sfmE83qYMCpbB4Qyatn4ufsQtU6WIEH+iCXHbCpokIUHg6BUD1D\npnTw+AOTeRImI0TKLZr+2i50nM27uhZ0cI+IKfI3Nyk41AEkBt8Ckh5xJZru\n2HUxuvd9RqFzZpLufD56+HYdLbjPmicX8/RMSODLW4rJTv008deVLBwAkEo7\n2WA2bmwBXu74VVcQdm4JqTmDiDMiyfnQ3nlQaKa9ATh09MF7fj1vYgUesxeI\nRrWVbOhxMBdnJonlhv7eK/RwToly9EXgbcHnt+0Az62Oz4hev8wfbkh+qNkZ\nuT3iOomlJizIxEvrNQt/qVtpOv7mSl9OghtEeQgdzbMa2spBYC2WA4nKz4ea\nv0zdlxLb1k8gL3brVafPR3Iu1UfMjiPjyvtG2Ajl9c1m6FgLPyVVu1yJ1bBT\nbjFyQHFcyD69QkKOcPa7daco9M2L3ALAbKRHrLXpqRvbvad4rfWiuwf9/uI8\nXiB1/D274cNAloOTzXoB5zgQcJid3632/1+ezepjcChy8WmMrI0tJ3B7N+gT\n4fTvVhvHDmCnhaV8KELKsXeFJDwhf5IWbIpPujjYF81H0CerIo3GSHDL/6+K\n+q1V+MEq4NIG+PfP13n4OK6Aa0ASqGyDccOiBbElZNTL8hXscjH89/xuG9ep\noE0M\r\n=5X61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/density":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.79414bf9f.0_1597172511336_0.947959060390611","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/icon-button","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb03f071ecad4ebbc08171fdc472bb8d28a5939","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.85a5272df.0.tgz","fileCount":37,"integrity":"sha512-puOOs9CbF/YOo1gRf6CQtwKghLC7Q/VVwXwmJ72OqrV8gh6fFQnti4dglsX/JvNwfVRwmicGz3YYw0wM70SK2A==","signatures":[{"sig":"MEQCIFPkwAvG1CsnSdp361nZoKSCPKd2SVpA/NTVOL0V0cc4AiBcRGdmJ5K7lqrYFM5FQF4TSDYzqv95KkrT7m4aer9dCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqrCRA9TVsSAnZWagAAkNMP/25692U3mnwhrI1QlyOD\nsbmOg6uJlZeKJbBt4/sOrHgwRF5xCDzxJonJjPqWWpocqvw6eWhrS4seZD93\nn/MxERfCfSpdU5WgWhP2wftoFeC4Ah9HMTrDuX6sQkXcbAwF5giua9fStCkW\ndyavS/DbysW6PLtMLhkcKa7shvh5UQYzzrWd5cd3dQpjE2kucJ/iX9FUBajN\nAXyCSQR0sMxr+f6CPMaG/5W8an4dRn2FEstdezfs63oy1N6bJ3m6DfOsCsj3\n+/dr2pToudZLiYWHrRfYPvcRJ0DP5mFWP2M+lUsVo7cPTur3t/4xfhPL32Dq\nfm5qMJ3aPkd1kiWwXcJdauNMk+J3qpCPazAdQKpf08I3DbhKSTGTypiJfF0j\nxcMT+gOLnonDvLreQ+m2UZ1bfMegxPxvCTZf80rGIF64EidfhxRNJ7r/xMxz\nXsmlWOT9Id04PTl8BVjIeA0ECatd8WUNXKW5NgUndOkiPUBu1xQVwcGNHD8x\neQcI45k42/2SjBmF4c298KhlNPXMYFIhu7YVjFs1papxdId+8FBkF4QREWhz\nx0RNo/ZaJ8qjED3f9+QgBcoABWSUX7sw3AkRRo4dt3OzoY8MmEdn36DL28EL\n0l9nHZ5pGv1DpfFg46J6X+RNtx/GaYOjPYdIp9wurnBO+7Em8DcqmFfwFLk8\nAQmZ\r\n=Ejny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/density":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.85a5272df.0_1597176491101_0.3968956476568424","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/icon-button","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"521fa645acfc226b4b198f093a9a9642dab342c9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fda053eb8.0.tgz","fileCount":37,"integrity":"sha512-+gwwXCyfnwoB5TiqjamcvwpPbPefSPAltnrAvhNm5XK1UoMLPsHGvMQiQSAEAAHK4xSABwyjcMRkIOVR8Ip5Ug==","signatures":[{"sig":"MEUCIDpJGugJYP0WOe7IP2GPJmi7DnsS23lcfx4lmepFQuN4AiEAgX5vcYLCDRyhWhOffwLLH5JtbGA1BNO01ajqGje7Cr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEs6CRA9TVsSAnZWagAAAtEP/RMmXZ/TOewiShOUkUbY\nuhBIWGzYAeDFZWZNkNjwSuuj3cXZOkHz6FkWFZ7hnM+lwdQcHb14j11K/Luy\nSL2ZjLwxVQVe9s7vhtXHGvjYiKKhOqMQ3Ezu15oH3nXckA3j9bJYArktNBzK\nI7uuKl3F5u02RWhmQj1MotZ6ByiKQCmYWYTreEBbzCO1OfA99zKQNX/by3xP\nbIS+zxUJpp14tz5IM974E/7ew0LcJtD/m1XPDQ/81KBoE3OVM1zmSAKQbGhJ\n3OhNdfdUeLAWNym6giACv1m29nspveW9nherpKVRaKBg6KbQzKr8cp0mgSJY\nmZ9elKluLsIcak3ilq76dTyrlOwNmY9l0O2vXkfnmCNjr9IxZJDJf3xDEV92\npN23qK1DLlBQdXnoCOzlLULeDFdrVu2EY6XUtLH3iI7A640qSiT0gwNMeHNa\nWx3+TrAf1rHdleA+IqpxiUDBV3x/K/CxPOrpeeuNHxyoWW+5FrSVT6it4Pr3\n+/ztENa9USSppL2/NuPDezn1B/DS/BLnxx58KKpl6GzlIQyl7dnzB2W2+h4R\n734a5Z0S6O/K96BmgxVsgsHomLW2On/C+nRWUxGmiT8raGcEbiYV4wjmKlYT\nslV23gmDfW8YFrkRertntkOfUHEPgVs7QG6WHfssXBN1vVkzO9eRtDXNSEv9\nQKEX\r\n=6lyc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/density":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fda053eb8.0_1597262649696_0.24683314327969863","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/icon-button","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2297f442f1d2ab219a492f193b441f11ed5ec246","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.760873445.0.tgz","fileCount":37,"integrity":"sha512-QHjy464htmRfNqFaXpCLsYWGEsEnudc/VYegaDKxLvCyUw91QZyBWJm7GJ/msL6j8xKGHPPT2+AGCP26CBGzsA==","signatures":[{"sig":"MEYCIQDmAcpgf02YsZfE8G7kgK8aFcWP5zUIMglv298OqGaurQIhAIUfO5gANeh+OBvjUM9PnR63UuJCJR9SCh312nceEnpW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJzCRA9TVsSAnZWagAAlKgP/jajADYqwGiCmDcvx48v\npr43ehxF/GIztOCPY4CkStcVKdT0XVS3KloQpoFvKusyNLk9hILD2dwYk8UK\n1OBW/RnL66Ol87SK81+dQE/1F1e5lHIMnXawYdCLJZGXq7X14UVQq734sHUp\ntugeJuaFQhWy291wjeCMkYWu9aNv7RSv2J5CCjVk5MiQXQ6ZaYQcADz54qYz\n6z7SkRzZBc0lGM+HIo6pW9D2/+XHvrq3Zx4UAqT7/0EIIxO+Pp6OhitKXb4f\naBbqG85pwC62e9T4maUUnRY9oUoYkRvraJadOttWIMScKKwQQAY4maSGuQRw\nYoEP5yNMvdptbrpFCiIygyxnWIZT2vmGaf2/91/OIQCnMJESQ5dknQ2oscnr\nkf0p95CRiPuCJ8j/JXR2y7cj7MsIfrfEhKsU4v+YQx9ljsS92eB6k6qrgB7K\nuZNqaal9L4LX7e+Y7edpfbnbY7kDm8rHuvZZxaMopzTiVKFlRUm860/3TuN7\nUPlSgjbuhNCptUBWutFCw529NfUkhCh13RonL2606N7Q4J1gLvaJWp6dL3U7\nX/mSL+6aEQuSkKWwvXLmVNndt41pXxJSMSK8cROMf7a4NZ9dw+qQxrMz8jC9\nm2erlSbNGh/2a1ryEPMOrXOZEwYfdXNDOm6sRVgcg/P73chJZ2J/VGJ47DHK\ntQpk\r\n=Ci8O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/density":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.760873445.0_1597268595266_0.1110556090145216","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/icon-button","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f57c6ea870d100b9282fe2543bbedd7d1f883a6e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2f4711a30.0.tgz","fileCount":37,"integrity":"sha512-5Uhd3zYqXcKJ0nxV7GbCgeIxjpibZ35st+T3DB0YQLxQS48ifTzTWJMvOwupXI5MY6mTL7ixXAah+JugHP66xg==","signatures":[{"sig":"MEQCICH37xkefJb4Y/+r43KM+u7x29MtzqrF9+EDtxlnQW1qAiBqhPfScl+cv1mQ0pQeLyZ7DcBGkmiKvZV/xYoazhHFpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTJCRA9TVsSAnZWagAAoz4P+wc+Aa1JvDBkoKqV8e+H\n4yjcLgldJIsmiicftSD1WWjiWUqpAMM/wbVboEKiukn9ESbA7KXl+2IA06J4\nr3io4d1tJzCJ7E9I27i1HURITCoMuJsdYeOKXOUswkX5NN03jhpvoIULQCJ0\n9o5KsR5WrexPZUMGmX3nre1XlieJe43hAOxoVN6w7lzRnFX76u5fuc9Tx3zj\nFDTUCewnNoz2hENpMnIXVOjpydDNJFgGNuXH6LA/HeiWAAY2xmh6TCicNRgF\nvIWW90NJKMxa0ltkZ2Kn/BUaMyoHJAfdZMgEzlU50eKZ4xNQfyxe60kml85F\nCyLL9/yERyTKQt42qjr3FyiTc6XI9E3e6BibR+Sk0xCOCKZq0QJV4wusigHv\n0TCt89qhvGu2v29K/LR5oIfMimuWJcQp7WCY8sz2IKxTziA+lPnF0LcnImGP\nPfb56GPEwu3wo7kplyMOiFX6LaTr2LB0WY4VmcaIIorqW343qNZbbxRJIZRb\n1mX+rM9DtMs0KS8BNUWEIbPRjIQaSK1sH968UeoWoMkR7aWS8Msu2IsSgY3s\npQwz/9wYYzt5p6DZPBs8cdZSE+FPc7OYN/15+Lf0lNUZLvuh+rGdPmBnznoI\nyCkhRFZYP9vQyA5YBC8V6xNSUMgz18kXIUQJk1pm8mpeqk7RqDXioo7UeYtV\n24vF\r\n=IwU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/density":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2f4711a30.0_1597269192819_0.4097142176471371","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/icon-button","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad4cec694d97397ff343b7aed4d590cbd754b6f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2d72f3659.0.tgz","fileCount":37,"integrity":"sha512-HqP+H/tWEZbj/7XvfZ46uAH8pIQ0keMJSOJx/M02hOtDf5uAlrIwv293aBjs1BBwITqHMZtYgC0/lyaBVThvGQ==","signatures":[{"sig":"MEUCIFUtjFYwbRQp6zmSQM7DAyUImJWwc7SkevOCTppDner5AiEAocbRrQxvggN+wroma51cSgT0cpvD1YJE71pQTtoOo2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaJCRA9TVsSAnZWagAA944P/1v0QlLH5lDo57ZuLnTS\ndME/a1EZOEbqqJp/r6stsebTZmeyFrkMI3VKQtBH2O9E0SrWiwAZ7adh6pRn\nIoO/oAXrPg+a69owtallnAdmNCMvpx1N2guJV5XxneQdoo1zhYTw3DsZGw1Q\nqNFBbsgm/ufwnnht3RDxLw2ioP34/XoQHHTEYBCjog1q8dN1A/7GMjZeld/6\nuzZQ7mekZJaauN7aHB1duQRu/700n000JgYLU0mYes9LzSJiOEWLJQIxL/MW\n6BlJStNZF2whOzYlf7Pnqx8rUNSO7ZhXQpe6ZZsIUYMWFDiboUS4W3Dcrj/d\nHMK64rNtDplhJbqEuKw+K7ACnm72NHqd2VeGJAXKjMd7C0axLx9Y1L4XkAi8\nmqX/KSXkcn+DKRL5DGZ6eelAlWKnEdbFUHRqNL9MKKdZTFVty6DkkmRfqlFe\nnvT0fMNxMBbDWVVqZSYdiwTgH8urhlrr4PTJKzcAUC1NcVn91XahXolgVa+D\nnELyMY1C2bT+OChgxugeJaJmhZUDoIQfg6yyHg8pOr8GO/mVCSuutmfckKVT\nG8S4yvUu6hJJbJPFWkq+RWSDgOa3t9xpjALFe/dn5ol+IydpZEmbInYz+Xyw\nD5MY32evw1sN/S06Zzcx+77Kuo3YH7KobgHV8m4YBGVc2vQUEveTS5QcnONu\nCx9y\r\n=i8pP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/density":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2d72f3659.0_1597269641078_0.47235042323103626","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/icon-button","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd19b7f7e91546b4f60d9454bb1aad08c4431dc2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.1fee70a5e.0.tgz","fileCount":37,"integrity":"sha512-9pRC+rgAsu48C2zfV1SQYhE9UHHB7iXZO3+L7ywZNmeFHSuEt18lG1c90NWsoTyapNByDPzlVJ9TxteoedFo8g==","signatures":[{"sig":"MEUCIBb1tDf5R6ZwlIs4HZNWSV3Y1WEP8Cac1CQhkXq/EMXgAiEA/I3gP+arHr67lnmq+2g+hb4LozmdvUchTXCuhS1/Tfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHspCRA9TVsSAnZWagAA7hkP/0YEZrjAkzOBGtlTqbLQ\nY4V2q1nshTdw/Bg0u7VbAyzWomP25pVMpYjJR534cS6SKjo99A4T2P3cl+fw\n2/Kiqxs1Cgo6+Mp63DpyU6i47nKtShNa/p6Z4ubIv+u61bLwPSNgae/XFDQb\nIuo9kMpjLBHxk0ujdMXGmM+GihytRHisKf6Vx6wjGSusucJ2geBNqH+g9ZjZ\nEU/iUVQvvmjK9WbL5910mS12YdDbFjgkdkfJH0FwAEd+0wBx8Bt0lEW2XGJZ\nAmenHbleDtCLs/pRHQmNAPrp8oWjkQoof4ijB9kVoS3ZFtl4dAxvV0bziS3s\nmammIO/VicMmw8PZQ4JG76BrYWzJy7ptJ8xYp5gClXrh/INmDXd9xpLObBzz\nsn9mlsIUtPYaJgwxP2ms3ApPCq3kJAzt30wxfVf5w181iilpStwfg3c8Cdlp\nOa9Y+kNDDWOTqju1or9whkye0+GPwiQa51aEYdUFZFpJkk3AfUdk4MqxkOlo\nO7SpGwVrRFjwhO7Bol3we3xbWY3xxFl55hbDPq5Rjn7OdHBBOewFUeg+vufa\nvJ+tLvNZh7nlk2/JUT/CwoMaSItM7G9PZq/2Tq/Cid3bQ1RUnuXDMaKnTeXn\nBUgT8z0azYrffVYHkqeIGkl3Ey29AzkLLje+QvNwu7LXv1TRH4ZToIScH8XU\nifbY\r\n=o8u8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/density":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.1fee70a5e.0_1597274921144_0.24169107381788413","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/icon-button","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d65d178ce3638714bce2e51fa93a52034b030183","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.023f3fa34.0.tgz","fileCount":37,"integrity":"sha512-b0sxt55+Zob6XJOBPo29Hk81rsHhBJVypasrpIQaTdCzGOZAYNKO81u+HnMDIyy0aLCOJJdiu5CxazNHR1LWDA==","signatures":[{"sig":"MEUCIE8lh5iepCvMiq1pdt87fCzk59FmuxMgutw4DnyQZHn3AiEA8sMBj2oyyPVY/UCfCFYGvgxu9gTOwCDSZ2WAsXa2WPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJN5CRA9TVsSAnZWagAASP4QAIL+ktgyuOSJM5S/f/F+\nN/YH0jMOVEzTCviYiFsZAH71UBGu1kTfy4VsPx0tNJAjQSMEGrIz6qlo7cnC\nURdFr32JW37gTWREWmDknrLxwHqCj/YlIDgxVmwZh94v0YtMLhJXbht9a32r\nBlcON3BTsV3YP2Dt6Wzj4oux3iXeDrtvKx1xbRGrCVwbPixSnGnIx1kXy3b1\n/SbGmUvaDhSViArwoFMXZscJZ+vqRdnLLI4YLKHJm0NbPbpPSiWBWbaIJbfB\n4HhcacH8XW99DwTT5ifNtqRT45/4VtuY0WnqIxmN/w6zlWcSFdgbAxWhRjwq\n/3cXe7BH98sxMNdtE5Wnf4C0lWRDgv71S8VSyLrec1v2XkTUi3OZCHf11Nvw\nZGz/yJc4k1A0JYCy4v+YUpGQBJbA34JG+o/Sz1dEcNf6kdSHTiOd8lbuQimB\nESQ9NER3kQ1kQha319Tc828eXFlviY2J4Fq//i6w46IyfIpBqBa8HZVPDpAt\nzkVNoUDt3mWujxjwxien7i6HZfSZ4qt4KktdFK0eaZ0ZR4LmBD8rsxTdeZxk\niYVeiNBuctKInIUxAdpWHliCWaK8hcZew6JPlOAImlrvxBjfRdC+0POW4lzw\nHFqLgp7YNDEd+LFXo08U/b1Y+tdNid8rNiwDqOuGbih5FYf7DYJtg6SCPwIV\nyMBg\r\n=yQVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/density":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.023f3fa34.0_1597281145051_0.39499391167124287","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/icon-button","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d422ae82dfdd5b7709a4f9f6d465dba6c3ff2b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":37,"integrity":"sha512-UVeh5xtALZKE3VqdpSZFEwQQMxJcgPHyfM8Xp3sWCt0Cb/JBTfaFvZilxne40YUBEVR6NUBD2w4G62nQpIdawg==","signatures":[{"sig":"MEUCIQDLexTFwrr+d0cJ2ULGK2M9JDVf5aDVlBQX6nSgrjXDlgIgJHQ9qMLn5VPh/bp6tEnsio3Miamcp8dDBx3bi/wJlPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdbCRA9TVsSAnZWagAAKUQP/j+oiD0LQM5kGQtaWFsQ\n711Z780gPvLE6iPQb3WoKCLqqwJe+LAwl96vgwk3xEG7uKGR5Pz81MeUs90V\nMMuU0SSlGGeb6TpxkVZOBUTN1C70uYawHvHCuYqM1F7GxTwvb6G7rBX9Qtbw\n5yodmVFxXV2jTiljrfFWWKBhpGgCSyx+OiNEZAkm4nvCxSa7eluLHLhjzVk6\n6+QKM4XtIhy0KaPWRWbOHq96PiBUYTYjZl7wr4AJR1nyBYcr37HEqzfpz9ag\nV+i5cj4FhYnsCktsfI6tR+s8Jc24rCMFMpQSr8DiJBGB90OGh21EGZasN9EG\nMyICfYKTueQ30SCmlec3+vndMMkY2QoKjq0isr3UQQ9S/9/H/77ATyeiswUO\nDx492IiwFni+1l6IbsraLaFcbtf2QSz9w47D+Ur5KQSd1ICOAo3LXl+6CI3T\nWaUG+gzIkc3MmJdUHWH2R1yJZPfN8zWNvEU4FUzDufylj68zsJeKmd5JMRfC\nDwkZ/xxc1w2+ZQBIJIzFaPI0JtxA44Jw0Q6aNC+ToNfqgb6QbjTHFMGMMslp\nPJk2l8X0fOGd6VpVtHZWla0arv8PgV1ak9Sn4RNwT3vIIp/I9FFe1oQN+fDc\nMsLg9EA+9aepJun0r+mPNKC2tkZtpzVGGZA6oTyfdBHRexRD3QbxnS18yy/o\nnsYy\r\n=eDbQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/density":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.80f3a9e5d.0_1597282139096_0.9985303655406976","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/icon-button","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80135c93219c8d875e0526a8aac3aafbbbcd9ba0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":37,"integrity":"sha512-AryOq9GasMP0t9R+gmoeLCGdbmfL6EZ3ZCeSZGeFOuHw2/qYWofeHLbJUioyYfUKXfjImQCOgQEyBiEKR6VCeA==","signatures":[{"sig":"MEQCIE7r4EmAMhIRtIW+4hQ8ST8aDOC/iJvFhH1l0p5bCPFSAiBdX0QEIkihSNVDPWKPJz6pkZc20PvyynZNRw87C7vPfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6uCRA9TVsSAnZWagAAhM4P+QDs7qeR8OEiGGQTFNnc\nFdEoHDDWz4+yd7izpxOFR7v5d9XZK81d5Vf+baM6Stb22xEycIFmFPEkFY5c\nPpHuI/unzxlynhQpAfDJ+g6b2cgzBdIqourSXMLOGPykhL0kcZgZBEAumVGT\nZvYgu02GOjFCKOyaH7tAC42J6KbjWmJmZ4coaiT3qYyTz6LRYUHVj95FrHRL\nRfq6IV6KvbHM6pJ3rEecRHt67G2m0lgfySmysQrG+grJhLfyu+0QCosCuZKB\nIOfRabn8Yrf1kPVE4Fs/nAjUVbcLXmkm+bzn/EQhqMLSqZ9rBYS57UB739EE\nw7ZvefpRBBbFnoPloWyjk9MTgZsn4q/hvpiQZqiOXR3uRm8NWsSPrL1wWiZp\nUcMsoQdDRWjUERJ94pyPRH5hUwTDUps8Zbq3eREpw1ly1S4RQ1arBTBIX0oQ\nE3J89y1Q/2BJrjjpIzclWQyJ2dImgYM1CskZIKOPjfpZ9NqL0jKafD49SKS2\nRyOndxWVh3Sv5TmwiNjq/+7inVYusOEpgS41gHPpVYMmrRDkfaxh010B4zVj\nIlhy/esA8PzYHbQcr4BlxhU3saAq4YidTjhrK38Vx/aB+nvNNvEgD+HJKATj\nEyyhzMmHuzEw7EdeDtCKKVRxK2hoEnOZRy/z0U2W1JshJj9cL2cFb4xI05OL\nFzFA\r\n=BW4W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/density":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a1dcfe97c.0_1597308590129_0.1355978051752722","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/icon-button","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37dedb40e071fc7df26e185c4c8fcefea0e8546","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.af332d5be.0.tgz","fileCount":37,"integrity":"sha512-nVYqF0GT1CsT+vMWzUIpCQlhEQ35A4lsMiF/2ZeNiKnUb4Rqv/UjXwXl10gnkIZS9rABVccLpqj68JePe8GNjQ==","signatures":[{"sig":"MEYCIQCPysq/Mvngl5t8OQQuRnMiv4QWbQstkQXIqtoMCOZOYwIhAL7piT+CwEXkukN1+YRHhUxa+oDqDaV4TrGxr4Jem/Ue","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3iCRA9TVsSAnZWagAAfBIP/0if/xAQRpfZVZX2dF6x\n8CfPX555Ito0CHAGENLy4C8WNWS+HprA/mKSVlrsC9FOvz38Rv6oFe4Ha49U\nObHb9nr5Ru6MXzbvrrJeyT/2QiGzF2VQ2F3NPHkCOq7oNyyQzGgmRKLtSbG4\n477g4SxfX6Ps0j5PT3h/E9aRCi8ipNjh18st3CkQTvrS4Dwufv38D6IlEopW\nvTNobz0TEINqfa8eSYotjkZTTTYKkSbeVlIpNoazMod7Js1oCUrc66ljA4wv\n0N8+cY4LEiPoVjwLIN360MYW/jgOoGRAF27E7KDdaBxEXO0BdFq2uQ9jhWNf\n7yfUq9SP8MNsXd2qBOvCEynqezMJg3SgEioFbCWvlrBrgkPmIwP3CmfqNaQG\nIWOwPlvBD8JLQYdTC+sGgiwjTLkt/qGUAjLK9fdsiEv1hLU0/aN1J8B/wKnK\n0L63vf5aDmRUlp8vw63I9URvhs87rychDuKee/oB1UJjaTfWEuBdXBt3t4vh\n5/FR2XSrkb3q+pgIYlc+HiRuFJ6cPva8KZsO+nOTZRaiaSJqwf7yiIHb9fwk\ncw6ZlyH9cWD0oUsdHUai4N0Mi9rozMvWL9kvgyTbc7BP8BPuYazQO3Dl4bXk\np6biyhLQqaDQ47gHFcwChn2/WBj6uh6omJhO5gbXS27sIHNPb65EJ5oHDTKp\nsSo+\r\n=wIxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/density":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.af332d5be.0_1597353441602_0.1152970671424367","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/icon-button","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564af0b9477d4034eefa063fff000862284dc772","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.7dd4567c4.0.tgz","fileCount":37,"integrity":"sha512-zVDYJDM5a4XJepx+ersKTRL/V6emjEqGumSxNoiX+toXDNSELi5xlN93BmtQ6QMEFzgP3u9dIte7jwiD82M+sg==","signatures":[{"sig":"MEUCIQCPVJk/gSgVEZNeY6j8brETBpVSJ66d/NTDN6mxP0QS9QIgapL1ueg2x5BKwAzN7BqkW5RCXRKokMJUbuPfB+lVvO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/xCRA9TVsSAnZWagAArmUP/31QdD9CX8HotE6cH/ED\nO+YBHo03VocshVBL/eTq4VYiEMF88GVoIXJtAOEzy9qhLOMDYEGYXLRhA2ki\nJBn1Q4rkvYUxU6U+ABR3q9n6xWi8BmTbmRmMmWF6ehCcc8JG+5Fg6wpao5Le\nWvIYUDDEf7kG+djf0oFQVDxbtw9Vk9IZkQNia+zIop6N/ZeugQBqAR3X+SM3\nOB5FzfNAUhCnmdnYRkTjY4m0XPmrfVFP8fsfGANlBobypHLjgN9TqsasW2DB\nVpQ8QHEDAOEolgEE61l8+FLSSTSSyLPNd/Q7/fGRvibftCFm0sX/l0lfL5VV\nBXTTJu0SyAwmU2u1eqH4T1DpAD4+5GUjAFGzo9wHKbOcK/dtFKJpHCFpoOs9\ndSTmZSEAx2UQYMeHODZlgstEg500aFul673nCdLrCgUDQRk7qHPDZEA23DLR\nVn8sHwzD4O64LYcQ6kVb8KPMvhONxbg5OK+Xk/TvbWckLPFS2i3HXax2DQBs\nEM14bd4e+BBfPK9qvH2MfRjtZz4UuIupGCe39Jw/F7NueLZLyUF/P2atfvHY\nWp5tvv9jIjOek4CVeiAWjILkmcJAgqEkajTRB4dBGSFZ8wC2ovJMqSVXEHwR\nY8nmKJtMZTNjT+ejujJrzmmR6z8jY6osdk8Ipij2Bd0VP78burzUqTDl42lX\nZpfV\r\n=TbnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/density":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.7dd4567c4.0_1597366256738_0.7075479493264221","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/icon-button","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20eda031989a462c04fb5a17a2abfdc143477e7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ff870005a.0.tgz","fileCount":37,"integrity":"sha512-F7EMoA43r6ovdBm+Q+r4RXnrVz4pOtJ+4AKjll20f1fiourY+24hU/G3X/Xg/HYPCuyF3QqlB1ymasHIMGEdeQ==","signatures":[{"sig":"MEYCIQCV3KEw9Z2bJ+xOuRQNd9gYxRBsCTAdIZkVwCTvyUhyawIhAKDtGnhrQcpbb/L1NMfaSIEYqAI26BeTwLKmxjQD8pmT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXcCRA9TVsSAnZWagAAl94P/0g1MvzW+zJNgkih8aXX\nGc+oWN4Py9yy4/eOMXQRJYBZy8b7Lo/FP3oBC1FpQUOsNiOYxq78sgVrENCx\n3vMyt9gWkzSOBNeQtjmDXZVxio1B7y+/aL29J+RJ7B/jY16DmV0LbRpC/VbZ\nbRjJBt0wJVZNB8riRV1tokIPyi+lIeEhp4XthfunVfsmCAVz0GU5RfiGqGab\nE9shS6F9g3otlu7wTpKks4Q+2dc9HmjqiRydrsrfJJx1ddCkjqmYQpndRe7D\nSSqWSx9oVZgf+0/8J9Xx/vl6hUH3mERmFkGLcohsS2ul5T5c8/Lm4XTtDiRN\nmObfVKDArlzxkZbgwcvz61PyGH1MyVLA4CfHWSTLnA8ahIbTneF8opuuxujo\n4B7SRF3P5BqY7mOBIxt0UT6KOfQvUQuGXv6fJjDMW3I9NHxMI645vWsC1vXf\nW8mNJVXAOUX8mJaCBH2b1mUCK2Ob/nd71mreNYq6AR8GJ8bO6xlR9jME+ikP\n7GnJKB0AQGW88qIdCcdlOWI4MaO41nyfhIIEO7KouHuAYKTK1WDlIEkxUrq2\nmoEORR+lrVrzUcOY6lcf4qcRxkcx20D8yK2It/r+Mpl4OKUmqH54FSobfwop\nDsT5aGENjEA8Mi0hpcy7DoOKlGWcFrBQRm1omX9ldliIujQcV2hFDbi5ULhb\nWwGo\r\n=iSPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/density":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ff870005a.0_1597367770202_0.8373084058594054","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/icon-button","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5242b10f57b5e3bef0246ed625ca19d051065fef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.150f427a0.0.tgz","fileCount":37,"integrity":"sha512-VEP+90W2b/TZWc6ybeYkgv5n2TayDwP7QZfpLG9oBkMRt0WFroBCfZvnnR2fVyuUo+WrOMkUib2DnJZicE2wNw==","signatures":[{"sig":"MEUCID0cSnIqHxe1XpYkvUkSz/ST1z8AxBrttmKJPZcM9VWpAiEA9pwwvO+kfZcEQNIxbhNafJGPUWzeIcxb6Cgxu7PV+4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHECRA9TVsSAnZWagAA6QUP/3EODfrAyp2qNIbnG+P5\ngDIohhNVJ+DboQz4F1QLnUmpeaWo7KYH6FsFQmYfYQFh2RUjOn2+EZzVmLBi\n7bm6PF50VWOTx1S8Tcne3dprRzm4BrAvfiWVsCksOkg9J4HslvYxuHoUoDpu\nUiTM35vIjg9SizloJ9SeYfNKWTxIFcsjZ1oNbKGoO58mdfujEz3ot8jdbPCi\nFBygSz/iOL93hBL9Eg6iCsbWIKTF9TjxUFTqSYzDSFAiVxFZFDrL7Ex+Oqsh\ngCMEtimtMA6T4gBFUHk3ftzQ0dmqtAAjb0ahnxDW9WDf3G0ngyXvEoIlqLTk\nMa66VMsygNK8QpDEX0TT9EECVT9f3hg63XEl4d0BKShxNNt8SoTLrQHqkYFV\ns2zZ1a+ilftdIOE+2/+Si32M/aq/LHeayXTQIG6Znbz4ckPRUCXYRdZ02FgT\n9Gnfpc5QA6y0rl257Ztu/V+CAHAISFgsyILE0GQDZrSr7k7mziK9A8V7r7bd\ncXmDOqKimMTK2Bl3YzSIASu1Wjk/zgddb33Jw1fIT9KHEPJaXevm6OpUx8qQ\ngCtSWTIKyWbB7BiRn9cl93TZalXZf5ewPXya9nO/f2a1qYaJNNrfQPz+KEG3\nwPX4lcpTF65VLcVN6LSthbASXke4aMzrbkxRF3UddUuVacpOiAGOsyuOw9MQ\nlL47\r\n=HIHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/density":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.150f427a0.0_1597411780317_0.4207310137160989","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/icon-button","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d1dbe6fc8e4097992253cdd0e87da4e510bddae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.bcc58290a.0.tgz","fileCount":37,"integrity":"sha512-FzjuEmMtZNI/rQTRTWVRSujtJ6gK0qg5p/aJE2GVZxr10i85OmogFEQt5zveqEZl08M+U+eGcPm6wrJTjVOzvg==","signatures":[{"sig":"MEUCIE3JRZSOCi8plNAdkGotF69FFYGh3FjUgk8/RcR03iN4AiEArrRFZK5Mo1fJB2ufuCFLq82Un2mwaZq+LdIii+vpAnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxy2CRA9TVsSAnZWagAAhyQP/iglKLNBbJatkZb8rdhA\nRcj5bfmllf2haU1I7AWE04RMifvp86ZJZxah+wnqin7tFoO0kBcTpiZbbKlS\n8owAMZscE4Idoxa5uTNFnlo/BmfrU5f7hmNuX7kK2ERMS/RtgsCt0+gjHKzs\ngcy6Rqq2CLm9oTZVyPQkXCY2nr08XrgugPb34n5+QxxoAFJwwpcqI3WLv1RL\nJhvntJAFRtyYHaQImMpNsDlpQ47B9n4lEUWpC/YiVuG5r3IUiLYPaV+WFHnA\n6g7C5MVbKwkMyovBwZ/TO9i/1BvPQwgyb9ttQjJlg62zJvccy1MamlP3UpS+\nqf1WDHbUEcu3CMkExnxYG2RDCOxIoJCE7jMBRiFIUTzc2Xobl+udLstUu5qw\nWSumJGeD+fawe16d4Vi1eCm1qTRIvRicEmy/jbaI7toDTW7wanj/7ifgT4rB\nAS2d2wn+gyZ8U04VIeeV6gvJkaY1eOYrja1QJ6e6HOf+opUIOEnPOrglL8S1\n9sNcBkp46eLJqt4swtit8pY5wK0IMs9+7jijn7GqMp7uRYD1Tth9zfRW6hRX\nPvv0ARfKtLoQcyeHFnsUQUqFXyh+YvWkpLLJ0pz4C0dKBjQHgaEIOzSnVIeQ\nkYCsV/ZR36bpOrie3jwh+6WEUNqZY9ET+ekLPiUiumgGnoO11vR3rfGS5jau\n3cKc\r\n=788d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/density":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.bcc58290a.0_1597447350215_0.9842101305493969","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/icon-button","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fb6eaa607b169b9553f49bef6775f518d819c3e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4f55400bb.0.tgz","fileCount":37,"integrity":"sha512-QZGseRh/S2cHzYeDJKEiauO6EHojCo76ohNe0PkOi1ERtqjckbdGNXPpbMV8qXpKENcEepdhqaxRNKsx4j9f1A==","signatures":[{"sig":"MEYCIQDoz4FnCn1eoksQECPjZOMIkcAUEiK8pTF/b4icE74JigIhAPrCN3U+QGXDDd3tCQUjeIKy5O1RGgyfyaAo8c6fUgD8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKCCRA9TVsSAnZWagAAGAEP/3jsG9m7S0JQjhZ0ew/h\ndzSqA4FX182j0CEORTuzVCyH98+wUyN2wYM+L4tu8vmTCgWEzZvzXHypiDzT\ne9UBoxnoxMsdNpVJkPwlwxwWJ6jEy1+6D5ooR6UYMDB80yC3ghAD/BnjVEdx\nzlUEo5l6gWLKwzP8ykZwR+SQlygD5K9aNV8yEpoqwO7yOhzxHYEULfb+UvzU\nRp3pAKVYoQyse02x1l9Jy76oqNWfjpwqa77thhWTVFmapD62GZS4o3Oy6hp1\npzuEtiMjSEFJBeL501HemChRZS4f4TR53avJk9BKaUhpmfqEtlr1ISw9DoUH\nLOo1f2R8nC129p/tn031G2L/UjBxV1ioLLWhJgYHQ/hGMZLRSopl9aZ4ZDJz\nG/lM79AlB82Ol4QGVp1b6wHCUpACaDagat0bYfw3aeqFlFmWJmHaQbnjxqga\nAgNJ7KVz+CDmMpEpY/Gyt2KOax3UobglMmuDf5AgsePynJGv8e/wvt1zFk4f\ngZtUgimct7jucuVENO7JQW5KmTHmWN2upyuZkclJisbx0Hnhp4ApUT1qjJs/\nBPAdcspNPDX/YXwF5Lla3IbT2fIQn7TcwxCBPE33rPVIdj47BKkj2KD41Bqf\nVCR5M5prH2Ksy6wAxEYYobE3OvJF/JI99bof8iAfvP3A580Z6W3GswNLRSBs\nAERx\r\n=16Nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/density":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4f55400bb.0_1597682306382_0.3198126696559018","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/icon-button","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"697bd81f71d03855a46e36cad959bd5137dd3b82","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.000d64815.0.tgz","fileCount":37,"integrity":"sha512-q0UbrItmFPlbyDRhUGOP3e01Cfp1VHxs1zBUcZUjRmUXLJ8Wfdna11SFDAj+bUFXNFOnRakk0ondpGCqGCfpog==","signatures":[{"sig":"MEUCIHWMVIn8KVLGpSc3wrV0oHIWYR7Ng2yEUxnne9fvvKjNAiEA4p8kFgRZAe7dIeGiCbGEeOLezKeLw+7+jEG8z5W+qKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriRCRA9TVsSAnZWagAAXMwP/2xUe8dSe/LXYbX/ZoeX\nd8Rohl2UzvfT/U0AgB9f7KNR/xLeYaaQXngbwcbzCHr7HDDZkWPfzBMJUcwj\nyRnPhm5S4cOsXkGWGQXI3R8K0aTssiZ6bspwl1YPDnbGwcYTlumkUspSon8a\nyQBh8ABM7xBWbJhtI59aq4tgEwpaOy2zivSbwtlUQ9HjUfKVumSbz5KhbA9y\nKScnGkT/w/0IXoBRPmxXQslH+Iq3aMb1OVfqLEsTpuOAndU6laU9GFKvVx6O\nFN4GX7VcvSaPGVk1EpJdcRsgimw8IQ2dibXIB34HOsiDdcVSeDcqOKoQCfvw\ncwOxHEejUXP0kRBlPLw2ER16wtO70wTKfAs0bXig5oMWJ7xD7ZZI1d92lsc9\no8zNv0y7zMQa89bS3bSxezQ9EiGxqtg46W+VaWBt9O4ygmjNfr8NwTGmjzzv\n2Xt/2Sy9mkAC1eUCTee31wAOegnVoj4NDeIFCMvqyC8YWL+f0g2GNG+PsxBD\nC1zzolVYxh5TQ1A3AEAuFX2Tg/yJ1bnwjSFDwDH5URhUruAVlDokd6T2I0Tm\nKP4ZeSxmB4BnnujJeP8+680/PToFqvWddpTmM4THhGJ2gAmKACE/KFCugEfA\n5cHOVZqlOYMeu3hiEGIAeS6uqZjEgI5haxAcePC6uJpDHSIRAZCLOJLX09ex\n7oj/\r\n=Vrpr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/density":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.000d64815.0_1597683857009_0.5365636501953879","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/icon-button","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"822257fcbb00f374a52648d25f219fa1015a602f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.defa599a8.0.tgz","fileCount":37,"integrity":"sha512-6pGvMbDZbr6KwmbFN9qrQwKqIKvuM0UaU82vagcCU5RPaSvRfpUUXsu800ubIOekjIeNWGe0rmKa5wBydfHmNQ==","signatures":[{"sig":"MEUCIGdIg6pMfp3wr4RSUJa/29JPotj+uLtmPsen9fBa9wkfAiEAnhAZ3fsggzWtPvpP6I/lahS55Q+2omDWI3GWvrMq79g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOuk1CRA9TVsSAnZWagAAtbIP/iJTb+7LcyaNkvRZ9EMY\nfptFvKChWOCo6hLbI6055fUZRZtWMlTSzu6I4Sjnc4wf00YxGNDg5E06/HLB\nCdtRdH/qSNjkH/tPZKuyjvvUnHyt7i4ZK9CO/308rpwA32ETLtPsDVEHppT7\nP2GLRk1iabIqx1U1GWwJRHglhH/v/GLEEkQ1ddS9gcqbCmbX04DuRqCrXb05\nuJ8ZqsGzouHFh7sJ5+CCUQa6KGBVHuNY/6hnJoN/aqXtDXj5qqoYRn/7R+uX\nEpYxjWO9N2k4ZzxuQrkgL5qZHsPmW/+T6QMVXmRPXP2fOyDmyooOYIduuH0Q\nFIkhdWK/uL3nBfMNxHmcuULlXPDNdeLAGHCOSzC+pwFIaBwlrE97MM+4cA31\nRtV9oEt/JffieH0VeXzIVZFCajxuwfjlgaRU2suRh6PJpe6Gya9KQpTPzuc8\nhwnE9RKivdZ/flG/fMgr5VHRavRc+DcC345I8/D2ivT+OTTiYMsG2gAM5+E/\nxddeNFBlyNGgTWzcFrgHAUfWH+/o3jLPcq/5NThsTLav5SNFLBQ3krCkCK1/\n+RMKp1KnCaAnNmtIw4M3Es2Is1In+EiK5Mah2XdQN5IGlHl7vVqoXhDTaTQ/\nsbBzkO2NQCq9HyY9DlRiAXdn49LRbqti6ERW87amPWcS3xiaNh/PRXgWFJyE\ntruf\r\n=0lUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/density":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.defa599a8.0_1597696309141_0.7302020013552517","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/icon-button","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f62a5405ae6a1ca0b5712f8c37b25faa9df25ba","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":37,"integrity":"sha512-stm9nJVWuKSy9u2x+aDu7FIm7uHOGBw/cO5cr3Z4/cKQgw4jTcDR90M3zyM7RMKo1i6CudAWaFWhCF941V3XIQ==","signatures":[{"sig":"MEUCIQD8kyDXpaS2kOKfSFZGO5yCOSo/0vjFhe0wJPj/UrCcqwIgFdHUJaNNVUlJslcekVhxTthpw7C5JqD2mG4vy0N7lc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+/CRA9TVsSAnZWagAA7YMP/3xuITKcsJd6xPE+i0/P\nExxQaDDzdiJwpVXPUxSvCqMbIoPZpzmN2LIGCC1vMgpR2CaOx9AXSoeZSAxe\nUd22EZywT9MbHP4q2jathr4uqhvEjA/9374D8MyTk4Dkg0JPuGVvLsSFEfOd\nOBrdrmZJx8k7Zpqjkp2pQ//5Nb64hQnK+WT9D4SylkdQOp49HTRk/UB2kJ0f\niycn2nRUlai4RPqDvoA6BFJwr6Hc6VkNMzuI5KoICWEX3/yJFcmvX/97VbQv\niDXF+AW99Z/4T7gY7/ELsiXUsPC65tIlNKUuRpTUFHIs2Fr5MldwDIYURgmT\nFKcxwj9sVoQWpqfkodsbSy7wHBT9sO3rInY4OHGToVGooR9suznBjdVu0gNw\n/xznKPRpJxbu4LZNJL7jO8vdX+ad2hDP7kXJXje2sQrYL+VVkj4BYnB1x8W0\nOP+xwYgXEx6PowkxwdsSAZVy/q4P7e27Ym9Fy0C6PVw6JV3fZSYwpDatLpr8\nqUF7JGGf6ZsZq4oPiBiQlPGwuWSUfh2iQMXWBIz65//OwBOsboBv10mP9TFM\nyQN4U/3wKhWs8yiVELQRwNRvCeSyu1vYeDYdJuGeXhj6hugDb7ywCvAdkuON\nlHbyU2lGLEQ18acGbWNT2z1FDWeEl8NoKHuwkDLIscarTyCF98N+VtFvrFjr\nvlmb\r\n=MFsV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/density":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.66b8ed7e6.0_1597775807066_0.9278687939310799","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/icon-button","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d478816a688d18a4aa4d97198e6a57d01ef38038","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e2b1033df.0.tgz","fileCount":37,"integrity":"sha512-Sq3KYTU4XXBDjVwr9dV7EAHsUISDe3m4RRJVMJe06zMBQHJsA9mId/4ER8PsTXMhCd0ZpaY/x6XXzCEleb4EXQ==","signatures":[{"sig":"MEUCIQCAkzt9LA4rrz8bWNPZyY6a+WIhe61UehVrAUQjg8/HuAIgGvGn71dbfIEXQMp+ivi23ew50y6YddSYJXBVpOwW/B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJ1CRA9TVsSAnZWagAA8rgP/RbAvruyAW4Bbuuqi4Ow\nPRE3eSR9rrFXD1wF51NWKYhWI/NWbhaoSoW1M2IYIGmlDFGRMtUr6wBUec8k\nuvGag/YHIapHEXCitUGcNdU+6q8HIgzdFymac4vIuWW7QhYZHMGonzTmGt70\nnvmxAE0Bxx4o/fkMVhnbJ8qkV54Y4bZsAhYdEfLS9/ObmPeRX8bR1xSBnkg5\nItBEiBA8e/38pr+1clyI3uGiK8ze7O8BfhbE02ll/cSpmI63FgNsjjpmehya\niINAsk9/PEYEO/0qO3Q228v9nU6uvH4usffDPeMpZnZOyGSJbK2BXWmCWIeS\noq0RTnbayJcGtjYmINrJlqo1WNKkPPiSSfoaElP2ilnPQil4VdU8xXxQ+/yZ\nXsYbWZtuoAfY614PITNqSrxXuihgWpdKH6HUqgrfViutvmTLzY+ZmVTVweKq\nVsIyAhsTLU/Vtp6tUow+mFzvehAx2f9NWPyLt0X4Mn0iVDfxqj8fTrU3pu/I\nCmfke6Y01gDI37Z/xblcBCbqBzbkxiedfOqITCieX1OkFmEBiDhlqCjKw3/Z\np/pHlPmlugYIpI1UZv51dKORbywRm7Va9X39sYnsNyHWQBzeb2+e31eCUTBR\nrKMIQPDVQg2q8OJvU6hx8yc23yi9NrDiiAgMF35ElXoq0G+ZmZbTjbjLMUbL\ngM+a\r\n=tVla\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/density":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e2b1033df.0_1597862516699_0.3947902182457237","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/icon-button","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1462da999d758cfc98590df72b65544d5a65777","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":37,"integrity":"sha512-n6k3xleiAw8cVFJJT6dVE7xC1Yg7e/wUCGHU2lqjkWjz3FMs/QyvmWXEPNx/P7Zne5UE/unZ430Gp8Wq3Hepyg==","signatures":[{"sig":"MEUCIQCUUrcuu+Bgs4hvv4in6sxO4gE9Oex8IESIUSir89P65gIgRlcwIP45h/GZQW837oYYyHBeiCKyus6XJtWmiZ7EpRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxMCRA9TVsSAnZWagAA/xEP/1GgZvzKF0uf6icJpwSV\nyz+2jiF4DQmekmeUT8bqtNo7EpwY60iKCNg2nTWa3J3lT47L9D7dlGdr8+4Z\n9MWkA+XMqmmaW4+BkMQE8e43zdlZ2PuHKYOkhghAkGYpDEvNYyX6cRBqA27v\n4MkfX0IRJfEwrHi1Wrg9/+EAP7k0lGKkVzfOnwh1ZsqH8cOODAB1TpfS7Oqo\nOMOp2gQB0dJ9G5Gl0eokjYoFc+99tCcMycpkAnrkgcdrO2oaiX4CvEUFXuw8\n0dmRu2caIQnOj1ILSHEvyUs1jvjQ2sei6JDgFdL2bRoXYo/uG/RDBMhwsjNB\nSmaJUcgxi6CljDqhE93BgA3hHAgRiYesPLPK/JiSV/6ouNPLdbq+Umg+iZn0\n4C4IJjoUDztV/vxo601BFjdmiEJKOzhZSBCdzFG0ea6BvJOw/EM6uVkWGVsI\nYhfdmanJKnNEqqgI5ny6hiNj3OGL49lvjm8uYDxf3hPmDLDZgwIEfnGcav4I\nQNWSMUKO0cNVjG7EU8sWgVT15qPuonaKKgJ5zKgQtlgTQk5SLTGQvkc25vf8\nBemFHRJ4S8NDAxRscM0+t49OMBsJqemxSdMY1lzvvZGECD/Vx6cCAkE7/4zd\nev4ZK+72nzlQBXvsKpPtFMHDume13i/IkXG1iCoIcH9Kpvh2R0GcGn8XJJhi\nUM6u\r\n=Qz9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/density":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2e8c3dd2e.0_1597865035676_0.963513646229099","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/icon-button","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c3668f5c4a1e2cb7ba1719aaa2ad17ceea12b8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":37,"integrity":"sha512-wclM9JKvheJdlcND4udwhzAmL65KzEm9tKienqZgzHSJ8R/EoXPINT+cW1lg+eR648EVab6meuc2drRwdUDSnA==","signatures":[{"sig":"MEUCIQDbBcXQGdGj3mQ4MZPKXWcAvOhSIg5RD0xnBBcCibAmewIgI+q32rUjIZ7apbld+E9FxQgez/UapGxN5ULiXWNOB1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXICRA9TVsSAnZWagAA8FIP/16lXUUwmXZJWvGGbKOE\ni8Ab4MpDMDS0x6k/EOOUC+2ZSvTAn//w9TCshF7Kg+b+rzO7YHdAEVQlRAvs\ngjAe+xsZ10jpEs3MvIw6nraUEl53JaPDxPDQVGvqh+qqZ0b2OwHUH8xC0tc7\nGidLoNN/V8lTrIIVEPc0VnVkHyMQJQBDu8P6w5VmK40hVqJhc+wfbWtZHG6J\nQOQC94zzY1J2IU2kyXYA/XKwVnDZY9egksJESBcK2jBgQ81gBMQtI9YX4Dvr\nRNXaKJE0ZAiDZbuQ6tQaf7Qkef26BFiur3iLIZZUwBH763ewMVT/7oa5x3eL\nOluQjRz9FRP/L4QLrFYigbqXjb47jhRNxdUYMLMEq3SEoSN5GI68e/8+GgSv\nKXR90f/80RhmC8ShQifG/k0BhFOErkeqvVMXzRDhJ2Q8JCy33Ar3SG+lOxGV\nzXPAaSGXXQroWyafZLBaYqBmSpgmcqMp8bDlkw0vTFx5PXEU2DLjWDdNcL8x\nkdqwDJROmeLSWd1GTnUrEAKkWaD1bzC/hDp50faJoEufl6W5+lWv7WvjYQZe\nFPf8ctvKntu+V34GY3oksKPYsnEN2M1Jjr+TbOQe06ReR9Xe/0ROJHwaFB32\nyXSinuZ7CYw82EwZ7Sa+XBzkb2cfSwSyk1b7ep/eomCYXqFhV9VdfyVPqkhZ\nuC0K\r\n=w+ir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/density":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b2e80a5d9.0_1597875655720_0.6134056451034473","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/icon-button","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"639e96d218b392ccd3d75f9af4c181364caba765","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ff88df637.0.tgz","fileCount":37,"integrity":"sha512-lrc7enekYfsYaOu2ZUhgqwX/4X2i49rbeicPwro6hNcPPnhYRpjaFbElwSF0FeWjn4WwrOB+qFJmHrApmCU2xQ==","signatures":[{"sig":"MEUCIQCR1tznQaKErJ/Ahchp4GzRk+WQAQdvgbqK9xkfe5l31gIgZNtRifAWlLjt3rjo5gJ/0s33cV0DyZZI4X42wUO64O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiZCRA9TVsSAnZWagAA2d4P/2FL9SFRNCbrVTQTZitq\n2hicmB5T70fJgb4Ijnvz+jHMMrphWyCvFQAc4Kb6uAMTLfKyi8ji+tom+ELt\nAqPhnpA6r3BGTg9RaZsYq7frmzbJxefLVlDXkg1XkkImUws8eK47VTnb7nZc\n1ifUGS6S8IWl6Fa8XKfP13v8hYEeSUElJCyn1MLsd8Y7rAXe0EpF92rsRL4E\nK5RZTw0/Ta2AHfAhivE53or+krV/eRjKN7mIufgEM/PWPQiJ1uqGASCYFf+s\nMuDH3XyHyHjttAgkrLKrnOhjhkGOdK55wKfUTHtnfZEA3vMf8hHTpvCDvWtK\nOhxQNgbwTbflPMR4wD4U0SLQ7W42ZPLj3Y2PH/FrWDMlAilvUorkCcX1cuXn\n1kxqkZxVsXHXzLcPPqvlstMYRL81BF4g6rJMcwGnUz8WwvJb3dGkDVYop4m5\n+Y8cF05L7fukisNE/2CDXppoiiNmzIhfH5xD1kPYBg8ZL3i/1VqFvdpHs9SU\nNmv6iF6T8Hh2XAPCyJHE/dsbEK7GE48utLWxaj+YHtzn0735/v1kIVoEg2kF\nGQnm6I6mTaXwhqdR/jAYlvrYVLjQox10QKzPja0YtlC6DwV6hzXtiduURYzJ\nGRnEc+neavicmttsEdRJFcZSdT3Aw7fUeUIGKyDiI6E64RfRXvInOTwMd7uh\nCPN2\r\n=n2fR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/density":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ff88df637.0_1597876377118_0.6024120632228094","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/icon-button","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"660aaf17002f37b330efa36bb3123508f771fed9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.32fb314cd.0.tgz","fileCount":37,"integrity":"sha512-sIQd+qtv6Q5+F7Nb0NupLU8FwMr1hrgPngJCmeKwWfVDkV/BQxnrh5sjLzesAajV+aBjLaQnh8UOGj1EM5h7ZQ==","signatures":[{"sig":"MEYCIQC/F1PpBdGBlVJtNnQwg4s33x9FstrImS1cmhYomJ7P3AIhAP09bqESzS9dJyarJbH1mdOK9P5KfZreFqAi0WeL1cc6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJtCRA9TVsSAnZWagAAapQP/ig5vW+2ScSQDOgpCdy1\nIj2XxyPMmC8qy8z9l0ZojFpidWKTnaxcp2riKOAmDUvwjzGPo6uyIABoLdBa\nd06jQQh0wcMJRRXJNPEVX38lNvnM2eh4UbDYJ4mY+tr8AJ9/AJWr8Is/W++5\nl2xDBjhYKwwWMSnHNAz6vWXzSOmNUrAGNW3SrjxV4kuxBDYPMCh3rVAR0Kwe\nP6Se4qAhh0UaO8BPJTKbDw1Fknb7pGYNMSwqEnMyVYOSvvZMev9ShdhStsvD\nxwZu/Te5eapYWQz2dA5raKz/wdMz56zKGy1I8Nvba6V8AP4Nx5xDxn45T2Um\nee6vCQG0lEZSH6DMjZNLJ08TLq2LJJ8rekHu+fcOFMAWaCRRHNvRZCfhqrGB\nWSWh1yA2u7/bzI9YG6PDVA9w1w8fD4dZdjLLTe9Qm4y0esyuxZQYoegDru/Q\nk+yh61jefNqeAHF/I9hv8q43Rn7wsvAX01AZl45ynHTu/w1ZiRNSHFMo5P5C\nmvOpg96ixkTYNWCOSv3bX4CVSUwZfWKKvtmkSZMavBv2RgCPw3Kj4Xmc3GL+\nO47N9VM46w+BAkfNg+v4RNPqCm3VGe1TLpRYQgoAQOq/5BijnPFhlvZy0Pr+\ngw2Io0lJpVLI1Y+SfUHikC7ckI2RpALnJpQEhki4z1lN9M3Lp4LUFYRkeQHT\n3qyZ\r\n=yp0P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/density":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.32fb314cd.0_1597919852576_0.5879532736450994","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/icon-button","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef6725d0db7b873280208994cb6cd9cecb36fef7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.546277d32.0.tgz","fileCount":37,"integrity":"sha512-UluOs+gCPkH8QRAerNsLmTBhmzAITZhlGUj8WXSx5guc2QogLEI7EL0R3OfKFkLBZTvu1KjsCaGk+Oy7zk0Q3A==","signatures":[{"sig":"MEUCICgBrfSl0XJxWOmMZyDs4Ilnpp9GmwRkA2nyWX17CPb9AiEA17OKetFqD7tzF1UClplhdBlbMqw2GG6SPeghPZsyXUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgdCRA9TVsSAnZWagAAYd8QAJbCJaOO/Eqmwm70w/Vk\nxFhIdXU2Sj2t+YQ4FtPDZ+Q986o2I8xlcyMwhyNsr/eV6jlRelLdUIcFvXHE\nLt2o/3entPpkat69d7V+X/iNwDnZ/pYcU30aHGPESy/KoZiNXMzZ7LWJP0Pr\nbrRxWhtrm89DZDpvllmj9C8CRARYL1xIKBao/4clzQDYZQFOmUMslLIKEOaO\n/RvC25GMuPeg8UFKE4Y9eHMA4RJvhY++z1/JMTRN9xDYL+80V3RYSwWuK4sT\n2vYby+fgkIMgoNclO96ObaDjAwYiTV5HdrXAsiv2Cjhb0GzDQsEJPBx9UpuP\nKv2qAT7sC6LCqN8slbkeLCoqiEtmM6cVd1YwOU3hyULhs//pcohLaryeocL3\n9/vRkqxSOwkfoacm/AcVn/b0s0Au6Cmk6RWf9XjPKx6G++LEQI5Y8UdW6gB+\nHjJ/ewr57uvRHdxy1PuKH2Ndstr+Vk7EMIi20XIay8MJxW9yfgztBw3f+8ya\n+RjjTHwBf1wXyMLn0aP/DGyzyMITu9gGXRMkNYP1Rq6aPkpaAmWj8dT2I2Av\nC0baPoy9FzP7r0D1+54/QySg1rtBKb815YEo7sKYNgIMrk8Ds+GprmemDswd\ngEMw7ueSNps/1GEmetO1y29xarBp9iDncigylIXMEHzYSxB54ucRVOTbQLhp\nnOJi\r\n=6P8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/density":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.546277d32.0_1597941789244_0.8646799873607975","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/icon-button","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a868e71ba7e50931f22814e958e4a4e817c6713","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.da72839f4.0.tgz","fileCount":37,"integrity":"sha512-VGws2sHB+W+JUSYa2/Rzc3m5M5QynQFA2KQijxKcmy0LacrKvUfqPi4Emfo5lCHopwgkdWkMWo+u1vLBtNMhhA==","signatures":[{"sig":"MEQCIA6VLEuly6/DdDAp8neDdsV/5C2mX2N1+GoDsWcJPl5KAiBB2pZRMrcHJ/a5M6dRhWjjs8dBaYwp7QtnGvJWXPJYrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProVCRA9TVsSAnZWagAAFHoP+gN4BGPa9SkVsNuUHpbU\nHFWvUrnMPFLzs5k9JXOenoex+L1EZQX8dNYp1gYDB2DfCceM38/qLcQYa8vP\nN3odMWz+ee4zOf7OasXTuc0z2+3KQesiYEw4pbmSuNjzGXuR9xKhgymgs4Jw\n4RyDT5XrCttaDeMSBUpsS0WRe/KOXb2k5prBW5yV6ZiUWqrPwNsQDZo9L3Vs\nz6+0PjfBCAsV1iIbedk1QOL/ENVQKu0vB2xeJE4rOUgvgIXd8wecS1wrzQP8\nJC5GM+aEoGuAMvsgd3tzBdyhEH7S7Vdu2bErS0KNhMdtm8CZXCFu69pZ34rQ\nTyJTYvYUrCB3otPd3R+cA411WgmGqBp61EhpeHX655Kgc1MQ2TsOhi5uwWhT\nw+jzljNplLcFnsVE6HO97/5HxyTJOH/vABaLANnVtEbC0KHyCHT4jF5MUGKl\nOhF2bWIhu3KPAnEQwSxQ2nWbaN/KI7YwdiFhaBJn0b+1kQk9EgNKnOI6hjFz\n3BF2nv90V+sLEm4yZ21E0+XOdZdJLaeewjRHKaylQtbtOHH0lVSYKKi9iMo9\nuTMDDFcWrbWuTml0W7yyQi1Jyo8OUxSN387yW9ycFb4yFp6IG24m8Icnpkgq\n9zK2IrMRaLK/p/q1maQj4AAzkHK+gOHb84SASKs785mn1RUb+QT1uexQVvdR\nc/qQ\r\n=BeLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/density":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.da72839f4.0_1597946388896_0.23866017038467158","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/icon-button","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c90a88ce171cd25f5bd8c5d8c729b846fcc98369","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.346069ccb.0.tgz","fileCount":37,"integrity":"sha512-Fb8RFf6qGP0fmYzOtmuoHJs8dd6zIa7uspwEG1fUtJ/ajN2brPczoYCCrF8HZix9Z/97zwo+GBzUa79LDs1dOQ==","signatures":[{"sig":"MEYCIQCBHVtDdpQE99V0Q8+qUV9tGVYGjzOUtRwGbMuJLrgS3QIhAI5DGauXwgHx0y5eQZhgEk+fd/MUWSdMCe10G9+iqCho","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5xCRA9TVsSAnZWagAAAyQP/ijNBFN/FScCtEiJZRkY\nJEC9J3QcpYimnZODe1c9KI8HPIAitxXGgte8ZZy4dhgLexD1Q18Ws2LvnQ0F\nWxnn5prwCMqsV8Wux4cXIhOHK2SMPZgZHMs9PHAoI4lEex7bP688tKTKJZt3\neQpBPh0L9gCU/i25TYiNxZnzIaSl40ZLGTgl+xyKjGQ3WEW/w/YyGzc86ACa\nCYZkCqDFmwDiYYPcMnG+kJ8jQRQ0VUBt1W+UmtvJ8idzb1gld9qyh0CX5TCO\nTISEfJSVfSHTom6Ph68oT2L9ZnYEk4f4pfik03pHpeugxh1g2O1+HCWwIcrz\nnB6/IV8ZCOlKzRTciexYqe4MNhtQMNjUAoMOo9eIgT6yU+iCbGNOSlggJ+5H\nPWj9bvmFhwptC0VZYqLSiAd5K23QIZNrSZhoCMSvG0GsKpJJrb6x/SDPsADY\nY647nE0X/5fXVcEoiApelstV5dJv7nmzUyDrIzYGxXqFX+fqxYtY/1DaBRSX\nfLgY2ZWqa42/80+maf4i5MUzr4imN16noSDp0kXLJmRIVvvUUAWO3Ph4n3xb\npbXnpSS0EDslZNbAex+vKFJbdQbbo+sVlAedXCA3F1Ax0Ca9E5ml76GTqyi0\n1RC09SBL2HQ+Xux9KXXVyyvYNm0pq+p681rFPRHn2OIQPcvrK+7G1r5hpORz\nfYpJ\r\n=nAH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/density":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.346069ccb.0_1597947504799_0.681160817989005","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/icon-button","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ef347db6117ff84375ad673126c323e2af28c9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e27c5802f.0.tgz","fileCount":37,"integrity":"sha512-3eFtGMYNyXmeT/6gcEhvLDplg4l82lNmm4m+DxgBLL8SANqI4+0ljM8bHT9BJJVZ7hmhEvUm36Swws7ZMRbCOQ==","signatures":[{"sig":"MEQCIED+kfM4W7KUsBCtn5juCPD4DL4kwRlDVA4viCwqxwZJAiA/WIcgnvuhVd9Z8l4D6DhO9TjH3RLma0TTdNRl8veA/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsu8CRA9TVsSAnZWagAA7ewP/2JUIaAdjNJQYMdtIodN\nAsNLk35QI2tW1VtQLgbw1LnVXy8Pih48RPwcvGb/3qkqBNaKe6pbUuTCR5PC\n4y5GH204SeQ51GKAfaQYvL6np6o5DRAOlv5VqD5+ARrLl5wS7OVojO+Ehb9u\nC336EjNqk5p+ag5nXcLl/YHnVJCngh5i9pc9AiF5JmekwxspFipWdn/1e8CS\nCQUpdfDv4nYxOXCxjFh+3UpwWc2AMTdznfXMBHQ8pOwDKl33Y9/nqb7Xvaqt\nV17+Lhfc9GubUKiWiCd+7jPiTcNIxSlRKSvhBJ82OlxhAOIXqnr6+Ketb+oG\nZuktUs9+JVbLwpU96KNZxEd0CHqN0sJTD4SpNUdeUnzm+xYi4VoFawmchGUK\nZ667FqT/cNMWOs3+vzPdnNM8BQbYWTRF63j/vjnShi6PYN6ND6L/TNkxVlBK\nKpD5XiWJ6ftprdSK2227IW/CM8xhiYkjaWmd5K0NgfOSl+zz758UU1CWC/oN\nxmqmYDrlRShvAMhkBucXkTB61yYCyl/lzaV1lOKrTA12r4ZlOUJGJ7/QaPGz\nLsVMVTkv4tQaZN2MVYgA/wtjX/n3+naiy44EEWkVhpzasOt+J9CA/hL4P+SC\nRknttXrijYj8pUCiBARhGp/3TlCvjijMdn3looIGBpPjWTEnbS8CLtZIjCUp\nGt4X\r\n=KZ8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/density":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e27c5802f.0_1597950908294_0.8547749083698037","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/icon-button","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b9ff786d0f528aeea7a7bf781d86e7de500cd89","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.f4532b9c8.0.tgz","fileCount":37,"integrity":"sha512-pdx5G4GRzNBWBhZy5jV7cVuoXvdzR9tmm6ntVkcfNmbFV+osi5yUsOGz4QACyj7zFTh+fKZRNz0bcTVsdO1hxg==","signatures":[{"sig":"MEUCIQCIZHARF16xBksV4aBBtM9fOql4YjxTrgkjsSDMN6XqPQIgIVVfrUVcK5U8iXZDhpLkSPjyCNAq9sHmxxCYMNFPoQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtW4CRA9TVsSAnZWagAATJ8P+QE3crbN7pITO7X/AogI\nUa9xISTddhs0CutG9vTmI5Ud9Zb6FpUft7lJIMfSWxkpUb6t/nY7/+x68iCc\nr6pPn6ghkrmnBdoWHYnz+0qNujydsU1yj+56uEUhnwZWb7N+jTgKywnXi3ZM\ny8z6UQX0tSl7NWLTYi9o6KE7rHNdOATBbMTf/BWDCS+YwASaPnbfmb2g1yG2\n04OvqoHTNYgfYysjlWxgbP6TeKUtu6vqKtoALW5tbYG2VlqdemyFD2zRe03f\n0TGDPVmlrhc4Y8BPW+u5uhI2iaOyQXsXbYCXrSuqr4jeRL9mEbk88XsWyavU\nv2kQigopwE1Ikw/hC5HAGQoLTtMoBediCJBM4hd6DVAG73ZGEzIZrfHRgutY\n+JjwgS5Ax5Vsw99RFjBfMq0pIYEX6zmsAM21PuDB5mwpw+ZITKG8Hdr/T8u1\nN8v4uVhUjSduf6MvhUmUWvA2/mRBctBKmWYUZGs5gI3lhNnr7WSH/Pv4j8lZ\nB1yq232BS+TFshDYMnAijjshZFsM028q2Bi7IlP9TqDWD9LYY+Xi01NkYGvJ\nNuxtIM3YmBxg7YOQQ7f7o0EJY6yPin3S4FlduPEw5+s1TBsVZpF2U4x5Vt1l\nRkInu9XXxBObtjOV6o7YJHgMNxpAPPT4BtAwKODxQMn/2WEYgSv/9yv26oVs\nIQEU\r\n=fDgD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/density":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.f4532b9c8.0_1597953464232_0.3335813272998063","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/icon-button","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e9774ec89215f37fefadf01458876862f4c89bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":37,"integrity":"sha512-n9PfnWsFHjv775YaTjSKuk6jq45QGu4hRKiP4Fi+QvMcVQCb/lTiovA9aED6+I82ti2dObdL5YvyjSFWEYnW0w==","signatures":[{"sig":"MEYCIQDsB+6ZHmns8VBfSFy+nSsP7RidVvMWDpArjrYKOGFT9wIhAIULNpbYv7x9yciJf7fW1xPaj2AyWCe+mvJDf/0ggjlB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXOCRA9TVsSAnZWagAAvT8P/0S+KToLDm7MsdjxVgmJ\nP8tqCLdBS10W4cfyiZDnrYVuj/QII3SneuxZEEGD08rIqtNVilTd64f1pxV/\nfa6xePJQAXTsXt2Uzoe/+M59OMusXJtyoGCUZXWgCaQkJY8va5EvpoPvk6nc\nigVBoDumvfIw0skGSx945AbFw0whnZdRdSlblRBWuxIK5wjLkquzO5G1WYo5\nXTK6lBTuhZWVLA0em1pjKJ4zHDfpOBWSdtlnxmeRGd5IVOGf79Q2nsWEaLoq\nHdHPO2nTbjAIquRE8pGr0vJwXDE3kQwcmm+L7FA+so3/VL3pvW+QKNbFdMQ2\nU77Bg6cOGZ7IoOkyCFjh1XTjA7LCtYPXGpsxubYD/C+qaAMLgoM33uI1q4Hz\n87GZF3QWZk4X6v1+MyNHAxZzOTNRw5KGE9y2+orx/wK9688x6bKeDdirnosD\nu4uk8aFVEkHRTEYsGNE68vhJ5ECoCoHKphndRNLvILIKNZwHESBXDxdP+uqH\nRy3TdtNKuNLfAPxs6mYba/hPlqLDF3iuV2EVMtb4m0ElmEEIJ4y/FK6qCmp3\nk0uFSQagGinswp5vubUypaVar06eKi0NaEW4xpeVtbJ03uGLIdRR24V7Vqt0\n1+ExUpgnyx/GzNXHqJXzqmLSboKu+lwOj6IKEK9x+1vbg1bHjQuQ+K5FLoER\n7J7E\r\n=fPJN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/density":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fbf73c2a6.0_1597957581703_0.6149009487813204","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/icon-button","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0dd9dfac2bad80d90dc574ac02420a3c8870cc6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.cf800124f.0.tgz","fileCount":37,"integrity":"sha512-gJgc2R1quJt7DNia4//dHIGNMt+RvGOllx1dosQjbNfsEe2KSy1UfVmgq42Aqt+rVThpgbXZqtQrrhk1X+hICg==","signatures":[{"sig":"MEYCIQD9mjffUl1epSZu/HRgGNON217FjKL8jW7LBe6FdHgD8wIhALf3CrRn3jsLAAxcvvKsM9HN07wulc6w3J+zR86FR6KB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCkCRA9TVsSAnZWagAAYoAP+wTlmzM1f0vKNc7yA6GQ\nPAjrLZ2Sc74ID+HRWXfxB9VmAN6IlKe6gDlRF1ugzcz15uVkKLneZbC9TVS9\nrNhhOIZV4FjXGsGe+xUDiPe/6EgZcndh5bUN4qqrh69CgxJcTM5RP87y0Yo8\nUop32OV/Jtyf/tYpqsq5juE60CMHC/V2GAMJnmFvtXKSKXSm/hhNg8g784/z\nogmMqSFoFvILSVe+rjW79Uy/GMsO9R7FgSlmKk8az+crCsP7RkbKt/Zd69J2\n1cd6IrQNyDOo6tgYuxb+j7mGY5zchSsHIZCO3I2Q6uVoh6Oey1DP5YxRrFet\n4PYDZpPSfnDTPxuK4pdGy1nXHMfaUEml620CEvkoHygphg+NvHbqDsIWGrQG\nGNr207iGZD+WwX4At5M2vMIn/Ck82Psgrq772hhiBipoC9h4c2xcU+Co3j7+\nb+z3f2eckB/liY10ERKIkGzu8ubSExBs34K1yX+ibEQ6IUgtGCw5HyrCNHtj\nYr+YrXSyMOKbxskGvdbhMQjyjgEHXpJSzbFE2zFrUEILvyO1THw0dvUq5t7Y\nbjMN25hacrGmEY3fhyabl8DQQEue9MfOzoaYsRvnD55CAEnj7zSquRCC4H0k\n5YIuyr/ffOWF2aPzp5/poGtHinBgE6Nv26pRsxjMbrwSTj/k0JNDc4unSdn0\nJq33\r\n=uaLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/density":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.cf800124f.0_1597960356175_0.357951933996989","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/icon-button","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c966a18de77a43a451125cba231434e896f3209e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.95e4eeea7.0.tgz","fileCount":37,"integrity":"sha512-DvDIybXz5ZnGNXejTDmiISkA8wRp8rL4nER18eJdNAVsP8MNvxAQouzp+S4LsQK/xxea9WzhvloFu6FWB27qMg==","signatures":[{"sig":"MEQCIAMBO8se0WV+Ezcm73BlOUVywSWXBLf8S7x0tCpTUcL+AiA4oe2hasLAg1Hl5afQkyUKW7N9UZ3YQrg6wLIjPdUwHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwcyCRA9TVsSAnZWagAAwW4P/A1sqhJH5dVXJVn2b9Ju\nMtHNCvUp1h7jhtAHj3eHxnqi+9UUhr7BNC7uNlV4ikE1KSsdHYmX00ena0rG\nR5iRoYMW95o1owbcVWLhDciBCkaMpYVFF3leQ7aUu2lro17BVvjFP9KFqGTQ\n/iTfY79IgOiz0xelQk48++ee1Wv6Z/2OhCHacmTzB6ktAJ8eP8evF1adRJEx\n4bmgeipB1P8Oy0S1BaxLgoBmRPkMKDUuRZqJy/wJgTr8wL08abHTkvTw3NRc\n5ltvw/FCjeQ8J7GDA+lmozh17zO20XITNv2w3GyB34MNBiUDi9g9Dl5e+s2Q\nZnw/ai9qTNlxa9K4rYKGT3Tb2EISfOZUPXpCiUqs9vZ0zp8Hv61oPr+epp1I\njbt1Pna0nFFcvwMz6uDmjuuUEuemA+JygnCRWHebM14U+aNZ3JCWUcsyDz4y\nRLPATZe7J+hveTRV9oaPhKlJHVoTrqddS/vRFSzngRhwY6JOzd+aL+jzPTbZ\nSMsPjQoYoM2GxU6CBnQ0HLbxo2XKkY2ukYg4XApzRord8yoDIJyieHhvl+VD\nCXrIGpCIs+lzg979c3xq9rgdxSDwBFHY89BiNyEEDvizWSlmxzhJTRB0XEyQ\nrQIxj+X5573mLK9FSuiHHSCQV/Z/VBjJSFIK3QZqWUUtZytD4SDYStgG7L5k\nKATD\r\n=KSfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/density":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.95e4eeea7.0_1597966130174_0.8367723068432822","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/icon-button","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f20b19234019d67975f1dbd9b33e5e17ddfb82b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.91ab1c62a.0.tgz","fileCount":37,"integrity":"sha512-hUe4+0JZVNWr4RIVht+CRv9QSGO/oVjjF6s3qvvPuqFc0Loga+h3sd6E1IL6O0JU2emOnPXc3PsgA8dU9FlkbA==","signatures":[{"sig":"MEYCIQDuJNmh/l29e0+frrJEGr3yBMRGCQOJpuAlIqaxMRa2sgIhAKt4F3BaVKtY6g4SSBhf+fbrDpkfTWiqb7EOFogW/drQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QwCRA9TVsSAnZWagAACMkQAKEQebiW7KPy/GEd4Ca4\n/BsOsT1tcOn2X+Lu4HO4sN/5unrA05IQEc7F/cgeyXHYcBgHSHPU0fYLiHJN\nCIEovGTuoj+U2Qhtjg4C963zUD6YRFOlvx/icvF4WlO2+xI4aJmZP5cH3hXH\nNv6XHL94fETgR3KXsZ1Tokicj1X7D1GqnDqdG+hxc6BYQue699top0J9+V99\nc0Ljf/+GTIwnE53xu5wfidLGnDR2goCfDzdHel8+HmnjJXEzJVqJhNe31Atw\nGyxFFuPJK2EET2g7Knxrd0hyG3KZvLOe6JRU6vbqzM+uTOXTup7x15uBIkyx\nrAo6rP/v0N0jsbVejnolBwvhCaOvpNyGPfUOGHS86nkKBjNUpinWyNlFsCop\nQX3NuTr6bGhmGTdvh+tSylz1aAcN+DDsXVqQsYdZavCID1mggmyFrsKIMVdB\nfiOG7OnXolz/E5q6XQBh3pnsN8mfDT04lOsVuloIg3+BCN80TPzwq8u/VG4j\nKoCF4jBPEof9+Am7xzk5PFuyoXO3lCEyQBE4gyOLDAJc1f/TO5edt4gD8U73\n6hEcGqSZR+4G057GID7lYdvqO+RxOkXcJNuqatBUPnTpsnpE0P0lEHUDXr9Z\nVAof2jZsYIgxjAmmOHAayH15ZltvtpH0I6LKM3QxfZ+ah+n2b9kQl9sWxCEF\nHeGv\r\n=fVcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/density":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.91ab1c62a.0_1598022703894_0.5663997396338394","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/icon-button","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da9ca04b04592f74fb47744637fad15adba9cd01","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.58eaa9f02.0.tgz","fileCount":37,"integrity":"sha512-n3BgkoYoYOnIY8u/AcsUWER7tkHOPzx9NZDdTRguYUgyOxNoNllVjt6K18OHQymvhnwa4l+K8LEjtY5smxmv+Q==","signatures":[{"sig":"MEUCIQDbQq2QJSiaEd2kXrCZwdhyPKWSxXI3/tH55POOUNBw0wIgJVbSOvXdSswoMUgXjSCHps9zAFnWsOO5yvelK0DgoSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfTCRA9TVsSAnZWagAAlaIP/RzXlUoiVT2QODELv5Ky\nZ/7qqwF1b4JG49Ou4rqHBDSwZAuEuf4uqJbgj0Rgp6aNWXXuTjtPlpMKmV7R\nXeeDDds03wgt5/GI759gbjmS00Vi3kKzc+dzDzMgmHOqdp81Gfeu9J7hR5ku\n4IrQR0cmbSf0W2uXBBOLsY+44AdThd/O9w6gR+YpGNyOlZygSAB6tB81ytJ1\ngiM+FXJr/8McmFAqQtZ3yi8AF4Jl0QSAf8wTBfLRrw7W8zxEc4/dUMGHJOin\nBPUcztOPFM6BKrDbKJkiTwLKUVumFRa4PsWS7H5ve22nVOg0erLf8plV9Abw\n+YTjWc059PXrdtKtHfR/WigYR+x9hYHjabxMdux6AATl1B2RbyX1VesOXObq\nrc7YPf+2Wr5Rth79o2jR/c2vlCIepukYvpMN2pROnT9hsmjxbIDbuQJgWJJa\nt3YVmMDAx+qj6Gb/FBJVjyz4wIiiqaz7whbEqIVWu7wZX8X4t7hvbBFWnAcP\ntDm3LDv7M86Hc/tbQ6pShK/VHkEbjMOR74+tCog3oVGihRRjmdTir+MxiTmo\nfnjEndctTdue5vwp0F/SNLpf8iI79hPZdph4FZ+AwHDhH7pvAV1hPwvK28LR\nm9qDYqh0M2XE7Jyu5f9HZrlP2P+frOLN/YwZKAzgE4b1xd4perpdMMQyIpD1\nIXy5\r\n=79uq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/density":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.58eaa9f02.0_1598040018799_0.08505107758100294","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/icon-button","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a5f7f73b12c168db8b38cab8cdf21df5c4765a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.238216fc4.0.tgz","fileCount":37,"integrity":"sha512-UlnyRgx0gMpuC8TmERUbq4ulDG9IRzsxGMD9z/9E3C65HDGPxiWSplaOaCx1tAum/PSBxfPoq+/dmV8ewVpOYA==","signatures":[{"sig":"MEUCIQDWB5qPvc87cGxYf1+FeKl2MQJoMAYXER5K2cpiPEeceAIgYysDWaug/vwsmyS2EHPpdcmwrcnhbfJNbFAL8IckvFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+BCRA9TVsSAnZWagAAJ9oP/RTLSAuF0uXlXM6ghkOJ\nXK4M750dCz/yJcMV7b0MRU8FolxhcaJOAI32CA3BXuh5Osu26CpvPcbobXWd\nHNtcRzSejwaCc+X/bLdZUVg1sxU8aEM5VMrvquR5ZEZ3jI7yq1TYAKA04Fpr\nCbsggGXGCg6qrwPsP8sbmq1vql739rnapPAYF4y07294HWX8hPcwoWyCnVIL\nsy1mQ5Qk/hmMXAshL97CTYd3HDuWOFrSY4m9N23GJa2TIllIy6aLdfvL/dNt\nBvSOpg9au+VMeZMZcB4tPVljQv+M4AcN+bPqryXkCiBjpnrXaDnG+jGMBfU0\nA9/FqTFH1tVxzYnDj7FlBl/YT0lThlQJeL/ezi5yFKM7/52bFMGiXiJEQL84\nb7kGxTOok2YkZkPuGmsnxpNquMqz9L+cR+/3HPNxPplJ33etMptX3EWpPkcj\nS074HPnWJ0u3+hUaaJBVEINBlZNQAmPMdYuleajgoI4Trcp1ilkFHAimHhns\nfH65tkRB9wd3sUjnStTeiyKUug9rKwz34PB6lirbtG21qtmoc6DDT1uIRgrt\n7AoE9vco2kgt3dnzl6WYH/6upOo65jKN9xs8qcmcVJ7JjHpLyhi+lK7jcZAj\nanKTciHlwpvHjfwtea33YXF8GLU6zutZDte0BokjHUZYlQKYv8sJ5n9U3jPg\nwdiV\r\n=F43/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/density":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.238216fc4.0_1598283649258_0.16082435568596298","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/icon-button","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8df4f4e7c1a090a2d5d8a7a6fb1fe4e7093b22ea","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a1c65593d.0.tgz","fileCount":37,"integrity":"sha512-R0hWzSg6mF0m1oRKphqc+EfZ8dJOL1XsUei8fTBVRjykp5NZlFYyC8O7oGB7ynFShzqn6hgnTVq3DXOxPnep6w==","signatures":[{"sig":"MEUCIQDHsemewmLI7m6XMTckezCNNTPZ9wkJQE5K5mokC5JSiQIgVxUExtvjBR3S/++Bupuv6ZPWOF8gYwvek2aU5KGcZ40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+WCRA9TVsSAnZWagAAR3sP/AwtjxblMrade6UmED/k\nzPvfKH5xvZnW2gsBr3PQwi9uC3/WWPX4yTeOgAkf4B0VXE1y7UdamJWcsAIi\n6VJTlEBcO/S+ApCoaFYs46lIkcq6FA3xgzN4kzrovNBo/y9AFLCUxqkNyIqR\nJb2gTzICoXU6KkxUw3NiWigKWZWgT6J4QJQB44pKkFCFw/fKGVpxWjeBU2tI\nXTwJMxMsOuYkHochYyJPP8O7y0ANwA40f93forea26QYDeRtPeGQOwY4q+0H\nkFuT1/5hevFxAZ6k7DXA2dmMfR7ea33pHvuQGQRtCvuJJ8WjU58kSMgCPDzS\nHTGPXq1MAD1omv8EAF5W41oj/SSQLAP3dnbXC1U2IyPS8seT1kIfnMOAeea/\nwlvsbo9SG5oDTG+hl05l/2BY8UbhYTt7sebAcZ7qLv18BcKAcg1GsyzaBNPA\nt0qkI+m8CifX5NpUkLUXK3285oVb29jP8jAyJONiHlX2eDvanWzmtIsHWcGb\nh8FXYfz7dHNLwu7fZo2sZ7ctGex6TUc9h3VnDOKohwUAnmWCeoB767Al+Jsf\nJHUIHsgxCEa2fRw24UsQYzGDaxaSTAvJQ1+DcRlQGWcVNCKqw2Bnz/42fdfX\nxHyWwI0lFsUly+optO23xIwVGS4LZw0P9txdIWmQBCAup85f7OJj/G0xWrn3\n2YBh\r\n=AH4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/density":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a1c65593d.0_1598324629948_0.5474440864794545","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/icon-button","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e8ad87b07f2e17bd2bd1b3bb89ff7d890b31f67","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.708cc09c4.0.tgz","fileCount":37,"integrity":"sha512-eBJ20VBtbgd5osCi0vD8qAtX/PBd2W6/BP7htVxPzkObvHenhQ920pZI4l4G8RjNx4ogyvhwXENbu0M6zcgCsQ==","signatures":[{"sig":"MEUCIA2sDAkIEdzWWbrlhlmKcvVYCzG7Ne1CZJML/op6CvhiAiEAwYcOTI1FUJjiAY6USWOpsskuTLxPPDnxZLqFgz5fZb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSpCRA9TVsSAnZWagAAXcoP/19Zp4SGjoaIPJ2GvOck\nmymqfoTPkSWmYSw81AdnwicF3Rteo2SHB5lo0dd3lFaxpLa09ouIS2AVKOf4\nJEepu5lL66vVv+zvjDnn02GkTF8EyZLBengd+kAbeFgTAgNNXjIk2tYqkzgB\niu1tbQmKOMBItXRK/gkWyIqiU9ofIQTn+t6ULoFovsqbRGqgMMtztqD8TpLc\nDNs+e+HpljAJ0MK3nDqzZo5Mvr1aoPotAM5MTJP/FbAJ96g7P2L8qUZKbPDc\n/fyXD5NHWopfq1Ut8/zlj6Sb+ZwuVdy9OOq1yq9TQIKGFBFTC5i8UIks9hzS\npT+ayQ0OuGY45BSftUFMlTSMjfPiNeHiSKGpq5jy9ii1J9WZ/RCYJDaJiIZ9\njMZf7frLwcs6C/g7hzrxUSNhqk+LFnlHMosPCnxc8jUM9oXWK7d4cCv1Ic0D\ngSXD75oYU/ca8bwi5es+MwPjtxID2aq76Ze+AocGZtxpAo181NmPFu+wFv9C\niH6iPBcQ6XkuKohIESnUv+7jh7UmmVA7JiFH+PqeYTllTFQNqE4aoQwWeu2W\n25l1OsMo9FBi7jt4JLkcjl5tDsECH3+1jUUk19nok4DYy0Iz9bc2eKNrRF27\nRYTnw3eG2HvkcWjksqYJJe+4VJ5s11dWjkOGwGTyaUGkSNjaPzo8M0K9cdfs\niMJN\r\n=GPzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/density":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.708cc09c4.0_1598370984563_0.1730889312420132","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/icon-button","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5806c80dea2ee0b4cad91e21f3e20f28ef0bb44b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.19bea2ad3.0.tgz","fileCount":37,"integrity":"sha512-ze3sqhYTl1mvq+MESLui4Is6u4/+TfHwGkxQhNc8MCrS9pO8SIR5J8/GvOBzLyRprtvcDTliCP1coJL42iPubw==","signatures":[{"sig":"MEUCIBnIXkS+FRXuuzd03E2trg1Va5JpkH9K6fJsMh/U5MSEAiEAtAIYxX1SGvzqGsSwgaokelTZoLhUyHC+1l4hEA9OZn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6tCRA9TVsSAnZWagAAXWoP/RratrV/trYidFjB3XCT\n8VeiUldunMpqHZyoFgRI+ROu6w6LsJyghEEvOtUvGWYZZ5H4HNWq/GVWBTxG\nu2oYTqSYQcqFWb75vleavjmdggeOOWn54gXu14JQaCPeUXzokemmqj7GL5SW\nl78Pn4hmA71OQLUuzZqcbsSShO/d04DqiN54PIhFzsh0G296YWAOCZjZIA1c\nE2vsFdD4cvao7Z7aTADcfgXTalUOtmjnhC/ZqYLFKhKb+E1ZDsbuqKDy0aH1\nCLdQtqC7VuCKFjgRP1wlfFVa84dCJRa8LxChZMsmi6EcZLNj66MjmDABECtt\nCrBSXq1Qjm9jKWkAteohAoGmOQWur28og2vtHXJ1Y1X41f46fMcf3aVJwIhR\n+/IP4WA+StlH5F4gtvUB0nyRAp+lD60lfdAYmvJBGrr8mJ/BwKgcwmPQA1Hp\niUrCrSrjeKVxFsKtKwyPC2P/NfoHOJ6VyZX9Or1QJDeg9GpeZvvvQB2N4PGd\n4Glf2ctXbhOMLrcAarx7WOK1r1HiYoLE6ERj/c/mstlwfFkeM6NonRZlcpKv\n5Csg+aKmWjZ63SJZb07jMnbKVN/Ygw1FSbQpw9YGoECFBEcUsuPwMne1bzVX\noXNaIhoWR92TNvtPZO7s0N8poGf7/cYZUXTBlzldlHjNfZooi5Ay5lQF6Pet\nH5Cx\r\n=krUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/density":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.19bea2ad3.0_1598467757314_0.1561268099449944","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/icon-button","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0895615189a658972cc7404300be7a27db9fd05","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.911014711.0.tgz","fileCount":37,"integrity":"sha512-MdmT0NuARGF8I0vWL9NZ22GSYV/RdcYFPCn5kflmjxHNjXpp/GJiMbPPcMC0SVliJFkQrKLQoT3izpnkp1Y4Ew==","signatures":[{"sig":"MEUCIQDGcrqxDmYH85++yM1DrWwaxY16KkAzwq/9YT9HJ91rdAIgfhmFEFFABmeOynEIFp/qXFX3h7on5mZ+PRN9/lXY3r0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9plCRA9TVsSAnZWagAAJ0kP/iS0/h2TzX6dPR4WX9YC\nqNCyouKUaTuWDjm83NyFfQ7BauxqrqHLyLa2FFVKSHHj6SnsTcNxPM1DpNK4\n+11HMgt8W9+ZM7WbdfZ32syg2RFqrLvLp8jp20Z1J5dNo8/srlazt7dSsEh4\nQYrMZuaFSp6P7kfEObdmNAXvsGV1PtpQ7EKsA6whalMRUCuhRI7SEHygQ3xm\n022fqGNIWIQYKRS3MbR85H+E15lKYhnnanh3Bhwc4JGg2eUbSxYyYBCZ2zlE\nV2UUiAjAAnO4rWjo40SI05qIdTrsYSW77UK9N0lbv97tKq0/Au2ylmymR3me\nMVguFB2b9iqQoXtZSQ49rL/WWIRAS12EvAA51pnOX9VEcqn+DYp/kSC1mpqr\nC/RH6+Xr1Hcl5hoUr1Ftv10oKEzbUhGAy3NJAq0RL6xecKW0CG/Cglw+YsLY\nltI47Nwhz2O1aJJsafRDRolXIPina7R1MADZrR4epmHR/lBPR+78N+Jt3wIn\nXQoIv0kzCGcbEH7VBRgMIXM9XZcy0wsR1z4JqgLxg7nm+EZ5hIJnLrUZ3QdK\nVKoLY3VbwaFOQLpaw1BPxCGlB/fZU/rhxZRDB873baacz1+eeyVyxSCGUhXg\nRTpGLJtxnmRH6TySLBIdqRbvCyru7vqykYoonzwI9n2VkhSk2cNZdfHxNdry\nrzVa\r\n=N0Uj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/density":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.911014711.0_1598544483176_0.8045874068452923","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/icon-button","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052434c9a0457088258094406a9afb3905ac0526","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d3387f54c.0.tgz","fileCount":37,"integrity":"sha512-aN6Mm+QFWAfMa4CNuSDs1XV1UfODkMk4Q55PtbF3ChscZHqTpwsExKkmYfYBW9vl1hCOmEabciyxJsQCGjyQxA==","signatures":[{"sig":"MEUCIQDzJRprXS5+Uad0ejKeW6csKSj5ZII/pVME8ck05MfmtwIgbdfiSecmEa2/XWJqQxn4meAAwpSYo44F5n6k8mMZ1yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgvCRA9TVsSAnZWagAAH2cP/0UpyjpOsHrmz+IehSoC\nbl6El41ZljXA3A9Ln9K2igzRtx+4V9hJAMBnwjzu68Ka8IU8eYZSH564AzVU\nWPIUQSc0WMplcwsUdM34+Wfo5sLKTCrx8eBKh9jYwhJ9RPJRuk72eGQGYn5I\nEKlUZe5VSbDqcyYBmOOnvlyhKxv/j11nSVe/YAo3l/DktVl0ObHx9AbO7uEH\nZJaTMfeVbppnqidb11NN/jkrVPSyJrjRE6a1a1HzNbQloIKZ0CSJ/lP/05eF\npRs569/nHFPVXAKnRLN8gmrw8mwSqpEv0jwtF0B0UFj91SADY4YMp1DI6Sw5\nBv+GzS6tjFxlG96SyZ8S3Wdiu8s7YPjCgqqxEJNtzqWxjlXJ+He1SowB6NXR\n38UGCliQfhMYX1RYmqHbV2C2nCKs8GBsqgKrFKooCZLvYOASWe0WTg9DxZUf\nGHOWnJaavzzSNqy+CFI2vGUltE3gN7fVZTSBmA8yay47VUrSuVc8pqlY+o/r\niimZRDDGW1Ls1+bE4LpQpOqUFz68e9WL8rrBugZLR9NfZNw+/IJtdhnXCMmc\n/T3+OJmxLC9TIVPPR1lVfqkBJoPY+81pyOpTSi8tNJM9qciQ7KX0oRGRh72x\ntNhm1WwNqFM7OSxabuAjAhQdbKtNQE3QtnwawR588vxQPgOYd/ENqk76GNlg\nStS0\r\n=Xilc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/density":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d3387f54c.0_1599166510652_0.9196681751605775","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/icon-button","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea0a614d85f5a77ce2f22ed88bb3e830c50907b9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2ccf996cc.0.tgz","fileCount":37,"integrity":"sha512-Jh2YAbR1jBwLLk8njYdFxo3AQ7LBijsUDQ2qx9J/ZOUp3BK+27tX+Fe2fcmexYmcO7Q7s0d2ILy/ZVjEZFkZrg==","signatures":[{"sig":"MEYCIQDgVW4LAUdm4yJ3Kt12ToLfPsyDUh1yfRY19exBkTSbswIhAOVGkr56t8ejfa11uXvU2FX8kcVWmrwKGmdXTHJF92S5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVg/CRA9TVsSAnZWagAAodwP/2LOxcwByxFEWVai0+WR\nmYQ0CBWUA4L/fK5TxGxh8YZXVTZ8By059jkYL2H6WL1qSCrmeGXlA/uCFlJs\nt4hYzRBRRkXLO4t6uwqFwRG6RKVUw1fOQw2IhlvndjDuGJfsKWII9POno7E+\nS/sDqmODemF+KQrYNscNYEvBvzmy89Sx9OcZ447eiHk2NFI/o7qStrWgDPDv\nxJP2eUdP6rqi8m6Wqq4dqXYQue59iuFoVK+e2sCc8SKND85eOUxM/tBn3xTd\ngBwkVa+pnQ+VNk5Fp4pg1q+/n6yzXfsw4/v5TT4eQ/DzajHlfc6kirvyDMxG\n4pYgxhoOlKFwOTGf4AiOzm14DLAOngT083w09KGEEknGx07J5t/BYHDrQcCA\nhURZghQR9g3igoZ3KxyHMn+AvbtsocNSBQILs+ilitzhId8mBpqVJ5NkaHpt\na6xg95OdXAstRpjwNsl/Wqrf60Gds8fJ/8CcSEfUhdpebugKz0Y0yej325SW\nNWWi7ObYP2aA42CvhF64QpMfgHZnaSPg1iEJWHkjcVeRk9cd7Gjy6k8J2kPT\n1FDe9gEerwuKO+LPt/mXObcZvn3xWGP3bOg7+ZvtwtKBGx6cyzWGq7P+gdiN\n7BoNpk1qrdjdJYkOqEhQEupeCyS7MG3Os4cN2+298En/04538Q2ex6EZ5+tJ\nhc/i\r\n=LCYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/density":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2ccf996cc.0_1599166526945_0.16630582225128943","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/icon-button","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d6ad9c047ff5309355e36809bfbb551fdc8d2a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.744bfe5d8.0.tgz","fileCount":37,"integrity":"sha512-8YU/WT/7SxwNRYb1tbNp2mx75gizSVa+om1bRCHu5dUwtw3drTnlG4tjMKsqHTM4nMyaix17iHOmj7Ez/7Pnuw==","signatures":[{"sig":"MEUCIQCAXcRR/aWJR1XQmq/CykI+YvVgxaCIoYZe+42y48dBkQIgKMmW1J47KuuvGoqhVXpK2WKm3sKj0ujzEMUfDHf0JaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVh2CRA9TVsSAnZWagAAQVQP/2M1AO3QyxDIF/nyCV2A\nCFHofFVMmdPuPYoapn4QjpI9d5KklH/bLLdonIACDHYpvYdAQEQcAF2qYpcP\nB0bXK3pY0461rCjzdPxiEMEht06QqBo0A0RGiB53B0fDtF2P2IUJHzydN+TZ\nN+HP3qCTvqZP/6rRHBAVQGH5/vvhyt5NoYPz3jLgkVbsf706UwYz77c6x0Xf\nYDfslQYOisE/GJf1ZwRHwCM1QwOv4zkSC9cA3cgpZI2eXnNqwJrIS9q6kmYe\nspg5hA5TETNC1X3sIdx5ERlM8wafGIhaiVYPkvDwyx2qqMewCFlFY630+Rhl\nGbf3tFxYnPqB1qV4wkJ9m6pCmEDPPJVrNIZtlNNMV/qoy0NO1X+fofLzasd/\nmg0YzWuCm8K064xlbNAh1M699+cCEtJWjV57+8A91JtFlzlGsYhFCJvTRkVG\nuCN55Z2H4XKsjVY4f2XvFNRAOVS/tQRvDgrp3Yo5vPblgHADUd2MKUuarIZo\nzqDwGEZcNZTx0J1G7e16Gu1uYw3mx2BVO8rULmAvOpfjcfu/9uVWGyiV7kSr\nffezPEY547D56Fpcwej9j4TssY0wi+vhV/3Nx5kUNK8qcxqSQcO97pavhRvE\n95qzUjdsPVvX7HKXuN96U3jgNqOckBV6Emug1l39sxuRzTuzI80e0eOnYuz1\nuQYH\r\n=u5iG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/density":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.744bfe5d8.0_1599166581494_0.15552109478477782","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/icon-button","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.78da96eaf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50378a5ecd69f94e248228b00469a9fbfb8cb3d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.78da96eaf.0.tgz","fileCount":37,"integrity":"sha512-w9RReb8mH5NtBThEAu8LTdrzYdne9aV1LtBUyMwfhyIvBN7UDwwgG1LjVAZbhz/TlQPyWDHgSQaPhpJwVgCovw==","signatures":[{"sig":"MEUCIQDpclKh8vrdTJJe7S2ltZJGJ6kw10OH5k+YpAKoi+REHwIgOjc8b/ROfIZgxfcpFExFT/44Sa6fTtQXHzYA4RUSo18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9eyCRA9TVsSAnZWagAAUWwQAJnW3g7qBd+MMy84P1TH\nxpj3qgyGN80PL+MPLS7awcUzJqGoM8GqWBbLOXsZ1icQEurFB0ZllGj5pg6j\nOiTYfW8k7EFzsApoy+u05+M1F2lrrKFvzfKr7AUXIofAna2UfR9rVOaSzWdY\n3Aj8lKJZMcMoe+Nh472CmXcR70hxcFj6HCBlNMvan89EfLSnERy04VLcTsGc\nvfM4Bk49edEnIlBFTqhcltlRAkKBq5odzRfj2FmCMx5kNmL76TdIIg5C6uik\nLtORwZ5pWZsDfYzAxgEMt0u+dLQLZObXzIER9261mVGvPo+7yoTNU+YbsVoI\nCkmM6eOQ9ZefhYcQ+MsjUbNCROWednRnquLZmFWGBLIv+0e12O+VYBmwxslR\n+UG+/6kQo3y+UNeQjw2KrMl48BuJsZJrYAC3gsdEf7d3xgDhbvNNwdEb0zyf\nOfvVNzPfYr50F9KP46wrfk5gEXSa0xdArcfTRwaiPMOubqiuUUYZYurfeQUW\nn9yPQkJeXrP77rPVkoPokP7a4Vve/CUbo3gQT1568cEymDV1x5+kdEMiGd+V\nGN+R6q6GTrASIhEkj6zOEyJf22kuJEA8FifWm/0gO+iz2Xb03c2p8mYq6cxc\npcUzzlV3jV30bOOrGSoxvfZJijBwdUFpWTn5YpgvhAXWsVq4RfDRVNhtPGj7\nJbXo\r\n=Y9Ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/density":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.78da96eaf.0_1599592369573_0.157588368614618","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/icon-button","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.b0ed593cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d97ce42e4efc982e340c19182f96e878ecdcad06","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.b0ed593cc.0.tgz","fileCount":37,"integrity":"sha512-qUjk9zRWegW+5lvlpEmMB9AlXEHYD/aftf3Y8DlKQMmVQVvrCcr2ZCbt732aJG77vNKv7LihZw1cr18FV3zy1w==","signatures":[{"sig":"MEYCIQDHhGL8R2y/bO8/E7Mnes3+K4IEIDIgpOBu/shCwJhweQIhAMgcZSLftF4aoZ2rHB6X/B9ZzPsXduUaSJp+hiC1AVic","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMiCRA9TVsSAnZWagAATpQQAJ/ePOw3OdUUd2xLwWSY\ncBoDH0HH41KGjykm6ntKlBXfG723JoSrLSuBmBv597ZqUN+B5ggHjO4e3R5A\nDiZLi3dR5oWI4L1r9aKtT8/1gAV8sJsdsNjtNZcgdMZkAHqweiBh+eZ0Hqkx\nZB582D5jCeVFmcNaUmyDZ89pFaNnNmpXGNU8LxDoKeGsoZqPNlSb0mndJ3u6\nZintr+UsGe1oxfAva2aM6cb5KLaz6sDRsfJYeh8cILz9WFk+jdCWE9LCYHWM\npGo6oMxuA941TR2hgX8JBDAZ1Qp6EXiYZg/fSx8GegIvM0+8oszjKJriwGoe\nGq2SYPXsQ0LW0see8+6hMie/bHSzlol1ztkIa+a2ZTz/kcgrhmBhLdYAXjI3\n67qT/VPLMbKA1QzcObRMr+y08A+x3KrHWHQ4D8pGURizPQW27AR+A65P0+Gd\n/E6cl1s2hpqEHFLnLCd0x9hGM6lF/2L/HtymqtSTs+yriULM0eL5CxXUJPdv\ngvvdCUJoEAFQp7pi4ADxGsYnNfLkweoZTpqvsYxPuQJQEZhvbJMFPLQTTAJN\nkFLJTWlgnSO6rmzNLSa8QZQiCty/bxJ4YL9tzcGIEwiDOmAcMV25tij2r8Go\nWwjZ100ZPyazLwpOb+A+Tjq/OrIB3CD0gBrBL9K13SPnJIwGInrCjxiNxR9d\n66Zr\r\n=4SMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/density":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.b0ed593cc.0_1599632162193_0.1044611035430123","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/icon-button","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.85a1fa9ea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa6d3c8cb61706d6e9f988ccd742b42258a00f15","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":37,"integrity":"sha512-HQAE5YBYgCqnQ8rFZjRGh9liEljpHpVXSIkvjIA9wos9Xj2ncgBe+bBvde6p+6PEUBtc9F20u7fBcKHwdhjMHQ==","signatures":[{"sig":"MEUCIQCAxxAHe+eMqnAmRKWkxPmgAHzY7XB3fEZ+fzcSG4cX8gIgBfJU+X6ILgGUDx7SDDF5v/ZX7tKzfWav14RgTBdTIIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZJCRA9TVsSAnZWagAAHFEP+QGtQI0esLDXAMxCCzw+\na7g59ahtErnjoGEb+R/rnkELDOlBQzEzOToU6SEf5yUz+ahsx4shKV4RxuYM\nOeivTmqqYnIhL0hWE5t3RYxgZnzII49LnOWDLWl1yJ1S+ffuoHDe6cXuAKf+\nL2Thr6GijZsXEb77+pKVOuJcWRe0SeSz+cH1Uhgv7h0cZdcnlbYJ1aBAJz93\n/4cj8dZLDDMX6YE7TAWoFethJFygnusKFmCc8LG8nztK0JJ3MTc9eBUL/Nxf\ncBY398lvHKKARA9FpD47Bx8g/voNxaL8xIQi5CWvqxG54Kwph/mE+GsU0h5G\np2NSU+SRq5UaowYKYmJbTRCkK6DNen9IMf0ev0tFFM9Z7g8g67NhH/752ZHH\ncypwpW8tgVCkjC2e6KgCpdYzhnhcTvyozv8Ja5E4Nh0vtCTcGEx3bj1bAcxX\nUURIprXz3pBshORwknEDAyVClZFDRfQdFshplQRPEx5VxmFc2S+LjqzuUYew\nvVxWetBNi5cNuhI8AK0ci792IW9ZqJ6JCFphkiFMf3T+9zcmM+rHEaHY9V3n\nnd6hz2Ng6oiZ/xJWeZu/kgsJMbO9JxKpdq1Yi2Fs6FDffrHpG+62ZCN555cW\nsimgjX84l4F+zISfKXUXVi7spAbAO4myJ6H61xCUhP09gtRpit4HhQiPOvSn\nY0Y7\r\n=ANYZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/density":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.85a1fa9ea.0_1599772233306_0.3578115433275426","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/icon-button","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.0bc41a9c7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b9070b55fa8f66dc2424117944dab24cd9bf57","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":37,"integrity":"sha512-GJzBUjOzbU2221jJ6ETH+l4NspJD7/aotTZBHSh50Jd7LbKy6OXjN7cZzBq+NDFBxYuTest7FnIITlg2dLb7hQ==","signatures":[{"sig":"MEYCIQDDktCdLrTLPmYLt/htYTGh3k02xsILjBpaiDBKpa8Z+gIhALMuFvnEWuDVgrqxYHuvQV5HVihtbDR684wYCUERvVw2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7i4CRA9TVsSAnZWagAAOxAQAI8VPbVE6NfuqJyssRhJ\n8Yen9i3GViPk2nkYWDX9F1qDUw/Gei9DWWLC4+pK4U82/kNpYqNrM4XdqEAm\nYhy0y/gMYGTXEfZhra5Varl3Wpr0+ZgNDpLHgRkDnUpmBnexUU2Qc70DBDrA\nzYLS6a5HFmcEigzpO4MN46oToXE1QaHwBSE9SAFiad9VnvxXCNHz4jxYwIVY\nAj523GQ2+4oQ6CrcCWRCaBU1RGD9CmjrBnRa1fI81aczjnPgHA63cu9HpzF4\nMF6qOafkLACnboXH12iXfNmRTyr52r/m/xwcDlCC4s9D3ugJ33hyV+J+dcA2\nn/J4gTidvULz3yqoLMM2plQDMCX+NaFpplMAhw4z3ilzajG1C6h4U5MujPLg\nUKQgKJajuZmaXhyQnGjrV5xIhZCH2fA36c0tZPYqBOv2U/5ubX0xzkVpueMq\n/rZTP42AgIVXnXP7Isb3yUT14YEQPE7B/TSMh7V/s224zq/JnVQT0uA9bwB1\n6qZJvtCP10SPLif6YNNifCHsJ79F6m+dbUjuVsB3FJX5hBtLuPzyTV15+ixZ\nmIlDReISh/pos1KCu9eedzT+z7Idf6P10pav4PiIYitGBTFrsHQ89uLd2X7R\npakz4RTM0CJ0p3yTEQ9zOg6SQ8jp4bHPj/djcV1YdZEFLhEq7l1aJYg3qwUB\n6M09\r\n=b1Sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/density":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.0bc41a9c7.0_1599846583354_0.7645116309157127","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/icon-button","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fc0eb5013.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5820f3a8fe05a4ae37956678fb2ed6fbfa14f3a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fc0eb5013.0.tgz","fileCount":37,"integrity":"sha512-WHpUbdwI/lm15tJH6DHjuhdc2buvCCYe+7gOT7Lbo7PflPMdI0sKx6YW2pzCyHVKYlzn6uMHtEurQb2+a7zr9w==","signatures":[{"sig":"MEYCIQDupo+02P6Z9H/MT209xTNgPtXOELMtgrL1Lq5KHRS0RQIhANsDsWoL+5LbAuAFFWxfo7ZbMau+9sDC3CCj9V1TUMIA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9Y4CRA9TVsSAnZWagAAf3sP/2hzBkg3y+4iQBQYIMDa\nZ2M3sj7CmlMYp+TIhoPnMcp4O+2bxONtg7oB3a3DdC2nNy7oQHApDJUVBwpo\nQ+RQYoPQX6AHIUctVK9BkcUVAHNsYNDxkt82xEaKxh/kWzjrV5Cif8rTrrQl\nqg2tj8VRN+QlloZqYQJ3fc9T0y79z8ZJqAQCvdfITGPw7qzTG1z7ELd2yzb2\np37eHdATIXJBSdmdTP8RMt33IoD8O4JGXhglJolznAsSTDjXMpwe8NhL97qp\nqhCqTFN6OWTTwCIEl7Ch8C0RLnunUNFP42nBjybyk8b/MDCHNmtOQ/Kk8xlz\nT60cQvjqA2FKiNP6bbYQHDUVc3AHNdqkbcgpu/1JqN1a/bxclwQoF7qOtgDU\nTbI3pxPcG6/taeOUd8uJ25GQFoMRwIhKBMiVe+mFHKuS+iobz4STiWcRPQq1\nFtpJ18LBw8ndS/8N3QJzMEXENCffdvPFUgR1K39EHtg2hRejp3rWKBk4ae8P\nUGJlhGILFPIlUQHozqOZE5F/yUX9dFjZq4bETZbEvxyjefJndn7tsdtm+CUU\nG6ZFA2IsX8Ayygps9GUgfWWmZn/hIiElCZncN4t86CYZ6iAdL/v/xbDq+6Zj\nt0f8sAZEHdeJk8knb4JZWBS1SdoHztgPb/8OMyVVHgAg/CRYnu4SWIHizQWl\nSp/5\r\n=4/CT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/density":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fc0eb5013.0_1599854135773_0.04400603247195578","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/icon-button","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.319bf66de.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e84f56f2ef04fc79fd02caae6b6df21fd38e4f0a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.319bf66de.0.tgz","fileCount":37,"integrity":"sha512-/WlO66RLkARXNXibDAVPucqIJ+8ZiCifQ6aKyc4c9pb07/2uOdf8E2juX/f0QaB5B3GDvNXPgBxlvvra4vFPPA==","signatures":[{"sig":"MEQCIC3Tu1SOcwhd9qGd0LzAM+T8zJ/plPXykUiXVRX8R8TGAiBKguD9zP2vLijDuNNF0soI8aaj4L6Ei3z3UTO/Dj7Llg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPVCRA9TVsSAnZWagAAz4AP/1URCTQPqBsC2/73NDpN\nWab1O/X4Ahn7hP3QsUjEgodEVuRyvesSbYTSm707X6Tp67g9BO8Vmzx9DsDw\n8UoAFy7J6j35+qvTEEfsEC4k1O79wH+bPntq6IeY3fjfWhbs0zFs6DWleLrC\n+G9ElQbgw/vtwyJrikoVX2TteTbkx83ZyBpYnjcg12MUeXtY3OhxT7bLGHft\nnUb0/XjBNsOWA5ZxwjoHbhcH7qmkZPTDYPZNlIEoIkj8j97nXLO4FcY9w8xf\nkClhKJptSRX//0LfYf0hG6Ldf/AaUJyKKEK7sMA11h1bVS5hzkD30y+KenQy\nt2XZP8x/ofeoEVu+4zAMnl4hJxqQMzPdjJ50qeXhrIYfIG5u/jNZKrzlll4K\n0nHOVesbUVA2xr1x4SzprTZtJqWTYb/LLTV6ZVIGgCY9kfAV2zx929EIkNut\nPc2jiFUhFrSJuK5vTbDjnyqVOcy03o+RuJ6sFdbydKd1QYOQUpMHe8JqUSp9\nTAOpZ4qdtOmiQIuSrGUBYJe6ZADD96UVK1AwEqAhffXDKKiNcSpmYpAoLDFH\n0ts4pqw7dYsouFOPqcNsOoLT+SMN/R0W0pJrcIGE9vZjotXU2KJnT7WWjn1C\nAOWHqzFqyGgnnHC9gm+gDaNj0HfEU5AxgcMdHo6ozIU0Hd7/3x6sXmFEff1B\n4g8l\r\n=gvCp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/density":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.319bf66de.0_1599865812576_0.6929073324750958","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/icon-button","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5bfc305ec.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069410eea9cbe8bb527ceac59cae16bb6b39446b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5bfc305ec.0.tgz","fileCount":37,"integrity":"sha512-Gw6tCed8JC5oVJCNmkOs+5DAEoYcVkO/cWTnu7G3qh7pHt9bFFkvep4NLTIrYbkIIsA9rGkqcAkb/LOOKyh4Yw==","signatures":[{"sig":"MEQCIBrppM8qCJGRdNwSdjpMilVjE9KvozURFaV22wxojsmoAiBg91ohQ7h1bg7cO7VOXgi9fvcqFnFGl82Q4TZwuLwkXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqR+CRA9TVsSAnZWagAA0xQQAKUTpWV0vvIh6aeylBhS\nSjY680s8bCoCiDCH3ngG63+lwZDncBNs4Fw0nOToa3HbzSBdoC8lU05ClVm8\nPJmzZwa7I7lubwIYIyF2XKuLSLQRBFjkyh7I+qs0BaRLCZ/WLFckeDUrTbP4\n/+4u+yIlK0h0kUnv4m/Gbp52IL+Wybwz1IevEmeyJT0w84GE+92tvNvRw1pP\nkXuHpVyCKf+w6YmziIQ/vsZYQZuxkNCXCHrurPkD1GTMQmGybKxaD02gbwZ9\n9eExV7pnA+8INc6mYIH4YLKEkj01Yi6TCMtvib4uGC5Xw84Pw0QqeE+aK2GV\nUsicSCjcv1sHvvbg1AlBmWlVIuD079ery3L334hhEe23XAXMzYreibC0O56X\nOyOefRPgYimQBOqvHQ5bY1vjw4AKBt4xBnXTlPYdZjLpdSwdbdyaLiB5Z7vw\nFqGg4zVZ+gSIwaUG4+l2h/mfNbkMYyy3OeZ+2lAB/suQdan0WQQkV/wPvO59\nt6bE49OSHYeUQDbdyWvOkox6F2OW5CxeW1+82dY/zjw1cDmZmZQM4qwjLk1T\nvRWnKMFV3Q6E8u/foFQOJL5XSMg9lqgCF5zb4atgBoXZhcvJIQqRx6Ewvgz9\nvWRJf1ANdLlYDP6LZdzqKWOL8/SyGQKPD43gclUyseqrJAXxLRiUxAk/Fk8Q\nfhcb\r\n=mvOw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/density":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5bfc305ec.0_1600038014464_0.9178481896016386","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/icon-button","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.83d83f131.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b69a8b2d01a887a0c61f5658247d1327cc02b34","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.83d83f131.0.tgz","fileCount":37,"integrity":"sha512-ibp4M/c36HJembc7WEkRco6zph9BEHWWgN+RJgs5zraYPIAYCC6iJYkhiLSzDhE4AhQlNXEMwaBEhVibnm0Tmw==","signatures":[{"sig":"MEYCIQC8muHPC80RtSmGoIv6t1Pmh27R/PiSRWUom8XkqdbItAIhAJuMijClO+cBjrz6fJ63hKlPK4LUehIhdFfUAqnHB538","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrotCRA9TVsSAnZWagAAcCwP/A1mUb6YowKnUPuSl40M\nWG2vSKytpj4beYuECvJwW8pn9VazeSUUM3XPPgnSPNxRPBeWzCQVJ4GwTqqK\nyEV4pRFc7pYUxrXfcCcUDuUmldmODlazLDLyYOxLxZDjmemi7SUokQJwjaJv\n54Ug5XxAeMLZYbDzdqXsKzzR87GsinrkEZxCWZAwtf9SHMKx+pS6H0OGNDZ+\nVYhmscC5ekUF9l4NZYFYVmuGdgzu2cwWISxq8a6x9Xg17pTnWstBHdTta9cy\nSDsjsT8q4WxjzAwoIICHF0OYv+Lf5Aw9t6/AawBwuKyjmWxl1Y9LoEXOzr4U\nK8ZyTVipyg31C0VbLopPyaZR5HlHdNv5f9sCpGHh0AD38V2rEFTKIEPqpRUf\nQdbrCnN7KqXfhs6GcK8ZosfKuhn0ORIbABdr98gj2o3hj1beJkEDfDoqngHr\nEKVJzEFHAdpKgTcYcBPEDRs3w9KXeRvpr0BJN2xtTHB6RwyTPzxFM/AKO1DL\n+Kr8kL7ZFfNF53ZRygZ4CafcBx6tT8wHcFusNd+d2bnCc6tV1vjXvOTscOs7\nfXk94w/CyzgFhnLUhnhNPYRoLDBks9Sm23AjqTcC7/hJX6Ao2vkCIp0r9+HD\nE4QfjM6/YmKz+MqJ/nc5Sx0tliiZEE1aynvvM3PUFvCeaRVf/Rm4cIsBI4Iz\nq7Dp\r\n=abK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/density":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.83d83f131.0_1600043564786_0.9191508963685862","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/icon-button","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.40d8e4726.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5994e9056b99835fa2ac56e384a7908cf379a3e3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.40d8e4726.0.tgz","fileCount":37,"integrity":"sha512-oxMPgG8sxTnd6bJ/YYEbbzPMPFRQ81Hp783NevVaGhMLbQ8WDHdgSVYxY46rDZRVlOqYapRwMVRe9WGAa1X0Bw==","signatures":[{"sig":"MEUCIBikjRrkNekm3CrFUcv46A8DJMoSAMDaQgp8Ta827aeKAiEA18Z6E9or/G8tc6g6l+mFTzGBh8pYwJFTdcUIuva2rco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/0eCRA9TVsSAnZWagAA8FoP/0HPOlTDXqZvSbZQlDRc\npzQmd5kgi83+GTiYMa6aTFX5a6GFe0cdzA2y95XYXTSr5KfS4UU3/8Gm3GGv\nUFZajrSmxompDeKC9Lm20fwOZb3tF/tEoHISf0UBGOI2ADw5mgzywBKj2lP5\nmAxRh0feZbE4tuIOJzQgh4FFUeLvgLkIw1x4tJkC4eazOEPHJQ5olM8o8GPC\nITBH5y1iaT6nv80S5/Y0ewnmR1/ftbCinixQcj1rtYnJ7H+3p+i9VDvI4TbS\no9tcTdQs1INThB6KIBUeC285lglAqSbcI47MBuJEcVz6uz7OcctL89QuedwQ\n93/IjZHqDSOERlh4stq/XuqR0UokXbx3mYNtQ9fXeaUhFsdVenJDg+cur755\nK4QniXbJQtDHZWZql+GUJzw4N/B7AHOBN8JjxR/nG1YgYPwCd9U+7J7oz4Km\nwSYO7V7bP60Mtf++zahAyqh9umWH3koWK0vF5fXPqWkjYSaUYc8jjJOM7StZ\nJQFRV/a41y+7gQGwXoyXg0Ydwk71eEdwBgx5/Oemx+QZvWtQesW2H2TDSAQd\nZ3/WjFOyuTkD/Nd67/rklpehlr1f+Vcr8D5k4EVNVmUA+njNxisQebeL8/Mb\nto6HImaKhDixxRMW10XYRFAWZeKXMUA9engGnOMSvRqUPy1GFnz2TWTLgqXh\naWs5\r\n=f763\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.40d8e4726.0","@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/ripple":"8.0.0-canary.40d8e4726.0","@material/density":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.40d8e4726.0_1600126238148_0.6196435437122747","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/icon-button","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c25d70a31.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2943dc7452f4508f64eadc6546bfeb48af8a677","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c25d70a31.0.tgz","fileCount":37,"integrity":"sha512-XQ221KFzoGQMgM46JCdzadlTNfoqoa5LA/ngx/4Jk0q2QcKReMoTD6zuUb/q8W1TV3GRHttmuhLga1zwc0qtwA==","signatures":[{"sig":"MEQCIEghmEpP1tdcrZ8rB9TpeN1sPOEaPoNTJ+CYczH8835bAiB+I441ZUa0c0MoeBge62IodXruFp/qAZT151ZJYzVCCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbhCRA9TVsSAnZWagAAIMkQAJeCRWYj0TKvm7O5ZUIQ\nWNK7trMEzZc/hdz5qJNOP8lgpKauPVHYd3u8ZEhJL0MKR1evkDH6aVVsmCpQ\nb9T04iT11W/iMvVVndqW9RSJ7NXEs92E/+DTjZHb1GX05fpvL5yZuO2yQD80\nsnUBNe+kQhTxU8Rt9G+GKGvLxj35BQGdY44UWqBm0CxsUct7Km6+EK5XgUZ/\nRu6ITe57CjoNjAPC5lOlnRd7bO+6o708jNLpYlk0fQPDZSHJtDiF2E3sSJm9\neEe5ubCLtvh1JIcEsK2QQdiZfEfE5k5f2zY7JwBe79uQvNcAcwjheA2zG8rT\nM6gwGWz505NTSyZavHl4bpok4UmtvBSWz1DfvF4vlFguE9PM8kvc5bTY35xU\nZLrlJso2yN+fEq4+0PLdATG0ULrCCaiIiYnXLZMBlH67BFZ6pLNrdAkG6kWw\nNHHA6jRtW/5LSlM6L4iwfCc9LO/mD3fgzvZFiyx6QbjxHa4ww4SHLgIoYXzl\nMN/Fn/i3S1EgGFBsvJ6J+qFsMGfDQ46eUR1+zJN3igrZUYH/+mXK6txn0U2z\ncfOEWx3meP6RjsatFwzRvF4026y941rspSAdKTZTip/nHsBKEuyKoIpvZXrz\ndQaru2/UqbrIHWQe2j7Ifm1jb3csjGlDq/QE/gaCOuyh829KWQIdluUnuQn5\njOLu\r\n=XatN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c25d70a31.0","@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/ripple":"8.0.0-canary.c25d70a31.0","@material/density":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c25d70a31.0_1600136929346_0.3574493351646597","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/icon-button","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d52b165b5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"703620ae54ce4c496de41c35c5595685f4226067","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d52b165b5.0.tgz","fileCount":37,"integrity":"sha512-cOoBOsbEWY0LdyhCK7fBooB5vwzegaoSViPDVnfR/lIg21GkuyzR49+qkTT9QETQuDS3TtHz5tgsI4kV0CoRyQ==","signatures":[{"sig":"MEUCIQCGAq3z3L7ddQlAsoOx6PBVoD6rLXkRicV1ErvQM/3YrwIgQbrGhl8gELKzvD5uc802jiJz1HcygaRtIoF4+w74htw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWcCRA9TVsSAnZWagAAZlEP/AkyiUkIV3fs75UuYMwn\nhA3SR2s2Ry2GXJDYpuFeJBugEEnbPa3q2dc4J0jeb+znnFczeKYKhyeeGcOR\n3jqQUN57+Gbjz+vmwQKxW2Cr3ft/qwLDryaPm5gMCprE5h4hu4FY8VSRXqfu\n9vgobJvuP0w61yGrlRCLOIAicONbbYSvcl4kffsrdPgbzCwoRxEDhO1fxHR6\nW1tzn+Ehp1cfnH57R1nUk5SBQnjo5reWdBW8D0ws+f752KjhwuXNXvC41j5r\n7CVTOGtg/JvB2Qebqg7DwfZcCa1sQjvjlhh2OkqqLSsUH01zZ/bvrbHDascx\nXuQeWUUt7nuA2oG/LrESQZLx1qA7N+c6LmEfeJT00TMitHZl+bHg+fxEZx7t\nIAKyDKj7dn45WVVuwCQyO+mfbyEg6VLbhOR0QldWwxu+0zGumHqNYT06rfuK\ngTiinqbuASJyUo/cN00pC4mG/u7GTqx2M2yyqWVxtJ+PVSJEIelDViejdwEd\n8Po27qMPj8n2w5yarReXFzHyO1CSwNhcwujzE8W7GNa6nRzD43Ei80oFA23+\n7IymN8uV5NwVxY/82I7RWCeCQTiX6bgdnibYU72MQwd7buPKCDaogmx194FO\nwUO6mM4de8eyY11mVrMKMn18aZzsFiCkMmrrOdFtBCF6+B+lrmBmPSjMzQYW\ngvu6\r\n=Oo12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/density":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d52b165b5.0_1600181660366_0.3524256577169447","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/icon-button","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a831d4799.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b875a8593ebd31fca97cf4936b9cae340f3f05","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a831d4799.0.tgz","fileCount":37,"integrity":"sha512-EVstHmrdqngxQ/xCB608eiPOIXn3+V3cK4iVYP9vo8IW2ZuYjZVeuiGluuYKt7HZDgd2fSZIJ746c0FGSUiJgQ==","signatures":[{"sig":"MEUCIQCWA2nENl6PLL/JOR2LAzb7sV9cUJ6k3vEOp1eEcS90GwIgXRn5QAcVznPAYKzQFlGEkffsDSEZssGZ11QVT5ocYIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP87CRA9TVsSAnZWagAAER0QAIbftjL5qRuQYjtq7I0r\n2euJG1J4E8UkGMZblsen1MShUrNn47ZmKjZwqfjfBsgihbVhZAD9rAxLZv4D\n1SIz7vjYHMfgNZqfeZbejGZY1MTCXK6QK34GOXVqHQ3OvKEh1FYI1u1gefUX\nKr+tK9prDi03B69/GO+639bhe5vXJHJmCfobRIDrZX868qxHMjMfxIQF1ZsL\nHrfqRPO+9/TO3RvIB6h9NmlrY8H+dUKAm6jCEYZFBq1Z3mYbQqBfLjwTesi0\nGVs3mYBxR80Ld1t0j/Zelvz+3heCScLTLLGj8gq9yR3pF5m8F0ySvpzYPxR/\nTBpXfkDYy7p9bqCk3RZoRiswdhIaL8zWvQ24DCCssbt8Mn9NHLLR+Vukia7t\nuL307y2U3lheNMQEEdNklzDUhjtKN92ZSa0LWmBHJWNxkEt+L2PIlL5D+AWv\nXh4N9ej6yKBvGa2UpkyIAJanMBQIRq4Bt+vtc+TY3T+k78J6/zC3M1kDUfM6\nuA3jXHZmRoXqFNd1gJ1MnduogtokztvXF2CdkAWwWF7XH4Zof+yLTYoDXZPz\nQGYGw8KxrCc2mJvNKSsfb6gCtRXYceDKcg/z+4cUV/DXWtlnRfbDNw9msILJ\nipPhQC0GEdIj/bIHsOomStNRs+zUbOWHBRHPBJU3vVZn8eb83Ukv3EJ9dJ1H\n6RuD\r\n=rP6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/density":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a831d4799.0_1600192315485_0.26253334987017296","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/icon-button","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a306aa488.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf96521bdb2068f3fda091c653614c230f429e47","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a306aa488.0.tgz","fileCount":37,"integrity":"sha512-r4tP3qOZCSluaZhBtTeQmteHabPt14/1IKqbSvHQoA/qLDlMue+66pAfvmH3hxjO41WjsWVwm7pvN870ydExyg==","signatures":[{"sig":"MEUCIQCq2HjScpQbwdGBRTgUFojLQ1luFHc5sfTrTVN+SjWzhgIgFpPbF7269dRr8E61A6AshbT0GjN7wSduhPNPZeZPJFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTFCRA9TVsSAnZWagAA1lEP/3tDAvT2b4+kRe8f3uco\nwPpKVlJS5LpWr5ZvPrC2fEK1x0XTX+7WLKoqjSfPo7No4Rml522uISPVQGJv\nJk6pOcKmLuTeuENeVCHiQmaYXFNFpezOaaJWqWQjE8UKcr35MhfGjqLKYVgb\nyk/yILvn6vXT101TrbiU+2FZwfGyjd5HxvB7WEv3G6sfg6UqZf1wzkFegACk\nGHimgLtMOYf5A4hHKNTqV37oguKN5FeD7lq/Y8WD0rAb094kaOTyOKvA8N1e\n6yrYd4JUKf8hxVjxVtBm/DxEALAPTOK1hBTz0W5x4EhVQmNaeDkoG0C0Qrlb\ndxPHGpA27w2GtWf2qq3fT1jlvEcnf9VurPkVhmwznjqtjWWmuSq5rbOXiNFs\n/EoQ+9mC8P0yFQlpl0zHn5NgPQDqkDM557KOrQwM8OOfT45FEOQ/aofnF6Wc\nDQ+KVRSBPSMsxU46BZFpOOXqwAJ5nL1Jd6HlXqszQXOSyz04K9ClKwALw2rd\nmd8XMJQ/CvA2WzP97oi/YLwYZ2+6mTOsGVT6plQOz8w/nNlZw1J9mC8jj1IP\nGoLKdD+6O/6kJ0WdNrYhsRtUIuF5Z6pP/WPL0El4NdPp/0sjTApMnAPeDkJ2\nCg8KWoxTPHAK38WgRvA6/a1xA7G26FzEKd/zmYlJr9wU0So1mwLMQucy+btO\n8BU1\r\n=OaEf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/density":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a306aa488.0_1600304324972_0.591060473094474","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/icon-button","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fd608ff66.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb9e9803ff19813d0c92c893f5a1ee8dcfb5d86","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fd608ff66.0.tgz","fileCount":37,"integrity":"sha512-JPfqNvcbv3kZ7myIQ56jmJWb3w4dQHoar2WUrIJFx/dtbEvvvJe10FxCCW4xrTgnsAMNpZ0KR4OuKB/7Bsqx2g==","signatures":[{"sig":"MEUCIBeeEwefbb2llQI6boG26Rawaq5phfZ6/o3DI52/SvKUAiEA+6+UTuFLOXayLga82bOge5x5NqUiraLuo5y3ewDvtok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HqCRA9TVsSAnZWagAAFjYP/j2JHRXx/zRAcWEQONJX\nQ1F96ejwbf1aWHtz5MQ4waSS8O91MfYOxguJ6Lo3lLrMO6tfoYTe7M8Mrjqs\nPyYw7MsLE0SDtbxAjhwQa+7uEpT542Sn4smO7wQJ/hgEHMW5LC4bC1wcPLH5\nkpq4cw8Yw1C1IxGIDYWDDrKDSRMCHtIXxAKtlNHboPT5bDYDoZReuoib540U\nhYqyw46KcTpiIBKPz7Iu5rRsZWAPh5241X3U0B4AL1MwdV9crc1ZVJO+6Dow\neIWWF40VSK85SD6tolNbDYmVPGEsq+p/OzyIUlYlodvFnmWMx1g9QkcbqwNQ\nkTrfE4P0fmOay8AQN1Bw6Kyyv2DeFNixC2Epz8hiXbghAaBueCdv2UYDrb+H\nJDNMev1ErkK5A4tt+MJ9nu6TRtSKQLUUJbdVcfokxoC7YGRgdJHnkI4SJY2A\npXb5wo9aUaMAbKiKEE7FGreVxQ5Zw1W58juGUoZ/SB3OqUwXhJkUVilVbJ88\nhYdH8/9EF3SKBCrmnbTz4o8a6ZildEOltrR8o4MTJHjCRwOLiIN3USGCTkCZ\nCplC6FSzTz1YHHyWA3Tsxi1oDpYzQEMWD1P9PNZNK88gxJ4ZJ6lj4y34dVYj\n8OKHQN6n4lGECnKwOzHKpySaE6xU4583Qk3qHRJKdkJHr8vFBH57K51uJJ9r\npUEp\r\n=+OX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/density":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fd608ff66.0_1600352745643_0.7085228020244796","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/icon-button","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.3e435ba57.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de00a9f6b10064bd5fc083461cfa73e30d9b83bc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.3e435ba57.0.tgz","fileCount":37,"integrity":"sha512-ZqV4YgFV2lmM5E2ZEAuJSVTgkk9YPE8h2pxeP3IF6D8GnkMoBfTGLxK+jYGCmNYPc0ZquqMdVq9FVMsvdamjcw==","signatures":[{"sig":"MEUCIGeUTUkOGmtVrBu4fxx4buRKJjtKgGYvtODs1OjFdpGEAiEAx4SHp9/esH3F0/a6zaNS7bgKyVxT8DyYCC1gFAlMzZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3X1CRA9TVsSAnZWagAA4W8P/3LRTumrwQFpWJ/hSGY+\nMRjmCfHDF60U7GxVl8ciyzQR9IediAO5SdFTjbzPQHR5vhaLCYFTArpGnXix\nYB/M3O7T90YDmx56V2bpgY7zXQ8FxrKJOc3Q0HS7W+NZpbQHq1KGV7krY/0n\nqi5hEobD9W7B+KXJwAImCyAvu1Pdi/y+Hf8AKd/JvKexS187bZBYe265/Y3y\nM3kk6DsW6MJPuqwpwj3U+AxPzNdGn0/trRmbv6dqC98oGjqllos42s1gGER2\n99tQhfP6UO+ep685Oc4aaPF6YGztGMES/nh5yMLK+I15ce8L1B2q4SaXqrQX\nLCdAi1C/z8G5VZCK+wasO/qBcrwwGYP0X+2XrjpNFXrz2o/aksjdClSWuYo+\nr0DyRKLv4F4IeSDrY+nB1R4F4r+tW5yJFaPUHIoZ/BNeGZ2C+gJKyz5piI4T\n69hkrawNiaUaQU7OMn0lgpimHt2VvCWQ/P2NxAYLfLPLEQYFl6EFoFMHD+Md\nwAtSCYV8dpdEQJU5gK5p+ytBPMfGH573++LIB6FO1EX1abLoOvOjPmIJ0RJ7\nZ3A/4+NrmjWcfcOIAvFhb7xP5ukKodgqDyxKLiLVOqkFC47bNdVCP3FNRG1h\n8uHKo0n5jRMNNdeTAH8NZyYmq+ygG/u69CVi9GnAcRjxabw80JqST1/4X85N\nx66z\r\n=Dy3W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/density":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.3e435ba57.0_1600353781108_0.9206089919564984","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/icon-button","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c250ec52a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"154fb606ae91f9395dd69da8f6ec3adf5eba1f7d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c250ec52a.0.tgz","fileCount":37,"integrity":"sha512-24Gh6mNl4P8crxQ24EPcVLCd7Fk3MMJq1soHBUpIYDRgp6KI8Bd7Kj1w+pZUf8IL2AJDefDsBunSqkiWoSRYBg==","signatures":[{"sig":"MEYCIQCQUD+TKECmYI+Y7JCQSYZEdmMRFJLzqKe6BkRu36NhKgIhAJaQvCtuUq07kr0mPbWIPD81q64y+cq73COQ3Om96hl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8K6CRA9TVsSAnZWagAA+SsP/AuaMwBDF3pu91B8diJv\nfTx0Fww0LACtP83U6qRChYQrjyIa1BsFAUDeicJk4ex1qUjaJAfrhu6pToum\nifSiHcv0zdItmxtDYDaU2plqFtAVD9RCWutBD7HhFPwqL9vFDu9k4J4Q3qsx\n/iBvLMJUUMUY4Z7IArivByl1OdlkxotwQpQx4tMUO/doy/dIvmZQ9cjfiQXV\nCKlWJMUOagkxWIYCLKLVFXmEiYniN7sGMBw3ttxbxBr6vJuF17waW9BrfSYp\nBBi5fI8qgtpoESe6LB0m4vlbryDahj+7DOAN1KWrEiQAkKsDgcGmWBpN4jyo\nSRwIbzkegtJvTedPH7bmYzdjP08Jr/lIbd7VSM1RIEL5PiHKrTPT2Yy659rz\nJAcjkBdAKfsLM5LmcT8A8K3Bo+T3Ambrf7zgw9mLaSjKawLkRddcRX8Np7zP\nDYMlHZPDuJQHkxg0wFk16x916AyKaV/J6HCLB4t6yV+1wgkPdRDM95l2rNB3\ndIWjKw526PXE1/qc5WZ2vWYXANI2PUxDa52QUbeqE4YKw1kQK3KmuTn13N11\ns3GZ1mgtTfRDClJT7lW2sqxyxH2brEboZtrByBl+92jMSOiOk1Btkywi6pXu\nYI8cA2wKD3z9Jb9qLLwufzk/0hbpaDqhHN+ztSw1W+dMSm/2NepK4b1Uujto\nV5rN\r\n=GzYx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/density":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c250ec52a.0_1600373434063_0.3348081153187401","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/icon-button","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.e34e411b1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c92250521809bebf24de56d893360dfe9147157a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.e34e411b1.0.tgz","fileCount":37,"integrity":"sha512-PW4FyO7BqEAxQ5hUvdLXLoJgw6nU+pYgfQ8OCd/WwmsMzuE4WkQEYUe24dAzKnyje91j1rOyg7wEeg2WcqsPFw==","signatures":[{"sig":"MEUCIDQKdVKDcbElJW6m12z/Hi0t0fMO0ZF5tTqhWtxOsoyOAiEAos/No1ItG/sNsi/imnsfT2CnCYVTAHO8SsWTQ3s1gRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RzCRA9TVsSAnZWagAAMqUQAJOos0PhBmk4sHZTAVxo\nqbgUuKiOtn8Ip1NpZLkwEod1anJj9iph+uxKkpxjdDNUGwI4DOJs4LF60slQ\nA8SVLh/MLvUAxXU/ogANd2iJf8dEoE5+ozHzV8oTC1mxuEN/lbcv6YGteVWL\no9G9AH3fJTfgi4PYRDASxLjKCwkiflJa3CA1gAe8CQVpRuXavWIFuS+G1Vph\nJHPm2u1Eempr/+7uyB4JhPsMbbrwbXaMDdVW94+lFdXWg6VXphXb9yijrEH/\nHzgLRni9oeoIh2vSiXkGxeAftlms9DyxcHXuYNSKLEmTZEt1ftjHLbHyTu1Z\nDUJ/8RePX25UYOTwKFtxcS9TXi81M2IDwvOKjyfBgvPWTJtnoYQgxQQNCs+L\nT/gbb+b8gEqMlHrViNxQpowJAUFtNkcCTp9uQdzNo9DdfX3qLinyu50z6SMn\n5Hq1gpv2yEYma2xC1oDEguB53YKnLTlRobF4rgQzyMGd874J+dRFUtfe0wur\ndNtGQoT2v41ArgZ/ohxlLpADrC8A/YdVOs0ucC8hV1kEVh3RXwTI4Uu+OfvC\nY+gN6fFgvapsfSpWGvBlCM2zq+qeBPcf+C7+9Pjl7O8U2wSM/MuLiBtzl3ml\nhSG/JBpPTcmOxVt7LvIQeDdo2Byk1wJywDaWwYGdh+SiLdgBh+i7AqQKRXBz\nNc4i\r\n=eTOs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/density":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.e34e411b1.0_1600373875104_0.7549519623438099","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/icon-button","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4e9343929.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99c287a2267203118a46ae7957780f09e6740564","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4e9343929.0.tgz","fileCount":37,"integrity":"sha512-ARo9VGf95Xu1HMGL3fISpb++SmTQV7Tlvf+rDPFy25p5zIVDK7ggzrvDl3FQlXW4JWHNai6++N4lctom23clCg==","signatures":[{"sig":"MEUCIQC3KW43jWnnuUG77XMBOosOTErIqKb45aBH5cjgQXhgaAIgcKe1p7rQlKi23M0QZOyEw9qJZ6AmRA/bVPigs2eXkLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pfCRA9TVsSAnZWagAAMFkP/1nQP0sqoMvnX0aTKDFp\nQPI96s/IG7WrwKyod8GLiza6mf32kXZ8yL5fuaahd9M3wFWdlGorAzbsJd1W\noBPbXCOzD/2ZS3l+pBL3R66NZp9hREDTFUsFPsxVqYQghtJP6v2Bst/hs9g6\nfTrVnRLMPvJ6sGLpri1sE6MuqhOAs+opjWa/2omkLiHlhaAFl4vsOOmAdcgP\nt5vAeyquj8U5S8zf1BxgTx9f35UgWpBdEomDhAMKT4osPIa1PtCVhxdGgbXa\nNr9qExyrmzrPi3dsstTkJB1pEKYBx/KkpjC+VvfkGrnkHoDDdzbOE21scGls\ncfh7sfjS+bRk6lsRTIF0551JmrZBLTYM7XirjkR5QXyFw5UPRRMNQ52TTr/G\nP4rq7R8K1wx1bbZBVntHlf4uSZdqszL7ea2HhxfJcHZvSvLRj5NPmPeYpcLb\n48pIWZ7wMWw6ZrOE7yvZy+HzkRvueE5VBkyhFttoZRfhmDOUqrPaZEu9NVKv\nTf/Rq27O4Kil4B/rxmJN7VZ6L0Pk3E3NAoXdnfg8Ol+YJkr+5igx/jFM8Hv+\nEgRIuUKf5mTovvcJOhA3e3OstWF4fLoAIJNV2x5koS16hu5ddleoYTEGB/kL\nZ88CdTZb2IwzAWfMMsYmkPtswBHANH8m974ElQivaUJZ+DzBk+epePTp8u5l\nSbD6\r\n=SSun\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/density":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4e9343929.0_1600375391477_0.5352252148933114","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/icon-button","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4e5c350c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"602eb503f87bef9482afd374ba2195efe690411b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4e5c350c2.0.tgz","fileCount":37,"integrity":"sha512-Jy+TVmWeRnK7kr1sHa9x6acXL+XLfQOBaSz6tjS8cw16/4FHTrcBbG9GF3KaG+N/9SLdFfNkMGI5ymNEkO9Uvw==","signatures":[{"sig":"MEYCIQDaRQ/wvnb+gO8HZe1o5yN1dUvIQ2AVYJkk9d+lFv1UrAIhAPXxdH01PPjTRrVXlvNqrDyRbvl7rCF2iz6S1XfKPlG1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRekCRA9TVsSAnZWagAAD2kP/jtnJkilvcmtmUjWw7Dh\nm5OK2xVIKdRoxj1eV9phziC9sy6wdpsV/Sp5VK4rFckEvzx+qKsVD9MfHAN/\nuP5Q1UCdyErI2Ba+slP1SzbH7dB3cyx/bn+mf9LOE0C14ehspAxHKgPCE45N\nEfYIWEqq3/8YrJa3HB/44muwk5z0YX6PqDrAPTgwCqwtrPj2aXYwVWcEwSA0\negiY2auGTFNLRrt2JJH4RHavGMv5HWfzW5xN05bFcxa2Z9wZchwNgIj+Pgzv\n9WghWJPexDbQVUlipnBtesXRq2bJPPrt3nCpJIdQsteUM2EkaCho9CRKBJgX\ncXk2jalfzHAasSkXxJGngi8vNBgQmlfnxXCPNwz3EzsGgbW5aElYBQaSyMRR\nOZ/3BjxN4w0XAcoNTx4XOMqlekjowv7PvVpjh9jcPgw+SdvwqMJkAT3Et/Pq\nszvh1HLOo6T6EcXdOAYN2QmLJ1NiuFZvfELpTuOxwZjMS4mXACKqwwss75S5\nj/brvB1pu6X/RvDaE0AKS5n/Fh7n/hwv0DDjqXMXMawpKiPBMO9VkpZMQKtt\nzNaA5W5dHo88ODhXDBCOVr4Twq3zEiV0KY6EKm0c6RVZ7sJ+crlIQo9M8vVT\n24HlH9hVJUF2k0a8p67tb+enOKs6W2DpEMSmPhDLG3xqkzs63pWfiAqyEZaC\n8UFa\r\n=+rbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/density":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4e5c350c2.0_1600722851845_0.048061814406638925","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/icon-button","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.16c563ef7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f305241a14989499ca0881756eb604e862b26d3e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.16c563ef7.0.tgz","fileCount":37,"integrity":"sha512-afgAUkN5KZsSXaKE09rdTa3bzHv/mQM/edJcwWr23kReWd02wIUGXCadGoj01KjM2pjzCWaZDaURcJcbSeZ0VA==","signatures":[{"sig":"MEUCIQCMG1CXnpSdDomi+YPrb7DFic5KoUWmJPMukrkroaHOzAIgXoGYCmT/QGl4EmuxYTZg9sWShrVotMcXAdoSxg9aCX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSGCRA9TVsSAnZWagAAahQP/3MOhb0DY8KvM11+TM3h\nljDkbBHvitV+BsHxHdednb5wjP6eG41g5gKeojW4axCDaxH5CMSl7toWTREF\nK+49lutn7CQJ8u5hefSJ6Y6HhuoxCEVNupVxxmAs+0eoV5AOpgU2GQSKoyvs\nOiAODcmiyv9F+XKsF9HCw7igO3ZAr/a5lolR6fYeptEObgl7TVY7GOqwcT36\n6zPgRaD/sYpp0qJP64NK+DeJWXomCapMwzKhSO3KmOfBSHymTLbZQRa6Sr09\nMHirdE0B7mYHHxFiE86tK3gl94sQ51qbfoEIIRB2PB4QIibcrM2N8NaHhGdE\nAoBnKVffPDdi+6RN3CfG+baOEovNb/V66HXOzisq+zhAQWm8nU4t4RWV5FwG\nwSLFpHcdrO3kiYTZ+6/KUgXDjw+L26P8coZ1lRbXDmiogjDC+eEl41dakW/X\nIH8rwlVO2UWZNR5Cwql1YKfQYO2wBEENkpgxFc5QKeGaw7Yny/OK1HMoZHDz\naJmo/FejKMbz0O0p/G3PUf0wmvtBPA3ufngUNClI05aWR9HYyhlbpT6PEmfu\nkpQHkxEMIV6z1l/5GKBaOw8h114+virdAbExAqCdfW4J+DCaOQoguAIoizPE\nzJK8KOptNq56P9rs15UPKx6rlzd5wTi0IREYbuicx6ExVsP00+/FC31hj7vc\nCwXq\r\n=2Gi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/density":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.16c563ef7.0_1600803973853_0.24805256289765087","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/icon-button","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.fd8af3d43.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d868b4ceee2a0ab51d6f0610b3ed6abe3c9eea","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.fd8af3d43.0.tgz","fileCount":37,"integrity":"sha512-jgXwhTkNY1SWOgn11ovtTJXA1WZxC9gTvU0PF2A/CKoBWFIrkGNeORXKG09g2ovMQ6425WvVC4tw4dQrTz/jJQ==","signatures":[{"sig":"MEUCIQCZUDcYEC6ikc2fRqwVhfyAHknX+V17XlAJkyNR3tprwgIgHdoeXr4MR9y8AR1K2/KJ/pOvAg+K4L3479RUo6na+Bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LDCRA9TVsSAnZWagAA9lAP/A4K0uODlMWO27ZpTJnh\nJ3LL7c7i63fteFpjnVeNVL6etp/S4VV8/5voHv7Hxytg6d8kquuqId4I3se9\nEkDy9lzyoPTdCjH5RTVmNReqlFxGbfbhsl5ox/MesM55J6/sNLG8c3wDbdac\n5FJihlASDnmnmqLqFKncb7FiVZWjxHcJaomUFWyRo/mSYz5UIuH9/tNiuIu4\nOnB5bmpKupS3/ofmRPKtHEfmYSSoUmpdun0cdZxOZoMs2BmAql7dS3Ga427J\nub/h2Wnqeg17K+yGoriftY9lfB4oJALTZpCFocFXPJWY5tl01Rz/58oFakDy\nocLxpOEcWsP+2key/b0oHfRuS1gtGAemAvVQwe0tfl8abBUxniaQIFCjhmPZ\nEsPGpJJ2stfVWNlqw6OLvDd4g/iCWZLUwbEZVeWQXHmlYCDh8PR1xcEX0UOO\nv5YTOAieMJNk9YfQYjgplRDo94Y9IorMHlcIF071gdS0WlM/DIaCiOpJHbdU\n1dCwDheQ3F0GxHY4xCNRpg0BumvpVNNgptit+u11Kjh1Mwj9iEG+Abic3suc\najyTWngRPDH9xTsntqCV1bmwnNJ9K9ie9tnylRwJmMN4I04xzi+uNOcgQl69\n30DJ5xSg1O+x6cXebB2lStQ5UrOTl7vcd13sJaLks8gpjjfSXYndU/1t7G5x\ngsu/\r\n=GB7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/density":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.fd8af3d43.0_1600889539406_0.002901068404148388","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/icon-button","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d4cd83a85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"177cb2e9c22d597724fe1e827194abe0a271aba8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d4cd83a85.0.tgz","fileCount":37,"integrity":"sha512-1Gu9TFlyVHJDAc3SfGDYuzYLWjnmha5j8Ie/z8UoGULHzUpaPFdaUcOH96TUxZSJTpLnRNgqiQ7nHviWvnKgJg==","signatures":[{"sig":"MEYCIQCxplNhQBxduZx83P49TL1g26CpZbaV4d48ANb+xcPHAwIhAK4xCOE5dtZZ9aTzruFG48tBO0vAiu7ymj8rAXGEvqVn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtWCRA9TVsSAnZWagAAX+4QAJIuRdJawVUOyVomQCG4\nop/K4QYMSEqQNhvX0fEf+LuWletpWafPLgCjjzjZEt/B4bwCJkicydPlUlCo\nF4xYgX9mNDMKXBoHH69WDusLj+T2QKHvOC2xBsD6uiL2YGNgoUi1C6ZOE6UJ\ncXbR5ehj1mswvevMe4H2jpBXIqXByl3CmCQKqVVeoC7dOnpkA7bulKfx8lUu\n4xsHPbTTFN7sFe2qJDZeqab+0cRa4SEDLhTZujjzhqoiDlkhqXzBuO30dqVh\nQhbq7YMJ9RLaNewBuJOC+cbRNswXjM6jaTzjOGlSk7wi+qL5VgLNWte3eWV9\nRzsb1d9qupBfSzzviuY38isQCcF1Sdxhod6+svX1Jo1AWCCXktVoQJTHyJJP\nSHzO48FwbNwgIJ4swSsj+iO2OtxC1t0MA40bxDDT1ZDCl4qdA36rCmyroyJt\n/ZIuuwjF5MSe/+W5NsCYEKG26wypwWQwnP8MDkNOfM2b5ICrvpKuAYXibkuH\nsLaP/Du/5XCs2cyEOCh9mu2QDK5/EEiC7i7OSWY5eq42fAQHxUwP2tJ477+D\nyS/YjsMbO3wI8Dj9Np0PFQA+UfTPkok7E06+rDPTljfJynEQXRPKEKRco73F\nlzXyl0xWsVBu8gI47MaraWk1WWIl7nEZODG0qRkn0rgBDWC00lnZ7NRyqqsf\nU23I\r\n=HgKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/density":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d4cd83a85.0_1600994134275_0.2935078174124235","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/icon-button","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.199aecdfb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"935b4feef8bdb0dc2dd323ed91175bee93b14433","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.199aecdfb.0.tgz","fileCount":37,"integrity":"sha512-6qQYpdFfbv76K3MD1wHbbgoDV1H0AZolQBW/Fo3ltZwmTgcRGt/BtwJ2LfyJSeq5wmUh37WwwCpkvUgWH7GKHw==","signatures":[{"sig":"MEUCIQDRokrhdpWRvpjCLjtXVXEI3c2AdNe6WxGjdiihHvwehAIgP+rTMqyYPXa41YLXXMqvpv6bMNaa+VIqIO/AzJxoAJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhH6CRA9TVsSAnZWagAA39QP/3dN3/TFQJ4CQwBGhz0s\nIyHHowq/xT2N9enZjcsq8t7FRU0Cr3j7maD7h5p24a3mntqq03nrPJrq8BRm\n7UBsTC0ZUOY1QT9m20Agg6sMU0qLOTAB/wzPoAkqakPIwD0q47gHL/qtlsMV\ntibQ9lMGJJU5A3Ngtl81YO+wYRECW3uDXmWx/J1VOR6I0dcaT0eNjj++o1ha\nWfE/5RCbWmluj4jUtqsXGggq5+EEMCQ4Fbu5BV728gc70kEywVgeMFGKvCu5\n1GV6BkDEGmQ065V48GSjgOA1qHjBcLxHuFLvXQB7/IMRQ4nKjbCFB/7VyuAU\naIuZot1V+NC0nW2bCTBUS0xiwLVxh8sOs35Kt5ADEXeR0y8YoN7HJESdPFZo\ni/87VwgC8JctOdrJmh4BGDVf9D/aXYJDWtQKfnwxXac1Xs2QR6mS3EUXHmDk\nVeiMpcmgnNsyvNURTTrUVHvCOUnII0wpphtm345C20Pq6tSYmo6hOLKLvye2\nL8ULYFu+W/CeFe7UpAw3kasY2J3iGaYjezMUCoAmmgShOp8DtHIQ8bAltXGA\n0SwGqXZzcyrRq9qMkWOUVfop+C5T0CHtIEYp3Jq6iOa5rJSfH+CFoSzorPPa\n3FDvmsPVzBdv0DGF9ZLYMosu62w9z4GBF35lakf/d9/jsYL8+brcFfNYXc26\nLeoQ\r\n=S0jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/density":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.199aecdfb.0_1601049081684_0.7931234440690953","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/icon-button","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.38ef4501f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a37b287d013f648e180981f3975dbb8f585f2993","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.38ef4501f.0.tgz","fileCount":37,"integrity":"sha512-CkOKhPHBuGN1fIbaRreFkPUa3yAU/7ZUauNdYmgRbdtV4i5YWGQJPn+rWVOTcayLkLAUe045Xy9O85qvjMI92g==","signatures":[{"sig":"MEUCIHf49lNvVllRBQED5H5dm0R8bEY4+VDs+sZEWXmJkUNAAiEA3hUu76m8/W2MlIcynCfCcreL9pEYoV+M5gypOhK3OUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1hCRA9TVsSAnZWagAArwIP/15402mncNXL7cl/l3cG\nsMagfBY/LsK5Ica38jOxAQE7HNrOX52Dz2lXTv7Js5CGO2N4YznWNe/PvEET\nMNf5XDeBmW9+qBLeN0U66q7j1oj+K01VclB2UQtyvK6Xt59pLi2hwW4N3dP0\ndZ1dx3RUyGPklVCjhwnaCnEo+JTwjczrk7giYPK2qcvzA8b9DZ2L5i9do9s7\nKOAGcQcsjtR8/YZWvR4kzKWVOaWjhzLJqr2HV39wXXLVWV+zS7DbqOirqq4i\nxEU7YS0AV9H0S2idr4S/Gj7SU7HNFlTAUQbEp6N0KL7+m7Hn978uRvT98Pk3\nbxnfgf0zTUY7WgmEBTgYLccR/cROOgb2fcIB5GfH/mHeH+S6BKtCaZmJNKWh\nOXPplXPWMBt2vUll3sG944jtiG9bRq2x3ALuxDXH4c+6UbqQdznwV35sNqsb\nQXFgAzPuJlNMSEmDULvZ4F5UBWOjE86mCtP58Ich5fBjoGsHDqfhRcm1b4QX\nNL5jqtgjHbSNAyylvjPp0Y5b6++5VoVXHZo3jmYf00tHYqXbU1d9K0HeIJIV\nY7YNTdcNcDAkpi/IUB6WeX3+7TQaolwA14WEYQzxABmiYLz+267LuQOiyoof\nb73gjkVyXLHDnQ0/Q75V8E8TxvHFCwHbZIrQ9jTcAyojRdO3dY8B39c1QEre\nfFae\r\n=8cQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/density":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.38ef4501f.0_1601490273259_0.6229300621866081","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/icon-button","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.774dcfc8e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4b421629ca0503bb66b0cfe6c8a909d86d6444f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.774dcfc8e.0.tgz","fileCount":37,"integrity":"sha512-UyCnAUcwREtw/0wL9FcF4+CPN6XwTADKjM4T/mq/aMZWGzROzoJGgtaU0MjPXPfXQdut2z2jd9ytf9H8jAXTDA==","signatures":[{"sig":"MEUCIQDWywIrYSMSg+od+I0vAX6yyyRAoonqR6DAmplCsem5fQIgXK5HX3G41EGuqVbsUq4E0MYIYQ056Y2urybKL3Bqesg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadFCRA9TVsSAnZWagAANPwP/A1dDJ3EjPzEfSAiyuos\ngSUfXCTZE4phtOfZBo2LswVEteiRzB6dZG270DR8Uq/Kc+69KWd0HTVlqSzN\nwyziUDoBp/1QNFXiPoUjN35C65ety9wpm2IpFTM9pkqF8TuYIWFmM2XYKusn\nxs1/SRw/MutuirH933JuG5aZrlHJPowWyU7eLasty32+7OvhoG+CX0v9EDc0\nMjnwqyhD80KvIYC+LCg6IJddEw/m+16dup+bo5Dw6EfItV76udBuXsB/JOUT\nG8wNNdN9FdQNANnYaISvcsjwz7jWrHOw0QGZ+VqwGb298++AN4cDKiGjrJhi\niB1Oo6BLu6E8oHO6/UdN/Dx3xs7oxR0640Pcwo3tas8wAu5EVMw3B0CRA+a/\n97O/abQem9AW36sboHts8kEkrqFjx1vJwbwggTUPot3oRmvJ3DxAAGC0JuW5\nI/07tOBpUPE2flDlXQdVLECgZXw5HlWjyIc5A7CxPjObaHLnEeZxSbiSItvR\nEjVb51KM3DM/DW15nK/t1rOcW/tXdQMMEN4Rl8gDJ212RMqpYN6wVq/DgYiC\nD+iOTyLEd6fRLeizmyLQV2wcLlcitl52tGMBsGkhxCv4BhUIRVg9fOswsUiU\nLWP4cBsUEs0pLI1FBpw8RNT99rQVWhVcdgTms3nZeMNYHmy00LYzLUveBcfH\nW1mF\r\n=crtW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/density":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.774dcfc8e.0_1601546052638_0.8443751004045799","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/icon-button","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.0f60323a8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5a09a6d633b619a28f60f688ced438b312d9fbf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.0f60323a8.0.tgz","fileCount":37,"integrity":"sha512-+cKmkdPk6DLofV0n1Hj09DMDswb5Q7az8sjd2q/aWwKqhVsOBHk0/EDTmGNFH5AL/5v1QTvpoat/2dHePZrKYw==","signatures":[{"sig":"MEQCIAZ4vdo3a3YbGPnQ8/GhlSbBdzpDPWUFtQ3zbRpvIHD8AiAyye5kcCMCqlU0SlAchz8YIJoeU/mwj1QZzqTVoDgJEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AuCRA9TVsSAnZWagAApBIQAJBkFg0GzPnPv7Qx/3EN\nB764+b1T3Olm1YV7W4isqXK2bJebhGUS4nokgs0EkeiYDLO7WE8vuOdehU+y\nZ64RInaWF7Y2UC1R5txrzJgQcHo0ad8vIjmTX5P8FZvFyG1J314IDqR39aej\nvODQypUUF4nBGOblzZIsXBuAvgD5oMzbPWvXIIiUdWrVhCnHDNRAb094csYO\noI21zMQB1avEW8VLqJtpcXMjNucAYtnXsNp8ORgix10lUXSDXVFyVdqrE3an\nvkacvFAERSg1P7qxRTgn5jd/Uxq3ZrKywpKHagM9ZjDUZaUo5WhKo99OFKSc\n1xqtsvXumuDfs30YmvfAecl05yRQyHKhIJY3/BOTI+CWJM29/rxu0IkCNOKg\nXXBcQU6TmVY7N/T7tmsBz+JAMyASDQPDf/wmQKfOd7d3DLbSsaSHwp1ZnQFd\nb4zET+3XhXVD+YLhgJdhn4KEQTKf+qEv1ts7EyaFhomu0S05hktjnn6z6r9D\nq7UgLCrnZqcumM46FoENVoWQiUQf/L8F0CX6CXkpmVwqQKHKjRhN20cbH3QL\nDWKBMQ9QH9+HfPtATux/9JGoqs0lJDsBvtqzs/t6PRm2DusJD+yHxn4bwjze\noaCutrH76R5xt2WVc8QXVSl1iYZpUwzEiM5iKJiwxRc4CrLfWJWxnVA9RUCa\nDl0i\r\n=7R0y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/density":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.0f60323a8.0_1602191405899_0.2602684785421556","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/icon-button","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.d71622574.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"054173c73873292dfe07c1318328aff0ff291c42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.d71622574.0.tgz","fileCount":37,"integrity":"sha512-pF7vllNyGy2VlV/5OqmpdgWuFtjVsvBgFewqA1nQcqMThzk7nrwKJ20v+c9F8BGbZiJfPHvwUDPNcjj7YbIa7A==","signatures":[{"sig":"MEUCIQDOSjS75DIjGpxc4BNx7lelPnyo9AdrO2G4wmxjlWUMowIgTZbi72L/XwP80cYgb2NJjdt0MaZ+uxBw2KiYZKZDpFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJB5CRA9TVsSAnZWagAAl1cP/2vvTw+UW76MYiQ0YQa2\nRekBCoOAw7e/acR0yS2AgEggLVYDfvpJrT72IjBwPrNU/k6pSqvoFEb0n5Na\njx8/aY/SBvGhRgxRd58wcre/IJkbYDooTmoZ6YiatGnHP2/0uVErx+YAtomn\nbH0wL6yCFTXr+5fNinYiThI3nozm9kCKvQs7OCLzniv5z5XgqqKc4KkILTtv\ncC/Jrd7Wx0T2bjoDMvUJsa160liw30uyOaAmkeXr5ZassAo1iydxaGcfTG/f\nys0ItIiBbpTYIISe8dhETm6/qcPXoVOd/e6se2hO/tg4poqm62P49Aszp4wH\nTIYFC3cyAzTDFwqr+s1mtosHvWArSBt/SHCpgShMjtegmM2q3tZ5j9Jr0pEG\nXPMeCU0jQCbTYp63BfuMoOynXk5nPiAUbABYCK1/yPHI1BdmJ6ZCaNbLqYGp\n11SBvUp1jn3QTlw53hzEI+BrLV7sCLkJmCEu0jt5JRMiyYWvmJr+HxNbK9mZ\nXU0vVh5by130R/76RL6loSMW+gr7cht1c/SYtqg4zg4ziX0vbsrEn7unWqzl\nflWG4b+MKS0SqwMysdAjA1bQP1FHDDPbsXXV6aDx50RKG+zTTHEcJLGO3z5B\nukHN32ekC1Wu0PD0dQtoVkxxKUHnXH91oNI8HgxOAzvJFI1Ua/hMTP+Lg5kU\nDjBG\r\n=wkBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/density":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.d71622574.0_1602261112949_0.377632844999928","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/icon-button","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.7a9afaf4b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a63a80bf1ef185ad1762b6b31c4233fe8c6e81de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":37,"integrity":"sha512-YdN5mx01jKxImkGC+1iP11QtQGAIzeB8/HqPXnXBtROGBEWYyZtVXknTNqxJpFy6M+2UVWVD+9jyL1ewUnFfLw==","signatures":[{"sig":"MEUCIF1+GUPTGzY7QF5PL8kZyHHiguHkjM3smR2+dw1ieXG7AiEAu2ySMq/juFuDVJ77J09sLFrPlhy+CVVUI9JMXy5zpvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoJCRA9TVsSAnZWagAA7vkP/00V9pLL89MCkklB3fBJ\nVOBrXtBBns/VfessyK+WIVaP6zz/jU/6aSnTDiIigoCdJmC9NlPSWgQllZuG\n/qOSI60+aX3sanOAM77AyGhMYOy2yLL7MHH14Mh0/off1AXm/HT2QUKRsooO\nlYxBb6iCXEYUKBMxVKuunsC5Hd9G8QlMBHIVx4bBxpZRjShPlJlgJhAIWkw+\nPMpfHR1PJtlWRJFfe2876YH+ZumPV67M0O1bDgf8dfRd9c6RsyBTVy3hpnsv\nAz/Vj6O88P5aIUflp3VbPRdhqxdovldV44rrk1j77z4Um/eLjApk7j9/vhiq\n4q7YaE4KDmsOnHnJ2QH7q/jpT4Mb1p9pt5Qaky7M5XTeWI+JHL9S7z1zHhM0\n7HOJxiJSnE0boFYjQ1Do5PIo4Jwgsjws5I7wCzn+JVT1FZRnYslHTVZZuHyV\nfngW7M4pdXfD8WVmiMsV/qGAzkMZcCxSvIMOhRLyaH4aKh7P7SGevzjHYYBR\nKj7MW5pxaUvw1GTTT2m4Jdhs10twDPgrhN5kaCDh3JcdZKI+JkYz+uHk7Nhw\nowTHn1uy1g13fHXnRKEuK8YFjZuJ+aetrcHqT2utSOPNCK51kg4T2SFE1/mr\nHdKRj+/rC4lZTx/V1OgpmMUFVUaC56Da9SLQfCwrpJ2U+JGKi4ieG7tUd2/p\na6IC\r\n=VvrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/density":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.7a9afaf4b.0_1602284041392_0.6542033950455239","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/icon-button","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.8a39352c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b67acdb8cc99e823f9c659aa4be3f01844c50130","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.8a39352c8.0.tgz","fileCount":37,"integrity":"sha512-eHmO3datAYub02GnaFfAUeUcMgcSGRP5rA6lfks1gN2AyyK18Rv3MgGDKoIgE0A3NiN9arDGZVvzRBTxddagcA==","signatures":[{"sig":"MEUCIEyKHVw0GvRulqekxHqODp2Lboh6JrvJgFzdWcer65jhAiEAvYzXqzElRoMiTT6UEkUqVl8TKK3A5dUA3wiP5lMtlVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZyCRA9TVsSAnZWagAAbGYP/jY8x7xUA0d5h3jRP9J6\n+F9ISRUp8yV/0mR3FvHLz07y6aNXssefgn9/UeAnHcmnbnEM48cWBTSSg9L4\nXM1R05aPT0S0HsK7Q384V1pDvFkwEhb+yLc2zRSgYBfSYcj6W2mz3UMuoyIR\nIsMsqPaYdfZku6d7lFIxtb4d/zDtDlwExAHBTZAfCbN/gBFIHY5Tor3tQxcl\ncXdhrVmC8q4JJVCFl9Xlx3FTgQ2QzHgbUAheVg1XmRzYtpfZek/xCASCxFXT\nL9AR2gDW15PjsfhIXDn9pK1wwl3WAq5FPERObE24BMxZsPHBp9ZuKBHJb2VK\naiZDlSzvKfL1WvqzLqet12GQaPSUrIAGkEP65x/zoThvZLJDq4gHoN+uJe8p\ndvZt2uTBshJnQCDpU43gC3BLDnezzK8ezBPLW2erH/L/t1S0Y/EvlnNEhgno\nOyrluGQhSdFz72xUv/wVVetBWZvyCaZ8x52wh5dco2ghsve1A/OAtv2vRbHp\nwA/7vGeZdvuZ1lZur6G/9sAQWfwm3QTfqaGPOaXBSGcVBDKscEuecBiG9WZZ\nvYKufjwNJlc6UHuGohsSHdtETeAT+lIrfrDM4ji+A5XYN0PM5pyRikYMQxiX\nEJ27+Gz//pnuvWTHm3v1Rnc+OjySzWzmSabIfKNlntfucF2OcpXGVuHY9L8i\ndnJN\r\n=UCOu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/density":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.8a39352c8.0_1602524785680_0.3518500151485695","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/icon-button","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.790ca85fd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86546fd91c335a5a0059c11e2516e6ba1448d5f0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.790ca85fd.0.tgz","fileCount":37,"integrity":"sha512-JqcP7rzZYX0Em86L1tJI0Q4AObI+qZn7Z4BCHuxfNaHKumGomlSbMwhA7+YCSDzOplhBIRzVPMruxX8rCKcBtQ==","signatures":[{"sig":"MEUCIQCwDVcW5q+N64dkPr0Utkt4gr10eMNjC0TZfngPaUlELQIgCJXzeCCtktC1AxTV/MgeTj0jqui1HuieITbgkxn3DEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEgCRA9TVsSAnZWagAACC0P/0Wxqf6j8RR2/XhBwzNI\nda3QPbSejHBGPHquuoGri4XHxaBBrRfxwo2oNocSp8PL7HZ3VAXlW17hS9K5\nz6c5W0aEI/HmhSMLVIm1+tGGi8Yz1CJ4O/C+Q7Bycrt4Nv6M8GPUETGNx+IF\nbjWon6TFjnYln50SAgWlGg3mNpRqD13uq7rASfs6Fz/S8fL4h4b3t8FiB1W5\nuPdIBZk9IoMA/Zv2jz7JTo+YW+daxcEb0hk0uyryYcHsQL5kIU0uraCAJz0i\nWGjc+12AXAAzbxWEL4P/EhjPNXdUgOeR9KlMk6wEks5G6cwowbF2RjNtP4xv\neQu+p0jCUd1wac7C+sMp/Lt9dZOIAtdpogqbGcDoLHSCUo87mm0AM5FL0YS/\n7otIaR2RATqvn8ztQMksbQiJf21xPy1s3LpuIPD2xwAQgmxW30sFhTzqYvRg\n3NIif00eFKYSVVlASYfBI8XT+Hv11pES2wfLIuNos3DtzhGdue9caFHQ1sNI\n2TY7QdMcaON442hS2DfjnDhsIoMghPBi3ZHbf8ehfMK4P/2eD4mgmwDl45Lv\nsngINOIcNbWGmIXRwsnmW382RMdfUdIaEC2g2pI/6yJlJXbkZTPXtGtIIqM8\nzDUZL4xr7u1AKglDEroLfBQBJu0pUAYrdXhjFvgALxHBM4tQyJ955Yk/kGVB\nuEka\r\n=xsHd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/density":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.790ca85fd.0_1602539808474_0.8376680362080684","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/icon-button","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.174c0becf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc47673e17a1737fb5bbfcc59e9d5015ea71f5d1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.174c0becf.0.tgz","fileCount":37,"integrity":"sha512-/SZEuo7MtbXDgBcYhCjiMA1UJBzixXg7czGLMsF03Oad0mlI+F7tbp81bLAW2VkZbrxJo+1vj6FGe2IBPcQgXQ==","signatures":[{"sig":"MEUCIGR1KcsM/QP4DkA0VH+c4aFqCmF4RCjqYI7MZFThyw1ZAiEA1DbYWIQQHyu2wxOoA7++9m/zbFjh3S+mePIlMm8e/Ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9UCRA9TVsSAnZWagAAPscP/1Pd8sNXDDIvJPvGWLnF\n7GLHHl6LyJMGLNqN/cn8JfjM+wG85Zwt62iqZrduhLywGZXDDP4EuWY3PwFr\nHWuMzJKMQxdb8VWyYHmjPl01Jy65aC/SbR+16OOmibg2N/gOe59NiAuqh3xr\n39daaMblRC565npkyadi6lQtml7OQ+UESVhXGNxhV6+H+10L5JQbpfc6u7KC\nUb4PsmYKdBlQAVlj3BRMNGHCrcpHqpPO5TWKcbovJc46+aZqIc86a3pvyIWf\n0D+L4YeZsg9Vui+v8bCFLckpex+7OVN/uSefaz78FEMI7kDCtslZB9uw0iCt\nt53QqdxkwuK2CA5JKJWfzF3IG1HPZIBR+C5jlNtpbHbkqEgWfjX2QTIVV6/e\ndn/B1B1zeInxh7j1xRR/Ab+84srNMkMQU8lSFB3IFrxuo94U9dEK1Cm030V4\nIGnajLlMvWvHK+rQdt+zDVTr56B16C07F7wZbtBFaLQ0HolC5dY9QuO/AVVP\ngrdcJLAfP3LcU1Ya3GnoaS0FfUv9SnyMu/i/aAMQBrLFc96h3ixy2SIRVAKw\nrywO7pIwZBZ8sRZ8lcwCnh1uwpSrVem0dSFON5EwwMlG4x0KPj/5anJ2KDLj\nTQxTuwEbTYBSZRpXaa25LjQdOaKo00hdColpjQaUYVW7+tLPNSTPd5fqLbT5\n1oo2\r\n=Nb/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/density":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.174c0becf.0_1602641748331_0.9613198402636756","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/icon-button","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c71ebfa02.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca7e9bd0cae99aa1b0ca39aef5da9fad14c610a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c71ebfa02.0.tgz","fileCount":37,"integrity":"sha512-9RRcHVTwqqXFfpcWypLsoW+NckBB2tv4iAuaZNUUSit1HV/X0Y3/r4vz95Wm/wGESVteNUSAA2w9Lz1uedYFiw==","signatures":[{"sig":"MEUCIQDGdMF7ZBnmbHWUwOiGc+/Cl1MmKiCn7dDrrQJK4xfwHAIgWynmkAAxhlMQkOCrMBuwyDEdYvukwqB6eLy+691Ij6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnviCRA9TVsSAnZWagAAKAEP/3/37n8B6Jr+7ARXEli3\nARiTOxtVQmiCDr5GjBojHPntMrO22Czf4F01G23nVLDEpB6YlTV5qsfyqUom\nDVIL/x7ydH9vR6fh3NWTyoyMUri0y5Bltkeel1yiNIqDo4/mRPbwcO5B+Crn\nwxSf6Gztopx5J5YRlWoc2Qc+zF8XhKvYDE4GsXuAm23VgiqB74p841kTV9iz\n6VGcSYQsYWRbKb8nW+R1Ju+tla+iMMInNY2l34Y9w0hCtAUAE4h0/nhvSM4l\noh3p8wAs7Mavspu2zcKG9lX3Q3uWtlJ5hXK34g7GrZTC68qoEqEf/o447D9q\nDvKvf93usYqyb+/o99nOifEBSAtZ3TrVYKWGiHo3lP9/PCKJV25W9FYbexpA\nvjjp1HDV8cTX2mpwvAXXbY3qgorbNLgNaJ4X77sfYpLpWiWRaXK5MhtNatPT\n/naJfO04f4HDs7DZ3vrJB22pl1UTHgvdNzAt6x02aE+LtI+YDUreBEoRvPVb\nx6rpQG4ZM4TeojIbxZwMUkVIGI0sSZAX1jitHXl1tUPkJHR2A9B+RPbrW6nO\nI2Y4xaSItwAbyJpX4jV+kXW+gC1/sIMtlHR/MGrOEmEP0sSOdkO0N4CFfrE5\nGO3SX0RfejyaGLq3gE/dwvSFTU/TOo2eiltgmN8v44ugZFMPXRnUobzYp/QA\nUMgM\r\n=2sM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/density":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c71ebfa02.0_1602649057677_0.6884614787766947","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/icon-button","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.2ab716cbd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58f118c3745a564365beb795ce0508a68d21d695","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.2ab716cbd.0.tgz","fileCount":37,"integrity":"sha512-+/KJ2gaKHuuOeUGtnq97hHDzklbbp+L99GOhI0A9P35i+wX39KgYAAg3ngwZF6s2+qjT9RYPUdub1OpBTfRGGQ==","signatures":[{"sig":"MEYCIQCWFZmHjx/Y4kANEiorW84Iq/eTO52D/s/5R5/7lWtcSwIhAMVBRViD7pMod2d/kXWbRBM6Mh8B4zN4FRt0+yNeRkFl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOHCRA9TVsSAnZWagAAIfQP/joXVxhvJnQjrPIBf0qm\nWcSXEONlC2Hcbo33/+Qm18WTgn1Fo5vDhvQiyXvIByf9XuE/zZ0f7H4bxQtU\n71nNIeqFzkEqHxEsme9jhmzEJQ/RKG0g9ORMGVD4PQchLemcunLqJToHejx5\nq4CRV7wEm69raPvOOt71DLii+p3O/OSvyTJlm6efpC//AoP1vH2Hpnf6F7Xm\n4LVHgDwRl7GmzRexTvKGwuiobKiZICOhkn/QzpIysAJDvx3UiUjSkh7VxQXS\nyzxHQWG7oAbpQuMQIbhmqzmu1MLuM0O/kHeGNHl2zTl07Z+slPG/3+srKRm6\nVFdxlfgpR8lrU1h17QRK+jmKKAl6cSJaeKfq7vt4Br79kCT3I9fBL+hSXGTg\n+FTN73wf4LpbDL9hqjIhcaRRvmv5BKuQyzsPxaK/h3cRIuTj3E31sGe2ye5q\nB6N+pusRz3qA4PA9TOuwOroBNB/TIkcTBjOLaeO7WmcHyFsH7xEXpMCuR/mM\nYg92xPI3Rt/CDvtAH8C2I8fa5Kr8on9tzOX7+ht3oDLIKphnzpreSTcuni04\ns5yNvp/N1JK5jZjfwAZ/MNk9EyCgDOlTporhcwNsLrKVh0QfoTZwzINMaTbG\n+1tWZLTMwURYbF+Al3D3xYWoe+b0lFc3FO+oKzOuK3x8Sz0TqOUbRprZaYYo\nf9PI\r\n=m39j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/density":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.2ab716cbd.0_1602806662836_0.9942623977492284","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/icon-button","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.43c1c5e2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a69c0be39f5e4f401b9b3cb6fe94457af366cb34","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":37,"integrity":"sha512-dj3qmWBjolixjcFsjMYVx/VlFuynYXeBrK0klVkx53HPwMtMcWJqjtPtu48iYL09i3gqDU4Eo6AKTKKlgrfCCg==","signatures":[{"sig":"MEYCIQCkg1XYV7Fy6KfnsiLPn9WrIfIkAFK3LhIDGjd4aEXzQAIhANAHgq527oh7nubdMz6FJ3rxHi5cIPvr0W2Yc6PjcELX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3GCRA9TVsSAnZWagAAcFYP/08QShygb3BJDj2J3Yud\nF7ZjNxHv+vokkqcV+tTe4FJ/AFpzQ3Yx8py4Wbb2oAuSaK1kfZT+bClw4oHo\njxD5PsxG/nYfHwzUW+WnVQ2LwkKJS/3JkQVJe9ZeY4lBJHHGXJWqkTXK4o86\n31/fcKa6BJBIPkZ1SYOjtxmCBNshyxYRuS1slh8VcyyZP7FPX7y/xXlNEMql\nPexS4l+sBAgn2dT98+n/C2vthQMPV5ixt54vM0YQ83mfhQMPfSHL2vdFMVXb\nuOgqHY0t5OkykfDCzOYNC873FMoVEm72vIU0z6Eq5v6ja3VtLhc6ppNuaXQZ\nsgt+JCtE7Umc3lwjia1mhnStVqguoKbry5T50SB9098GJ6saW/BunAdlRKZJ\nLRfjv+7GsPEOsuTJXvUmwOCQVHVB+AV4RP0LS8jk81XBoqQWCf/xyFUJCZhS\n829J3Awj8WfY08K9nWp9TTmw2KZWpog14gOwrNJ4ZXD0y2tjJ53RQnMgU5yJ\nHCz+Vkj0TsyM95G7lp/tVYwIKVvGLu5pDQyRp0+G95oazWkHDnQMRZmPwwDs\nI1J+V9n3ygIdibYnkaWWnzS7yVn0yE6hmiw65I0X2+CG2AbS/00iZzJYahqE\nNlsfOpMoSxRYXf7m1YtY5MRtPMdbM1dwNTcoiLNHQpnz7voSKsT9pxu/fk5s\ni2ga\r\n=ajGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/density":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.43c1c5e2f.0_1603116485579_0.2573396007758586","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/icon-button","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.ccc64eea3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb864ad46e305b8cc8666e1f0d61d7f95085417","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.ccc64eea3.0.tgz","fileCount":37,"integrity":"sha512-rG1H67LSML+oVlqZ95JQPrJY+sDT9hrCxbJ4RXbpa7MmKkOfab9klzdFzfCDkN0NJwymmwNmJJt8Ejyil0gJfA==","signatures":[{"sig":"MEUCIQD2hN7AJvtYFFK0/KbogmeNX6xrOFLLc2jbWyJy4au5EwIgfyjl1y8zld3B/MFsniaj2t+tz1PbYNid8dl+83MeiuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1L6CRA9TVsSAnZWagAABNgP/0+0LDOQytiYzKDFxNYr\nbulji4NRVbAf41fk7wtmV5YU2jpiBzSxCZyRW4NJSIgGl6SaH+I6UVRnKYrj\nAta/3Enc9Yuj9YxCeXxMSbs/15679/tzDMfNf3gDXUjpop3taFtseF8ObUBP\nruGVe8QyOjV6nuOIjZFqUJzyv+KqBmEGB9cCWcwCAZHhMKyY8K6d09/Cy2UZ\n6IB7q9rsH/8bG8sdLPYRtboyvFxdgaC7FoQugW/Dmt4IY7hOb84X97OeedYr\nUS6tgWBr2kmmH+0iRn4d6CEW8iXWaH6W9W1dXSSSv6gWJqsq3HUR7E+Mq/bq\n1PyZuGyCZsfVuFcamGscMTLCKGgK97NzbwmtCJpMoBSg1+t3Zae/YGj+qgUD\nO1ZD3g6pay+5On8TE2u7y1U6tB8avFYBtlbX6WCpuybJgIbyWeB9hBT/Jkuf\nr5LCmC0lldJw/39gkl/9e1Xj90CYLemTeYYJtnfZpWYPcoOdtTMJYlFXelpa\ndMEHNwEolDWlmIARKuYOEjRvBBRzcgj4+UwZfM+wVg9aetSno0FiXs8WB3L7\nRIjDDaYlJjXFEisNCoYHtT28scsIPjeyc2MISpuNCn+/rVk6dd1Op75Yukps\n5JX5O0rwVZtk8amluLTMx1d/mV034xfHLKz6vIr0JopOcLH7S+meXMqF8uu0\neSTx\r\n=8arc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/density":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.ccc64eea3.0_1603752698312_0.7190480514798148","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/icon-button","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.a79cdd019.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11d3697740a89926bde8e20b8879a5e245e2a096","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.a79cdd019.0.tgz","fileCount":37,"integrity":"sha512-Dz79lj73mLNwNzzNjluqXQ9D23r18dN+0nTi31STSM8HJB4cGUfONeq41n0rgxYwX5OvUUTufzfbw/7sxshFGw==","signatures":[{"sig":"MEYCIQDayjM6LsJUo9YNR38ffF9Sd0njJ2ChNDTy2+9zVXO9NQIhAJ4fWnSfBA/Y635hzRFCahMcA68XE1I5lKGcfbO6eic6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtTCRA9TVsSAnZWagAAEBkP/iOi2TRXRz/4GqleYaBc\nUu0ERWBjlbQhhYkwcknf7ZM6WeqKnVZKhnkGuGWiCsJjakA7yh+oFT+hpBOf\nzf038gdqltfy2GjKCUjEUiWVHlDpBr889534eXKI2cCyLnaxCUTz0bWVsmGg\nNvS0RXecDJNFops0MSYQhwQ1/XYFvw2L6aPrtU4IfmZvuysWuYVIzrP4/Peb\nycqAHgLSergzQdZvQAtF1V23txjo9c5fjWV0f9yglazAzfJS9IwjMqaS91xb\ntgAkk7w9EqWlPiuoQ8kS7xVLqJ2IZFTmLuseitLjBC71EBjzMycJ9xPIZ2aa\ndtKyIoZaKzxLjYtAME0vZRV7lgrsb8JVugNcpWrTI0BsLb9fXtstf/y+1iBc\n5sgzBG6PwaYxzj1FZMZ3oRYqqnXrKubqycSrSQlVfuRziAeBYAAScMg4xvFs\nhIzgGO7fru6H0cmR/pHiM3wC9WGWo8JuX5QtUcJGyAozFt2E39v77+rWnzAr\n6w0RrZqEa2VJLPfeZHpEJjzaez6bbsBN66GSvTIfCRKDKBdP0Dy7LsM36jD0\nPT84tg6z3YhVCtf4vlP+rDOITW19B1OKO86Rj31xCXsDd735UD5sydzmgy8k\nw14FUaYeqgOfXNtES2jggxvMlGC6mx5/r4D+c5JYUgarXP5wT49jcAW3iNDO\nDB0w\r\n=3KhN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/density":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.a79cdd019.0_1603816274954_0.6377263654262622","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/icon-button","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.596e98424.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df4c516bee410e24ad040dfa13f3248d9687ff9e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.596e98424.0.tgz","fileCount":37,"integrity":"sha512-hbk7Wv4qF6ZwPG/dbIYmT2GtcFalkcieTDKAIuqLfrVxtLoXTxFdN/d/E0BuoIPNBuDosCZ+7BmBTJZvFywdNQ==","signatures":[{"sig":"MEQCIEC3FT2ENR+L55KIqMlwWapnoBbbr6G5hD24cchNAc6rAiBqc+k200KJUcQkrBUGs+kYBJt+p904SZqzWEFxlvssLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZbCRA9TVsSAnZWagAANb8P/3qTTRu39o5c+J22BmJI\n/Aoenzq7hacf34ZYkBJ01abOBMjqrZKTZsruRxdzwumb1VYcNVemv1tm31yA\n+0PNraltiH7j42Zub/FUJmKIQlkoYWevGp1szHS3m88VbinvG7nA0mGEe9b7\nIXJucM23OYV9qZqCmeXQoxw3Mpm2yacu6oAkP0Rkr9zlpWjYDpnk080Lo1l0\nd0FW1qZJEHwEMVD+xyfq3wq6LARoXIHPnwHUxN6LyHK/v0R69+jeQ0IRJHpt\nRxkQF6zbrn0wzMQMYi5niuSCHd5p1BbfnQjpM2n0TP6jUUGJhRi+UpeftkgS\nqbGI+JCQM3lvA7Kv4V9p45SMJpzhQkR6zJLNLMf2R5m88z6xtTxUT9Yzw8Ls\nrxcUYv61s2brJs/vcRUFDiir6LGxRlCQxTLTYmO8vcsFC0hvSjlrMfVpDkLz\nMAHJPYbLhsco/RcTcc90VXQOVPxDUGTlhIbMHFo4/TJ3zZNDRWyMpLcClJY2\ndQjXBH+HrJWDYOBCVUd0uUyaTRbb4cIcoVT/iM/5Duk6PUKlJBWJZiy/z0Qg\nXUDh/UlJVNxBHjwitKyCGzIIW3LWDIRIlhMonJ+UAXpdv2Zr7OHz17C3vU8W\nIqVydNULXLnP5SKOZ5v7a30R1TkZeJ74kuHN9+1cQ3lDoAbhN7iXaMUZxkG/\nFg1D\r\n=mZE9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/density":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.596e98424.0_1603901019135_0.6012663621078407","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/icon-button","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.05d5facc2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc11e2fcbacc6d1673ade7e883fa8d8da3015864","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.05d5facc2.0.tgz","fileCount":37,"integrity":"sha512-Ud7tzSyKuRWtmjIXn3Zr7qmlSswIkd4YhIn0p65SByyZ99r5yjK4heukZcmHrOKtw92ptZ4bCquO7aK9qRAdQg==","signatures":[{"sig":"MEUCIQC8byHCIXo6JtPxV2rThqA6AO9XeBV7/gysEydVYVOQzQIgXt1Ko0XKaWJ6METQtiuTewLll/Crqxa62cZB2p+HXj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhcCRA9TVsSAnZWagAAMNMP/jpuRR3zL6S4UfIR1oOe\n1n2aNBkcZWYxo6LGFSLbmYKTMRtAe2aT97/pyWxeKFEzG2L6iUUYJPKzFn7r\ngyAM5Sde3KPsvKDtnqwn33qVBVFb9wU5HMk/kGxOMr/Z26FPnja2gNbxamFT\nvinlzDNilo6nvwcuyiintJkf6r442zt805HZXV+1ia6TEY+SwSwkVROs0LIG\nQDg5H7ndSEmbCdapWEAbToHtqdoqbibVVl/jOuKTPWIwagv8ScJRWo361Z3R\n8+wiLNhlg+KIyNIAYIgPI42ZzjRe+hdlbp8U7HCqaTd/LqKgLcp5276Y09M0\ncpd4d2i01wcW3z1PPuO0WUjkcmd2k0/z2wxBbB2n7J7mHF5azk5IIWYCSMqv\n3surAq4CyyxGA6YAtslZ/JVzHRxMClg9Ubkb0tm+dR6HvyXt0KY43+VQ6q70\nQNfX11N3VrAzAfiqCl7vcpUyCvcsLPVXrVWQig/f8zvHrDi8dQjweeNw7KZG\nrs78mNAFDrV++HLgco+HL9Q4xxJ85ggxKXciijlEhogL4n/OvRQzwUykRfaa\nSa2zbDaq+Pg8kzFaC9izmE1NcYGLgUkA/psyUkAKEJEV6I0lrJ1M8kNb+qOz\nBQm2/balw5722pgmNjgaeaSLnmFZqMOBdBWJS7aGF75QuJxEX8BgGoaG2CO7\neva5\r\n=ELva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/density":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.05d5facc2.0_1603901532054_0.1131417342374974","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/icon-button","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.291b3553d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52f233757887ce86658a9f584a5af4eb50843037","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.291b3553d.0.tgz","fileCount":37,"integrity":"sha512-tahjZY1eLDB2fRn/WDUG87bflbDSxuPybG81xSgyjgr5TaLvhA7vGQ2m9R3A+fkpP+PfLWPrgbg02mcFKkByow==","signatures":[{"sig":"MEYCIQDyMhP7oBcutxsuLzSSQ8jUSqQrPF6/HwhDynsPc8MzYAIhAP9zJrEA1zLBN3cVplc/Vpf9Cp2tOU/8nW68cNYZVmEk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4hCRA9TVsSAnZWagAAQAQQAJ4z3jgfZkRZo217A5gZ\ncFOekdsDSBLycd6DzMgvxkETBP+D6viIjtUvxknEw082j+I0EAHonHWRZVCU\nINyC+ju5H+lKde97wfyglCZ9LYVG2k+teOJ2kmmBIx3hHw24nqyUIlpHX+Bx\nrB/KrOdLjj1s8dQIFIH9ESlc5zjjcTeIPzbIAYRAS0Dyymvxnqysqk5WWMCk\nsFhbTa1BiT9RgZzPy5l3txuNKweGXWYZ74sRK3aFzA3ExUZOB2pZU4ZyWjyc\nN7D82DxY6AJ4o0Mp4FsumD/ben8thJEhk0VvU1QAAn1CY9SyX8uOeXHXSMdW\nUWM2dLBj2aY3PGRHEPFPD08hf9Q7OHrlOBP2pE443arPB9B3dKMzsdeXSF88\nc58H+g1dVU3Gqw38AiPF/mpHtFqeQ+uGgeS6X3/jfMy/MtfhQNWk0ZQqCPzq\nVSvryBBY1MiUU7YY5a1gm0KsbJY7AExi4Rbr1eeA3FMY0Loo0ur/LQ6+vsgM\nLZPyRFyEuhXlusOKDeLe4wLJL9myUL+k+hU80/NopGQ6zhebfYBv7795FwJG\n01WpLRxtJ3f0bmT/Nd3FopLvf4hJ7YqUtXL8yyHluY/WdVwUc5OPP0ZmMbIk\n4Y4Di+hDC0kVKacoeWNCoNx44VPX5O15k0pE/fuANOYb/503TSDO8zQIrBhg\nIxdH\r\n=jdut\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/density":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.291b3553d.0_1603907104870_0.7275580833523547","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/icon-button","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.dbc449b09.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f40dd0cc967f8dac6f2a9b9675408f49ef64014","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.dbc449b09.0.tgz","fileCount":37,"integrity":"sha512-/yF49BOnVSgNjojVaOWZM9YYXbTsVrtZCk9Zhx5JEp6QFa2xfAKFewQcV/iDkfwIiER4vv3zQ5lsJsczEQdlcQ==","signatures":[{"sig":"MEUCIQDkP4XlK0F5F3yzDZe6CZzcsSAKyxd3LgOZbXBoiQxPbAIgcifNjG86o4vO2dATzNBaOy2yoAVeVeeScvIxRtCrjEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbShCRA9TVsSAnZWagAA6rMP/i6QEyt6P4ahU4ydy8zm\nmPehKxgjLoi+lNCUKjz20PCeIroIQzb6gR+C3gQaWlL00H9lttQlPfkhkXuk\nsAiucwM3kQwBz55pBFvu7VrZHfFHxaWglUx+65+aGcbV3S9+qAdOWcWabTzQ\nrDgG9Zpz3MRaxCEVgtmxBTm0hLvcSzMVoaq2T21VX/DsuLDKG8EF5TzePnkS\n7GYOW/mIL8ItoYWguwBqGLurYdRazivqxeWgnl6tcbQ5KFy9QryQiWXJqJ0g\novjcmhEh5+D/2kl3pwYRaaDNM5+lsMqjuye9nK6c5JWnc33Bq/P+eeFdiFnz\ngJCEO25uBfkpZ7TdXoonDmIzK39u0LM0iq/JKCBSllmEbMiJ9E5LPF/1V1WM\n5QlBA7n7m/IqY3O0PKa7L7g1VuUva9iNV2kns1iAYeykdkYDi24E6SYcfm5K\nGoxx+K7LScuc4shDkuIN4Giz0GTphHnD9SdLxDAMr9Vq7ZM+osMbg5vchBzq\nhBpCJ8IJq0UWFvXTn7gH2WFDklNBGVYVskca9hJi+zZq0P6usTS9DhTdCphM\nzIwHmpksm33ybDtdX02lrCGG8sBfHVAS3D6z4RvLZ5dNd87rS8khrHAgl5tw\nUF/q4j7nzfbCL/Me3t8dg+0ttUmKvZrPdHYW/3TJHk0AM6xntI754XKzOJBn\nWOHj\r\n=odFt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/density":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.dbc449b09.0_1603908769487_0.5589263250443095","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/icon-button","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.4794b25da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d2ab0a2b9c2c46f6250cf9d6620a9f413fffaf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.4794b25da.0.tgz","fileCount":37,"integrity":"sha512-IuVy0MzsDXLQlDzu4vuJ9aJF2UhXnkvfuuyonwpuQn82KljPqQK+p07V2g7ALZTuYeYjD5bH8CPZvHvjJvSTHg==","signatures":[{"sig":"MEQCIG3WCJZCfSJkUlg7602SPx4gC+AcvsauPgf4J+A5vT49AiAjsxWlAdP1++dcFN2tdvy4MMOk/9bK/ts9sJmjMBZYHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtPCRA9TVsSAnZWagAApIAQAIig8FWspwhmNLy9o2Zc\n7bn0RfxvA6cBvbX77NZlJxq5+eKyY1/Q2SIZGxPIsmC0Tmn4eefqKIkgFKZu\nRB47ukjGXOQmGuLjI4giUGAD1iAzKJ5hG//gpXytpVRu5Dc4CZmt3N7iJsyG\nbE8oMpQJbx3ds5Zqqsz2f+zaCXo66XLt1YbABk0KPp4Hu3J/49md8pQfNRHL\n9n8fF2xzZVnnWd4zBZ+uolFmSRqLSnImJaOpLr+JWQqYJFvxj/Ojf6HtYUqS\nRlDX5qG3IoKhWMfDxnubzGL/mYfrNVOCWT4cpRciJjXLFwCGgIRbfWQolo02\ntnv5WmauHZGdNH8w56RFdHQP2Vs148jbMgbVLgpdFI2MhhvlC5A92JqNkWmY\nNFTdskEE7AEojaID9RdRG1NP6x/yJr/cajHe/SYzBkhLODh3MWHdcyY9ya55\nCZkmvmxK53jz/dAedbksEidYoQkDwwFovzEH2jU2bdiCG6Td6Di3LOhvIosg\nk8gBa+tnuk/WSX+k+pMYkFZdudCoc8TcY15YASW6GAuz2JQAVntYBgmHvtf2\ni/aEgU6Uxncdf6qLn/Z6q3Lc1d49r1oGvB3rBXS8wu92CkkFCyUe0CHR56mP\nO0IV3MaTK05sCX6nx0eBHMnWIp18PZfxoknZYWvoLPlQF2N19ZBR9QNkqDL5\ny1G1\r\n=ZMvJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/density":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.4794b25da.0_1603910478923_0.5804665776977325","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/icon-button","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.c61db90a5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d62da949fd991a640031b6af1528104ff3b938bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.c61db90a5.0.tgz","fileCount":37,"integrity":"sha512-wfUC/yhYqrLN0a0WTUEkaEZXFU5LllGMGuYE/ACOKXtq4vdlXWERko7jeNMwaHD+PltDa/jmTIWS192s0P8/Xw==","signatures":[{"sig":"MEUCIQDelOyzp+i82me8GJj47pXtHWt/Ojsq/inx3vnXSp92igIgFYnNeyqpcjvyZvK9YbLA82uyNCdbIPhJZu53FJdAJKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+jCRA9TVsSAnZWagAAnqcP+QAOr0R9CP+GyRz9DEAJ\n9lc2wQ2CDX1YMSfja/+gpN6tg4ZzVWYoFwtl6GfToU2TsHcwut096AarK2Xn\n/KJb4CSWIzLzh71kcHqB6vmoCEEB29hKaT7laW8XscKkqr5XQLTcXWa1N0rS\ntM/fBd8vqkqMdy5tsgrARJTnSM7KeQSBEOmOQ9E/tgQOKNQI327pzIMS08VI\n/sPNs4yMcry0JQxY4JvPXwEHRIWNdq9jlJdOCRkaiCHiX+UAPqntzAmJ1KEm\nn8IDFl7pKwFEBlBGlvAzD3HUFOb/lI52JmAc0RIDIwr1f3H8UK5eQId/cbXf\nfOlRhGLnlMD4sRUdtUYMx0MGWF1C5B5K76Xl/c1hcAhoVOeb+2SesLxtgcEx\nP7gT/Eu/YYk6ByLuRzSl/N22cyvOmtLB0O1byVDyBKuYLxQSx+z4DJayz0dr\nIDqsH/vDc3Z+sIrh4+xIt/3nlb2TZ+RWfAhhw564OD6rDfon7+tDERl0jCoB\nQYuUfWqeS5tJhtTwsio8r0GvPefwFJugzfMdCJ+2yjCYt7uLKk/yYj394Rjd\nyhCEn7mZzB7rj/Fy/qaYc08A2Zb5H8r7evBNAMW9CXsGTO+/lVuHwkR7ryi1\n92rP6hHiGPk+C1KgB3M5WD34VDsewPxMaZiDOI08E3jdc/qdjCm6UM1eC0hy\nrVCd\r\n=83mD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/density":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.c61db90a5.0_1603911587003_0.43026337658918923","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/icon-button","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.6d9648ab2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"580bb29334fbdeed31d6a846ba2c6f02eab310ae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.6d9648ab2.0.tgz","fileCount":37,"integrity":"sha512-iJnr8zP2Pd8ZPXUCERt89S6M1eiXz8VK5/3QaG6Qno5vZXtyBl5DWLzJgHyDKgFT4S5empaXaJuXBzSVlFL1GQ==","signatures":[{"sig":"MEYCIQCSPfHj7BjIwTw2F34za1+HwdRpZJtqZh1pdhCPS0keTAIhANl/ImFy575FvPyPhf1PS8hFpWoNBLEusbDl1hE5tzxA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybgCRA9TVsSAnZWagAAEZ8QAJ6LcpMtScIJWRyGqXQ/\nJVlpMJ1jMJijuVHVmWJYeMemvUr1jfOLJDUP4EQ6CdijIvOSUeTvi8aivmaL\nJ9NBV7BBLH098ChLO9HHe4vLt46QlHCmL+CUR2gmkKlot+q+ZxeKfPbN7DZ0\nUYC9IuaRki2F9BORHEBet6UjTb9XXSFpQRN0nL2XxuFaS7OEsrkbxSpMMKfX\neGv2Nn9nN2VFMSbC5S/6N/l0Da9cR6Jx4H2x20uc2nsfk16dQnaFPeMFMo5V\nBvch5l8CLzGf5cIBsd0orpoQWLSSzufnmX0tA3yMPWl5yd8zIuZjdKmjdQFd\n+AXLNqlFcvyzPCQw0lW03sMN85ayFdgI6deIgw1a+MOMZopsT9YEYQdgpNMF\nswnO2P3oo+AjtEJmNynO0vGHA6WefLxIFJSKByRBCjKB5jY7ZYWYPL3lnFfg\nKCa+owYZxXMXrJOLcmgPKvKMA3RheG7WStKPGeoG686DFkUgH5FhCH1LmxS5\nC8IlyxD7xHS5Pn64RJwkMmj2i0LTVEtJhJFJ/ZfLahG/VgwdzzfwTyB4TGQM\nR6sT+g9NbGR17a5AdnIVNu6DYkH398MkUSNHC1SYxHTy+03F7d7//UZFpAEU\n7QeDgNlQS7GgYxo0cZzh1lylTW0+cvjQCYvMv+4BpnpOYIF1j2jBvLyOjVij\nwJkr\r\n=BZhU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/density":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.6d9648ab2.0_1604003551680_0.25494823738387384","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/icon-button","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.5511c5254.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91368bb5e48b8b90d8658f30df63a02650c00db8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.5511c5254.0.tgz","fileCount":37,"integrity":"sha512-0KSNgF+ooUcXZd7RWUQ6CCDmcArSNAyLw8vu25bZ/q9f09Mj4QyKr8Kptr1jQ50+0pDuJXX5DPRR/jTrvYEIVg==","signatures":[{"sig":"MEUCIG+0sDRDKlKmzF1V6Tarf4Yr1OrA2g7RPC/O4eIBGZ7cAiEAyQZ9hFySV0WVsQl89O9pqi9rCthL4LLMK0T8hREf6Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSzCRA9TVsSAnZWagAAH38P/2sSQzV9MZgM/lroWLQx\njgCb1nnMVpFWmNHo+JsP4khCeqEl+kfwjuDAnIILYizTuw6MSzSzeVlM2SsL\nTlJbKXFkWRIkDz656amhvurfg0aMmqPSpQHsDemiZoHJPBM9LrU01YsFXEdV\nPVEzRHFK3BWrwXjZ1zMjwK8wDl6Wjj//FQTnUb8rqt5W9xcwma47ZpHaM03m\nYZwo8xc2i4pVqguQDi7KCKPtF6U8ngxZKpZhK161E0ULdVtJ6j4ZTLljbS1e\nzVDdiqK9srtkw2rmdBVWPJaIhN43Ub1iOkfKcnYsG1HL5za4uj01BrDaLuii\nXiMw80rmgroiXH9XFUV7UpFwKo0WDfnCGEEakJN3E+gdIj3pFb92aDapJJvS\nu89JwOzqyKFkDxPf+r0Qqrd/eEfTweG1eT6lRdI64QkcHvsblryjDAyDR7VF\nVc5QeJLqnzS4E82Xe83ypEColQsEbdubeshnoFTCKL5PSCc1Y3byJWEs4X+b\njxvqQE+58XcOYjLju7jCw2GMSakONoT8kJg1i/7jkQn+wK0bAXCPq0rAD8qK\ncEsBu7UZOuV4b3jHFcf6GErg7Yn3HGUyr1FypO/y+JN9oEf/aaxY9qLbc3/P\n/46l2Ho/DwSqV1eQk8SvjRnOt9fg0nHy3uq2wPJUh0uHFt8ZE+slKhDnXFoR\nR6fa\r\n=XWVY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/density":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.5511c5254.0_1604080819466_0.012910734995538187","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/icon-button","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0-canary.bd6e302a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fda506ff9d81f8e561a0f34e1b4a0de6b897704","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0-canary.bd6e302a4.0.tgz","fileCount":37,"integrity":"sha512-OXkxj6cdAuPb47XsTOamqNPvs7y5DI2yEACo83IpTAYngJNjv8DOq/hzx4tP58EKBbHL+JL+zIGimime0j9sJw==","signatures":[{"sig":"MEUCIQC69R8MESpOarc78tw7ykt6WGuBomLUSmOhpBGCPfCAGQIgfckYHga3HfHOJdhi5CNWXhz45iaGMm9575wyAtMENPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDw4CRA9TVsSAnZWagAAeIIQAI67lcQTH62sGJ5iJhA0\njSEIZCdT1Afbircw96MylouMZMTl7oWfPFXQKCoaR8Ia/uEHnn+PXwA9NgZf\nu5YZZvIFsToHW2aIWTc741e/KuN4eNwa8sGvAGwv3mzMqZ3r6gnpopf37L77\nZ9yBpREauKOCoCC5m7GJIKyTqZub+U4Jo8ig/JhPvq4FFcNM42PYuTTa8Cvf\ngB04UuTKtyosN/vO+2RIer1xZbIYJzk/AjdtFYShdTjbysPPQD0frJrg8jeP\npprP6ryT/PY7Yvq8idI5HMP3qWzD0jVrBgj2tg+/FDQ6lJFWrb8m28DnlIvY\nkuHOvFlGJpEcjR7Lj4QgJ6FjO9t/B6Pne0CdLNsg0B3VhedKOA16mH7mSiDB\nYcc2oQUBAwc6lS6sPeQtjYV9BjHf89+16NTqxAq8sxfyrN21WxtswJWrts8w\nOlv05Z63+sOYQbvmC0h3C69VyNqA5O8Qo1iPbUlpfoC+eGRD5hrZLpz1jiaC\nEnmsJR7pKQEzuTidwyFbSm7fRUcL68JKLtXKoY6YbONc0B/Yd9eOkaXJs2BR\nYxnKDrPsopO401LJOLOgkJLGfdHeJy3GLHramgZneghKL8/X4vPpBVgWVrK8\ner/WNLOHjQ666jtzvRvdffYcFZ589bvVmS9UWIuhMvRz2F1lLwvqKaR76Q2L\nb4sO\r\n=f2hA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/density":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0-canary.bd6e302a4.0_1604336696215_0.8227932912161804","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/icon-button","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.d6b5cd418.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b768b094692299b0a60e06682c08e718438c7df5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.d6b5cd418.0.tgz","fileCount":37,"integrity":"sha512-RTFkCfnHFuHtGxtAcV3ZOYBQ2yjX9N4AILxpjcMz809jO/mHGyJ6nwdhRjM/9yBYhrs0OTQjqErnJpXBaRAtNQ==","signatures":[{"sig":"MEQCIBkCjYIN+ojnOMlwODibYqvhVl6WNYQesp63aOAB5QozAiAu+tCJePcC80/zKCDwkQFyDtgH+I9T0nMbo9dV1LcJ9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI88CRA9TVsSAnZWagAAQJUQAJmVUrMlzDT1O6SCOfbr\n4wn3V9o296FeQ5IA6MZQjeuGr0QXe/ieYA72uDXQnaeJTezLdShAPDxlTJt3\n5BNcyjQY6+eVTmDrO4lwmmOo76zd3vTBXyUmF40YXqKMsaNzKT12J8tKWQk5\nrEdb0cuB/Pwg1R1KPtMm07OUHTNyEfblM+JChU7J8x5Z6xNNbF2r+v7O27CO\ncO8tdGbd8oFjrbWkWkxHXQJ2SyInl097aNfQerOkteA/9TSxsGrrKKVg/l3Z\nDWjpD8RLFzYn7/CxRGzPV5NVDShCrw3RnkfTxIobc/FwDzhPGSUAj2AO5sJq\nz615V84SxJQTYDQ08ZeOI6N7Hulc5zbYOJCsjynzswP7lj2u97FLXZglvcE5\nmp1S4JOYsc+9VhnYF5jN+Mchx0nzcHV6imL3GIfpJd67ptEZZ5wd+04yo8PJ\npe0AgjtGmmRWnPSw4QTniz2T9kf5TJbFIVuoynC/MntQuYgRt0oOxsLOUexj\nJKzbKpcPRruubXcLBvqkOXQJBXZQYaejEbxFV8Uavqbm/DNhh+RAUEcavuTR\nANDyHIXNcDlcDOFJ1mdgp6jzIJ7aiXcM0nsWfuEJ8i8jOw1Ms6GMZfbcyXc+\nkt50B3y7ykkWVfRhWhekGT/fJj97+lhbGmjLhL/VBIOxr9svU0CustQImuh3\nHUlW\r\n=FdsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/density":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.d6b5cd418.0_1604357947862_0.6861581834603823","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/icon-button","version":"8.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@8.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d782e1e146edd50eb629ca7b25145273211ab466","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-8.0.0.tgz","fileCount":36,"integrity":"sha512-OcO2sw21ty7OzEQ+7tkYt5NGrrwwDuCvZegfL/eMUla1iQFYf/pZ+QCb1r3NEtbBJmsXzoBsDcUnaiM4PxFs3g==","signatures":[{"sig":"MEUCIBCAlyRw7JILq6UIpHPTC89uMTNJ5P0+VhYS1JfldDNuAiEAgYCoeaGmvIAfvWXU4gU5EomM81uJXNpBkrtAoKF24TI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9UCRA9TVsSAnZWagAAEpMP/itmB5LzlTNGFF7ywq4+\niBsbDqVjpKno2RXkY2lrj3HL1Fi6d+g4tHsNkfrtP/1kxfot7CLgLHeoX0iW\nAUafvjznVXdu3wTkZDTx7K4OiRbq6SnOR60Rc1uZ6DLf3bfa4g8GUCvmZYpg\nrWZ2IcO5Q0lrW7oiXxP/YeqFn3IhBgcfyk5MiObUrXfn8AEJRKlPZFB4nw6q\ng//GoJDgf18n6O46TyCqFYXRZ4YIa0aKvs4kGjFtIgQn6RE7bTRON7aYaD8b\nWwggjdkBWQvEOHpcSz6yw13r4CAydsPtyXHE2yp1LO8CKGcTgm6xPnbIRURZ\nu1ZEcWgJ0jADaROwOQZbrliVCj2NCDiEFW2Wlxtq4zC83gj3Axi8vSIkUUsG\n3PJQvdveXS4Q7qXmn5glsqSFraVz6EXW7CPtmaJbTwWS0B2Kr3EXmWKbCrTe\nuHyIGvPnB0uoj0K2+9vP+TiNQWgoIKhKEE8QOSUZocp53HLOtlDmdtlSkT0z\nlvUHPXRphuAim+2YM/wppKSdiqp74AHy8d4AcRi+piBiaiqG1lg7Cxxs/ykM\nsSNfa6uTUAUdU7jlz16orHuOnxKPwaLdsfbTGzrsQ+F2079/LH6XYzzjSh6Z\n413vkVJisc8xLhZoaaXal0naVB3pHblxfr0ZaWuYMtdKazoGssGN1SgDEkew\n4Qfa\r\n=Md0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_8.0.0_1604357972508_0.3735153369489972","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/icon-button","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.fdf9a2634.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2b72eb9e17eb7139ec8a9e3fbad72cf1515f236","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.fdf9a2634.0.tgz","fileCount":37,"integrity":"sha512-48oNNLf+llLTnlFdZDgOffxKxHBDx53lmlCgVA7OP7qfDdjOB7CpQqVQsfg3hTfO6DesHj9z3zheY4fY63q/yw==","signatures":[{"sig":"MEUCIQCr29xq2/TBhR6YGaAl3w+H76xuu7SvyAJF2OHTRpvA4gIgcVDwG+fdgwnU4m4XSpSr/hVLLuK4hx287GGVMlR33kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYACRA9TVsSAnZWagAA9KMP/AtqqqGyFf03R7IcnsC9\npMUX4sQLQUmjHo1Pat9ESuefzMFQmEhoREdzUHZjQS52bfSTUyEOadpDMjG9\nGoGUDitIqKqi2kUG+8aB/Q3ezq70nGFV3FftzoiZEiv7YPAFvgCDHC5XZUz5\nwWGpTRsmKq5yXDQ9inZvhER2IP0bmbm+PfWt6tDHi8odg/o3f5CyhvB0FL3o\ntVw6kz+I2ZdY1cF+jsMmayy9NGrB4yYLq0G5P646caEAtQuMQ3LGkOMDg4Lu\nxV1Ez8wddUvxX8MwJpiBSF/181Dkg74nRW4Rr3zmzwq3DzdJ52oSDmbsYMcl\nG+IHT9g30l+QL1doIy/xv2BR1UoSsb1GnLJYeQAyBpg3/uF2SbYkGEBNIxLg\n3G0iyEJtxrRVMMi4T8/Jj13HRZ/BV1d7u+cyYNmn1espGe/bfuKUpAdN31TE\n2thLLN5OkK38gdCLYUSsSG8+kr8lEiVi9VdRwDVu/Cni8ki707/l5iiKPoxh\njsGKoBGHv9I0PFSsDEBGaa42k46swDaClbzzPMREBRXBCeSdEwo1uLGel9Sp\niuD9dJ8icZlHOCZdu3QcFJVTDwlRhUZ7VD7oAe1aUnEhi8UKBixRRRVc7d71\noUkv3ltKI21WndbbrsomzGsvr6E3yvn3bf1gfOhod3E8Rnfim0pYkk3n0JmB\nSzUl\r\n=EKLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/density":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.fdf9a2634.0_1604445696029_0.3707030014794972","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/icon-button","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.4a86f30a0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18987fc8f620f0816e208984f869cfdd9bff931f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.4a86f30a0.0.tgz","fileCount":37,"integrity":"sha512-dE1N5P4mGvXs4YAzLg2eGZsuWTDbNhU69KjWwXEuGfDI8xC4St5Na+Q4AjPTXBjVH6fwxgqy0cMJ7WMwd3o0TA==","signatures":[{"sig":"MEUCIAxOiZHRYAeUjdY5jF1F53YsrPXowipyW5ocCSRSpCCBAiEAlG7wX0+nl2qHUt6NbCjw50qacx8sM9BTlrn344YnZQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeeACRA9TVsSAnZWagAA+q0P+waLqOkMMOdAPKkb2wjj\nGMSUy3IAcV/004AU/wAbwsf81VIssPcdjOsB7RW2r2aACpUXMGKAaQnD65TE\n6vhF44QyRYXIXfxYWSfe7ihcx7aSzglP7nyJdbP+Ejl5N4Dgidh65afyzhRb\nnhpX2ytgqZLyzjHOW2H1VqApX5OwOKhSlJUFYVr/jcKuE2Ty4m/1MfsSQ6ct\niY1bgn9mNcDTCLhD03k1Mk+uxqwd5u+JxQQTb26PGHFmbk+ulId/fxCtXAAq\nVIDA08ngv9tYI39DTh/gjaFzpxd2q4O4URH5URH2NmbRwzhccabPaBTDAyDU\niarizbE/FhpRfotYr8OxC/zCRb6ly6Qc1KLGgV2w43aRxZysEybr7VGkXmro\nlhCrvQ4017f+EXi1Hq7+j4aTl6jmUc/i9LL9u4k+melQsOSz3OYKHS/GKBu+\nJ/RTO7RooZrYiWdYHMiN/u8cUrli5j65YgSpLCPm+HwfgWAQ+Vl5LuO7KKIo\n5KaTM/qnptSvMcn2BbLFp8QQap3aQdi9DUz6nO7bfMor4SC/tjF46YJi7xFJ\n7cR+s6QOqTTXSFf98i9sK6sAUZWQ5tqNEzSD0kS2Ve1sJr/rQojVhM1MeZqr\nRSL1royx8zhq6N0Xx+uFryOmVV2ccZJp9ggISELrmRcEOT+tdrYU7CR+X0nK\nUI6R\r\n=GV52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/density":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.4a86f30a0.0_1604446079800_0.12833171960528533","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/icon-button","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.fc8b045f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad66b1e5d4530cfdba5e8d0fd28ad5ebf7e4bae5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.fc8b045f1.0.tgz","fileCount":37,"integrity":"sha512-o2GsXUYwZMfye6ZbvCC8S14b5IX0raeypWRa8W7tk62lgddGxybO6UyzAPuRxayZP4kr9r979CA15DTDwUqYFQ==","signatures":[{"sig":"MEQCIFr5QFGFW4qRMOYy+Gux/1WCoNoIcz0wIh1kQoIWn3GoAiAtfF+k0z1ata+px7RsOwIJE4fKPWFvdgIGFf1Yahu4uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemrCRA9TVsSAnZWagAAZFgQAKDrehfo/5qBK/cn8xl+\nCqXqcGYk2/+qYdc+8dAgpUG0YZlGch2Zxgr4f873ETaPYXqV0XsKD4CmyYlb\nrmm5keq34eJzrDsSvvtvdRegHqkrVjVDASOLvKQCiIAbl2xcgmChk55XH2bQ\nkPCIwcETRSTD5X66voSd0aKR4yC2l9XR+weoHon7ZvAugpEjWQZk9IWwwIjp\nbJBzRP9qS204RZXn6cEdSmA//FlKHPuSRnuqhpr6MvYyHbAcMFSsdchLqq8l\nQjBy4BsWA6K0vDG/mKwsRC5Z02fhqZMjHcSDaM3NUBjtxwPqYKps0BTSNXEl\nydo81C3Mvu3/4k2FqFxuf8K1qRvgZlxfVXrPjdtRNHuipHS5Huzi8j7JNZ3b\nM6oWjDcspcTrDi63OPFrdpJBjGuragrB9SAPx/pPTkbjcf13HEYXdm+wps3/\nZco+AvwM5WkdqgcSSo2QWJAT2D6K2zSv5wOkpvRa9FzGpEkuSzKYdnDiuopf\nYHLxCOAd+8doRQzccBnXSGF/YXkIQFa7ztXwBURWvz0B7hmg+LNIP7gLss3r\nS4/tfvibgMIh/+fkCQdcuQak31WY6nN+G3cs1a4dAE/8joKPBo5ybnC3BBQG\nUma5uU3xWTPW2izQ41nHluQCrbtFk5tfPvCn2bjYtaqeZiGDwr85nEUoYWKX\nFjDy\r\n=tefq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/density":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.fc8b045f1.0_1604446634520_0.6640510812258491","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/icon-button","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.a0b2db26b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b225983d0b21d5259443f828e54479b5919b579","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.a0b2db26b.0.tgz","fileCount":37,"integrity":"sha512-s3NNO+sQM5GMqXXKfDleWto8HFpIwhOVOiuRCfSj6JWbTAB+siMdEXqZq0dNQ5dzpzrCtKE5SL8XbMd4wV6yqg==","signatures":[{"sig":"MEUCIQDzv0LJhDI+GW72wL90kyN2jjt7pkTgGfCKYTr1QpABJQIgZlkDDkGu8XypbNPcdksJYYf/eNAcPqpR/2Q/4S4JM0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofElCRA9TVsSAnZWagAA2nAP/RDNQpJTvUmAh4hkmizz\nE5LloXkglTewUCavDC7HK777Rrdz6xfqw13l0s19jEdQF8SxSbhX3Ugeg/VN\nXh5aF0ezPkXXjU1nEmrUSL4UrWCj7Cpv7uopZXsO4nScbhWYxdv6rmk4mxnY\nrU+E+hi1ZEJ5lEj3fxvrsSKjCD8BfG6X4PffBIKRTCqNtr09oNyWQliIkOGs\njLGZcjS6sFQoiboeSDhQGwN2datUOKiMpws6HBPHDwk7MmqT62VHuD09r+hO\nJa1i/BR/R6keV7MnqxBc+RZBEnp4osfZ4+YZa+eRfCLeDQbzaiGCEDO3hdLj\nquDLXanBB97kk2V1bU9FP6FMkiEe6K6LJNJaLIdgUxXruLXhX5gKG2ejVavu\nE69xFhYSazvHgE48jQ+HOICdLM72bZU9Dp7YfGPWXyzA1AlUdA0ZWG/Ffn9P\nzzntQozpf2tFLV8dgzMMQwagSnYkNNVCULg8ytSHza6NC2teWMCEetv4xQrb\nuv8dk6TJ3l+5F5TIFGSbydJLzKpVlEUry12VjvBdKMfBYR52hPlINxe58Bt8\nnKW0I+mgpjV1JAkda8UqGPbjO7I14Tn/YcjsruXcj0V5++OM4m3NHm4Nejd+\nuE9Vu9J5LrQSu+uiGon5KvFfVQxjHn7NyEhTMoZbIpnjBhw83ugGrIVH9EgP\nD+4G\r\n=+nsr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/density":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.a0b2db26b.0_1604448549015_0.2887284689719176","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/icon-button","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.419e03572.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1cce82feef6921db84c31da09c45a7148c901dd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.419e03572.0.tgz","fileCount":37,"integrity":"sha512-bbd+rx7KWZXQXgumFySTGnXBQAHqDoPLlZUODMIuok8C0ueIqZPlubqd0Lop6NjOqe+ObOOwuBnbKVku4xXnGQ==","signatures":[{"sig":"MEUCIELbZjU4RB2EvjgYdAndRBYeAEOZYCQn87fd3waRg80kAiEA38XvHmDu2VnauqZPKrpz/0IdArlop9WbxeDRhsPiVOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTTCRA9TVsSAnZWagAAxcgP/1K5V7v6XlQIjae+6ek6\nwpo9y/Nblgu8T1ZbOnasL5LFXDSfL9MPl2DC+doU8p/j1hEZ8pZnyt8vGvP4\nC3JHESTEd5jQGJKbIk7ioJ6mPXUgDnfipxVINCEXJeX2iXWMxua+dgty8Sve\npUrot11/UCCIrlxdJ1QOFMse3k2ekjEb2eOVxZd7sXYSiRqJtCkDtz+v4Ih6\np7dxBAi8YO9z6Gm3XxNLIQmoInsqQRJkq9m22GH1vec0xJ0oWvHb8MHybTpT\n8wWpOhnlzxdalnuzSruZQvHEWhGHeCZW9yDTHrCFZBM4sTO4k1apUKg39mH1\nGKhZyZfa9gby+muss5vGxUYIvusYEkuQr1ZGcb6C/LAcYdRU14kUKAizG+n9\nKioz7yE4k5ei/x2Vru0n7IEc+tugA97VVo+yD43E/QBcCtq6gt2eo7YJVBmq\nakamSAsBN12l9oeSI9rMVo7HUdZe+jQc9ae6gP57PgBgDlihFWZoqaIEDq+g\nnw1Zb9l1k+JOC9klYU+BSr8BK4m6GB8mhs+KoOyV/hufnj/dFE3/SBFhkk91\n53hFJObqFtU/hejzKXamfJhte7UaUrTn+cYp47iAJiXTApRlJNGsSo4zpFGG\nAKKuZzpU3GJCwwJXrBriYxl1g5u6DYKM2z6oM7T/5FrfkBYZ7qNR35TVJMn/\njiEj\r\n=DtWV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/density":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.419e03572.0_1604453587307_0.06730868451617167","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/icon-button","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.a432ad542.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b05123bb9ebf093eaa72200ab118f98c6b2bb5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.a432ad542.0.tgz","fileCount":37,"integrity":"sha512-45Dw0khmyD1FZMZbOF63XDYeJAxmCKN+Hi9M6ZzIWeUDjKCoezUBTtDvIBMkLJKsmsuw7yMyoUXzdB/3A57B8g==","signatures":[{"sig":"MEQCIGp5KdhXEiqsnz1rQeDxIj1PeEzj1jLM8F1ChTmaxpLrAiB7js1dD9ZiEXQDhXvHKhffKXdF/gEr9YGSLySkVzs2wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrWCRA9TVsSAnZWagAALyYP/30IXBJ7iih2EZL+ZLmB\nW+cIZZeJ9b43NC57KqJxiXV6IRCyAyipL7MemMxvETyr7tvElSgWvkdNxGmv\nZg70fimHR5hAWYJJ6UqeU8CYLd5C1bScfkIua7SurOlZu8Zr+9NEaqLI//oG\nDctXbqvoWVB4y+FX0DZPd/IYBqQxSVw4VvAjLAf55xn3BdXp3n2hW1WNepxi\neS+z/jl6ysdkMj5Gg20KqCUyHVptlL7u1OPzVLSlQkxbU0e8zEDZbLp9U32p\nW5GvgWcTsJkUdyfatY83A+AkjfX9UJryJrxxz32oei83doliNYH23TP5qxVS\nZJMbWvu2cglDq4ZAP6tUPXb5ZnuvDH5IwusEFA4y4RqI2slenuXSPwOtQCTD\nvzceCvWmw1Ack0xqiNHL1XXzo9cMkHuZlw2D6D1ohq7b4pALZ4AyY2i711WI\nlrBT8VAT1ynb4A1UdDmqxyIFxykkD2JidQ3roQskCmZTKLX7VY5mW4oPcXrV\nOdjJ0WkQlavkDokteBcj66BiLVgiU0xmXPAbOZZHqmJnJEfnLL+ixtcpnhKz\nHG0EAhTBbc9odRePS3XIM08g9XeSsrdLGyP/sLnUonDMAJLsfKnoWAcYgszE\ny6vpyL11VzKkaXnsmIr+IWaRTGCj9FC8YjQo8aHUTyptC1D1JSHIPjzcRDIj\nT4RN\r\n=XOtf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/density":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.a432ad542.0_1604627157645_0.9799267066991482","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/icon-button","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.e2e8aef1e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f21d07cd1872daf53a64a71522dda5c3de3e1ab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":37,"integrity":"sha512-Y67wNULEW5lOQoxfOdscjLUTA3m8wf4saJhgTVa9Il/qtU/1twoaU4SBVbGlEvz02vlfXeQyxcnKKSWbw1Ej7w==","signatures":[{"sig":"MEUCIQDpXOpjrnki45E1kA9v6sipo0zUs8x/6FfLFAg9cmFGggIgIcyksoK+UThCuxkewARwmOH0CtM+CPe98iWANMWr9zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9lCRA9TVsSAnZWagAA700P/irwrbZT/50f2JjZPPvK\n7AAbUltYigczumLhL+uUqL3QRWJvkUGAROYPdBKkTUAgdHxXLffzSEwlTydy\n0oK6Wk/hdcuXObJ72JifbZV4TM9gOjNUiQ4FRGIQ8Mh37wafqYUERgIozENq\n9uHjBl5miYJJ8IbkTu8pGn/9fKbOF+8vWfDJIckqFoBXIunp4RqW8DDM7UL9\nz/yd01/gjCtJYJUjO4UsqE+smYaBe0WuKWK4XtJKA5bUNdiT9tVbx/KLfgxi\ntaE3Mn6Yn/urNgQk2yqKKAFtFTMm2PL5JHzxOiJr2bgoO7ZRAxLQLvASBwsq\nPQO/WrwQd2RswrtcbiFSiss/UJPFIaRz9p2y+P50pZ1cN0gK68LYeP/pw241\ncDIn3d0KK+wtF1tE2om8YqfHP6CmCQAUHVMQtJ2wzt4WfmFL4Yp7iDyY+wFv\npXIa4SMNmkRq4lE7sKYJWek2jE9taQe8xDg17pPXt5W50wUbI2MSF6ZEQY4W\nfwj5sOYbYxN3UQN2P5tkvSB6eFcfdvw7G4XfxAnVOmfKPzg/eKoP1ZmtyRjx\nEgIXqF/tlkC4w/uk8Ph4nGVAAMvh30GzOfgMuyy9kFVajW/EyTwnak9IjjZT\ndYbv2JIW2U88fAugfutdYG/bJPXtHy5wPOg87kn/Hj8Ud/jOQvDxgvGQ+p28\njvIs\r\n=avcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/density":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.e2e8aef1e.0_1604628324533_0.6271373403922884","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/icon-button","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.ec6b68b34.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2db04da71d7edf0ab94956ceacca0e22dad7fc49","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.ec6b68b34.0.tgz","fileCount":37,"integrity":"sha512-5e+7EtlwLHvrJYad2DgfZNcwigXJAsUP5iStZNYjYs2BE8EWE79epCothH/Psg72W60R+BR7ad6f7lRbnHbEBg==","signatures":[{"sig":"MEUCIQDApKJmoZtuSqlOaNCsrCIRAk9ImQG0+zaCgn0VWZ7dpwIgRLmONYJliPdCVWl5N0dah8HQr/gUAsOpItiihpyGTqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxoCRA9TVsSAnZWagAAipEP/RaPmixnlEPuO7cwX458\nm3ONYYfDrMjYwxBgGRpsS4Ftcf5FFakgKKY9NcDim75Fasry94P64ty8HGOU\nCKPuBN772x8pp3GPIpuasg46wqLvTT/8FHnwA2thxvhltckgF+MZwFMgZWHX\nuuVGiMOmcE3aarIzQ+bU2WqcGY7FYNEhbZ9HE5BVvjxgbfUmtB9CCcSfhfoT\nhpDHUk4Mw4EWhFPqpbxZtHPSJSl6A1Ok8gNEfGABXfeyY87MIEhZh7tl1FYn\nGPItIc5tJtiAdLC8qWnvXiFPTHhxG/3kVwf/cHFHqvK6Y1ssGWFaZq9FXydu\nHQFWTVv3iMAXcEuWFf7CRGlsbmGtt5vfd5twi1k09wzqTZ3IJRv3ZUNwtx2X\ncfVHSCDiJGw3VuGgqyk+mwkzyEkJKqsZVqLeWlz7Khkhtjbz9J36RDgcQypA\nUQVgfyYxKdyh0XYBB1jBmhwRl0DcvmpLiVgXhY0pEQoP7EYN6a6rPK9j+B0e\n+1A74WTu8mS/S/BBb5tuORE3aY8N3pTb6Lobhuawql/3RGW5OYlkwJfRMkXx\nxdR9Z5Vlyjjxk/eJ3s2CwfNvxFrSfBZpsGB+PSiGoSu7ovyODqQvPwJPRoof\ndSypE3cJ76KiuEnygV0yaX4aWYG2VgrydRG7JQwP9ODHbSYerLQXzIJS7Rl/\nBtxC\r\n=t5N+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/density":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.ec6b68b34.0_1604689000075_0.14044172404795519","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/icon-button","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.b39094d14.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81a79bad3815062df5eb6d1cafb0e27352433384","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.b39094d14.0.tgz","fileCount":37,"integrity":"sha512-zbYz1KvLDz6QCy1fuFpevDkaKfx1h3/7bJ0w1/Crr7afdfOA/M6pQEYtUgFQ/CxrhuxokWxennegd8XosIVvSA==","signatures":[{"sig":"MEYCIQD6HMP1+ayiZ1+2PAh8dWfefZlfxM2vX2rmdmdQvbNM1gIhAIb1aE5e7crapF5HeGw+LHfEHpbUjjF1pf2yjDZfMPdE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0WCRA9TVsSAnZWagAAmEIP/1uOOhPpkCzioJj4DafF\nvt8gdpLggCbbVNep0cnJewHzO3LJWZnLuqTa8vxxRvM47NVDlFsHzmrFXXvG\nyVo02whcuTTu4sAflTQWG+kMvUI5RttxwvTOKE/8mt6TwMM0J6ycLi14iAK/\nBqC8lIj6a3iwZL9FnnT+tBWatk9st3FXMqQN4GaUk31A9abFUvV3t9boVw74\nH7GrNYWV0ejOoualC8SySoFm2PY+rAD46KjfkjnTMrNbLjcwNbShHcntIPUz\naoLxJdz+CGuf6Tqeun1wd1YfW462V0boMWLGbarx0tShVlpIvaOtwcESCRzb\nffySJNyj6JCEo7k/FeiVTx4RISntlleUtTotG5TqCnybRVF3szOKvfRApjm7\n2DQL8JL7ymQYHklW/LyAUPjka9x5NGWNgHU3/Y8XnZSe1lMaBY5taVGmqBgt\nrKaOP5aiJ/neYXnIjJ4SVzQk9+j1+ohAuN3fz6SwQjVTjJYbTIk/fNCmKxTH\nhFaWz7MJbk8skc3ianQ8W3tdnB7XZdL34sbvHOppgct+mounfOYLveZV8p3e\nV+bHFKxpz/907184Ik91maDenNMGrmTB8r6HTNyga37TMCD+KxJIB5uyPhs4\nQGrSiRj/TjvqDpKgHfOyYsVAqgWanzcLJgiudNlfJNqwtuFAVtaDyC/qvTkG\ngYYz\r\n=CNxY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/density":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.b39094d14.0_1604697366228_0.9273552810645924","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/icon-button","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.8648b8258.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b74e0964c28236eef18b4b60f2fc18f9d756397","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.8648b8258.0.tgz","fileCount":37,"integrity":"sha512-HtEPssNllwLEsgqUHo0Cxm4bJQVzLtSvlTHy0K9jI4qoFJsGIXGFY8rHylQE/7IKu5m6pAunNhbu2xJDD9p4jw==","signatures":[{"sig":"MEYCIQCq1N0cxFQvHqh95Knkiyw2iOqxnJ+22lpv8RSWwFNIewIhANSa57a42eoPzEpx9NgPPLew1HCS3GcTzGLr7i9gzNTz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIaCRA9TVsSAnZWagAADe0QAIx3Pkm8SIwjPDI2Ryd4\nMSFJq5pdRY3Hlqw54pfFz0OnyhK0nbx8lmQoKjLfFQLMdyvjB9TVnwAc8iai\ndcljgwuzfejvepDoi+LF1hfeNcLdAoaD2kyhNuGZC2tSLd8+t0hyvNPvhXQg\nwdCNYKgwbrT9lvbTEtX+mWiYxUvt19Ljpa7SvrH7WNfV0fMfKQtewnQf4JUZ\nzKnWg5bFw4TEP+5aRrFY+jOlbzjZEIP/fPqHY+5GlEI/uEWK1BphBgtGCzqG\n6GMamk3elYMfKt9DCTGzleuQMn2LSPxLjOx2Brr2Yu1FrYz3UFmqRED20V2v\n1FBtTvEUuzhs7lwnHLTyvuCGZHLjrZsIp2PCFqd94aebnN3ztfq4soeMtEhW\n03tQhUey3pZ1ecJKspKlXmfreKDCjnOXR7SHrRN6iQdjL9B7BdF9jorRk+Qm\nTr/5NzmdpgiKZNtFzR1Pj6Np7bBek1xUrDm2Un6EEZtsF5frXrBSZGcRN3dA\nxeyY3V6xpqX1kDQp/E2FlJVk74tlQ7LJXfdCynxuam/k2jhdVmgt/Bcpd60X\n5wL6UdpopmHpk8MdeesjATgKaUEylhxY1+rs7oGs8u8k31xDnq7RdV/uz/s9\noehU4N9C+DNvkRj6wgIYFVLByx/2ShOmKBS61U1G8mjrLOPF623k25w4DGH0\nR4KB\r\n=dqdY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/density":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.8648b8258.0_1605177881960_0.14662291464797317","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/icon-button","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.240c5f74f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f1b34990b753b51aec2098f21cb6ccc4cbd26f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.240c5f74f.0.tgz","fileCount":37,"integrity":"sha512-jcyFzFlDJygcbvUFAEC+3nSx/HHmL0u4mdJY+8zh+xt/mQtHj1cRLKrH7/DHrIrgqp/emknYx/rMBTd+teO0kA==","signatures":[{"sig":"MEUCIQC9nYz4zzv7n9sY2UYkKrjWmyUdxLPdLCDrdZed/RUzSgIgYxCbr83mIj0eormmIwfwEVJJl7wVGHBJX+RXPG3I0Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkcCRA9TVsSAnZWagAAN7EP/jeOZwy1KBjxaB+VSo86\nNAz1fpnxMJgwPtpoqgeh1etRUQwODUplWJChs7Gh/cNdBamvqKj/7a7lw767\n118wiMkj4NzVRYm4yJDZpx4XPir1wTY8Sd6mnPazVGrr+9LoQDGO3fuUkZNi\nkNS/R3SlgsWUU4j8P5Yu4OaA3xj+OoZfEnKD37peRL7zIMb7gb8rViYMw6o5\nwoLdsDW8AiG3P3ea0cQON4pwOE5b39iHZBkvrfrxphjJqDZtD3B34pHdGp5e\n74RJI74Oac0cwNF/3g62xUFOYmxUT2zDGCCdcfVAm1YfIkkxRaTCCeHvU6Bf\ndKtxytIUpq4WP+XOB4Gz5ZfhJ+6jAbjzcuskt/wkk6NJAgxVXSoMXNf2MNtz\n6IvE6IkKywEfN7c+tpq65M73fuqe4SlG8wGMtEeX2A6vehc1rwl5e/BnsuRC\nJTAzt1HjubKvPKGFA+wwgSOeY0yAP36BuR+y26kOG+siD+Ti2mrC9GFIMHFI\nwsNxgRhgdkOcIxQbyaiaNGshwH/i5cXHpD1Huoy2JRDIjXt4uP3WM27gJor3\n8vWCYIuvwtQQSfYsnVf8LTRPYtqAI9yYt82IhHKFhsbAX33l3lyMAkswYGjg\nxDqUZnYyTFobDkPrAgbNb21NsWU2M9Z5fK5ezPzrmI/3eYSUlUatW/bSq9Eo\njJIM\r\n=P3U/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/density":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.240c5f74f.0_1605212444365_0.7432476982105432","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/icon-button","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.6cf6ba4f4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480e5e012f5b00dc13e2ca0ebeef76c03cb97591","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":37,"integrity":"sha512-7YKpJYGIs++gsZh03gH8s/J5cRht5VLOTB1pgGLoag9knIPd2L6D2U326N3bxTsQcyx00xVlbfdnTc5B/AL0KQ==","signatures":[{"sig":"MEUCIQDjTRaMCToUuNCMFFFCvCGjMbFx3HhRNwzie37PNaYaqgIgCpsQSCYXCL+0Xabrfer+8PznAKHOSj45+Az7CIP7n84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnbCRA9TVsSAnZWagAAPOQQAKLQGKgF9TRuNqcteg/g\nI9cFUr2rEvAkzTQs/SZBEQf2mSeHSakFqO9+54kijer8Ue/+xQ4X+EXICanw\nv2fjTt/ny/iQ+6rhKS2qQUogimd85LaFcDcesq7TJkAeP0TWl0aEoX2gImjS\n+oZHcApVF5hATczPSAH6IOEMBQ5xUc0lj0IuT31wUuVa1j/bJ9DDlCKQmHzu\nz6uVGHM+TUYQXnde4V5JkqhvGO5Xat5gzJREI8NQL3a4YsQZJ9cU4uN4gPlS\nMz50IabLUmLhZ++jm6OfiWJr5Cuk9Qz6F6guYr7t2tvZyPzHAtx3t2sdIcFA\nwTTq5kSSH8R2YNNoR9UjZbvdCwOlsWTNLtQUgxF52LXBo0S24+ejUpeLy08r\nVdFHRoswWzIERpVt0IAlIqfmulZqoj53mGQ7vXnrOC+Ox/2+ZuFzQeSzDE+E\nCoIDTPyEzovLOD/bNg0SaYfgN5oHU2EPOi7y/ZMIr2XVCOfv5DAdAGzgq1Ii\nzemk/SVeti80EhNTtHWAByvsuhhaw15GAvxne8xldkHlZo5TC4H1yCaPVgJx\noArKACMUp9TnPXAjVSqen8rNhBFnotvCCaUwruKUq2joxSFi/6kQDxH4zOrq\n3jEKvJuimU+AYzeKL4V6g3prRF0Fxpu3xPGV45d1eGkOZecsZCTHDgkOqCVX\nsmay\r\n=a6gp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/density":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.6cf6ba4f4.0_1605552603431_0.7298946493165257","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/icon-button","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.07f3e01b7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798b3e3899b2837e56877ee990630b1b7816b129","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.07f3e01b7.0.tgz","fileCount":37,"integrity":"sha512-Gw0MFr93m3VENRjRNHTqkkou/JHFeA7ICTPjvfn6uX3leNVnHF6ZrBQuPAkzrqtEN74oKGDBNatQR/c+7nOEgw==","signatures":[{"sig":"MEUCIB+MTqNs8yIXv4MuCeooEE2Diy4YZYpv3SztapQPlshuAiEA7zI1y6rG2KsSG82ermtSPQxPXD42MFdt86v13JNn9g8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMNCRA9TVsSAnZWagAAl6AQAICfCyr0U5Wg6mBej7P1\nOKGOsU3PGX47YyT89pB04Rq2aC5UsoZepXu0Shbb4UV+oU5wu3PElzIr6EXo\nZTF8tmHwQroZ+wh3RhJkAt1/21rKmYgPlifJSkkKaYyVenSQ8+HQbfEBQ84r\nu4qlecf+ZO9zwVdBX03CCSu0gq4RBFscH6MyFLWPYrRx0Z7rMtaHqVnEvYtT\n/YW4O/G7TpX3S2pCPj1XiGk7CRM1XmE+2FiiS7DNbhnYh9Lv4MqAgxO6BD19\nPrs+imNaMKS+OZ88hVjKE5u++QVta0z2xuGd1JpVqeW6DHSamcex/3dY7Bz1\ncGvKOAEQJRqq7Vlvc3hY8oScELvuLbzdmNDk6RvC9Hb4YJLIc+QsUlPTN5fg\nfIspda2293CdB1g1DVybTSwyWRT4Yt+Pj9iz2qrDY1TqWQC5TC9UVknKnDv2\nBmJTQjTjy+JU+c66Mp/TW6Px0Di+KC4+CCOxjoOBWSfYMkwRQ+9fHrFkfcbK\no//JPbOc+wVBJ5uwjzP35DgT0UYQhFpXUB+ZT6nX5//d1eG5WndLea1Jk3XX\n24UqJZAq2sOUYRQOdSQuHQqH1WZyYAxfJKpi/MSVtdDFjH6tj/mRg2g75yzx\nAcI0KBW4jx9eA9ujoBOCtyp/zyJAaP+6eY5AN6bhTvw1hV6SNLKsKTxN9Otj\n8DnY\r\n=mqQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/density":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.07f3e01b7.0_1605563148730_0.5365888835177446","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/icon-button","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.23491cf85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68fc5879883d1a26552f05aa9a38a5874b88e8bb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.23491cf85.0.tgz","fileCount":37,"integrity":"sha512-VgPOLUrHSjkGcV3ReyZWDwmAPu425mv5Phx8VEiMtS7dErIyp1SPk+zX+cUNFPJkui81OV8r0noisBYmKk4ECQ==","signatures":[{"sig":"MEUCIQCcsm9MPqDrtbaXoooOzA0A2agC2e5jFWi6lDAluZJqZgIgPwTTnb9K0fyLKc46EnA3RGu/RKwkDpVdSBSah6ATJt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaPCRA9TVsSAnZWagAAt/IP+wQN2oaZr6h13E6Gzk+K\ndDyzSdKsbx+Wi+asOOBBQz59EmVEQ5X1XBOMJjSplaz3bAkTxc0BLy0Yjpyg\nZApU860cFJJ1k9jxcvxyEQABVwsor/jviWK+SPhwSD3FwJ5TIkYBSihAML8V\nhiFS1epPg/z2PLLAeVjs8KDJ870shuu92uQOBdyHBrNTN9H1fKXVGdWbvCRr\nmKXk4f6WRR3ci/nIQe2bLCt3eodxFxkvV/MoKehRBZjmE2JFVkd/rdeKYh1E\nOlQcjWfg38oSrt3q29kYGZ6GoUTfr9C7DAA1Qw3R3J8bcBmpqbZ2xVQrvj9b\nOpfVLgS0FH5Utf9BqrtulBDRCyyrmWR/tTj6CuQ3WYb7JdZ53v54OTgYavOB\nsV+H6EKSVKQ4JiPb9Z9ino7TIkO70CFnGnObkk1YujqvgomKBTo74pphP80p\nJJyVvUA9Aven07+QI3p5JSNi6z1xnNzEePF/WBjF1lusWJ8a34e9fJkhnZXz\n/OPQLbQ/2i/c3C6mgl9VSWkpsn7SwBkuQh8z+9dvz9MYdxdPKxadX11wGX2s\nvZTcNewvlF5bp1s/GfGEZeJ+/ThcyqFkVshnISkMyuMisv67C5dOKB6Uk3xf\nvQH0zQlpc7OC0Hv7fQ7xzDfDrdvSQcXCIdfV1d63Q6WHV+YSV6z6ASn+2aki\nijA1\r\n=dZPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/density":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.23491cf85.0_1605572239440_0.871888023369443","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/icon-button","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.b659d4fc3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae1178a29f4bed9613851794eda4594a5c2e0fc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.b659d4fc3.0.tgz","fileCount":37,"integrity":"sha512-w0kphqD3wBHeObJE1qCfuIkJx1QHKsT41NeTJQBPVV4CB0PUN7I8pugT8D5LRmZm5AY4IqanU0yEFTyVqc3a3A==","signatures":[{"sig":"MEYCIQDKHHutiJ6MQ7q+wx80frdOKuejRNFfo1yONLrCFDScdgIhAIVHYlw1GNahvPFbb5XBpSr24dhBJly+RLSbCqJquMGr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhnCRA9TVsSAnZWagAAAY0QAIy4nALLlk2DphTkmHqG\nXup5hcJj/H2c3TDC1Lbn9UpaG7b8ObseDkdb22ashqqgmm9ZyAXBFpL1gNdu\nV/imCBVvNVYTWWuFWo1oGcvuv5oTILSOWfYPSC2jegTIPlSbbxMfy42caAyF\ndcK2LIvn8IkaDDtfokd1yiZAY+SsyJ2RgNmPYODTj4vPMQ4we4YsB+thh64Q\nT5u/a7PIDMWVibmNCGAugHSsxNYA6O7rwASps6IaVxvlplm42vumWHG7TXyu\nOLeWKMRTZjQXXMlah/16AwQwweb0SIv85QT6falmtE/qLMuoo1VY0xsxX/0i\nA0JitX47GAutXtX0nlksl9eciELjC06SZetCwiv7cc0xgM1Hx4z2M1eMX1vR\n/MliHfE8lB3sUDjLiErmlzHccBXQ/Zng80Dkirvz06KCDJ2r3r3bGVjgameW\nucvg0WXIY03ib9bQTHzBrVPUepSD8iKajBsitICf6OwHwjO1+dPNldbTazwv\nx6QUkgCR8W/Hf0PFUlXT59WE1bug8JsTk61gJzzE2mftZIXkLt7CJJmvyLpL\nlUMEO6NUO0jRcMoVVnv57j5tNR88C9g+NszSnnkuP+Wtwt7UqtQOxLZcF2uX\n0lPGlmvvl57JCaaSIuHcFy/5wSo9bPxPhZEgmM4tEfzbceHQIsPnD6gV0rHG\nrKyQ\r\n=5X0s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/density":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.b659d4fc3.0_1605572710838_0.22250732548581653","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/icon-button","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.d8a3aed67.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba8b9fff1161d7c493004df8df850c8fd0efeb88","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.d8a3aed67.0.tgz","fileCount":37,"integrity":"sha512-k+/pp4Uh1yK0WihwuYwFneKKexFK1BAfssfTW4QWXBIDeRh3mqxewE6KJHbSMS+Pjwocq6NVSMD0AANQ2Lbofw==","signatures":[{"sig":"MEUCIEexIzKNAEhMZdu0rvSuEWzn9M+UrygNEu7mHE1z8xHXAiEA/RnRsIQLIhQn5Monu/odEkKij+nggis7Nct+GZj6Ryc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+viCRA9TVsSAnZWagAAN7sQAJYAZ6hCLElvYxy4QwrC\n6VzUxaYKcjTbV7SGBoJTLTnhgTqpQxmD0JYBtoVwpYAGkAHHZ9sP8kR6yHCb\n225sGp1IpEdqmSapStotyukvjoXAnTi9jPeQx6ij6WI1TiVwkXd2ppcwBMfS\nt4wXEIoZ57Okvb3cPqiE/0Tr6LWD2XhbDUbZlmwWalu64+JTjarkWV2h/qMX\nBxJpJBd3VLsKkJMJwfw49tS5eunuy00dhl5MvvuKI07QCfKpbjqbSjTRWacr\nbU9yQGyJxUyV2kFMXwRrrSGMoWeooVDXgYD/GpEIGrX0XIfCaouPUFh5PGu7\n/gORg4M2MiRNc9dJx9ZT7Rf26Gpg/2binWOBjBQOEGc+pt9ioitwrS9QcdgC\n8hW4UsYvvYoMwGQtjNYxWnpyMIHZepIES/6tr0sGj+716aoiCm2yEMbrzOa5\n7+js2I+C/2LFUxlaxUCQvZ79evynYwMzfd5OyvTaBGHBsRYwc2XvI4FQeLWA\nMypbldhNI0BPpB+k9u9PPhSYrvz2/HyAUHagS3xLMHkPiakYl6UT45f9xE30\nbSYjheAbJxd3E5LTlvd6xU21EY8hqd/n+Ai4MPYl21mljdybN/1UzjWxi1cu\nzyqffkq3QI5W+IqvL98UgTyfDW356y8UNy4+8mwqrFUe+I7BtbT+Lj6rzrk5\nyNnD\r\n=uazN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/density":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.d8a3aed67.0_1605626850206_0.3075889594458254","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/icon-button","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.482ff9091.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63109e691d2422eddcb1c31284fa629c60735202","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.482ff9091.0.tgz","fileCount":37,"integrity":"sha512-bjatm8YSJXaxjF397ufQRFPsZdksUozn6g5B1Dqf0rOgpi7Ra04TUR10eeyA1Sr9PYkS5vCeEI2tgkpqzlib4Q==","signatures":[{"sig":"MEUCIA3OKGBQDt/PfPOB2rsXuXYu/Jmr23wf7QqFB4zn8L2jAiEAlPglwWTKqOfQ+zZp9G4PBj3Ykr3tOsGD6UqZLbrDSEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8wCRA9TVsSAnZWagAAHmMP/An5Z8tePHWrvVZURynw\nypR6sG8RE6kRapBsV2mNjfAM/navcS8/FLy9azwlLCuAy8LZN9dJkukuKNae\naJvrV6HddatylzcRtZwERCGFl9xM4ZRj3mpGZeMEMXzpo4ht2clK+La91eAc\n/CoZu6aKnRHIoVy0NweoGNavhgDLpsixX3i57EA2TRk824Goha25HHwlsb9j\ngA4Qxecllni1SgWRNIzhjeNpBB2DyZULUGzYdJbIyNh8f3iJ4UI/3xeL+KpF\nT9XlSyvIm8mU5tZkyHQ/H0RcZQKVmaQ10lqK/LbhQaRp73OlNHSTGW1m5O33\n9kymoDhFqS4vUrQKf+aQF42r0kJvTxhGumBiiriERR+aVbpYvCz5hnFsPKPV\nwQ+MpJ6MT62OM3gNBF7tNm/yl7LCZRYuJdBj6nOXUCdRxniDEfRZBtvMzLTp\n3wuHXyFW4Z4XWVVreQ5YcGrWDywvxIuRdRqaF43SUs9FPlUq94R9bt+l0xrv\n2ZW32ohajLU9IMOeWDhW6cOw0abh5l7xoZKaW5bTq+P2UyElete9Sd914yZq\n2DJlmYEUELyRUrpuqnN3uULOW/10LdMCOpLja3TUMDXmsrHhSYM/mKjlAqTe\nIgI8IfczLE1IJH4ry/4umDce6nT0NDry0LA0SrkLmBLtIBSiXaRoFbd8eknr\noA/k\r\n=SrqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/density":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.482ff9091.0_1605635888241_0.8387445922840944","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/icon-button","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.99cfb6bd5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cf25e2c9053e22d13f1bd53b07850228bf5be9d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":37,"integrity":"sha512-4eOHH0v5ImhOTNHB+Q/uVmSse3ltJZr5osLkJBMawkyK6Ky9c6nIgE88DKp/0r0YeIkdMeYLbRulXQwkiP8TVA==","signatures":[{"sig":"MEUCIAymQQpjwoQey+HmjcXLu/cHuZ+SOSpl87RAFl8erVQaAiEAjZM7ELtZ/j/MlFGUWOK7+ror8HhHXlov+e6CkVB1w6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWtvCRA9TVsSAnZWagAAW1wQAI+sjAjN7+mlKIJv8h1g\nXTqOFNbb0UApzt/1r2TxFvEqMhBy45/sk/89NDzwjgVO2SY2AZmXj2QN6d3d\nkS7QjpHvTvVQaD37B5trn6V05BClg2tzqnU1vl+1cYmdvDWA6UP5VHTihWCR\n2hJ63vO3rCUTs3q3L/hzd5YpDfeRqeCvXTGWMxvTT+dLNTOGcRMT+pzDqSgZ\nzsat3rWPdME/0t6fYTlEgrmZde2EUlwKQBKsijiXCi1xVwicCcx0KQte4B09\n4TokCY5M3F3zJuiP688lEDJdR4oIAa1rXTb/cEgGtslCPiLhIEknOwGSdoMH\n1JC03VDBJrHlrSKEnWlWI2m1KUgiGXcM8C00GjBhXbfpzQBSFs1XkeBxs3mb\nOZY2vE/C9i4rF5rzTfI/33CNDbEgfZtoz9Mf52rV+d1MwVhUFFkwklj6MMZC\n8KZf5NFh/pq2cPJBKhvWGby22H/XxhuaZddpkdVgKwxOL0fEef3PcIhp3mGj\nY+eHiZKQsy9HblSFkut2/DgfAjBkaSvzCIOaTXW0iqIEKE6ZXtERWfHdKU8A\npq1EQ1qFLoNxXsf0x79QJxY284Tg8UFasTfWAkviRjfw8P9t0hmS9HYhD3gN\ntoLmfY4hIBsZ2rtUH4LvU6t8s4UNOd7ZgeoIjON/WC5S2qlKV95dt7tKxQss\nnmp+\r\n=PqjQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/density":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.99cfb6bd5.0_1605725038708_0.07833935309709572","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/icon-button","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.b98d15d90.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04e36c98acf4f355ee8cea8ac9b4bc85da061cb0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.b98d15d90.0.tgz","fileCount":37,"integrity":"sha512-t2cNpE9fFyCehP3K9yxDKDsjfbTOlihZwKiamq+GI9so0UDopG8oj7CrmvpUce6jiCJ92elQg+LuTw5PsuOFag==","signatures":[{"sig":"MEYCIQCYXXYs6L6ejKKv8l/Nk72YzPenrkEmS16Z6QIzo920JAIhAMwHbnxiz2fb2xJIwUliYY+W8VH9iRexswrXqoJj8Vs/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGPCRA9TVsSAnZWagAAEiUP/0naf06Lpi3A0M6jJ0mf\nUw39Xa5eiuMc6nnsaAaHxKZ0it4UPPHJebACGkmE03yBMbIe7tHSqAsVR2zN\ne3oIQr9ENRcNPYEuQdr2s+P6VmMsg4Eo2Y8nUjscCeQVwBl6oD6HnfQarI1x\nC+7YtOeVSVPViBOhyr60wrTnhQS6bcfW3atZ8R+41gy1IRIiT8XozcG/baCH\n5t70bIDIivYaN+YvJX0DTLKUfYEyPOs4vRpONt6p2mSD5KpI+LOt0PQ5N/bb\ndSdQuzACST3vV8w63tGDnIgcjOiuCfgd0cEsjWiXSpK5SaI813NlQ69p5Vby\nfaZRNR4SEt/u/uNa7imvqeto6GWW8iHOjgPqYHErkD4bUFm4svouHqzD/vow\n3BSojmXPHC5NoF0GhuZeLx7eF7bhxIxcD18QlIOmstWURivYbixcSczN9zfG\nwDCX9MwnE05H/8KvS9W/b/B4SBMONHdh1cGOHTnvVR3wjRcwWelckk23Qdwm\n/fkEWRV6H7irBLV1uSEm1e/UCuVXx14zjtrrVsTaqNiLb7Ccf/BR2jluZsNk\n45Pi6VoGM6KmzdIfO1j2YdaTnXxPIPmCXLiKbmJHopdh7IW+xXbX+9xabEzq\nAC3Vt/EdQupYhLLqKDjim4zBrgqCLPSOGKS55ICndwng/LXHYDAkYKWh6N2H\nNfd9\r\n=LKfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/density":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.b98d15d90.0_1605738894971_0.5847797890616919","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/icon-button","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.30c11bfc2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fbf0e69ee187343569159a256396957bcf63799","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.30c11bfc2.0.tgz","fileCount":37,"integrity":"sha512-6aEycS3UQtG8j2hOYM0n9Nu9mQ7lliuHdJwY/RraDTBhArlMAcGa+vkZTg+oF9aQU4/o90brqzjep0v2M/p/yA==","signatures":[{"sig":"MEQCIHKocZbm7oln/JWgrTYkDuumuQOpYInX4n35sM3D7sgPAiBsNRGfPEoYJL6XEEUquyqRL+utrI6j9a49Jm7X5VNbfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmrCRA9TVsSAnZWagAAexEP/iLlLxJFYfMcyY3HBOpb\nqYcQIRCS776BURZfHJx3C3B62moacCnwcjg++tSxZNOpVtg7qw7FIl7qGZNG\nPEcyU8zOhCtuLP+ZssCu8McbtR3Vq+4kPy1dMJaho+pm3VjwZ9pwjAEnHNZT\nyG+USHYuamvZukP00Mf8BnuoIU4uKX8D8Gw9Rzt9R/CV6YscdjQHYx/9HFqE\nbI4SfP6zBWEUU46K1G7TtHgC2b9gVtw15m7rIIiAPZ4pKgp/f4BWoP+7divP\nM+U/vLONxIoyXPdNBQmLdawiPKO7PI/qIQGWaRiegsYKMo6534S4Pn+eaE75\nv7Oln+pGZ98BIZc2G0VcRFHN9Ab2DFzLAyGpMC/eT6vf07dK1xriQ6HLSEoJ\njJJOYSoWlFzNioElro+eE/6FOewaWgZDpgrWip33aM5ysdtC29La8QAJicr0\nRM8ztSfwaZIf/PtaXr2P4SSq3o5nlqgJWsr64vfXZK7QyJlQUr0bJBz7JNj1\nLNS4xSiY+2f39dXP7xhymTv8nrBw1k6bnC5um2mdjK7h64oPuSPjxs7WRMj4\n4K1sSWNKrQwd66trAbDa12rT+ocXJk5BFYWEdn5lvf0QAyBH1MZ/zMMhF46a\nXC3Phu/TveadpRNA+ISUbTw+S4DxJFzf4BLXZoQ/nlaWr3FKwS+XXytmLzi6\nLgze\r\n=ntLb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/density":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.30c11bfc2.0_1605749162643_0.6371629925361726","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/icon-button","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.1b731d51b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc2137073a7775ae27dd040f2059e90309dd279","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.1b731d51b.0.tgz","fileCount":37,"integrity":"sha512-FD13EfJXqRsYUiNbwkhekTDpEWqkBHvE3O0qE6KiZ96LzXCtkjw9UQMqcIMxWKYgNmLVhfE5aIXenqrOeue/Ow==","signatures":[{"sig":"MEYCIQDGweJVSO+c5/3HZaVW8Y5KpSKvjwEDnoo39bi5k1YRnQIhAKOsCXH5NYFf4+sfYmaGrkVKzPNIaPYrGrPlR8JHu0S7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7sCRA9TVsSAnZWagAAoJgP/jU/xVGMBGvAUf++HUtj\nvnGZXsvMeU9hbgJMM3QromAEyHTp3M25I1UoFOpYxeGayRSxSajz/SWdEg6g\n9gaiaeKYLBqCLagCQ2PmudQ8p8NWrsZWZ7M4yDP13gVNsOTT34skmWuqC9cD\nnjSEr92nD3mP1JYtQgKmT8rUVSqtV54xu36dgZvDClGfVDDJVZ+rcC9XONvB\n99gXmxfk8NC5BlmfLOeSJP66sXX4kUnMXPCBHLcZIp/BqH48K8Dj39p+YXlN\nUTt3KcKCWYI4mo9neKqMBveW8ZZ5IOUBUxUbccOFhuvyrGGoJjZC91p3Lyrv\nRiVDMhZcm/Zh2zTpFDZXjvjffncY2fuKbNQMxHqmGFfYWtF+d97IblSsVtlT\n4YzXOXCJF+4Kbk6BuzzlMJ4iExwls4TG2L2ouxlmaj2BGgfU244cK/5p2hN4\nvcaunoID1cZfdGBKxFs4cEWrdhy3URea60eRC33D6OcpBmt0AEhDV4sF9tOT\n6MvdanyhBWZ/DQJXvEUYJTCm1F7dJk9oD6SHFRwf9gPTPXGHJEV7fyA02Aia\nXk/kEkvH2XxZB5iglxqZvdcHtuCoR86249PpdteV8cbo0lJ2VQbRrEoDIcII\nmr0VR4TTNTOSvEz5/QdI8W/iuYJV2s/JTYzyfOtjKEhrmS7BghNFbYBQwds9\n3ocx\r\n=VgTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/density":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.1b731d51b.0_1605811948266_0.6487671130764212","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/icon-button","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.4ae94ff78.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"951895f9741aafdc45bbbfee10494ae43e44a512","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.4ae94ff78.0.tgz","fileCount":37,"integrity":"sha512-0ld1qQ0vYzfuDDmCDGeeIjSKDCWGebVsBtdvYUjbZ6eriN8S9k/G2up62UER1E7KbsMYNg2HOtVG2LxbkE97AA==","signatures":[{"sig":"MEYCIQCbNmTGkbUhZY05jBpxC/zlT9Wph/wl3t1O1zmIU08UAQIhAK+LXNB+6IuQ0VFuFRPyyEQhqhjQth9gBhZPm2e3ltRl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+YCRA9TVsSAnZWagAAH+gP/10xe4FZlbn8hP5QxOOw\nQvSSfree7yijxGbwvHkqSZhT3WRXLlWJ+WIR0Vqn5I5Btx+K7YpMSRAxZiSX\nbaYWafTYamnQ+ayQPN6wAVn5Zllne7fDDppeqxlwqPcNAwdAV0OMUxxGn6K2\nyzbvlIpUa/5I/2ImcFVDSjatgVfa0FvTi0oTLQh9wbLDyAgXGUeQauhTAk2Y\n5GpwOMEC6u5dSGLq/QJPEOhZ5LNP4zCJll9lpUmUo8Klf7eZ5vzxrN6ji3M5\nxk/NoZyuCgV7zuWw4McvuVmGtS1K4BBROt///WVfwRRZM3s9NvYlDkA+jAl+\nXxxhLw5WqeJnWLtZI411cjTJPsct/BarEEajs2J+Sfdm96zJHqJGZ/R4+EXe\nZupkpvJPkXaY1H4mHtFm1emDXjKpNUmaV+4W9kSdzYo8SQpnkM2+HlXdrTaW\nF78AzbwqrK6b6WRTqIulwbdC0pqnyqLZsb53EztG7+y7nSqPQNfPReylcGQr\nl3qkOe2b6EGNFXjE/IS41A6upFzaG/OeKA3aQyvjhsiw8A4jfeu1FxJGRSwE\nCq9XhFJ7Dff8oDCA9Rq7CPwv2GrrQVXrYgVaBtkdPdvn5slFjI+szZrQRRtY\nCeWYMLR7uXzZIIw1UC6gJTJt45bv3GTGefw7MxL2tDkIbMXFxZ1d98xy1xoH\nzkGR\r\n=35eO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/density":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.4ae94ff78.0_1605812119565_0.6394302290400373","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/icon-button","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.7ad038e1d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a2290dd88ae48bb65800acd0f032f90ac5d7f4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.7ad038e1d.0.tgz","fileCount":37,"integrity":"sha512-QSB7R0mkOwmQzWfZiQNCLwISd3a2cRVxIRdQFBFKpwme5s5lo8YhU+LVTPas2nmjvhpuaYGvSWa7VaMyHME90Q==","signatures":[{"sig":"MEUCIHNZXjMKRbDV+Bke0/5NPYCSjInyAVYXYi2SHiFlvf6JAiEA02sJoMOZJLidHSSY7gv4gE5fViQUJNLjQ0ItCeGJYfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUECRA9TVsSAnZWagAAt7IP/RJnyIQzGuwOpw/MOirf\njwyXsiUkoJ+gtToO2ZNfPrqZfkOKuyZEchzA+Wb/OlwSOXm2y4Svy6MVkLdo\nV0CbHH4RtWvFS2+eAN2TG1HXXI2ne+nriZRI1mrgzNt8bGS/W62luhJ2A3y4\nStdmoZmXe4MaUZPPPVHnesozAFZuDFbBmuSkr8IQsB5HPGj1Z0l11M/dhULp\nPp6zlQX3Pz/WSfzuXLTTUN94Dk7twzLEN+oRZ2TXu7g+whu/K5cGbjRQyIH5\n/G/ztrubOR/IU6fc8DtFEM8nfZsfYYzhuM+BzhJkFp9BRbmBl/ApXzL2v+LP\nast8cXNSLPatzq93fL+If6vAD5sid3aIoQdZ0rKLyAWFeepfcrjS+ahWhfEw\noPyKokoEVBg/cCk94WhbddiWFn7M6+UIyp6uwilx5jl2VG7wX/O7dyuTrO7l\nfv1vzq1iBB6W0nhwa0InMUOar9x3w0PSgxgqcKF7jAUxyuVlRjqgtn+rEBKL\nYby9iaN4s/oRNBkGQLxqJJ7/WafbKn3XFm8kdp8lNVYJ3GfOeGW22MHtg+k0\nBQPFy636U5uAYSFtCAIkcsSfdO29vsFEHgHH5EIcKDd4pPKk0xX1CklrYK8n\nZZSqD0acPCUjbWep6u1pYb9984z5njyERK0mXHHl4wRaSZAwIOKcFrWL2AYF\nyfFv\r\n=Iw8b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/density":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.7ad038e1d.0_1605813507810_0.7810943107097812","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/icon-button","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.a41527604.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b250e1ed0146d6134efbcbb237a30b1add1cb0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.a41527604.0.tgz","fileCount":37,"integrity":"sha512-9oJUUtJoql2/qgYYNerNi4jvjxgznqjG2QJ1kJAWhDPRsAQP1X5oLCytEiaYQsfoarwQVWKZ/xGcI0fyWlX90Q==","signatures":[{"sig":"MEYCIQDKaY8O5NN9SPbvYpHeGUeyBvsxhTR0/39/sleDwpeFqAIhAPufvJ2fjEJDIJq5FGmxStMQBb+ol9sEmmSWGGtyfN0G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7MCRA9TVsSAnZWagAAseYP/i3j4BdWXdWBneQDO9YF\n2Q4R785DpPHYUmFKSnT4Xn4AsEO+a+xebt3aR0ank4WZoWqvDZr3KKkJQWPA\nvaw6TleUVn834qGR4U7WHUyKGiVX8x0PVH6t5aNiIde8VE0ndlbnSxn3I5ZQ\n5UYzuT1Tkoak0X6DQFF7eGNQd0aAxxaiN3XvbPpMuOQBTzFxuN/xzibT3yoN\nvS3dqF+t/gubZ25tJY/RUGh5KzYxFUQmAxg43TwN4QtmY+je8ux+eBSx7yji\n+kzihiVsX26crQ+NR3MnKLEJvsGDtqwhpSxw1vA++2SS03unYuhWLj7BR0ty\nqhkhbu2yKa1VGUg5JzUzZJk3IaVODcW5lsqzALXzNFRop+VJ+GNwCC4YjpdO\nRAuCDjuFDKfSCz2px+jFxf1ekPqD0UJC0YZUY1pLdb5jyNxjR5trtr+rDqSU\nR8dQyr4OlepWvIl7IE701vqbAMkWbx+rR3CRrZtfZgZ6lpqlznNf25BJympu\nFkC7C4RYZD33rt33R9dVca/fSAaHj3W5gHkRSfPDDskzh02RhuFN2Lbnsl08\ndTbHqwlvDCXvqxSC2i21T3S9wQL3gSue5Neel6DOeXK+36rtD/AX25msQHoe\na/5je+g6jMx++x0O+/zcCTXxuh4E4oGORozKfaVyoh5Nrg71pW46wWLHatDD\nIrTA\r\n=6tE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/density":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.a41527604.0_1605816012137_0.9026819444233172","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/icon-button","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.7b0e2b377.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cbd0c393267f133f9525df55b8f214c412611a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.7b0e2b377.0.tgz","fileCount":37,"integrity":"sha512-UipcIU4psjQkdaiC0NvdmE/hT7tTYyfyo17hfBjwlYnYEKi0lHLYDPoxU1q8rQMV+Gf9NJ9cM/uXe9YnIHBMTA==","signatures":[{"sig":"MEUCIA7ol82wpZWavzq+WC2E0g3H01XML1OIB7b017ikZg87AiEAm3fyPEtIpFq2qKiHp8PU0dak2afLatLxm2dCy3B+zsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElqCRA9TVsSAnZWagAAr5UQAJvz2EAysVJok5JJ1h/H\nHVcYlEdsCukeJE3eV1GM0v85Q5NLqGwyvYQKIbc/jB/HYWeAqZ3D4UiK+9ri\nwEIRqIhSWY/VO3XhBCMW7E775mDkv7Xu/bjudcP9VSQFDpnBYEvoPP3I18h6\ntbX1KPKEhxtCBeIJ77Bg47uG2v6oSouWoR3PAhqqWjX6H9jvOqODc5ZXHcZA\nYEhVITDDaNy/P2oCPbVfIoSCvS2olT/eKMPcnmMBk3QeNI4MssJ4THSNh7rQ\nulz5X2ZzPcHMfDPpmB00U+niBRBFT8un6r1OTnNrzRmF7LTPirU5mWyMvAOS\ncBiiSsWNyD1uTwJFfBBUNynZIsJrgDFLVWBv/8m6P4k/99NAbeE+QnizsoJ0\nJGYA6Hj7Ipetxhvc2ay0cpwqtzNrRYIawtBAL9YtUEhU9hEd1oHKgqzZib1s\nmtAjZD/GJ3CM8pbbj3Z/btHiEw4csNPAQ7ZXWeiNdKLYMw4pXMl8MiBSRMNW\np4Pvizv4ojhw00b1e80IAcdBhqFJMHLNA3fXIWj0YVkGSCZjpEh+/h4g/4w6\nrnfifVBT+PAc9HzKdDni1b2ekSFhfo/SYB57EgPDv0II6vQLV7jhBWw2tLzA\nGFGm4PDsJXtLdBGDDc340yQ+H0D7mygLDQAHaXbVinVUo5Ul1pMFjkWZAf1B\nQUvk\r\n=LM2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/density":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.7b0e2b377.0_1605912937744_0.9140897451351737","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/icon-button","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.c927a5d05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"275be6c837d27545981fb4db7e45bf30e35d58cb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.c927a5d05.0.tgz","fileCount":37,"integrity":"sha512-X+AZ3oURUU1QlXin0yIUH4z3lSXD4tcfBIUefNQqcRLDzDTFDkjQvV4/+Gvdz6RU+mGZ0lPtwziwoFxix4B3cQ==","signatures":[{"sig":"MEQCID8Jl8WoR3IGtPb0gg/MejOH/fDThWUBOPkbCSDXv5ZnAiBTATEou+4bObPpRlhHI6Isim1rOom/fczKteGJo7Cwfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHTCRA9TVsSAnZWagAAmyoQAJDDmS8KvvL67JNN0oOy\naMn+RiN/paR86HuUGp9bjyBa0VEZGrMlfrvU/8Pte8YaFNn7YpZxlvMle21T\ns+N23kbC9Xjh8Nsa0NdQheGuwBl2l/Ti7MZEOvhJIJYLJNIoHMPhPgbRz86/\n9yd3ZFB1/1UQMqW2lxR6SFFw28K6rs8hG2eFAGLI6suxOA0qq2XHTfsKePfM\nY22yVTUp+9Ev5NjTY5GMBqqSjGmEFrR2KcpHq0/lhT82Y+3PCF8JlDlZ/fzw\nIIE+ha2zKRn6xIQ4jNav6dAmrsHiB+mX3vDGB6LeRM4e0PXT4AKA7+U+sxYm\nKUPixVDoHm8/QTR68ywGEq4n03r2mUIHi8ARBEdAmgbdHNJYk9CH4KkKLkbW\nZKNRbEEev/+L6REnl6ahcIFuq9M8+Eq6kNQmUfG2Q7yl/fuR2dpQzOOEaslW\npHpQrtMaLVlzoJHgP1rkeiHh08BpEwhl1exEKZgUK3eA9/8urBNdD6SIzJva\nn2noNDnaP1Zo5+J/VM9parPWGsNuI2eK/iS6GSrdFn59Rt1xg/jJ62NU3MKF\nsL7c4ItSk/4dwmLqmhBzc+mH+O0wWnxqGwBdEWxpRqJn1J4Q37QJJfBD6itC\nLQhyB+Xt+A+WMWLaV30/TQ2sH2ojum8unJ/1oRNG+4q4KXSQzUy65vto83TF\nbW16\r\n=vMNa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/density":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.c927a5d05.0_1606160850742_0.24817153948689863","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/icon-button","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.b349b5185.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3243748660180dae9a2c4fb0a4f503c1a78ce52","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.b349b5185.0.tgz","fileCount":37,"integrity":"sha512-oaPOlZYj8PA9WlHwdnwO0F8m8aKLSYYmmw55et/Va0O03UoTrjT7+boi0nTqWB2q87dhvoiRBBZBMlLAKSkD/g==","signatures":[{"sig":"MEUCIFPviQOjW2BrBMVrlMEZQ/5XLn4X1TL74xVMMraloKcfAiEAumdCFKo9Xv0sFvnTPGvkDrwJXvUkaQ97SIDWzhZQpRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4lCRA9TVsSAnZWagAACGoP/2fAScrLFB50mMQaoqi4\nKjQ/z7KzeKVzob4nXxFqIYa9hNTWGb+yJ5aJJJQW1e5v3EPvni66cPBrw7QG\nPdsblYcS5pR9lMyQPGurx7fgiAMsX8mb4bswOC/NAg6M3WP8oCfT9ETOwnwo\nlQjRGhxKtLsyJqJhmX1B3Zo1BiR9W/hwEuK/fW0yxgB+41+nBaQ1QWJZkmIk\n6UUPEPdERrrAEkRh4Zm2+3BUUiJvhsJpCgl2vTfPGVLFZX96OcifD+oH9npo\nvTltLz+UfLUP9m3yqmR9C29zaPhb4l7rJhR9uOKaVTno/6YtkYLqkcTwyPuS\nQOUKOAkKTf+ivISlLI5ZB4Eel6hf2UZMz3inlXXu2R2TYbpJATSugIUBQXsL\ncHJ1afx3sfXUQwQhEEyp/HXcP3hmSpfVxHsUv4Xcjl8yGpo+GK9kDekxLWQf\ngMG01Hh+2IVWUBph6NmmkCS2fKgZH7kR6ynnpqf9fm5LLaI0CZfxkdOY4r9d\nBtinaktE1bW2Q2KhfkmWR6VVDO2FU54VTz1Dk6Fd8qu6gstcUQtKHZy/Fayd\n1qw2F7Hbcxcb18K9sIkm9T4qX/IlkEOHHwsE69oqtPoeXy03d2CHrZYtIKfV\npxIPyQlROeSFE4MPAxxA+yh88LgKgr5+WqTpS0+TNWDoFbbdJj36p1cjn/aj\nPLLL\r\n=WEFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/density":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.b349b5185.0_1606237732709_0.17419643560192188","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/icon-button","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.9083b7d61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daa2150546f7c92895f90eb4b181c03f5bc7dd33","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.9083b7d61.0.tgz","fileCount":37,"integrity":"sha512-jy7ByWiUV1IkwPy/pjlODI+eZ72q3aP/6cmXirfTEIeJJRQUtGno0XY6IwHUOGIqx6uDwHeLk35oPeRoRUASgQ==","signatures":[{"sig":"MEUCIQCFWz7nEZw1N3Jez9X6MkxNopVMWXsJEWpi3bLz+WeRUAIgPWYQ9yteRMfmoTPt2JGrbOGgJ6jRR5KCVz2hnzVpRJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXf5CRA9TVsSAnZWagAAkp4P/j0vhKxhKwfmYjn5ANvu\nRcTbTjuHg7YRFndViZ3bW5srQr/lJ+aGbSYNjn6ZnH/32hGQ9y4Ss4Wh4PA2\nH6+r4LGMtPNq+QImooc29V3ZxdJfr+ei2PNZuFPsU9SU4VRTYPo24UUiCCFL\nPyRTbozyHWp9BHKMbkq6xc+Y5PUl4Hu8J6HoV8l2vuHTSW4yB+3N1lW3plll\nseLOO0RsXIeZKFBAxp62p0cVKV8BMvPy0Y4/sha/Ch+4JWM0OJwnywRHgL3/\nkg2J6dT0OFYzjzRt8IRl0+PKgZVLAD0qJxBcJH9+PoNXro5fa7izVm7biQV/\nhKBgNp83GXK1ZZ61zXrKh1p0MI9vpTX5PlapJdm0OWabqSgxmh2DGk8/9Wqo\neq2oz3QT6S6tZ4Ljz9AqJihf0hmSZqHx7+X1L3TeH7RvQ8aYkXvPDKto55eZ\nvgIMKdo5yj7cTZtqnDuDK6eq8LGvyO0+UAd22qK7aIQzMPNgEK1YKDRxO/pC\nqMvEs4H2PZncySPQ7NTjimSLChMU0hx0Js6ZDlGFS1+gDrbhIEE01HOnq2r9\nxMgj8TgNjU9FlYmHl4ph+g6EXhxfPt0UWqTriKC8JPQkfHaStIewak0yWdJP\nwmjejy6cuWxq8CiNfntwVOTZYBYWF7IlsGwLydju7f++jcMfWjM8Rd8cqQgm\neEo0\r\n=exeM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/density":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.9083b7d61.0_1606252537560_0.957360121913349","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/icon-button","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.eff7b46ac.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"933e38437f057f917cb893d79651fdc87e068334","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.eff7b46ac.0.tgz","fileCount":37,"integrity":"sha512-8UKf7l5WZapm0x2ed1L3YXNBBG+fvB/JK08GDKa4rDg0q94YrwOc26cITf2RTCwx1TFodx4YggXwT63YAWrTfw==","signatures":[{"sig":"MEUCIQCdDHYZcZukF5Otq0BHlzAVj0Fox/ZQc/AxU+Z1FNKkIwIgeitP0JZRhVfKNH6JmmtEh5pX3/OgcUNQHRsUR6YubnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZe4CRA9TVsSAnZWagAA/AAP/2Qwes/YrcKl5BfsDBmR\nL85gCKx+d3e3F2NGxUlQ7a0qjp3gm90wSFfQlEuv59lQnik1Gc863da7Ipyj\n643pL6aGHmg/N88hj15Z/dzy0EPbNnxujmsORHhEAlhJHGvUR7ZqnSJ9OQEc\n2QA3RWbEtYM3Fe1i3n4R6/qIGiJlqis5V5Zfol/QxPGuuFIIVcQN6+bVsDXH\n5X7nMOGb9v9uiUtMAazEypqOKh5Jn/6R1VlvQM6oT+FsFj1vU/ZiVy3XgHYQ\nLsUG8LnqlsZKbY9KjphhwK/psVLYmiMGqScUjQuO0TZR5kmA6E6SSrdX6we6\n5B5tO1KuL2ZHbZlaTY6yG/PozC5Ug8JTNv+PUf1tQT5GlWZ3tztgwiAV9czV\nXJliFd+2UGwcMLJyANPQLdCXL+aJPdXx8jWFA8KLrve/EZTwPNUpSK2A0c6x\n6kulBqCYMM7MTwChqRY30H2xMfNTqcMQl9+jhcjkWExz7wQOYeiRII1fo+Mh\nk21OTyc3QQcWL65Hn2kvx6+t8tIghC2w0FSIoPBTteuo1+qeZv4K7bNIOZSZ\n56otXenEkd6GnLeJujigPwWB5vJ0ri1VygYWAKDpBSJr/aNr62wIodZyTXLW\nxsre8Ffn1nthLAB5PuoVAIsfJQpwD5nrDre7Acbp4mJHYeQs84UMCTAhluNW\nxXyP\r\n=mxNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/density":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.eff7b46ac.0_1606260663812_0.4257175874464405","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/icon-button","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.ae27b44b0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b1586d9e2b351c03e461be2548fa44ca42fb06","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.ae27b44b0.0.tgz","fileCount":37,"integrity":"sha512-9yqRgn8nukiTRcLveBwSMqcQNdZzjd3cB+M9UWkNTyQzwptOLT/LRM1c871XqKQNaTSnpTPRjH/z4gewednyow==","signatures":[{"sig":"MEQCIGAOmcLfV7DS2U+Qo/4UW1md/mfGxwyN31wLQE7bwdIRAiB1Z52qIJGpv3U6cbrxRaaHzSjsFdn1jLKBLGNR7LX/+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnk1CRA9TVsSAnZWagAAMqIP/2535kh6L87bBouoxpQ/\nNF506SFw83ch5H+nJF0iIfSVeFidqkyA7MZDUlRxnv0iX7lRiKsRzxlRUUVJ\nhAWgjx3eWR5VlkNQks4zwx/APRllIApCg3qvOxIczMm+xvryC1qsmz+N3zHr\nAAr723ZbCKdxgBBzQB0SHZerB6J4+nGRcIiMtn1441PjX0aUxSp43VgxxvYc\njiHAGDX87ZpljPsxCs1LhEkJ88p/OADpSbTOKZ4sP5MNvMXTcQxOHleL2Chg\nBFeorz145k4saao5J6GLU+Ib+td4VeGyWRquVUt3jbws1gqk1qfLygSRrmjR\nAUBcZFXna1OxRLrUHrAs+nS7OescNbRsE8hbM1L0cj2cc6R7PPO8wicBss7a\nsrtdcKzGcL1plTPayowB2+OvNbjM/o7KgCb67bhRJxZd36+abPZpQpLjz+7S\nxrgwoz9Ux8yAOEZKocue7K+AskaS0zcwDBEuwN7HRYdyFuXQQlsrsD1eEJjs\no4W/v27UI9gD4rYZvB02z8DvWKBkCHidatz3YwnDRrSbwIl9IoF53ECYTHbc\nVZcaax2FJY8SuFq9K+RhRUSHER4SPlJ1N0tHur7pHrDlE/8qG2EdPhfd83LZ\nqaNBCTo7zHDeQZZlwC5tvNr0qiCGEN8KGiS8jDCS4SldIVbWQqCnPa1B1atD\nHi3H\r\n=eyYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/density":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.ae27b44b0.0_1606318388757_0.30556553083573035","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/icon-button","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.2fbba2554.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b48ffc459f292362582dacf788aacbba5ba5221","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.2fbba2554.0.tgz","fileCount":37,"integrity":"sha512-mv2S1nc6xCtQL89gAGdLBkBmf5xB35fFMWj3YEosQinImfLtxT2vlvx5PFqaU3Psv79agueLFaadMMFadMZQ7Q==","signatures":[{"sig":"MEUCICASO1210UZPy0DBOl8tOFFpgXSGeGKao02Nq+OWQxTRAiEA9qy9YK8Ve2630q7rkaxWM/46RN83reOQEjnEbUxhl0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6GCRA9TVsSAnZWagAAuzIP/iRMoYvFOd6QsftlLYKs\nl9QduCzXeaUFaEcWpE+bpzdp0ayYoeYebqDdJzUHqhnDVKcJImdEym0j4zhm\ngdj6rFJEo+4ANcoBxSV8HinDxdM1AOtU3McMhvVIV4gbkn3x/EpvsxzQ/i5o\neG17hEeccp57FPiGzgQZ1LwC0HpAyMYTaUaktWWb5a7KfrUiXYuhmMx0KmyA\nb1aPPTCyWwbd6yGwh6RA/AmzD123i2epjFfOkNnp/IGenfNQMyvJQCoDKv+U\n1MirtWKFQzulC93To4nojMDeVrqsenr/63La+L+BaGOSdNGH+AF+t1vvQNxx\n0umvzmPkqRV2i2irXrnQse6jqKooFQqk7KVAhBrpAcl31zQTPUfTphlSGMh7\nQzr4DJdAZjSc/4qbDcRwPqzbQK7lA/V/+8IwIw+rq/bOi8G3qAd3fHv60bPY\nOsv6EQ8szm69aHy/th+ShOJYNMvErODWThUHmTniPml3R8MCMkxRdei4hSQC\nWj75ljHOUok+hGO1YAA/arBDJgRtI17mW0bauUpb2bEXLAqzAzrMEQ8cZjXZ\ns4/l5k/43YuhJA0kuJBzjS4lRM8B6DRN4KmnaiztT7LD8jyoKUw//PZPL2bZ\nuNVpi2FUZ3nNVsY6s9t8Oo1e0bEzhjiU1enDFY/oIsnzf1pyJUF5VXR5X3F2\nrood\r\n=2qq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/density":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.2fbba2554.0_1606758022466_0.6378181192299504","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/icon-button","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.6d8574fe1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"640dda337f0ce18fbe8bdf295178a954b3dead99","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.6d8574fe1.0.tgz","fileCount":37,"integrity":"sha512-4d2iE8x12ewL3L/YT7LtHzF2mkFqFdot/rQHoO4Xzc9nNtmyky0pJMLv1bwV00WtxaT7jhhxQV+5/4vxBbJN3g==","signatures":[{"sig":"MEUCIHoTIXj3hJKfeMUKt7k7MCcaSe7ComUwThSmJpgyMAMYAiEAl5BBYJHTqEnvgsXpEqQsel3wy8dbMYzftjBheqqc+Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEcCRA9TVsSAnZWagAA68UP+wYdODLmnWRC56Rf8716\nFtJofBJsw1s2O1PBZ2nRckJaSvBQvEV37cBmyKuFO8PrblfVGTyJeTiYPzmm\nDhnWaR0EJ0OiTJMWoz6nuD9gmP8BGKnbLriT+xZA0qvUOqoteN+GJ4kIEGz8\nXNDpFlMToccWwIMKGGmZU/E5xfHkPETeoaofsAbUqLGfVE6hKURnLi+CEJsQ\nT6XoZDs7Mu+HvDvZbPYf5DaB40CoJ/9r1Vc3qHQe6ThRI0O3zsCApo13uyCh\nVOdDca+o01cSSO7dvVhF0CHIdgEB1jxaIMqbrM7nja2BRcmoxqBXhgQjWCmp\nFegvijTVDXms4O66IM/Qn2T2c/WWb/UE6NWANZ5jjbue8TBpQyq2PvtR/o1s\nVWBfmAG+zoMEgnNJRQ7w9Rm1sCPYtuXFbPHKIoTkjGJu6PLh6uMcSH0xztzP\ntjit4+MUl8DypexbIpAcdzHdvJUXKmtGtMuOkpifV8yavs+sRUfFmpnWD1j1\n+Nux7ll8KJIMr5UnVi/Vj8IrckAMO/v+K+rEskRDd0bLFg7B2sBH6y1o7PBL\nvSCeyis8xv+e1/ECGE4gNN6Ra9qntiaPQqAi577QE75oc9qK+IowOK+pJk/M\ni0tVPQK3SZ6EU3i+zcWbx0i4EO4rTTIZsMOZaldL+V+6n8sjsJlFdmcEXRq5\nRaz1\r\n=ILxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/density":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.6d8574fe1.0_1606758684405_0.005133729259654052","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/icon-button","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.fd22355f7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57c8d8de86362a85f191c86ceac3f4284626abb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.fd22355f7.0.tgz","fileCount":37,"integrity":"sha512-ypiH8QAdKuy8dYGsv1t8w/tDjPAT85F1UUrpXQOa0Wr7KXS4ZMqjUL8xMs6OakTK3kBhZGPwaDWbEJGSiziV/w==","signatures":[{"sig":"MEYCIQC2IpesN6a2cKVVsrwqHxP22/2usvB3GoASVdw0BlauTAIhAL8xnpyWFA00NiFNyfzlYStMc9TGcOP/xkRDpnUYao2w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlVCRA9TVsSAnZWagAAUbgP/RTIgyt0InvDitQFN/Qe\nErgH/K+9h8y3MU9AiUPZNe0CcbrOFXk78UpSKno7wYiN82te8E4zZMWl7wQu\nTc7ON1HNV4oTVm7RBZ5ecnqH9+CShtqsD/Y/1AmALPEodkY5jHXORq7eTbbe\ngQu22NtsKTUoMV9LO4VFgTlx4XMeahlJ8cW/PowtpH7t5Va9IaYVldMlUH22\nnxMYZgOk0bAqpjWoz25cXP4qzEJN+sUvt2mVd29V6sIC+ZkZ1i5+kfoTEtOU\nSiicbvmGcDikx1+a1rfy96u/PcfrTn+8dac41b5qxIpKZnX3g4esMXb00wcl\nP80E2u2rOFwlK48aUQkBkjkw2GCG35vqhMpQyQAZ51dD/eDmESxHmC6B/hge\n8v/KqVrHonTweZLiYblkjSJEHAIX7McJIQIM9mAJeOxORt63zS6oMkNIzkUr\n/2LT6DdRBaJ8h4TrUePzYkA4Jot0DJHe4OqN+c3ryqOKImuhRt4Uy2QhyxHX\ngGTkThRwa4FtPgzPIPiUsHQwajNksDzyyHQwpsjHmLGxRb0PheNJdcEI4zDo\n+ssVHEQ7mSRwY1LMzuMN9KrvBR43E2XQtFil8lhNSdLz1IK4zdxJpnpMF+qA\nte9BjrzE7Bfj4fr9XJl6NViFCV9YRunEUaL9WZL0X+Ta58sBkIQbvXcUZoKx\nGWqK\r\n=UAVv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/density":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.fd22355f7.0_1606777173399_0.25533402288840956","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/icon-button","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.c4ab98722.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b22416e311a47fc622d75417324a1d543036aed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.c4ab98722.0.tgz","fileCount":37,"integrity":"sha512-cAwvGmOaq94BDtL7z7AQkIUVqv9ePdKM9rUO508IkscfuciWlodwEBUION/uEW1wx5Qpee16v2k5PJH6gWkeAQ==","signatures":[{"sig":"MEUCIQCK110e0FqVtTOzfviuIdjcnXWpbVq/keJxVzEijZI0FAIgbbLnYIcJoCYOVSyK7ydAE3XD4Q6wjMtmSHcggHf+DhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZGCRA9TVsSAnZWagAAr3MP/3IifCLoN7Yw+qaMbVux\nhU77OyIVceKmWiTBd70Ggu56dAPU4MEWDoCBd093x2A6qVIVK+MuDZdhZs68\nsXicrveHT/Qfi8LtVhgVHd2KStFPIaB9wLWwrbqz1zrHdQCixAyAgut8DCZh\n/FR3I9qdRTsr3I49Si5PYVlhzjZ59KjlhTbJU83vE2T9NapgCAdVm5DmDraa\nrjWClmbqF489wBartDlccDJHEsHx7xqZZ3iobTjklwpN7uxFs7b8Zs33l2ue\np/z9sXEA1MbnoGcngtu7V+W4ZdfdiBqvceCQyNlqzsdMIdVmiXaWxDb2CC8/\ni9fJH+zfDcH1uHHXPMSSfb2vVHyr+cDPloPRv/p7gHlBpid7SpBA3vBw46GH\n3dLsRiOtlnzohYPwVVJd5mQYBOhPNW2gbRphdOPvFrSndfLaPp+gLX+TFu7Q\nZfhNcw3wnnJFzWYAQsoE2lqpVphCc8YuEiTOoKPTYcDJLp3OJl2amVuKEABz\nsBU170QMyUylBCo7nXNVgNAAgjA51z36489DMgFGlpwPOT6vfPEmEMEcrnI3\nAPj+fpA3BLgJ8vbcTBoPk7CDIw2izPGeZdsXPOf027vqWCQZ86A0z5aTJj1a\nmXuYY/1NsUoWX7g6djpKylKCYX68fl0G//sWRXHmiuNFBCncxnhJq3sMj0sM\nV9ll\r\n=VRkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/density":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.c4ab98722.0_1606870597643_0.7193940004317276","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/icon-button","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.977585650.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85cfe67ca3ff07a65387a61c4c7f72dda90e9a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.977585650.0.tgz","fileCount":37,"integrity":"sha512-NlPZJULVAViPjNvuSHGupJOX6xsTBg/LnxvcUKsSjeFT/JLd2DYSJqaT3Y929fYIYCXlxKVkf5PlxRp2L8ANvw==","signatures":[{"sig":"MEUCIQDAI12WOL622Y00fcTG9UBg4OVthLlMotJEE0/fjHXkoAIgFV54JJyVGMpuMKvAn4md4fNNHPLl1toMyWWrfaoSdTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6e7CRA9TVsSAnZWagAArU4P/izL9nzto30iZYbIokYK\nReEWY/NR0fZ8kPSURD18J0Vh04qJcMtz1KlElpaLPUKBQJZIB/nYJcBT0XoX\nQY2cYYl2YMGEmt6ogLicL0Z3UrIJxFKKkJhHYHccZJukUpuunAA2VcjiSOSB\n0c5Tm+7XC/lEH+Nk7Pnd2k1+K5QmD4j4beyBdBZo1qYW01kB6yKu8Wg7pvTK\nODqGiydaYwR0HuwZdRqlS2n4TqUDYO8y61eOM3nMLz4G3UMxmNZRXJ7iLwEa\nsRu/gG2vl9W/yKU3p5Wn9tDBARTknzTdzzC0u0e9OQshEJdwDDA28W1a5Upu\nhVD1xxgB0Gb/ikrJjrv8zbYzYN8CBbUIMy5ureVkibc9M+LNN2t+Js9OzEKl\n0qhotRj76pPC1fk/26V5lXZ0Rv1UI/tr8ykERBHdIypT2BTKfvtCLTzDVKYY\nfDyTRM0WoLB4LCy3PjrbZR1YP2/+uebIs6yF2fg9cz8fvDHk5kvEAFkhroxh\nT3e340yJKFSXagnhj1YTCYNRI3uX09zJZzCXXlwVS3ehggjjw37h8snS797F\npkFNYUcUCxS2YyMBZBcoJgDKFdy3qZz04evcXNlDZSu7zOhrkglIBQe93s1z\n3YYq/GINbBalTT9r9a2PkkNbBSui9hzSDpS5emi3g/Bd2tjZ9D8B4u3YS3nX\nkzA8\r\n=1/dV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/density":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.977585650.0_1606920122521_0.022928271682113976","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/icon-button","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.c7edfc7b6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06843eb8865b63c985c5b14c34f50636c615a6a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":37,"integrity":"sha512-4JdErTN9tSQzPBgrSNxtQOv7VncH+chrseEiRqBKqr4wcjiP77ZAN3kDQIEDO5RNsZRuYJGEUuK/5omZu3SCYg==","signatures":[{"sig":"MEYCIQCKT19wG7WFqJ9tJzdNOPsdPu6oiXE7QKRysEkHutXiZAIhAND4KQbti1XDdcBHgoBFyUKA1DtXlJaOcHixMhvi2gNx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mECRA9TVsSAnZWagAAz7AP/0jgJ/RcaiiCrjaEP/od\nW6/c71GxLCrpR5piWcsVnWvEKAiWRnDfc+q+Yup30Gr5pFjkt8uJrr/Y/OQo\nqwoiswA2doKkXfDNev+u269Y4/04C8Vs2HEKS8hXGtuMOH6xbkk4KVrbYOla\n3bUEUPidpdjqzF+TqOCWLDa0o5krN6FrhEk+uo95neHhBeXRGT7diZJ2JZp0\nWczEJrqdhWCpFCv+9oqe6YGJJ4OksmHx763O12u9J4qAsUaxKxu+ytj2BA5R\nxAl3bxK+N82/M2XhcLz8gXqZqki73t988OexyuUGNTqn7jaWhKqp3xm9Wotb\ntG/iw++LWZvA5KbJzlzqVvS41zLRgpOo9xhSuXT1lSaTXuHsqpW9CsTFJkan\nQFesNcXc43BgTS2rDdKYnB1ymGfVYLF4S1fp+j614TFJq7JDlLuS9aYm0dwJ\nzoEKgQ2aagwMbtxJshsZ0vAYHm4E0aZb3pFQqSrt8O/i85zvzeLDw8LhxGCj\nf/O0omEtXEfUHRNPybuExTWR9xlUqJk7+M9zxFGNecD4C60GBZbP7gMclTNd\nTJNFP2H74mqkbk1glCG6LFvDhJVgQ62Sdm8AZ82kYurn84wAwtXEPTEAtX4f\nKFjFn9YKKeXEkMBm1WVx5uKyxhA18O0rRk5kNm0I9LvTnqFhHkQcBsuo6lNz\nzYT5\r\n=ocz9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/density":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.c7edfc7b6.0_1606920580131_0.5469296675793232","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/icon-button","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.4f3347306.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab9ab1eeb9977f2168d98cb26bb25a59ca8e8a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.4f3347306.0.tgz","fileCount":37,"integrity":"sha512-h82L/zH0IJPWqFGrc3/laOG+euxMeUw7JZLQNCrqLOJvwJGbD4OxSrbKgglwoHr3BRGQZHLsYkMRIx0Y2/qhIA==","signatures":[{"sig":"MEYCIQCux9ZKwnBftEG/fybIVOLQe9PCGf++lc7cr6m1GzkWHgIhAIPGMRayXE3iB3S83hHWK4qRpFbjOE6ZiIPX5kd2cdNt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx622CRA9TVsSAnZWagAAPsoP/2UQZ7Hlq6F7uoHaVIQW\nFxcssHkgL8mriPrJU5Bb3ellN4MPijPcGzPDmHrQluP9dFOFrnHmNqBot11r\nA8rSNOpqPKWv8SIWfO2IoqR2cwxlhmY+9pNEXC+s5uPEC8yeJOXrCjTxGM7t\n4L5jMG0zTLKhzNfBmtrC/ihrmCBTmfNLF8ywYHWpvr+JIQgAKp2UgD6J/mg4\nwt5DhtVojEy8OZ0vJlNEu6O0dF9Z3RQuWnz/SQkTt3+tqOBgbpN1sPtnzTaU\nnvHf62qvc126qewTl0WZJFShY/sozEDnAm3qRomuJvdCDsJS7HvJ+j+A09LU\nVx57P7HmfnbfuF7/xTuIMBZzwzrGP0HDqPG0ee/1NxbjeF33aTSwt+yjhhnT\n4wBl/8ybjFdwHk79rvvm3grQ5HaEAdGdUqZsV3mm1S4vFrDGV2TmKVAAmyLl\nLxIHDmsDNxqRCxXcV6xREiaXZsE7UZRsDNwAq+Zn+qjiJL/D7+sIngzy+byK\nWXs5OB9g2XyKX6ywKeDDdCg72rHi9lNIqTwE0u/5F3rjUQxrzLFMOPeiaMai\ntKkydqR/Yd/C0J7fHh08whJS/pSlJJLUXiLwOmHODerAxW+KWrfw6em8rWtC\ndsJV83/VQCSbCiu9DLtqhjq8tGa/xgS/MEVGN4M/GtFO2ObPW94uqNS1BnWW\nn/c9\r\n=bPRn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/density":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.4f3347306.0_1606921653815_0.8522995878081938","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/icon-button","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.37fbae10d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e10c24068f9e2daa598934418733f083d3e881e3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.37fbae10d.0.tgz","fileCount":37,"integrity":"sha512-AOT4hC7qlvQds6pZjZ8umHvEBFFZoP/8adixjYIQf8Hcd2X+i/L9roDA/VHSgWZGRqn2AymMaCMxnkEeSoJlKA==","signatures":[{"sig":"MEQCIBiGHes411O0uuvMwjHDlUR9f02STHw7NzLlcyh+tXgoAiB54h8vv6e8rs3OeGmtVFmF62H203+lDQ/t3YfOojHSyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9n6CRA9TVsSAnZWagAATigP/iDADZoVdhR+MXnKBE9/\n9KzJWLpCwsDAKOem+pq4rq2h1y+/MV3FjpGfy5ExrsI42+DqVItNfot4PIui\nghNAICUC74L3Gwx85mpVtOIgKKpKibHxdKmgWc3r/na3+s58LaSRN/geEmXr\nAWvlXD1th7YW6YDVmqyVxB9uV32LXJUe0uGJEnisJcwtHb6FsRHilKq1Ugfj\njPGgAFRfemBbkap0Mh3FQ/605bmeH1/QQ0rvCxBVtUM/4fNiM5oNYPO99yjB\nV2FCwspVQnuVoFzNeNIQqmqa9b8b+4vNKEEcOpQAskqjxGhmkuCwffcAUXCR\naCFl4IZVh+vyJm4/eI/eUSvVu81pKWqZeShjONwy0jhCmseBoHrUFzRL3O7g\nm7A5sRWvpU423dyIz5AvLWB3BNo5k7PE/V+W+TnDMqolpbJXrucO3hBnV4hu\npOmofccsXK+W9dL/k/wh9jsKV9Ixub/NZph7f1e38lChFMpQwjbijj3jDfqF\nCiUuc64vIKg2nWt2xLVyaD6wbt6H3tXBgPA9foFBQWoF0h1qkyDgkv0YEk5o\nR6AEXtJGb84cFp2nOOrm4zBlMixIyMrD4jQfpKOtFiMdGz4hY1Aj8BV1RuGY\nnNt88sIGV9I8GMOOvgFbpjHlviohCyXWIWCfnGBfdSdDZOgpyBABEdciCs/d\nQIF0\r\n=6TUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/density":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.37fbae10d.0_1606932985861_0.7283071358200577","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/icon-button","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.11da3c0db.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a97c8bec0f0391323eec1924fc67e4c0a37897f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.11da3c0db.0.tgz","fileCount":37,"integrity":"sha512-Q2s/AcAKe2eFwKmo6Dsax1GNd2PnuyfP3YUkpTD+yEWl+pkcAYFIdYKftSz+ob4hA4eVWSH78lb4BdUvwSNk0A==","signatures":[{"sig":"MEUCIE+XzWZ/ZEju2GloyG1U0V5fVOdwC0LAegtXT1RkqAVIAiEAuCI6ls029wibgBaDxHKd+a1ztxkxSsPlZhjK5BHF53o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/eDCRA9TVsSAnZWagAAqPMP/ieqNCGhmZ2w6PgoVz+j\nxdcHUwBD+3qkxk8J1YJxugsp0Rit5uZwWIvXzdX2Rq0x1exbVbHrVWZICoSi\nQvP/UxXPxdwsQJm1q58XJbJ77y13aBVFCEo9fo0HPwDNBAZyVpTzWESgYIHM\nL66ucPA5zliuCZASD803jbYumW4I/8RCsB1KEYFnfxBbdNP0+vqjwi/hjzOk\nSydK1iSIvJMScSgBucrRaYOX721arAGimKlYKwrsskrgPoHAIO3UZC3+gyQX\n660TA6CXgZJyKz163PWgMSvhF4HVSLxkQ8rb2pisxFghETnVwTHhuo3K2dBr\nilGcssr7iIPJLrL+fzu7FgZ8tZZBVvoABPb8alqAHZ/2TCUD2yxXUC/np71q\nWV3VKRQazqDSbyTh3TTn/wfFfDlFlfEL6Z1Hkklp5boo8p4AldCjjdWdTs0h\n8GRWbfQCE+4/tMjJBltUcgmA5J9q1I9qXe2GO2CjJokwJUFLr7uv3cUr0wen\ngrHRXbce5OIc3vA1vZQbOZ9/RqrbjzvfeBCfE+aiHXA0Bf1f5tmCdvQ1r84U\nt2yNJsnxxhpb+igp9RQSA2NtF9ODINpd9I3ShQWRYtkK1g/MnqYBaR+lBqdQ\niWDRFjqHtEpF/L6MSlNTO/XIvoanS/gPqV/x5Yk5N75hAAQOrVEKVuZO5JJd\nkS5E\r\n=EyXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/density":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.11da3c0db.0_1606940546509_0.4153400220703847","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/icon-button","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.489d4c219.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54640ddca661039335e744120cdc48be51ee1e81","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.489d4c219.0.tgz","fileCount":37,"integrity":"sha512-anaKVrI4dmftPobj/Uc2F6HKFS4qcgIa62bFv/exwfVDr4QmfZnxSefFjBd4QcV20PokIV+fyv7KrhMmRnnIFA==","signatures":[{"sig":"MEUCIQDQi6rzkujApl05zWh4YoKROvDvG4a8ZL48+nEqnw4O4QIgDwgQcbEUhRLoVN7pQqiP78U8olzUwRoeMGIo+37jEpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRjCRA9TVsSAnZWagAApcMP+QGa7y3jJ+4uUbfLo59J\ngJImuWfLKI2LN00bsWnU+DK+9ZAnmXHRpaXhQTICz6rHAhNNMLVFq5L6pZ14\n7XLHmeukmeTnu46LQ5/gb+J80pM1FXnC/mRYLah2hlHtNbgmJo/VyEOpm72s\nAYtcIkrwEyJ2wd2suYmG6Pa1k2iJojGCicj50WkMcHI+xhXCMes1RKMfqKIl\nCzA2qhUaj9X01VqK6RmVTHAwUqunmpCOJDGDKqHgyf1ODusqPSCN57FUTeW2\n+GTipBQRkuU4PYBL0qFbEacHE8n1ZX1uDbB5kyNs9TgpB9z95A6H9P515WpN\nZfmTNey2BQ0dAZH3P8JZn8n9mT+IpAF/ph+arHDFq3tLC+TVcXzUtZa4q+ys\nlK7LTW65Hh75afck/jlEHwP7mz+ozxB575G3dMDot5pI0P5Qo+que00FiOnG\nsu4VbLBPzu086eDahN4TnBmaknYvlb3IKm5ZNd/fSqhLFPBTYehn9r2sNAo7\n3LPcujMzuipOM0t1fMn6f5NlXBl0F5BKnt5eRuC7ytVk8Gk6kjxysHkYlNOI\nu2GMgDnPARk1/AR+0VXiRqNyNxNQ9OW/ZJFtG4e3/rRvUY8xJXJKCwbdOBVT\nlXuhWMUyMkuB67ZfMxkr/cVOLKKi1mlMJranPF0IN2o6uSs9JxW0Cy6eVW0s\nZB75\r\n=qhYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/density":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.489d4c219.0_1607009378746_0.2416950507795741","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/icon-button","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.6557a69d9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15445c4609448e2dc0f6175f5e686e3eb8ce01a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.6557a69d9.0.tgz","fileCount":37,"integrity":"sha512-Re2rzcx3KIS8yVp8CWhbd7COAnw0Uh6VflOz1c0Dc374EyzINTZRbEAKte55BHb6Z+FrsBVFjS0V6LkBMKXRqw==","signatures":[{"sig":"MEYCIQD5bbfmGKA8lJXFJRaBg21vyvXoH0P+Kl9qhD+3hfYBXAIhAJU2EzG8oiD/AB0upGuJ/NVJeGelt7LBns3oSwib0WkQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcrCRA9TVsSAnZWagAAiMYP/1Ru4Gi89UUgmLn1x7n+\nv1DNMq14LLq9nk0+/H9+eW9jUVyzwep3ZVjkgV92S+nBaDI5QlLAVrBY2wIF\n9QPmY9uf4qRSpwNXxK7oYUAFGMCd7YnMIMUlyRNJ7tPxf8e2LHLZiiMipycC\neXnS6BMhr0ElyYr2XsTBx8RUv1GHXh+rKgX+mvp6yjSiNxzyK+LY8PHXVV/V\n/EedezNWezUavh5rE2IMSNa/VNjpgVcAasHb/wDpEJvjYRKLlAlVHIWrEpGj\nLup4h22eMc4uKE6cFxVaXXJsIaqTYdmkE10SVu58KptzVsynWohbKxiMGt7J\n6TqGyAeqdGoG7xbBNEktHnemj97ilsve0zPuNOuZEX6on/mxQ7P48bJR6yAY\nsjQdxK5kLlBtgWvuIMetoLeCUEN6JHd0qJb+aiymUSxZ4Q54onNC4ThemYP+\n3kKrZbu3ObmNmQXqQTKS7jg9gjtXWyXxVXXXx+pYPsI2E5tHjc5NKr8KaFrG\nTdpCgGn/B0xNVwEu8FhY1x5ymJC+u3/+zWFbBfP+awQ0+aQIjwWVknSycfGh\ntgicdi6Q9yhddkd5UFfmRRNDvW65/FpbsjFCiPeqxyBKlaphwpKx1O877tzG\nsKNb+/s/hFYhtPyDjNznKpsvwTVTWpidE+x1kUgeM543P4il8e6bZ+KjWP2o\npBFl\r\n=t/er\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/density":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.6557a69d9.0_1607010091097_0.895634485455832","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/icon-button","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.4ea1b7c69.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6adf052b6287e053ad9bd0fa9238b26eefa12c02","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":37,"integrity":"sha512-dP9q8rsCXjLpcsesduAsb7sv6s2iQduTWvBNZFaJmD8JOalKNIQ1DshTULjYj74a17eXS5SV+xFQSa63/AOlvw==","signatures":[{"sig":"MEYCIQDxQNexwWcUI2mxt4qmBfHaINbhOux23XP/JtYK3tuSAQIhAM5ieXOHlXnXXurLy5Eo4jsGEHhBIApNQPGNg8Zj3trd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQsWCRA9TVsSAnZWagAAtrQP/1Evssge7lpnzdAUszER\neTUumfwIVy+ztI6Ok0ng11dbJwrHlm0iqbkjLSKIEwKDtRlUlAsea8+ROfVZ\nhe6RwMRtYbfkzFDwmmB+0yXolqNziQJUKz5gGKvEtNAZni8xoDSunfc3czoI\nbBEHoqRtghTU3ouJxgQ4N3WEDOqM5l1oqh1MbiF3lvY74gKNjxk9QxpouE6B\nercegYCFxFzvIqrND3aNs1oirSNMAp6vaypsI98igtPiqLxXGj/D91mJUIPH\np6gml8eA5owetRkDwOLNlWpIt54WHflfvfwLs/ZZawAhQ9G5HLNH0ZPgNcuj\nWVB2jkjaa7CqSsYiYNu1lwPOZRFI9KpLjBjA06b+2Da024kNJNPDFwwjajXS\nJNA5IggEF9EpyNYdxJXaqoxew0If08K6flLI1JhZdvuCpJme8UrgsK+d9qjl\nBcqqFmbx6oXYOYY6JSFq+U4pd63eijULyO/lcMuuinnpf/zonhSu5viAmj+S\nMDSAkUvTJCbEhby2oQbD7jRNAVFoPOMXX1NZdcKIsz0L6F1l8zKtQ6524ckK\nF1kLkqxaKRW4OBKTFEWJ2WaNaT0ks0e0fH5e0LrCr/Km1Tj1g5Ju5ijOW2CM\n+2luOKlCuCrz6PfzK6i1SKXDlughRlUXW8MhPN64iT30wD/QKa+DmaLuNX8p\nSkWa\r\n=fp1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/density":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.4ea1b7c69.0_1607011094274_0.40020534417494824","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/icon-button","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.eaeb78ce3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f63a0187de0500acd41fa1bab5021f9457a59e71","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":37,"integrity":"sha512-AmfbXUIHLDzZHhVEtinIc9I4U8gl8+bbVduW5opNcOuhNbekPN5/CBbWXziJoDASwyINTkbUKu4EnkrWiXBW+w==","signatures":[{"sig":"MEUCIDslAyH8tjMv7UzcDJ+ZLsQ6dQsR0kq2uzoFkW0QmjlOAiEArLc3E8jkaxZ9ehkB/LsunsvZsAXYfwppUkrnnWeX/E0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnnCRA9TVsSAnZWagAADC0P/0HMl7Q/GHSfWBuYLPmV\n5SwDid3B3+obB3SLTeTmapKqEznMFgtRclZLwzDUE6SbnRW+HZdSVTs0rSAy\nE6WA9Vi4l99eGvV0efjKs2NcEsCjUeGZnXFqbm4Edu+X3IJYWvaD8TD81+x6\nGwPTn1JUzSYoTdv1sRnj7NLf4ckn7MPmk/+zxkqGPfD1JzA7HsZdkpdrATkn\nVIXDxdamO550U31XrnQN7nmdHEI1lcWOwaiPwCKzJEd8N1eOIqRuRa+VTQ1L\nWrYaXX/1JCGbFh3vjCeMCRmOiYa7ULmiH1b+txWCW+q+1J8/mTFo+6FTRPa4\nO1DmsXRKdFqaW07uyizf78402nv19IjhK7jayY7ur/Q3OcPUoqi6wgYEB4ZV\nOwqJsy0a9vwOfb5MU7mZ5zpMEiE3vNXQcOdxgxUvdsj1A5iS4qdD9UtTvkOQ\nzu5Mhtq2NSsUfZ6TpmNnBVTepoQu3XeWezIbxoXnSoi8Wjsam/ot+lj6t+IS\n7Oa1astlvF3HTXCrW500ChvWs67OnvUoiBKLQpM5chnLN2jQ+XZ88ZXP5Gkb\nZu4QCToR/6IYeF+8OfEln2ZN6/Zy4lwv9xu5vlmCs3H7nbHz3H2xFgBN16W7\nOGFEEm/+RS2fci+sOkv8DtVSUJuE+BAPF6ASpxPHyBeATuZDXQjI8+H1KVsG\nPrF6\r\n=Wk5E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/density":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.eaeb78ce3.0_1607014886646_0.7970067203821356","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/icon-button","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.1c156d69d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"076205e1fa563f946c65429a58b7553e2e50b68d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.1c156d69d.0.tgz","fileCount":37,"integrity":"sha512-HSt3rCnG+ktAYG9R2obzwqHoZtsaNRAXe7jEyq4FK1cjucO0MLPEUKFFEOE7tPwRylNzNkzysjL6gTj6wZPsCQ==","signatures":[{"sig":"MEUCIQDcZwZ2pXYgwXfQzR/LuQjSqcB1W8H5SpbeNpZCr6Q6WAIgU6sYP9d/GbT5I1GW3MwFkCvUMA/e0QlHf54ihMZ1fcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU4+CRA9TVsSAnZWagAAjW0P/3a/KpjAzhMKHF4VtxXO\nSJPY6t016dfQuhFMHKcR8+mVksr+MA/6UW3ICQqlYHlG9MFHo1Ylh33lVWVO\nogG20g+gOnfsJLIJH67SFCl/cMg5OGpq+HfVPUR9giT5Qn3McCRGxSijMN5Z\nHck+cJ5kMIOWOBd+VTUR+duEWApCeTVaeRYVtumphNSfjaqcBigrTVf8iMHy\nbHfgAQRI8X5kz5W6AKV4W8kqy46F34gOb90zuY/IiMikl5dBM50WR3S+Z7G7\ne2n1Xim0GMkCUt/wxslNHQ0YAHJc9b1wHjQlA0HOCPXtZzvScosMEaQnRAwB\nIec/JO7caCgpPP64Or/gNkWMiSWw1SNquDa/uzBPLB9KoTBVqKRHH+WtARjQ\n9R1XBrO6OHbR5WRn+KwY6F0X4byLxYw0faQGGkxUAVYwsizNEnAVWNK05Nh4\nYRyiImle7t0vKKwwtIPLmiQXAukHtbKdMrcudQh9ebPMTkNRiMH4TrRhbG+t\nazVccb54cOcQvEVTegmbakBf24fgk8BLE+9WawFY+5g/zPDSuiH1P1uNFkAW\nWHqAVNJ0nj8Jm2nR+bkG6HU1bDkcBgpqpj5CbWxrrvdgClPB75a+tNNENkWc\nNy/FdyPzAiFGhJJj1Mma0mRfTkX/6u1HgtRPUBfbHqrHMUAbmJKSO9Xv/Ju9\nFERU\r\n=LjIa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/density":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.1c156d69d.0_1607028285567_0.7212315711643531","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/icon-button","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.832668d33.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9b0fbc35dde980d3bfe8e6ee84227c07818690","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.832668d33.0.tgz","fileCount":37,"integrity":"sha512-DzYEREI/9QUIERya5ql9ITj36+BKmXsaYGqVX/sAApp1A+WLk46jmjy6BIPuA3eEslbC5Oz0kdWZXey4kNsq0g==","signatures":[{"sig":"MEQCIBXBoieW4tLMHVu8aaVBG9EoMJsYcnYjbacQ8q8yKGsuAiBRSOc5xeopB41wf0GVBWD9VIxoV9wTwjJSthlFB+A2BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqECRA9TVsSAnZWagAAUnoP/1ZpJuk+UarZcTI5oGfN\nIQ8xTh6MORdlpKdOyNL1yQFOhkAO9waKFYZFvMCPYqOfFxD95u+JkJgeI30L\n4vlysGTnzVey/PF15qqE1UdTTmsTCiCTDYNoy4ijwShLQJ+imA+BZeKOiUKx\nKRU47XekFqmff0C3CIJ4sbRr6/vy0jXKnk5JAfVCWfj+09jBRxN3sh3MeVpU\n2oNL/x/4YKSZXoaRY0jf6+/sbhSuemm7YrnWfv83GuLT5SwmuYTXoOrc4ipN\n1qoQHpm/TnHFrvSW3CsDoM23PqXXvtBn1wKnvJVq8KlthypwNmf557Wl9V1s\nQAcxskkQMwNnkRa9/PzF9ZH6jCTAfeLSZEp6jdV6UXSLdm3HKE7fXSlGEK0J\nXuXoPrKWRaJpe0LC9EVMIoHHCk/HFhaGWAYjiDAKgu57agSfyLqZslpMZxT4\nnbxgVqjev5ZWfynVdUwNuwemG9ginE+pnX08C/4ilphya3t2JaCrrz0TLddE\nZhIjc4uNLZVbmqlS7fMhinF1/JIuPp6n71IN1XCWon3BIoOQ3mvZIU24IMnR\nit3JdsILTPDo9HgQ69OUnOdAmjc1tsb2kDg9r5bP5uaDSq7j2yaYVVysHXwa\nfj/378glvWIN/JOAS7Sut3/FFTBIz9LsAzQn51T9sHghFUFaAnZITg0vZnK/\nz+kN\r\n=eGZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/density":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.832668d33.0_1607105155560_0.9079508219895045","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/icon-button","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.4321323e4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ab50536515da6064969726296f316225f60ae5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.4321323e4.0.tgz","fileCount":37,"integrity":"sha512-/bbz2gJ4O3kUcRp/dvaciUFlmf8M+6o87dD1ksWjbOL0Oaafdc/IODuAMB+loyVeJG8ZbWVSUhK9bhXsf2TKww==","signatures":[{"sig":"MEQCIAGbhwqQ1oBkOXlYWkaOJb15XJ9d4mZdA5aHhB/shYtEAiA9y3GiT+z7HB/NYplTlry+JEYK4dHZyH+wR+4hMkGTMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhH9CRA9TVsSAnZWagAAJLQQAIDAS9dZkjso/iLIUcni\naryk2t4OrmTXtYa1/02j52+r1VpqpPThEvoXPPgZSi9BkP3QEakciDc56imj\nhoSbskUjFhy+ukEEqwmb+p/XXvgm7ZtF9HJkQhKYhqNMiFuKWWB1l20phfHi\nfWRNsFk+B/K6uwb5D9yCsYtgJ8nReX0t7UDkkVvlMDxajqB6t3auURR8p75q\nu1vZ2r8mN18NAGQNZRghmSMPjhI4GvEgbPmzP/zfMz0gYoI5r6Bur4CMTvIs\nM9g5eegWtjU8MD8xwQDUg9Vvn2/9Jhq1sSHjtushMWAGkrorXJaP6dZ9pgXM\noGxNOFr5y4lZra/LM2z9RxvhzqTeIKyqCa2uPQ6MnFq5p4mN6ViimnGa/fCK\n08Eph/3XRqkhPLFKROY32gYOPsJr6QtL79IzD2Z53bRDjU9GN44thqQUBbqh\nu7l0NiH3EHFirimlMOnBeErW97or3gRf3szY0xnBMoM9wUXFdyGh2zhAXqLC\n8usJP0JUIKrDC0OTbthXbBaph+H2i4fkNAqOvkGR5gKqVtzzs4i2ourDP++6\nVLiDB8WjyF8fMaiBC3DTY1cC9bkJRTRhl7VBbAwLw7DrMY3GpsvFZQeg3mBo\nmHJietlvOzxoAqknqEAkphUxr0luuozAMn33j3D4a4h81FMrfFoJr6mNB+uY\nE/R8\r\n=hY3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/density":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.4321323e4.0_1607340541088_0.2713593364280711","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/icon-button","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.2d5f32d41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1528639d34f96a48069e3876561b20486051531b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.2d5f32d41.0.tgz","fileCount":37,"integrity":"sha512-FLSdl8ZTlj9hF9PJ2b57pNRWscm7XgjTOkgYYgfFJ0YKIrJPlx9/ufhuRzNKgFqTehGBMDSm+U2dB0riQpA+8A==","signatures":[{"sig":"MEYCIQD589QVSd2OeRxmDAn3SoWhpUix5QfL3sWWd4mfgaGX1gIhAMVl0ElgODEQ2JqDQp4og9qlXdcK328rM+uyrt/yBGLo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltTCRA9TVsSAnZWagAA6jMP/0zkDSfVgkalxlVJ3G+Z\nXwNvoeQPxvcXoNLZgIZkK8YVOGOlLosxdyIakU2QVvRh6Cpz9g/VtoWDKTEU\nLY4RNSAFW3eUYobVCZpy12SG3e8hT/GQFCBozs6cot/6X4kl3yt2n0WrpdnQ\nAUur3JIdPS8cpVTC3rM66vl+fXmd6V/ZpwcnbSxyrAOk9ymb9ebMySV1BkdV\nzcQ/JxxtClUvbxGGl15sUuc2fONxCNFYqnPLLDNvqdrTkM/hIsB4KdzJHau7\n0XoEALv9XtQusLt3NgLB7t8s3xd95X6H5ccKFiayifs0YSpKDOhhI07g6ieH\n43acFqE0STnOwp5WrcTBdRv4HOXwLYAXOFf8desRCzKN/aatCk5JJyDlnaG4\nGt7HNjinG9R1bKUHqL79Tza90qg8PGrQDA9r5SjF5Gxpxb6yuSctcEGNGAXA\n49vgXbdqZIlxvT+NvQzPXW5kTHHUF7aZDV0Tz1InErE88/6ML+6NmhHA0FkX\n3rG1bRGpuKh1jzbGwS8SWIaxh4OtsdgagHJiUbqx+zUOMPlavlFyD0aF/KMq\nCdz95HuU8ecjaSsX9KdCzEqcVt1vI+zXnB0tENfRsnYV9Y6/IjeV5b0fSULs\n8L2BFHu4Nx4fIGS54hJlKld6cgNsDJJ2lopm/M2kiiCcrXR3/IXfq1gR7H9+\n+TaY\r\n=wAEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/density":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.2d5f32d41.0_1607359315014_0.24050384774366762","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/icon-button","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.8239afc64.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1335288589dcc0975ba1c6091bfb963d2d4dd81a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.8239afc64.0.tgz","fileCount":37,"integrity":"sha512-0Re+fMRpTPCSGAdM/+JGkssusG2MkH8yJJYLc7HbiqTuLZuoaLzBBsohuD3rcRF+PMiY/f7jde/CQ3u9JrODEQ==","signatures":[{"sig":"MEUCIH/5XrHY8ncM9nwbGOT/oCKIL7OyUDe7qndSWVzbXKtSAiEAwqr4G1bwxIDjh77Bkm9sfgZJWWRzNbWZgm2U2Gq2bp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodLCRA9TVsSAnZWagAAi14QAIlnvjfPRi8l5XuFCl0m\nPxJ6Wg2lrxQ7bFGcrGaqlSLIx6xbl69HcbYJTEwKWqlJq5Y6IrKQmzlBZXAJ\nKcKz/WNfwGhv8SSyJCQ16VmvuxKnL9n39AyKPsda/FfUx5Ajhnx7y5FUjn29\nndDhiROv5wvpqxmFCSmX7gsZNvHx/uy1zz5gkxqh9fNor57VGCaiycWE7XU1\n8gGdNtTjiCuP6gG5SKY7tIZiJV8PnusFl/6HwupDaUNi5V50S4LGxXgTmoNm\npCGZH+HbUZOsGKVRM3jODKhkiNkvD022heHQ4haVp3ar66mIlrzQxeTh0x97\nR5Q9McoOKuY3XnSuTTh+ixf/PA6/k94w2MYWvG7ZQg5GnAZvlpEly3oaNYXY\ndUEeBG+HTfurbzvYPsa31VgNvdFiAXcFiUdyZ7e63Q0UwCiUfTp/HWFB7DVS\nUuxxmFDyNENpXjybCXVcCxw30UoEOhJ7KLUMHqQj6quyRyxTcsyaCfwlTeey\nyOeEgGLT3qqXhOWYU7jgn/OtZU/d5+t5cDdZ6p4CJCI6d+ewk59ho8Tc1MXn\nRDhv5q9tycMYOTXsqvjjGgUb39FZRTlpbVdOxze9/4fyWuerM3gzoED+VF17\nFFq/YsfVzLld3B+C6O43qSt6XsCZic7ugkYfsgZ942iuDcDAOo0wT8iDFTyF\nh2Ai\r\n=iLbe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/density":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.8239afc64.0_1607370570723_0.7890581481634249","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/icon-button","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.6871336f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd203a12a480dc5bdae0427ecef1636b44acf43c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.6871336f1.0.tgz","fileCount":37,"integrity":"sha512-qh/S0kCLqCpWYgkG5IBQ1TCTLW1V6ztMmu5hb7aqgNZCjmMF7LCqTf4iw25jA45vR1lJulqiQVWVIvlzL0CuKQ==","signatures":[{"sig":"MEUCIQDfg9SKHIVqNeShXJsUkCH/Ui23aZjQ1+cjZYIWyoF60AIgUHzJdFxYT5lCbqt2xZmCbCFaZPsty5A2H0LILeZAw/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NZCRA9TVsSAnZWagAAb84P/21SX/i49w6gLJOjCDs+\ncnqbrtAYqgbBFzuzj6P/HcFnP8LpI6g4rnmrYi0RSlSE9SMC5WR/JOlx9Ddm\n4LVMATzHk90i5MMArIdOaA/fpmJd1E78Za31kcdO4PYuxIM8EXRzSiIUtdin\n+uvO8Li4DElBSiALrYhI7ZeqCmqL6wlW0yo/TZ1QXlhg/iEFGRWpzER9mJmo\nSB3x59qiy23/gzSIBg2kAqdBijMnMMPGpV9bttm9B+/1gb5TgT9fgVUl9Mwn\nP1Qz0v4RcsrsUfO2sB+I//swfU1PXZ7YJDn4z0WR9MjmHzmhpdU9lMstrtve\na3WqK4y708t0cRdmjxdyftyDdzOvk4Jq7Eg+q/Y+ilhlH8UgfT/HhnCvfiHz\nw680OD49S3wwzVpt4JVrdKbp39AHMIIsx92J4Sa4HaEcjzaQqE50/G4ShacM\nnDqx3DR4F0MuWDciLZY/3I5ojW4qKIdopXAmT91zVYk8UzQ+/WmSAgY8afdS\nZu4q8ADyzppCFu8dg+gM3o78PBhzCvhetihIcj/46jS1gw+Nplmhn8/+o0h+\nl//ALRMRp6ACNV/VrEXo7o/OhfjaYgfPMlFE14tlGNypsrxmYJBo73/Gl2me\noXmycn2S29L0lYa6drni8SLEcM4YJwCRyaHlX3IeUMN4P0wWIgQ2BBJulMSl\nT9//\r\n=DWz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/density":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.6871336f1.0_1607443289146_0.9480539442169715","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/icon-button","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.9f718da94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5353f0abb719fd4ae83069af5e9d38177041f1d7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.9f718da94.0.tgz","fileCount":37,"integrity":"sha512-kBJTumS79em2Tc+Q+T7q1Db++6U5vx5Fz53r/EBs2LgKn6pD/YYwA2cZLYVTGfB/Bk6Q/yqyhEC9mMeOvMWb2A==","signatures":[{"sig":"MEYCIQCMFC40THq+l+7e++fJKKxrjj3DOdEnvM9UGN0EuQcNtQIhALDuV77nwfuxs1I7sddh5M4u7GTSd7OUSrz+Pn1SEPFU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YcCRA9TVsSAnZWagAADjoQAJSp3tiGEiq3eefGiuQc\nbV2qDjoY569nuRoHnh3AmrmAHMwwGQvBrCyQZ0vjpmx1tOhKeYQftP1jktpZ\ns6WSqi0jqT7k8mPkm7Cmsuf1au6O6XCslTHRcfhS9y+eQ+4GlO97JBfpzTOV\nt8cU7pPBeblghFOwLymH8iHWLT6lZT1Ts1+Bv7L92gv4TQ9GG7osrQLIq6Vt\n5FvmA6gJux9te3ENj5Ddk82CyY7x/cBEUuv8s2kwEsnbCpjXwlP2hvx7qpyv\nbRO9EnzjfpRvyUenne4BEmwoYjTlnZx935DpktUmsJy1gnbdDHMsgbULMn+o\nhi4/kD1QD9bgEX03pT/jVel2q0waS6jFx+TUCt6pfF4R6RgXEO9fZRF0jdqo\nOGtUkw40eVyRaRMtmlN9MoaFNh6ku8nkNsjLTwaafJURxSpxw8bzMvleSb46\nBdS+4aUy3B6HDsFrBIUQZZYSydd5ytnvxSSjMNoMWIJ0RuBmIJ3YiOivgPPb\nd8cA0Ib9PYcKrT+osu+yi5JK6SREzheE0QezysFc0cOaNAwL8p0LIzkaDZrT\nxLnUEsYx9363B5P2Ei9oqw4EhIqb/u6/uiJEgAEwiKTSJqg/YvxBeRYZYnK0\nWZ0mtwfp+1N16aQds/iTNYSCV1W8KbNexA4/lh+7WmZ48sLySBY9LPzCCWmw\nbpT3\r\n=q3Cr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/density":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.9f718da94.0_1607443995759_0.945249514082616","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/icon-button","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.1fccb1418.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a18ab6fcd4f270d16e37f3701b185511ca7ffdbd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.1fccb1418.0.tgz","fileCount":37,"integrity":"sha512-w41W2AuDqKHUROzibKFfiu64R4Yc7rn8T80sh67XQQABZeoBXHHY7RRSGE1hgBwOTCprT2kp3o2zkK5xYgihaQ==","signatures":[{"sig":"MEUCIF3thZsZ7cF+i2fhhYFeyz2ScPqLqWfH9VpSn268e1OOAiEAvFgyJCcXuKu3kv7xHIoFPsl3ZwS04U2XA/e9rjW1yN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mjCRA9TVsSAnZWagAAYMgP/1hHzngMmDqtqGxus1xE\nz0Jq3QDcy68ae+O4XL28z0voIIJUnFg4chojPa6DzS+muf9eoufwSOWReDP5\nPUneivsYQr8YcmyoRLzbYyv53ULSFjDLaij2hFAIZeJsbhZsNAOfyXGT7Hm3\nnRzeUtBOGvo7KL8zQhhQtxdpkQG5nDYQbP2bvPtCb9T6sC+RnoPaHUkGaSZr\nejG9kZlnkw4GfhSWDzEU6bPPx0VCXfDYR/uVnBqitTsOPXPcVRvJ9QRlcYPi\nB09oe/dP0jkD8nA44OoqfrQW+Q7mV3/Hj2WkkhP2CSOunMf+4QTaIEWT4vH3\nMEvwGzNO0UHWsrfPsu20Z+fUTB6vRji/0ZcNsEaDbnmDJUT3AqRW0TAQX+oT\nYkOT5WJxieS565WWHs5XJvQvIyOvjYpkT7Dpqh8y5U7xE5hWAyiNSMiYcEkr\nAo90eBwwfugJXMzdOBeS92O55z8Gc+ElkUU1g1kM3pzBdCw0FJMa6a9OFo9u\nCdfqPdsM52sF/j1i+eGneeuzPrexm8V/6TOz4wyeK9JYkQkos5l+Xqc/YmR8\nACG8g00yIteCmmW0YzV2PRZdxBYcJno/too3HoHwrxyW1kbFa3PJmSmBpd5A\nZukv0XjNIshr2WOQB7oB8nw06SbotALDor0NIyehG/jSowhYNR6VJRnKgA+F\nJSS/\r\n=AW70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/density":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.1fccb1418.0_1607444898543_0.0489524752184991","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/icon-button","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.afb68894e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f4eea5329db21cf72d8a7abb888dd60f57be43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.afb68894e.0.tgz","fileCount":37,"integrity":"sha512-JDujLhyjCBP6+WyymXuBRnA59J+RwhLpKE7AP4851W8Adw+qeSr19qLMOVJeS87HgRox6mLUtlkFQ6hz5g5wyw==","signatures":[{"sig":"MEYCIQCgoLggd/3X/bBEozoRBQJO5G0BqyIgbZA73XRmz1GcXgIhAIf6I/Nw9q9dU7PPaJ/S8Fw6mT1RhQMJ+t2Il9usFMFJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qTCRA9TVsSAnZWagAABJAP/jE9WkIgbXOUfZ8tm/yQ\n2CkVzry6B55qypkOScK7kcpAW8lVPX2XZdWwWT3WjH6flC7g6qpLftU1b4VL\nYNuTMDMikUK5O4xFscvxhOv0pWHx8e4u8e8zAciJ/X9Aj51gqyUtdF9EfyDi\nnejfIU6XtKEymT7I1cz2MMmRws8KFEIgCV2ojQt9i7TH2rq+FBpvxCo0HPSB\nL0rTJ+SsUJpcpHZvZpy7uukbGAk5LgfsVitb0uuiTrDFoRCNvbwbLDuzYMdx\neM9+n2ZIZns9fsAe7QRwfs8CqqdAt9xCjM0sboc7/Xc/D3SCgWBbVbLymSkb\nYWr6EmMCkew1StPqDE5FezY40rgs/3OwUvaI9BwvrTEJ0StGKL/pLj6U/4ka\nx9kS/wafBPZi5dB52V9q+6BS5u8lVE1DJviW3/c7EdHbkl3UCgmuNtgxRa3P\nQ4cze/N7big5xOffGmFy17vYHwradEs+ppOIfD20BFSCg9kzYcVxOwnzL833\nUZ2E8aQ+LniKJFuh2z+hrKSfKCBohFudvYHFDlQTieHkoOveg69RO3InBq/K\nEzrLabTkvZkPP9B69snVlIldrOIyKvpHpwgAmXYpAh1I8ge5tsls7mn2SfXe\nnbCx306WeCfHBOa348v8uZp4mmEUtILJcYoiL+qwGHwb2AihBC4NnfBdAzqe\nF6s9\r\n=gXts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/density":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.afb68894e.0_1607445138945_0.885333371824071","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/icon-button","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.fd88d40c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd424d25ed01b9b2c776f7b27da7fbddad6fa8c9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.fd88d40c2.0.tgz","fileCount":37,"integrity":"sha512-0o/JKWw9tcLa1TXt3isFWWE+c0Yb70yci9ELpSBXHF4R0hEKwdx387bZDa9warBabygCcNtTX/aL+SgjYtGk0w==","signatures":[{"sig":"MEQCICi900jcD8X7WAtdJki8x+GUxsQmLyLZVpxpagO0QLNkAiAxpYFesQXFNutIjnIUWXInwsSRXjJH1QB4jBtcvSgVyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62zCRA9TVsSAnZWagAAJUgP/3iYgivhtzp1wh9gVVid\n/po1cDiHscj8qZmTonBVHbLVpNvjFbkdcIIx3epHgCvLrusTJgnUY+0SyzPJ\nFHb73Un9Ys9X/sTTMsHytdxxkvdPTJlvDy167P8Z/dZtXmtCKgr0+slvyyO/\nFZI0ojAYiSbuwqveGaxYrmA7O8G4KTQ5SZ4XTnAiNnSs+leyHohnstM8UhQD\n+L3OBZ3WsLYJp1YJjF9kqGI9XfssjX6Jd5K3SR7DlpmF1/oiZMA3lurrsehd\nESNUESlCGDcN0WXfxs+UqRih/VfgzW9dlY3BfIl2nVk72WOmbuFB8v0MBnpP\na4dfry3SYJOYGBwXKmgi8t7TYqd8KIQzeuRUv2jw7/gX8pARZh9iWFmSIOsh\nLEU0GDeN2vZgqf1npDMGIzu8FVz17Hbb8RU41Bx3bW9KI8qenXNMRHVhx5+d\nRAFBX8tEsWwEeTnN5kxtbOYY0MCEANbCstEyN0PvIHjSTb3t0oE/9Ea004HG\nNNN8EAoQdWrgrohPBy6lmfxIjnrJcHiNQia/R7ez2LIalUJuj4YbOK+lY/2e\n30Ap0EU929rCJF1N4hrnGna2difdomLeHzImPhx4dPKupVGCKyHH2OcHufg8\nlfiACfXoi1lj2U3KYhW2qD4PgMHENib7vsj7Hq+zwfdeVgDk2dwo9kAHu51x\nnZqD\r\n=MtJ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/density":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.fd88d40c2.0_1607445939014_0.31095512488998667","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/icon-button","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.ba9e3109c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c7956f98ff22089cc5da875253e14f59d6e112d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.ba9e3109c.0.tgz","fileCount":37,"integrity":"sha512-ifVvQY3y54JqRJrfaU+NOrwmUcB68vknsda3PbfHbxnSYgdQwYDHYxsboMbK1uRZhaoSbh7qnujNCNQ++IXr9A==","signatures":[{"sig":"MEQCIHavG+8BrlHuZsOwD/sIWpD2cYI5ACr5iOrPD9k9oMYNAiAS9m65uoxmYu4EHOzcCMvbl5ysWvrUD08UV5gCrDXeLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85wCRA9TVsSAnZWagAA9LUQAJ2gpgJL+LkE/7Y+6Vhi\n45w7MF2r/DE94Z6pzRL9khbsZ3lwgETGMN0ZDRgJNxO/jk0CLgOqJO/zpWnh\nU4OmGucB8207jArQ2br9VzSDPt9lCujXCTeiX/ULlfzjXTwpN46b3/35FxEK\nhNWoVvUHO2iyMxeoUMrAp4VeQVXsGdb/yr/++lxSJnCj+CJbmxuC5RecOeHj\nBLhA+6p0kA1u531toG9XgkDcjuHMJIItwpd78pyiaK8rGA2EZjl4Ou1fj0Vo\n5CcaGvXJyJcDhECOdQYeUNz8iCZ5MlVbaKMRj7CgftN+Z24Tq0KTKB8ESrEE\nNtmJzLzv6heEj6DNd0iIlBdYLEQTaIZmjdPJk+GvZor0hW5xKsEu/IdqpXyA\nwP6shq++rpFCDZo3yiPRXX8iciLCMHZL8/jLAZId3KlHLWpsR6J6jRTwXQWm\nkro2pbtKykUqQ4gU5XygbI3thFv+2Im1ZHmQB6HDKr8vPACvrw//xfRWeL0w\nEIJstgm/XupWCS6ZY64sCHuXlpRKbl3xltp9LdJPF2vC0gqV/92ykeD3fNej\nmPkO8s4OjdArF3hm9OnFtaMWMf5HJtw04ued10dGcPPb/hZjgkWDDvX3sz/H\nMvz7YqljBDUQEvOnYRARsCPFQXQZ84FT+IcEupQ207B+J/55Serpf9+ug9BH\ndIGi\r\n=uuvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/density":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.ba9e3109c.0_1607454319650_0.7820975854653369","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/icon-button","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.1085c3b2d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0574f26f9ad41514dd4ef87db00a865cb6e872f0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.1085c3b2d.0.tgz","fileCount":37,"integrity":"sha512-y7eTSTaTyJLGoX7JM2MRf82bhawadRk8cvE4S+90Ts6YZ6puHfoi1YuIwRK1GbkQovVDOU9c9X21fxl12L7f+g==","signatures":[{"sig":"MEQCIE+F+10ssv7SCsDvvM3ht7meMCRFrLvSGKl0jSCMY0etAiB+rQ90rBc0GS1dF6wbbwSw2CTkX5ODHmfAWkWrTCFi3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFHCRA9TVsSAnZWagAAmQYP+QB+MFp8key1/2zGfcat\nMWUvntv3SiQwJ4aS5Nl6WoKkD0GSDJU/aPlqufFkfWoMnxduY7j+jDupbBzm\nWYjhMtmgX+j4RSwwBMVjLxjaQBOzJEmGuvm6Wr9zu1EA4j3Ah0mjw6xrJpNL\nTQR7mwLmDoyCu1+6cVkulzoLQdOcdNjwMT+Z71d+naMuVDJ4b4u61Sv8MbdE\nZnLr9x+nddscgzWoaWA7kbCDIWwVQhZZEKMKrH+VEGzBuu+sw6UOpK14wt5r\ncOddV02TM3561MNcy8ris64ocMcyVRzdJRak+EPBTsAoJAGi5pmRx4dhVYFt\nSXz2jKjbShoobz883nj00eFWn139w/U3burCAmgaYF+e0P4gb3uojdl9WCkl\nC/DWNT0cnFtl5QfIuvfszaKzQ1dl+2nHSzwZ1+aypTgYiOLjQeZTdGUcnJAq\nNo4t0UdKYVqScMriITLQgOO0+ziWQ2uyLfdn8d/qXlRlj/jpvhvwiEz23vE5\nZNIXVtfYDfegIGjbnwRnb88v0Xg2MbyBbXbMUUsXPG36okj/jzDES2YxW0FI\nRf4ZUvttRKaFpUw2pvz9/fLtX7FOM8Cnd0zfiN/x8/bFVuppZy0he/M7OQI/\nqWbj/GYx4TD1syFLmc1bFLw7BrRwBwa8GiP4SFjNVhfJKCg+MijHGKQEB0dl\naP+a\r\n=zaCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/density":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.1085c3b2d.0_1607541062739_0.849554352105532","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/icon-button","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.c5dda809d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaacc703e008766d91b9bb5e15856560c4af3f61","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.c5dda809d.0.tgz","fileCount":37,"integrity":"sha512-/z0PO9CHeIpqzlmbKGSfNvkyGfCHu80NDWMtjyUfeTZ6K8uMY1IE6VGrUKaxb7aPLcztEV4IDZz0pc0mVOoXCA==","signatures":[{"sig":"MEUCIQDmO7k6uiFTVNGC1SnsqjPchoAHBQ24jSOOFHkooyht4gIgIBvmqU02Wn4KwMqp5UKrNsYopYOxc70DQMLjnKwf2gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThvCRA9TVsSAnZWagAAFaYP/i51iD9D0ztYFg7+XJf/\nXmaNfjlAXOEWLrzmzEoG6B/XTA3CluJEfzUJU0p85OGjTV5MdSIhHz26Ya/R\nzMDqT47tLThnWH7i95lDw2+RBLEHLw5ORy90fQXeP3Zg7FxFzONrOLleZ3UL\nEF6ZqaSzAgtpMUKtGyR0zayfxw3pkFVwWbtHVkiaJ4twxBdm3hfhCTbORfYm\nGdfhBHJW8nTVh1kbE30SuMXNtoDQR5ASNwNmq1mXLVS0c4RtCCcIPqABzt8z\n3gXCTPx0OrFTK4WUBsHJcGObGrTyEpnbE7CEiakfNPX3gbppqOlpASgQb4Cb\nefxrNyPbKhSLOOEGazPZBzLqL2PGcPbkAZNmex2+Pb1bmuZL502oEqJw/l7B\n8FqCzu+gM759onohOkbafvEoKlfraWs1V/aE5TNTGxLsYHzBzSKtvJLDRBhG\nKwCHoNrZSbdSumBVsycInBKtOVWhtaag6eYiydTR+EIQkI/iXN1JOgRIqg80\n5NdkX0+EGNbMkBXxonS4DSBytn2BBWC95pbWcFCvCjZN6rI7lP66CFPA9ybs\nz4uOppKhO9lTbnQGh0BTLILEhvXkdW3UeHkf8J42QDv1z0ZFe9KIqLgE7s/A\nVEpLG6xaCRe3h9QtigiruUcMfQw2OLCNx0XAoH8iWKhGiEcI9UTy+2i9EtJH\n6dZm\r\n=ni5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/density":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.c5dda809d.0_1607546991228_0.05006740049249969","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/icon-button","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.f5f1bd86a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba1312315c448f052a684ce16cfafb62507aa43e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":37,"integrity":"sha512-IBZqtLjvxjp0fVKTL0QjMw2Qp3xmcYRV+Ts/UA8WmPnStw2gyCdUylAzjhaJ3J/TtgLCKWGZn575KNe8TV+W/A==","signatures":[{"sig":"MEUCIBwuWjVPvi5gwUtbbe6Yz4Nktxmy3qUE9+zTj7fsWj+sAiEAkWl/umOkRlftYOkw2dlZjzdHLTDHKmHrTe7o1hrs59A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzGCRA9TVsSAnZWagAAxOsP/3uhEPvjWfEAZg85r650\nz2djYA6LvBjToiKsv4dnGJJeSpspBGQkFDKeOvogMG9L7t4cykWVe9hzlKix\nlNMM3qGJbgc9H6SOW1XJnr3d8KnU13MQPSYoIh2OM9y/01aZQgPavtqgye8B\npgg6lDvEItl5kdRfiedhZD8DentdR1hMh/iYdD0D3S4g8lGwDj/xMmhkmcjX\nzMPMzGSTVz4FpW/3k26TPK/GrvOh1xr4myIKp2NK9DNbRKfUm+1haZvpDbyT\n5LMY9j5fh03nj/vPLF+Qqyu4Zq5i4jEN4yEBW4EYfLUEZY5Q3hJc/kd5r7oh\nMuBBGay43tAIU9SwZGu0KEvSyecKMIZbUw/xmDcbpZF53HPqCiIGssuSwIyY\nEVLKikb5pUYk/CzGvPA8pn0zvOksOM0OSwk9jYyVMaJW8DS/RB8L3kpp5Zm/\nhLi+Z4LvXROotR1E9w3HDInACHf4bk6itq/9R2uFlMq8vlGv/3maTID0ZJl2\n6/BWaPB7I0YJjGv7wb/RdE9xTVylPVLyVugdoK42PT/+OVRyf66gE6HwfLqV\nbusPoOhu8wJQ7LCU06G+v2wpQQG0YmV/hBjD/W20xsN+Egzj5oZVKjE+66wp\no5sq5bnP1XC6oV8saqvvkPgZdmQtLHmCiOvqZwb9XGyXiwGpddTAKtF1JZwX\nL4uL\r\n=5oqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/density":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.f5f1bd86a.0_1607548101614_0.3658519870197454","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/icon-button","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.00f38200f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f49422d23a0406e8d582ad283380089d740dd81","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.00f38200f.0.tgz","fileCount":37,"integrity":"sha512-5F6twdzs2xxG7Zm1z2NCbBX79gXs0cSVBJJAVBJQU05mDM50NBox5GIP6fTAq3OM9+NbpwK9Qwy6/xwhE/zZMw==","signatures":[{"sig":"MEUCIDcgGW0aroP0Bs/podHbx4rEo+Tf3h0hcQPjeRMv7E7EAiEAuYntAtw4vfQaFVVHAf8ggX69vORv6GzKXg7OIYR/WNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05P1CRA9TVsSAnZWagAAYuAP/1qovCxLMqEggJhyNrVN\nr9WD1x0YMmanhHr+fKOWIK3DvhL3efTu+/NV22aCbKpSJTad5mE2CtHNkR6w\nO1Ko11RFlQCIklXv4rAzFpOpiZN7ajC5J/s17s2BlC09veAaumKfIhNxqaD4\nXihEhELCI1g/+ProjudYbUFMLPVD3Dfpjwr/fLalMb3mq6l1dSfr2koXCDOL\nwaYg0W6StrBpzeXmflzlQvKn4hH5uZyTvOEHn4Xwr/MMeTGvKgbdI8MWsw6L\nWkyRGXnxEjmAV4ULzLpE+zaFW5Hhn33wQ1HnZJeRGHYwO7RXrDq9uf0V24c1\ncy8qZ43XBqGhJiS1DdG24+BAq7jdNml2/FyAo6hE58juUFMa3+kyZ4e2MmiO\nqGS9QYP7SpgR1bcGI3iifXYZ7WT2jKEauYx5a98xB2vOO00tRQIBnuZrEoID\njZAnFmjQoZ192+qB5FYjGbKa4FDaF53PnmyuUd0GuzSIaZ5ci57h895iX3JX\na5occhz3hia+XTkTp6IDznQg83o8kz8ASsxdF8yYdpBZ6jUA/2nGa5e0OLZk\nqKNqxyZFg8QubzH5CMHUsvWOpCkvhizcRBYeZfMVKKsj/gdxIkpx/hnF0mMc\nlEtpNI391mSaNFU41WgM1nLr8nAF7tUMv3L6WskOr2dDl1ZwoVnPDhFmI5C7\nZj/O\r\n=XGwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/density":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.00f38200f.0_1607701493091_0.5383304300389602","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/icon-button","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.ac41a5729.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4743c9f9fd865e94bcba119323a72e8870c40d3f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.ac41a5729.0.tgz","fileCount":37,"integrity":"sha512-Ogd+S9oKOEEZSyCHTMYPy86WNeAO7LOheju6+2j5/CrIencUmW8BXpYA5iXahvk98dZIbXGvhygzBxkjr2LShg==","signatures":[{"sig":"MEUCIQCEbndCwWLSrh5m8/BLlxIRmusMNKxaUn8rFc8SyoDK9AIgKpl+5ZP7Av8FNmbBvyiM8K4QTDamliIJ6kM6Fh1Ej64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054ZCRA9TVsSAnZWagAAOxgQAJxuZqbx/WQr5BxX6fl1\ns4FKp4w2+5thHkGN+2XEY9lMVBsy6aqkY4jT3nKqGMd3gNfWWyCRr+2EAt3F\n6B7NSvwwuMsYh12PUaOht6waG8SxiUCv1oCG7OgfsYK/srdsd24yODGlBceD\nBmxFVujcToxj8rSSZvS40+O6CUKuXKKxK/9e4awhWLOF4S3T9BoUiJLvyjP1\n6tRrb0X3Fl8kBvB93alkmCxnk5mUoIvacc7jtprxJlbmz0iE1dupZ6hG4ogb\nCEqT4dWqT2uhmQ4rljust4B9LB2iu5i69T4fnpKfUGBLjeHVz55qQcXcyyKH\nkFoCeLXOn55NGvYUdL+mWhJzaCFyzIiaRILzBpjHfaLAsZq45ytuiZF92WeY\nm7Fh/lToHtI2xYYbche3EqmvVnqdFSTTZatXamjpmzXFbcecnhnAlWoUQ1F7\n5lTMlDivZetfrM0gP+RJo0h20k7d/oDV1yemAFgtk/824RZeztslBCHpG4RF\ntHCs1V/bFoFLO927x1RK0FxUuICtINHlf6HBflU02l8Dz25b3X3pYKXRanL4\nWVloeTxU5b1Uzq8eoegANJrMkHDTQVrGSXJr8B5/fpwNje//Ckirvc6YHRhG\n+pj/EcjUMmxXfX3vZAg2AcTspcyU4+V5KTwcpfB6mw3vZlTDSNQ7Ujj2alnx\n0Zo8\r\n=2j4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/density":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.ac41a5729.0_1607704089085_0.05243694976571733","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/icon-button","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.7fe0e4f05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dfedf8f7b59e04aef840a3db67d95b815478f26","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":37,"integrity":"sha512-qmsJbc9nzcoy5al6LS5ZX+1o0RHeDWJtpxY0WiEj7PN5eq/yulVC2ZbImTqumc1Wy4We26RktcM9zj5Kd94PAw==","signatures":[{"sig":"MEQCICS9O3hHT8k5vOUH+ONYoVNmHjQ82jsnSKq7zuHmjF9FAiAuVq7aT2Cj2VzWSGOvSyGgwwN+cNxAajn84IKCzQL9nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bXCRA9TVsSAnZWagAA4LYP/jlR5SlC6sUNIkcJJ4xw\nn8fIZpBNF36ytkJTSgLKH8x4FxcuiepqoHskqVWm5NqR6FPZADQYwfVQ0LZo\nEZTWXZeqKsKVOrvaqkwvFdqh4SavRrK7jzf6eOLtnMFZ09/qJcugUFq7liQx\nOAh7LBNBV4KoSYqtOV6IOubpmxQTplMjpSpdULW7a17k2dB8CHLhbDcTpZk1\nxlOzm+wdvBMyWLQR23spct83O1jYjH2RHvceEVH+8GfM4yyhJiEB5s1+PHOQ\n9mjkY2OtIPpzsZmFFgWUO8LeESn51d9xUnveZN+DuzLa8lY5jpqR569RNJm4\nUVq7/9Kp8G/AK46z77YVbK8cgMPFPWT1wLZYWY9NKI0C4RnhyDX5oeQdD8bk\nxEF/GTR1i92zLA5m4WaytPRFrlvZcIEw7keD/gDtK5fx7mTNm0WmCgiqXCBx\nvvHAPQCGiqdZhxQ9Fiu8q+JQlfrz1fwiAsDtO3Q4AjljYmnVMKCy9ybwW5pI\n/T/kFCMP/2p3pOP1YyWLS3bB2Tg85PCu/gyyPhgFUWEwRK12TmMZdNY8dkHI\npfn4xqzuZmCxyD5BBKv/SAOKCGG/J7u3U35IgZvwBylyrf1CGrL7OFnDwQ/g\n0MVC+Z5+ThPzYokBakALMMRXUvOqGO+4gs3r0wqE1MEpz+dahTZeIUUkePqj\nrMSV\r\n=y/v7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/density":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.7fe0e4f05.0_1607706327184_0.9467157150466372","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/icon-button","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.9244508bd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c06a6ddbe23d9bbf12eaaea2467dc2fca73dbaa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.9244508bd.0.tgz","fileCount":37,"integrity":"sha512-mbLtFeakn9u/Qzlv74VJbYxJKs4Zysefo7AKvF/KL3GCO0ybOiy3v6TEZ1p8gTzrOf11yiJByRafLh1JszL9Bw==","signatures":[{"sig":"MEQCID1D02lomFoUVMJWpLM1Y+cXabUNWGxRzNeivA79MGwdAiBpyHoA3OkUY45Sh+5oBSpMRudpv+gAcn5l3chY/a3zJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NpCRA9TVsSAnZWagAACUsP+wYbH/7ONeZ/MoHVWCY5\nA5Ro03MvWfOdz+HaRvfnNvZrOzxzgFS1QksqQUPfCBV8XJ3N7cZiJFsP7zpu\n1Vnxw+oawHKNJ5+x5jq5jVNWZz0SKN3BuLLU6+SAZtbgNvn80tMl2gFq30ZD\nf9KaoyKi5HaWGHhAJ/AfAj7A5wj2F7RBuUy4rm8ELLwXXOy6sz2Ea2Ko/YtU\nyA9JoSyk1PdelYr235rSYhFJMXwN1nRpdYeMcZYATLb6374LlThwvJpxd7lh\nhSWWSgrgIlIFSQoRy5Zscs1t1e1Vp0lKvEfBQzvEyKyYh96DYCjwvcxTpCVf\nJny6qQ7aZ9OCc+7ocSA1DaliyXv4dy5LrUQ+8CJ5yoSLJZrI3QqADu5TYUf3\naoG3vUmo4X8yCwBJVglkar+DbQZnf46klgmQyN55m87zaZWlJB8ThzPumyR/\nNCBWhLGIIE5YlGYDa7X/jElrEiojD9+IoDIkkApVfh6nwfBVNdXSsYO8yLPU\nACFt4wFKNO3jrIQHjIwsxrdAGNDIi7D0oxp68kH0bWH8OJ/AsJ4BO2e7Uy3d\nv8pPC66ZGbzdYA9YixIiM0EVlKd1e3dxZ7uqiJOpxdA3xMFxLprfXVID1orV\nh8UG8dV5GWZ1cXpdjUX3S+Zx1GCa6lWvAXvQpSPOXfX3tD+AbUVGFwkAoOuk\nGeBb\r\n=pCbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/density":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.9244508bd.0_1607713641391_0.7760935021082687","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/icon-button","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f84c4eb73b40c583e4b8e88a09f191a6f65681d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.384a8eeb1.0.tgz","fileCount":37,"integrity":"sha512-qsY/oCV8QHOoR4Nq5xfxpWWlnemk+uOcjJ3eIWlDPWXkDE3IwugIgPR9Q+GzmRrpVmg5yJZL43OHLmTR+paOPw==","signatures":[{"sig":"MEUCIQCgcf0PividfyW8++ArJCfLSaHEXEIKBdgeOzMd5ISfHwIgH6vOQ61LRvwbYy1J3wqABZFRvtTcHlRfYyjD57DvH78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1+CRA9TVsSAnZWagAAN6cP/0qxffNASaNGB2O+u3EJ\nKkpUQ2G81oZ79vunFDJBfnAS5hSHFrQp2PNo3+I9OkrKkx8SYCEBCxTxGwbj\nkPUKmeKyeDTe705vFjYwBa3r79cy+8b1Bv6ErmIlbn/dgW5Wh5McK8hKOv5F\nMv7U87bbqCs1/wpElk/J7aI1kZ+7OhO9C9/mNr0JqijR4zOo/5BYpvk9ACWr\nVXWa2+kNP/oiY66JAqSr0X/4payjaHL4fW6OA9IxKPfyhfz/xRODbOZG+8WM\nj7YQn0I6fuWwFQVcL1B/Ko/+DIKs9zaM+ldpszW3BiG/6M8la39L01kULBbO\nAXZto+VmEWEjTHNV2wwgu8CliB9Vvq+qXSKpcv17LxjI5YgHD4/eJ3diE7gE\nm5Onpt11skxNRb78vFeYpoaKm8FTMIsPDvtBd7L3PRzfn2PLCWqpWbJw0HQ8\nuIeflD2gYFSkXAQlZ1HZkJ7R1FtZ1uM/UNwLW1twvgqJERuyJIQa0hkY8OoW\n9S/9Yvar+PxwnQ1zhRYJcrlqopYoK+SDqp/Di3mWeLxCt76EQD4+4IbL4QBu\nZq9eRRJyEhDWTFD8KE6CcbsDeV+3jRDVp4hgwGuHepqEIP/sa9kQzhexFloS\nbPbRr1XYcE9WoEYfFXKuynmc1Jv/JmPI+VLJ9AVJlZgnN2n178Xv2PuatZvr\nTNBh\r\n=TMIF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/density":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.384a8eeb1.0_1608138109771_0.6380299301623533","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/icon-button","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c94c26362fdcb9eb6c2440d138d2d2b3bbd82524","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":37,"integrity":"sha512-WeCKC8W2Z0U+VSENaJCWda+BzMJ0yKU2u9o1xIPGYxvh2X4rM3m4erqwbVMx9ShkL1cUASLFwNlc2FHaGwQWug==","signatures":[{"sig":"MEYCIQCYEtHxVbaAAPPzkP3U0yemGvUY7Yp8DcjQ/HJ4eJNoJwIhAI2nJiEw+Uc74OIOEOTDxnSv7ATPDlTNzEH1ymOcBGLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGYCRA9TVsSAnZWagAAeIAQAJfae2cAAcinZe3HEfis\nBXhs1LMCQX2F62KUuRW8BRrJXTu+euXy6FGPamlRv3OK13pK6D86MdZPSeAF\nA3GCXEfUrjZLfQvne+kMhrvczHxTi+p4TFDdeh9SSbVfY9PYWIuSVAJTqqcR\n1HqUFzuMbgYbBrlKK0RYwFIzMPgfKAtgk0ml0oF2/FsgsNI+hNG8ZucCQuLl\nGQX/Aw1jmdyaMNGd38EI06o8A08CULbLr9c1ZrAVvx3zGno2PnmkH8kdKuRX\nCBjAnL5weUc5bqT08c/XI2/wBcB8xcrne/wKRpMB5YyTco8817uUM3buBBPG\nNQziWlZTUsi8cOfa7taqidAPrS7oWjs56hremecsDwXnuQtoGFlMx6E0aM5P\nsvuaUyG9G9SlbNL8vXegOT9i8mlJZ6Z+CBWUZhENaZUKQxoDDppmVSkh9MJx\nyIfISDMFmrx/wclApqB+qRZ00GP5f+avd+hhhvMPkwe6oK8r9yEdOvlLF4Mr\nJuJWxXQE1bkaQurnEdtIKmbxlyEDjx4ggFzX8MCvALuWvR7a4KKJPAJAmdg/\nNRmIenR0GXN1hqTkhSHTZDtqbCcI6LYd0yrr1Ujc0oxl2UWtImy3r5CVJrvR\n8Q5Im2XRKwo4K5DjcQVOiXpFHxRIn8niecb63AFkckmx8a5aIGdgIqD2zlB5\n9Fce\r\n=StB9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/density":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.eabf9d5c2.0_1608143256266_0.6542434727030897","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/icon-button","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29aaadfeec5bcf06780c3bab9eda01b270f30ae1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.30fdfd06e.0.tgz","fileCount":37,"integrity":"sha512-mRGgcJCKXetKcuPD/nmH3K+0HZDoUjd5pkN+CjBpmvoujGZEBXsS9NwRXNqhUzs4LBE1NWdzFBx04A73W43YpQ==","signatures":[{"sig":"MEYCIQDsZuMFNcuZC16MBV/bLe6tjGW8/eGhQkYWELT39kiTKwIhANCNu4XYdHkfqC528K66IKvFeIeEuoRqBfa9Cd+GXrIC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrxCRA9TVsSAnZWagAAbNwP/RIxv+s7xnWByRQlvNB6\n3k+ypqcIH41JGYv+7Rm9WJWPCtVlE/1v2iMGvso7no7HnFt9lggsu3mLi5Ht\n+xvY8iWMDqvG+H3GC6O+wTFhgchb3IGXuxTyCFA/7YZQHYZWSi9zuGusggOi\n0yvL1hdld4uKtsULGJtNFG9cdAKSBmtEUsnbkkTnZuv8K9oQrK8ikTtl3FpY\nkqb5QrjQT64HygJOks2Vje6yikKeIE5mOkdkRKuzkrLoKTfIUCwrtc08i7O+\ncP1m70UhPWCakNQ6U52hS9d1K2ydLbIAk2ZR/3sqTPdBmTU1kF06hlnn97vo\nibCQ1/pJbPfTLOEbu4sDTomBrfFwWz3Fbrs/VD7hSI7qLF4ZGlfr3ugZz1Sx\n2X116K1oQhANk23ZMF58MFjJ1rD7IQ8qdvh0sT67OmQmT/Ag9BDYjW3XXLQ8\npZ6sHsbkKROqKdDdD4pc163w2rhGIUhjB5GmRMpe5lteFVObcGTzBcLXHofu\nJLYL5GlIWCpiwc+u2Q9wuLb2/kL2SqfofJzM28h52OGw2ftG9FcOxk9nx9SF\n/ZF4e6klA8aQ1GSNQHUecBskQ88OiQPIVnfSAa7uneXTj2jANBcc1UJoh0rr\nZ51fhKdbPE2QCGMEi/h9tHQepRwZnqXeNR1axl/NhkoXEGnJB4V2JQIhXokh\ncfrc\r\n=fnWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/density":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.30fdfd06e.0_1608145648851_0.2674229738866183","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/icon-button","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd48d77158fbc6efc55fc3b02aa5142ccebf46cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.9590a8f90.0.tgz","fileCount":37,"integrity":"sha512-LHCpRaMKNX8YSWefkBtEZnjWjolS2TEX4O4i9PwqGW8ELAKF+U49PxoPgvZH1f9HZRSCOsezBuX0dJtgRi8cyg==","signatures":[{"sig":"MEYCIQCcg5Fs8CYKWYPndfJtykGgn/lRZg9BRjTtiXYfrMnOgwIhAKpp7fOSip/hApeIOIRv9bAd3sx1s+LTpTkGirpm4Oxd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/mCRA9TVsSAnZWagAAkKoP/RVF5EWP5afKWDivkgGB\nYTPmc0dZ7GJrnmA4lkbWopETa3LCVfIzoLfdjLTNi0dQC7jCGH9wTJyQzbKy\nRiVRSHsAzA7/bjghBG8pnbqycgcd3cK2JQaFVMe69NacffNzJwqfudegyjxB\naAFHS60EHRmv78QFFuz9njAKDm+X9MLWTswl8cH6bTh0Nvfc8VLGEe5JZPs6\ndfpo3NhxnPaPsZNWUN83oGlw5qG5+H9iwizsRdRn3AOCkMGflUAFQAxlNkGV\nPp5Nmy2dhZ6DKXFWZGZ2A3xqfa0XTJtfJPTg9PoKiAaEHObiRwIuDTjZofft\nfmcFi8u45wEbPovgMgkkZOZgOsBrSLx3jtA/EkaJJrTCz85i0yQ5rbSLcUnh\nX6eV2HlAp8IAn0n6zn81u6eAvkVDVLo9UNO6Gh+ltggnRCZR5aDGn2M81uB9\nvJd6rBKjmSx7jDEq7vCbj3LdY2i1s6XTIi/uvZ87FjornOWe4okKKU40D28d\ngPvTC/9wuV1ufEJysmoFgJ9STdzshCJgX5dUKi16XFNzppz69hvWD+mzP2WH\nj9HDDwfD8cMK5bFnUg5MTrPDtopYxDz2B19KGK12pTf6DSz9IQV5Xn2x+0Hk\nLKMMR5HOMSoY2LDh6SKe9gic1gVxAkvipcUp/EcQCHfRrzotCJAql5rzzEkQ\nw5zv\r\n=yj6E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/density":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.9590a8f90.0_1608658917709_0.21565842470558705","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/icon-button","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54cc0d068a213d741f92b2bdff126ff783709554","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":37,"integrity":"sha512-CWYzo9/6r2gCACXC4yISqguwGbH7De/Bu8KCTT+swwuADkLh9JV3F7LQ/m8/K+kcCZhvqfl6MMHqEu13UaSqoA==","signatures":[{"sig":"MEUCIHqBBoKhdvpLmPD1LTPT3Gs7BoAYibNc3EnzcIh2Mi2bAiEAhesVF/nGEGBds+n32hr56hTyjUAa3Crst57oOZFeAyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nueCRA9TVsSAnZWagAARa8P/3O0iBt/JR/W0eUbKU16\n9guYXyomuKuuGdTJFGLrgFavPFsRc5E4Mng8q1umbWfY0rVq66pVm1LwIY5n\nPA8c6WPdvUQOwOx1uFkodBZhTGdj+QeawBJOzmSak5wFYMcr2I/zPDewlo1f\nHgiX/mE1iyozhuKwa4tO0EJ31nMe0WbeeGyROGVpIEN0oD3rlZsTQ1x5JLcS\nUpMmsMuGmuixZCSWKC+EA54XK8iZRw8k1W4cTamEopwb+xbwj4wrT4oXjVge\nyEQSMmfOlxw0s7Nt/LICCZ+U4ySxZLGKk473b590Tgt8fIxDBFIhDYBtc1P4\naVdoHcNRrL0PEIDGpXmnfPjJZwWX5NEsS6JBnUXD9xM5vebz/mqXNTPQAjAa\nAKIAC/2xUINqx3mvn4ct2OyutSHe70UJkSVlfKKLLdOmqXhB4qWTgZxmokqe\nYUoLjEcDznbvgkQo8AUzMLG3x0V26iVGKIMLIi2bjTKCUd5soTOqmO+DaCBO\nMr6u+2ySBvEZSs+2zmflZ5vNIzdMK4dAYN/BZHK3DHxPbQMfEv+eERVFztVQ\nXFr5OyPV6QBkkyNYQGFiqFQu/pioUqXJAgq1TDawyyF9jU45vPNvGVZdbO27\nYl8aus8mgg1d+Cn8Utxf/e2VGNCJ81og6tFExYbQa2FaRYVgmOrxt3KFdg0+\nmixm\r\n=bpES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/density":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.f89d8b8f2.0_1608678301883_0.37103313605628596","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/icon-button","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b822cd76ae1ab6a96892d72696f88cdd2053ac8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.fb194dd35.0.tgz","fileCount":37,"integrity":"sha512-+BgSSK4JJ5JNcniiWOcS3/rmA0JUWU6LnSAaoN+wo2Sp4py7a1Lf/u1ZhG8A/yVcSMO08Yy7tJJvX6Cb86/jAw==","signatures":[{"sig":"MEUCIQCC+EyPQU6BQAUmNfAYw/f8AEITix16hmZl/w0JPTlsFAIgAykf6t7XoghX1S93Yb98lRiap43KalR7h0lh4Y4snYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPxCRA9TVsSAnZWagAA4toP/0satLzHN9TM0fz67Qfe\nPDRtNkVBSycYdXr1Y1EQk0MkOvHwrFIMC/odKB72+PpMT+WwJiDNfnKWN5Pa\n3uyAcF4yo4HOjLky/id0wb2QtVRYPObsECBmX8Jl2E9bpoqJ0bJIDm1AB8QC\nKkqPiln9rr5ykHOloNyU7Jt5z64CB58X5c8zkPhzovYBhkOGNaRGSRA0tap7\nk8TpCPyCcbaLNfpQ/SwHin/MWbuD5em2kYKV2oOtFA+Z/h7+XZQPwSZQx4fp\nO0HoKanvulm434aYsnghI1OwgoAhIkC1Z+HipdCxhrtnRLT8Ot0txEK+TS6l\ngkkgv3TKbRtyYgMv7BC6t/XdsHq9NO0q1L4MFZTmBLaJOVoMoeccT8DKlg9V\nP9ngJuXLEZnppWfw5j0pYzIEu6gLphNRC9MK7S/v5qxyij+9mBmvV9eNt+xs\nOqhjl/uP1n6gQX/YAjwweWIXPbsg5NjOp/ebFvZoxYuH1XMVR1K2L4UTdYRg\nFrmkwrdVEx22j+hFc7NLWj/YLQBhLmj1IS8XBsCpMgCPRdpTudT98148LDib\nu7wnyNptxMh89HEHLsbpr58mfjLcZqfLvHXYfogylYG4iOYKP8ulZmWkAXDT\nMkWwKeSBgkiadu6zB9rBplH+uzgiesMM7Pz6Xw/pIPbiytgaVxx1nSx/nzvr\nMpNc\r\n=L8al\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/density":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.fb194dd35.0_1609188337482_0.0986981297757874","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/icon-button","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4894bc3cb3b6f4bed5e92a0e778c0f4176b9f61","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.64f36e287.0.tgz","fileCount":37,"integrity":"sha512-ycqibeCIISpFgFyaA1r9e+OW2Ibtkj8SQapYUxDgzHHh4FCRIid2reu8wNcZMBSZRsyvAMDA1IubMbDqTi0yXw==","signatures":[{"sig":"MEUCIHBnOeyNeDvhL/WE+tu5Yo1VuC50/V6nIKz/Fk5PC3BbAiEAq2Ep2oqvD96LiYEJvAp9l5HHeK3bbXpCYS5cwE5gY7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klOCRA9TVsSAnZWagAAfJ4P/jKq1fAv8UDJ+G2QAP+W\nSYVXc610/s1tfHo6/+OpgoFjeOcHkdubYNbTEc2WOeEkxhq0i5gTCKLxiCza\nhPDV13TrLEynojz7jjJN6YqMv+aD0yBQHQDKybFIosIHC6N9XmwLdhG5XJVz\nSotC2uOwKnCIHJb6XZgUADi+35urh4VVj4HCCVaubNv2F6Iv4eiNgTh3VhIk\nXNGQhubby+tT+ZWzJ/X8cnPggvrbmrkjk3/6cp6r8aCfClZRB90ZCJbNIel3\nDV1Hrhoi7IulF/dauh30M1WcNfxP4qhXdcdxhwwfXlWiUnX3VA5SFiIxtGCN\nSRkFCab5PeU5CLSTQA/8hWOc9FpGffw0+4zWacH0GQYIRxY66ee/C25Ba4c7\n6Q+PA1qu9Vi+8Zmle+TUHAEH2UHp1xeCXv/ef4Ls3WgHZfWhu4CAh3s+hYFX\nvyRGutK8Ra7RajXZg1J1IuXNlaHG+Q+DXQJ5idiJzbXtRZTiQpWWkxswj56a\nzIpiMbHoCA+rU6zTiBkmsy2jdzSVOyD1NyVeg7x4ovci093ugbwqpJ29lVTs\nPQNlV8MQm5jvlwxhqcq6u/CBBCtRaNDcETdp+1RwfqVf5RgMeybRxGObbf8N\nFvb6Rah+PMm/xjjGEddFZFh3Kg5YMzFN4+lljaIsyVBA0M6w1As08+zU0nQt\nexW+\r\n=W5md\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/density":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.64f36e287.0_1609189709973_0.05545641756344","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/icon-button","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb89f9663a7f2bc705daed538fab447256030b39","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0-canary.b7bbe7022.0.tgz","fileCount":37,"integrity":"sha512-XNS8aYmESR1l73F7J2rr4SpReBB9a4jP+GJa4G/MHjD3iprFLM9Ioot6Vjmllk6JASFLI9wptvC7LRsGBq1gog==","signatures":[{"sig":"MEQCIHO/VCOlqe3no4nrgu8UqJCZFnSsKsLJVFOKUzIIqfhEAiAHaZNXiO838GKZlwIUZ/dxlkSyucgz3Y1fkOuTyXDXFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nhCRA9TVsSAnZWagAAJSwQAIxgz+xvddcsjkOmUv/Y\n+3HkAeuI4eEZ+zIwTubUe8ZMtVqyV0fqLbW2OU9D6XeSU/Siu4+Rxk/HLkrn\nmix3n4FAluyv0+utuvCEB7ShIJWTTBAToMwMmzLG0uSl9qz/uuMmkIY58AC7\nGAU879rWdtIysqyS8xbq+OG9noq3ai7TuPD8dA26vw43B/8YT8uRiWqEQ6te\ne5Y7SWioY0WP5WdaEMT5rKrOBl3w+AKeeToARPGvlLfUCC8qsaoPvyMUbJMW\n9Vc4/PHrLnnzEQaDQX1Hv/gh3WsbyUj+BMDzUjK0spPMM/Du68YPAwkx2ZKS\nQTI3beBPMovLh7Sz7BDp2I7NbsONPPyl69jSBwwEqFeFhzAaSZOS0HASroEn\nuabiDGep+4IC44hxD+UPSTJLcmzLlafeuxek9jKtU7cG9HkCT6bthvdICM0l\njTYbz1IK4MYSNT3y0ddtBhcufQrSDHyJQJU9+Oe0Gdt9g6Vor4JrKQnkkKIh\n0phU/QlCqmGEpjt/bkZ0VGlLxkhDXrbvD9yWkY9ZY7VVGEFNJBYPsxAG1MPH\nUgq9/kD/wR1qu+WNWDPcmyAoNKYGUkWwnSXRr0B3JMaedrqtqkPJpmXTi7ur\nQK4cpEi5JpCoDIz0TwPRhoyRGbUiI+W5BCbj+tWySuYpe0caIVnQD5bfEAl9\nwmlC\r\n=kKJc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/density":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0-canary.b7bbe7022.0_1609267680266_0.10246883149130315","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/icon-button","version":"9.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5271755ec032b2d5089e9403b940f427c1fe0061","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-9.0.0.tgz","fileCount":36,"integrity":"sha512-8T8kChMS0lxZ+PyzhUNlGUjcbOk/DEyLDr3nYGYoreLddYe2Hss2N0RMvfdZ03fniAKe9w0ySQHk5PWDsO3KcQ==","signatures":[{"sig":"MEQCICXYN9T7JhlL6RG1JMcBYwf/N31WLZeFD9uHmDt/o5wmAiB4g+WsEyupJb7U8pKoSGkvBQOgwKthSK1iZ/2K9qj+Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64d8CRA9TVsSAnZWagAAWsgQAJtq6BERM+p3fSVpJ/02\nRRZJwGCMzbilvjC6Iaw377SS/Kd6aNqsPyTRVfGaWLYB+gvXFcHvVUqWZKbk\nyqn6iSE88tWdkFFN61CwjrE70Tiks9CSea2ETqwHmAps4gUX40GNJELShJaE\n7/ZynB2hxcgDqrhejMEL4dKe7PF64emEcUbQogTiBcT51yLURIKvjYaditDG\ndK/TcKdyJ8y8cSxHlBmjbjeRUVCqa3R1gxhtu0iLSjx18RV6IyLKDHNg5bKk\nFpHFIFB6rpeXk3XYBSh/ZTvu8iIoHFPHiXFgVbLUWeD7zTOZBBb476Qks+Tr\n2gnUAmmuqAFWrWbVSiXh8AjwI/SjFuyrXNpMQHbcZtfkdeSOYlcPv/niLGtA\nCw3C673hXKoJlVT70sURYiBn8e6TfVtEi18S/cWQkI72MLNh08CoBNiilR7o\nKR4tiHt5EOlM+WcA++h86zbLh3Hej38fBBXQw7VlZIOK8g9UOejkD34pYVoH\n2opOqyPE+XH3AX7uLP/LQKO8BLRXSYmF+VzkqNMTKXV+Zn1ZdCjIMOae6dMa\nTA0ZcBVkRWjpxuFW85byJWvqPHxj5LK3WyI0X8fwx8Q2dxUvAiFeXkbgEgRY\nmhjA/K/tvsEQGKEN+vpqgenhxVAe4imQSpUfWlvyUXw69+69JnJxMMpnYj/5\ni2YL\r\n=FbEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_9.0.0_1609271164410_0.05903262837521317","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/icon-button","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d80059eeeeb5fb88eb4b11f93270129083277213","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.776c18681.0.tgz","fileCount":37,"integrity":"sha512-qXnbLaMr/CihdporpyxrKdj11dsNY+PJCmyf21T5Wa0tYqqsLV0wJr+E1Vb2yFJBegLMHQxpl9d4sCGkP8lzbQ==","signatures":[{"sig":"MEQCIFvm+GqSIzqVO1z7eYi3e7YWLO+MmMum3oBgLQ4jM/laAiA39+WQvnsPcOSyYx6vm2YK65F7TKSnXHfdt4Y7Y7DLhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xpCRA9TVsSAnZWagAA4TwP+gMpBEeWqFjA13IR3nU/\n9B7+urL1y1ofMKS63y39nucpVw2fpup7hQ3bWL5N2NeoEOqcf5DEk+gtXFpR\ni0B8TB3Bd3AZHWNLj4F5AfanZiMe8v0fy602DGxA/6OF1qUmHftb3gVcuwvG\nCzqyxV2T8zx9JNC8akfyXrFdxQi6xnWoZg8e8yyNxeS+gTspJ+6S40eC78vT\nR9Jv+IKNA1BJAtqZdnOlID3DQij/0ceemRwBBIV2MfcQ6438SuoeObtk9HHH\nzHop8wI+IIY3P2CvqM/nxl0sdQBX6h4qmz3zPLRFmAYESI+H35m7bJUuoThw\nqGtoONCrfVJdN0C28s9zUbCcTfWWYypay5LDvGpve5w8h3XXpC1abau/CHrN\nPdzVixiOWijSI9vq/+3Ys5HQpl/4qSobjVAVPam0N2zi1mQQXRyKu0m3TFv8\nSm2uWCiy92Dcl69uTrQjpe/z5Iq1X2BqxWS1mYP/AwMmU1da51CPf8bBc+lO\nYr5TGQI1mF/bu9OHsxP+VxtPl2Bz2y9+nr/C17PaA0IuYKpYhpBDTlIDvQtV\n05SBfwtG2KC1mneHxIBC7a/ehQYNMj6+U3s2HZEO99C1vZSUnULU8TdZkrqe\nA/RuFAoyYiEP100HG6f/moIUSYGCi95xL63RVet9HVQFN9ssC6a+hh7via7B\ndETJ\r\n=tZ1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/density":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.776c18681.0_1609288808695_0.6314900291441605","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/icon-button","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c99b0d372804eda31caa53483dc5d754a3b40aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.671d72d95.0.tgz","fileCount":37,"integrity":"sha512-hhCDMsPUnG2rfXJ5qZ9zzcAQM+OuiIbFVp4wCyR/rtyyIRAKb2YDDVIDe2VMcEDy1JW+aTfPu4uF4i5PbnMNWQ==","signatures":[{"sig":"MEUCIFo3YSDZWxxpYjzYr293CX3W+xsiWqO1zU5TjSluOfsxAiEA3/zqA413n3nm5mQrmrVjnQylLw3+qTxtMsnYAPRYQIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8HCRA9TVsSAnZWagAApWgQAJ6qYZun4mQCBV8Z45Mt\nOcM2vFpZSI4QlT3OXa0ly54JYfg4/Wmwl0ezb8ICf4dy1C1wL3+DhhpOszqL\nlw7iaQtOBI/B+GLlNLzZXP2NUOdKlJEYz4cGsy4DU6i7e3WQqU25O2wVYBma\ne879BG1yn7bdKThn0+4lyBREh2SoUsDhQYGtsRyMuJuAoefxMiDsxqzSnVXK\np9NTg0rUppREI/8G61dT0NHleJR/9V2IFY56o6YgjTVwu3VH92awDgYJJzTx\nISA0wEI2Lnn1goWOkZz52zn7LwBnWiaEE5r/2bYHPsqupo+SrW7cBEZxE6zY\nYVtrWrBzhD0+4EBpgx9Nvgu7yfz6aUybPdZgyTDTW3nfajA0ooOZMrr0Qrjh\n31gseS4FBWcM3Up6Y6/0YJA3vlY7/Yh8gkmrAjmJ24Bl5FOZzo3aO8gwChR2\nr1j0bP4wNc5ZmnSxhYMr2e8r44613kTgqcDc7eLdterFrpfXsSSfmJ5Iapgr\nmoorkBuLz3C5Wl+nAK2AB0++Dxp9dwUB35Y4pRrbzqfPMziFWVYzeKj/mrW4\nwCQSuXlGRm2O3m0mf/7Z0coKTriLxHtsZljB58j1BSxISn2D9YJzXHYK8Vr0\nA333eWzJoRgNXW3MEwHW/JbQtkHf3r41Y0JfZocb8w7pgrFsDQEJhKcJ7C/Q\nCLqb\r\n=w2cz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/density":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.671d72d95.0_1609359111158_0.4266214221671696","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/icon-button","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e54b5c205c032273eea7dbc374258a6c67e3e97b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":37,"integrity":"sha512-0o81JvrA1uJGDllRxn4x4A/sm7kjlIh6tnyLO6amq/iR3H5T01QEyg+EJX5aKIa89fSkyp7By7jEps8tqvgGpA==","signatures":[{"sig":"MEUCIQCy2eU027w/D13R9SMUdE2uH6YLrO9Yxa9J7/C6/Js3bgIgH9rAl/C2O1sMVC0Ve/HrDMeFtRfPeCePnm4v0HQZ6p8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUzCRA9TVsSAnZWagAAUrAP/3XJqSEFYmuT1ncD3suz\nC6f9G8U4fPxRKZdGnAfj7JnpPVdjH6xe8Es+i0qvyfH0oeZ9DpZiYOqmFltA\nqWFmuomd/SQf3GjLRd/u0kdv/sqQO0p84PMa7Ozf8zOO2yUrLprHwVqzSyVQ\nxNwUnmYq7yf4jQIspfGEmyxL4DEtJ8BBsyGVdNs2O0TKkPC+XJnPyuyVUuD/\nZvJCGV7ruZWjjLIa9W6O/S5Ffhn79PJ9jB9YRYf+ggxzxE+wptmbs1JUi4be\nqeS2eU37zgf6xcHhToxUVPj4H3ddTYTiQWCISa+fT+rZjATI41El4jyaw/aX\nPROAXeOdbLSVEH7W1aydSl3sH7HEUIhm+m51Lt6yDXJDZyuvetZlj3EN0IV0\nSYX9evIW9SdjTe746ByDewvuFSArq/4XjSLDwnB6L5STbJJcNBVoirpozWOM\nCerk1AAqcuZ4CNZqyXFwM0v9LN8PbTvruUdj3KU88R/c43g7fPFYITbSOT1r\noZsSKcEuObJaj/mlG0Dsb6LeYGIIU+z58GNnj0tbJ8gK5Kj8QqX68jHg894I\nYLhZ8ac6vdyiw5/hSjBD8jM8KO7byBkClmMcP6yvUixi1OtHLQKUpBoXmV15\n0hDemAL07/drTdA4EFfIY/iYJhQU9Ux7TGFnPnjAKkut1ThxoNqH58QtJuiU\nzr4Z\r\n=Qgwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/density":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b4f5a1c9e.0_1609364786847_0.9109356436621503","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/icon-button","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e597d7b14ba74df935d736db8fb1739f47a20913","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.a94bd8deb.0.tgz","fileCount":37,"integrity":"sha512-zWl7fuwrqO5hu0sH/7khKDDHkfKnwr0xyay+YwnjxzJ7O8qafqrIdxHjbO6xrEWU1Yrn0BNSzUR2nukdyRIthg==","signatures":[{"sig":"MEQCICj2PlPavueuesu9hZJlMf4ecPZSzSs494QlaIZqxN3iAiAEQfCniZQE85/yWYrrOWCM7rPYHqpY+X4wu1a14diwDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlfCRA9TVsSAnZWagAArEYP/jr6U7Gv+kzOLlMhUJtE\naoaL5nc4/9PCBI33VBW1qHAhTQsCZJBl968BLuJgtjGMSscHISQINDFB3V/5\nDAVCLA7LMAjRC9nCYJVxbNLzHt6Wc73Dc/IyDgi1aZ0JGv5qkoW7P600HRnI\nKLIfpFF7gO2W1EYngSglFT6WJOhOKF3MW/xXAFKAGLGxI7HeV0ipW3AeJ0Hd\nG1+1HytReNiQsF3/drLrXNgjeKxfsY6jVoaTh3O+hp39ONvuMYiHN3AcHMNC\nXBZLhskpwn1l1qlHsHlglnPONEkglC+NbqwMjsRULoYanm/RV9+mMYXZ7lg2\nIJdxfhL5fyU14QIa5yQ0WPtXgHopl1kP92m7jVjTQB6r9rXwa5cC3izqrxgF\nX3eMc52nmnyd/4IfO9jPdOh8xVFLTo2FlGAzH4d2soO22AyNxsA6r2d65noW\nOk+e0X17k7jlO3VNWbsJ2XQTDW0M7U5xervlXaQCTF4UwVqIQUNcOp8qckNc\n9KWpiJNZAnVlc5YsN0E43SE6mpPKmnlMnMADpPZdDFTgdgMyWvLR2pKEK4JX\nGjIm4XArHJnyZxkJ4nj5VnUn83QEjw9ndH+bQzc5H3MEYok5LSwFjMrfM41X\nvOLiHTPipi1QE2nbqHEf2KQhVznnxy3PPj8zuaomv50d5aCn2OhwEwyFA0R0\nwNIf\r\n=3zyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/density":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.a94bd8deb.0_1609365855362_0.39913958034179964","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/icon-button","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f59c8b5730fbad79ae921b5105f2dcdff1323a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.5d128511b.0.tgz","fileCount":37,"integrity":"sha512-Jucv8e+6/GvWjLRvp17ZDu97WqlwVVMKQgE2mTQsqJajxIbYbeZuO9fVeargwgxdLxq1MGHgSNgfrnxvrwxXfA==","signatures":[{"sig":"MEYCIQCPlVygmf48MM1dY6Pmj7bRbDk8gYSJE8pPX3N+RDLavgIhAJty1+bSG5/PVVJFz+4APfEbo5XVtAAlTWMJeFEuWOp6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqnCRA9TVsSAnZWagAAYL0P/j6j5HcY+oq6ghXUEYe5\n93g/c86LQ+0mTkDYTpgfJLaDCdzrRU/Y41S+Gk4aVSsLOIyz1uCdhJlmhEAe\nkzYTU+oYxekj0in3niusrdSsrJDXBy39MiUa7Gm/D2SH+bMQHdU27GGZA3aT\nKWC/xaPHbsez18gIIMg2ek5LAHSnbtPfoyRkHs7Mnp3JDoGdKwRdrwFZyK7r\nlA55tXpLuOskWYljggvEGeIf0kiZ5erGRRFwc6WjmGcLutzElX4m+gg7Y8t6\n35i9zWQkFqbzEAtUOioHBneF50o90pit+m5faddgldRczVptLTvcDp8QOhuw\nWHkiFQNlLdrUy6OGXRGFwUbuOo8gzj9fIkjmzRNjE+twaXjIAWWaD4guUAU+\nCs/gLALWhJU3HpF/7yc1/eUKe9N0O9tHcwjjwZA8KCM4UvfECN6XlAn3JL7V\n80fCV/Q+bCOrkDNwzT8gwCJLw4IveFKHL8salTEIX0JlrWQhqhQtdm3b2L10\nrKRLvXhb+ndXkRw2bIkMZMEIg3NiyY83vrCpwCjUSZhHEe+xLXyqzqQjjGkH\nWLQ8/wN/4bXVWCtCx9zmcRuyFKlF08XMmiC9r29OMyxaWCH/lp0l9GYXR+Jm\n89nVW7BpRtiFZ27BcKAGnInO74zjd4ktdw8oy3avSeEb9OOl2NSoZ0ZYutSk\npX4x\r\n=lXao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/density":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.5d128511b.0_1609366182815_0.6234523150923637","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/icon-button","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d2010662710432f6022d8328cdd28587982d46","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.365c69360.0.tgz","fileCount":37,"integrity":"sha512-LnTcvXCJ/5d/UjXVYqNXIOZEfdIlr4/8EFSHbo+O8EMlTebHcAj6WMGNUc70//zKctdU6WYTNV6pBVgMmOChEg==","signatures":[{"sig":"MEYCIQCWt4eoZE4AYeWn82YLOpf/8dDUZMHv7pijYH7Jle3TgQIhAMPAPgSjSf5Ac9wZVD0F5JQa+gmwgL48z1xREzyclHfz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZdCRA9TVsSAnZWagAAdXgP/ixZ3CMV95BTeH4wOtqx\nPlXZNgru2fWjgLN0t3ImQIFxm+7FDc8HGjiRdNZH/8TszDrK06EfvmCJL0DG\nMV3YcgfND7r3P+ZSyTVu0fNHgcFrxnG8wJyZnssM2FrbkC1qn6i2AXgVtcW4\nt3TiLECkiz9/Uzy6v9UTbyJfTJqXyp0wXOykRs8L3VPXJEzJTrBh68QJ7SJB\nE6WWxHAnZEJ6lAszcXBgtJo/9Ojm9XX0VTi242Eo0cPMPKrjEOjOnNRaBL54\nEblXFD1O9YLULCp5xHl8AEjBbJ+ORL0FwwJCr3xinivqm1Ztkk1OTjzHLZaw\nR5Vn6tEGWQzimF3ifY5s4F7VtmrXZMVudN7gB3BSLE1ziOI0Y15OQj/1sKuj\ng3jgGhdeKeoZiY3DCTQ4mYzwhEJLjFgjRX1pgwXqEyHz+ER3j+jEwyxF0sl/\nKOT7OmykK81bxf1Ql0gUdKUbX5j9fAN5rboLXXKlQHTb2rhuPJAGV8uo01Am\nwsGoFokRkR1mgSzA4P1mjwTkTWb50H3cJuoiQy1ehUZW3YXx4RPHbKHjY8ro\nwTOHBb5YXyoiKsUJwnnmo0654M0Q4jh8qohglfNizeH5rRXERKw/47u7GVr0\nYk4N13ZIAyBfXVANhOovk4AlNee6zidB5mATeQOiPBDDglVsKwDGFM2ooKyH\nc3xp\r\n=ezDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/density":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.365c69360.0_1609868892755_0.1117940185944335","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/icon-button","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39cc0c7488d6cc8bf9f9580cb6460fa0af902198","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.700a8261a.0.tgz","fileCount":37,"integrity":"sha512-LEytWrSQnhfelKeYVhl+to1j4PqVin0pRT3PNdOvyreYcQjsB4MZjxCrIRtejJ+AOjJbeCkZPKnajgn891ry8w==","signatures":[{"sig":"MEQCIAOlCTnThZT78m0dJzq84ZNmmxfeT97jbANTSwr9hMYRAiADPg/tpSBhfZkNlFKy1so1OWRlNumIGLH3ZNvf8CbILg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNtCRA9TVsSAnZWagAADzEP/2ckpZW5MfJwTSSxgd3X\n2mj+Dh6ItpMmiMmC06cfa2Y1vnlTHk+DMAl9lrqpA5t1V5s3il8lsOzpcYmk\n99X+foGUSXnzJ1B0k7oIs2FdhCooU2tmWu/INAtCYsCbC/VW40hsNe6WdmcK\nXH+B5JnLuVdMGbcqP21FTVBkfUzgCc/ZXUqc1BXd9FrPHjHIk603cNRKfxFE\ncQ9xXl+/Ggfr1riFqFXHqc6/AZO3vlMRaIiRiRGz9XpuFotErsasoAu/w3H8\n1lvZIfymq4TWaQ6Lu+VnhMT4R91tE55La+WXDxyQnRO2M7tkJAsB5NzaKP76\nByLHpA7jd6h6paVzkrCGwxg3At9jVUvHGCbKvBIfCX0ENLxdI2K3PB5xCPs6\nnrvndI/GUABjIHk7M+0bvQET3aPBbAibXGljE4s529q09L+iUPWl5hmF/Mjz\n8ODqmUVegxT2aKnL++CXjCR+JVeOdS/8vIRqgGlc+A2sH5xp75hFY0tCCsdF\nP+vg4mUCgO6vJk2QYvoBTTXHsRxpsErHw0ieSvXKowHRZn1UTaBy5ize8BXp\noLzN7dvMwCnekEBijUz1JhvzMhnl0+cuHRNLVVrhBNEPfSodOZ/P7ec4zBHl\ntJ6iL60zs2mAnqGQnbvIi8Lo2fXjICAhkWijARS7+GROAb3dKeSmKhcZhOBR\nz16S\r\n=5d3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/density":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.700a8261a.0_1609880428860_0.22032510147345952","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/icon-button","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5108a29767a6df56100cc7ee29e2cc3e7e3f978d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.766981c15.0.tgz","fileCount":37,"integrity":"sha512-rMv+3YrUok3Ra2vI+iO+sr01f/z+Q2QEhLB8ge9yF8G3nMpi4Hnah08E3/2401bcl0/qv/zrw94j9ckOAy4M1w==","signatures":[{"sig":"MEYCIQCWWbKm4cVJRM4fkFI2ZdcAhkOGU318hlBFunn8WalbPAIhANB9/bzTRkrN56cYscK6xmHzATz2FrIpMvkxogkjmFwz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrPCRA9TVsSAnZWagAAM6cQAJL1RCc0JAGvbwKk9iVr\nYAXqQh5H/Dyx/tLrDC4q3hya/tyOO9QBTjfw+Sq9NmgUbir/DuFJD0NpJUF+\nXAytuZGSVWvAiJU8EF6qTPW5lv0Z4YIkAxI+Idwaq9ndKNhFPl0U276AeSza\nxlCrIuEaUbhxLkS136rLJHA9WQYF0t9/BBL7fiGblEYd14pmFSlEG8FcnJae\nk7SgrVjjnMK/RRlnvRaBB1/J9TbKyrB4I2OectKU78vpYhRdNcvNxlJdwssz\n8PX6Ek2Pu8OH0InxhhTI6jDcsWQW3kyB0JN5p6vqOIbyXdNVrBk1bGBmCyud\netvw95hCxB4ELM0d2qQwocPfdJH7SNJOwuXOAHLgvAFbTHAI6OI0KW/lr2UX\nOXUN3t5T23hkvXkHfHLVVLkpmPvAYrNNvfd1jQdwaBtlMMKfkwtVPSDXS+bK\noiBICwn1uCnYPJCJsbgCXC+EUJwahNGBqMICvbLa0qiPGv5UvdMZJAwOT8OE\nO+sRRbLVFmib25YwTZD1wRQNAb7FpWGm4iEKF+5/g8s8zlwS7ptI2GVz9lfM\n/pd1y64TTdS2qReOW1aURyhiKXdSxcOlnZH/UeyBX1oBkNw+x4tGcbl+gbkw\nw0O0jbacXaFuZyNJ3ke7i3BNXyUWCX4HOMQ/qjiwdhvHiR5D9ablzGp5pylE\n2L8m\r\n=2zaN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/density":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.766981c15.0_1609886414700_0.377227535961866","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/icon-button","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05746fa0dc81d281a564b4e763496429383f89f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b28c576d9.0.tgz","fileCount":37,"integrity":"sha512-jQT1BkuDpRC7/vCwMPB+c4lhCEXUkGyJZRyf4HsnDbmu/ttJJJjVPrTqNyZVSBoXgrpsxzVFam2+RVajJRIe5Q==","signatures":[{"sig":"MEQCIEy+NnLFiFrC0QoK8T+cwcy5P0O0BohWp537AhWshzkSAiBOWbEFDdZePTzwMFNi6mFG9mt5HorX0+VAluyB9+GFFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0WCRA9TVsSAnZWagAAx8IP/3h9YIP2G9s3u3uLxl4P\nxjCCTrGzElbGvNCdpFO3AXFXhvzdyb3ZkQ7KqsOsq9K7l7vI2a6H4a+O8+ei\nMHQFQapzi0FLYc7kcCmsI6gdJueeyV3wTKk1dV1e7BtgBS1xZEPYOBARrGOW\nyZIq8cSLkHIFjk0inw7pLdd6zt7IRW0otM1+QUGDlrboCI/5luZlzvb1qZ8V\nJPKSK4RAx/tYcDcxsDodRmyoyFOvRVgz2usge3UMsuLSkp1O4jwkuLCvn8hS\nYnTeEHHHZFbLfgvfBRTS0OWkZBRXJ6qM+479PCLuR5Pv2gweQ7/s/Lz9npjQ\n4yRlod54UBNklRbUTrsYTxWC+WXB/ZLyVymudBTH492hWsijaSlIUAjEg14Q\n0TrgH2e309rzrtRRAp1525Bynds8HmyuPbjfKan6bgi+mUGwxafIGudVV/L+\n2jaQuuSHr3dDm6ntesuxo9BHq7MCxwhRNh7UqFoJgE7I9bawiNCuA92QGjzz\nuorfL16cqYzhwbXJxLCssRYxjNcGMDamgQ/VDyQS2PxunBdVlpNMtCYd5/tC\napE/R5QFaK2IWUDD7PVk69wM52xT4SuyFF7xPpuaX3/JmkuhGHopbnlMOUXt\nVxm+gzawbTUGSN+GOmtV/Fd1CScwTaebQ6mo3y3RMYemuo/YdOQt2iiiJkkr\nocRo\r\n=LtCy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/density":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b28c576d9.0_1609886998399_0.17269107440150222","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/icon-button","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06cc17ad6a6d0badab81abd3479253a455a35e92","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.968735356.0.tgz","fileCount":37,"integrity":"sha512-S3qvrco6UJBeokyWutZw2K3Lax1Yk+HnWVqcXW74lOxuIQI+DUWahq+56Z5qqT1V92cs38u+Am2pPfWoNz1EWA==","signatures":[{"sig":"MEYCIQDiH3741LiT5ke+5qhu/DNJg8t6mqDhKxxyQq3fGsrXTwIhAMKXZi9r9fGUuH/x6PPVodHx2fAOMu1hMbY8lHyLxCPP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxSCRA9TVsSAnZWagAAoc8P/jzLo+i2yjdd+MUBXuqw\n6x4diTFgz30X7xvSAju1RuOWIO+dKw5iK68js9G90LUg8KhKn1ua5AOjJ+YP\nTCg+ZbMuJzE+9Ssmm4ZkASjp1YsizKcZybLt2QN72xzyenMrbvNc+QXcEBnD\nYOBvOXSwLIRObbmWLDIs71BWsUC654xd0SmzTGgtdTo68bhuYpGtxIup5a8i\nl1YuURywDfpNB1QRVnfb/C1MK6JG9RgNiecu8CP50t0dd0e/ZGrRqgihethB\nTWGMkqZXFuRsPP47U4lYbEbom52Pfg8E/KS275amuiHuCtMF+I3ThGVpsMRj\n2ia40xbkIbSFSYx6jMVZOa5jQqOSazi5GuKWrP0prU5V05Z27jMtNeoenOji\n8WagstHrfoSJpQiSV3f6IxrGMHoFmsJscCiF0W9LyWPP0+ig12aocWyhwj9s\n6IX5xsToM+guCICf5VA67WxUzucFsAiydfuDkqx/r6laZNAN9prmqaYvn5G/\n601tzeydBHtyNqTye00Aex2za/86QIAClH25A5qnr3sDqec2pC28QOm7mglr\nrvQ++NnufSJoF53NiI+F+/T7r5+Q6QUCSOnQsn0i6CBkr5mX1cZrwqhefaPd\nYBZPYNfaSj6R4jBjzpGsELne1LsZ+9UyVdjZ1JnP3I+jiG4xfTOGrS1FFxQq\nlGcR\r\n=RKbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/density":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.968735356.0_1609948241993_0.7618474684465661","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/icon-button","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2cc168b252e22c478b3ed28bd450f3cf2fcea81","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.c5e18b020.0.tgz","fileCount":37,"integrity":"sha512-pHYToDRL82PpzYI2Mnj2gts/ON28wlYRdtT1kv1+LAcmXpzXqKELRiYeqPL7iWSkOipUtwngBOkcUhaTlJ6VQA==","signatures":[{"sig":"MEUCIFZcH5CZzu4Fy6KRTegBsvtGti0229vGm/+FNaZYharwAiEAjB1u4ybTFihxvYb+JMg/IXvbiinvyqkWBA1Y3HkY65Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMNCRA9TVsSAnZWagAAVpQP/RYbv1kyZR2CmXjYqwtt\natvQH8PUSJrfQvElV6HMK7E9LLrQ5FSUh+p5lUhLxClM3etc0sgRDGSkYNIk\n+GF6+sjfAS+2EVq0B68TYb4MD0NZR7DtD8XkdXjy4whPgcbPP5Xl+NPwtHts\nAbEIGpO4h/1liA1TXuCdeMLcJnIB9Av9DXrYJx/iThnUjvz1aZ4Af3CFlTeg\nGyYf+KqXzSyKUo2eQuxf9RJpFpCJyeDEbrPBTR9I0mwtl+uiyYz9TErSZRt6\n808SsHRCNW6DEURGvrYpvOH3ddX+I9BjdewvBty8hkAAuGyEaU4MhW6GAnVT\nA2zjwvum9IARbiWgOxjzULELwAWyJcWynTZZyxhOBHCu+8fshVURCzyUEvyv\n6OAB68EMnLp4Ikd+30p3SLSrvgVcJUIGtIJRoul3Hx8qUzlbq/O2Mpc6blXz\nUcWfGaYr2Xu3kmSz3FeYYEHIUMvEOjjrCEoUkMdfz6YPluAYyHztOoYzTS8D\n6+cYkPrnfVGMgt+J3O1VDqpUjc57BRBni9hzasu4JVH556wrUsZiUhFpAf5d\nO7ZXeCdaLxFy57UhE6psVxlVAVH0UjX7xhHwlLJh2Hz/GLM9xV6vlPcQ4E8B\n2YjJbsDYaQ66DO49u3ELGd5hOa39S27YSzGEuY2VBzlY7zEC1gM4vCI6TX9P\nNgnV\r\n=6PPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/density":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.c5e18b020.0_1609962253065_0.19783430009734726","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/icon-button","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c7ec726afdd3af72ce657145bf20a8028bddf73","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.bcff8a66a.0.tgz","fileCount":37,"integrity":"sha512-XSaEsguq3pSSNRNFQzSrUXDKBeH6c74yKO07Lgo3Ml7l+YVHSYRbBI48AA9fWbKrCmJ0wJLLp3zecf9SQwRO6Q==","signatures":[{"sig":"MEUCIFTrogisBVimBEy63ieme6fez3n6YotcFkTnXvGgl3PkAiEA9HEw1pJbp7WUaq5AEDBAXgnmfJ8vQg+0SU6YhaHbC9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzxCRA9TVsSAnZWagAA7g0P/3wtyO2kJwczO1IHqvtp\nbvtdFSy91PUzweg1nBXOw12SGtw+GBpOGNpzwzCYWLIdrErYCRCu2u7SGm4m\n/g11Z68V4BfN/FecZXfT/3d9+r2uN5mWdq853ed3Swb1a8+wcx59KbM4jsmW\neTC+/loTVpJr8eMKKjAgd+FUDCLU+XCp57AtbZqb2xp1oc/mQSnwBaR60VKl\nefg5zzFkWMGCT3pp4NJasqdKsIj/Iex0IqNGFPLtKQlFukLb/3NI5GaluZWJ\n+2HHVxiN47g+eyoywdN7RbcRLD9Y4GurduPp6PGILQyYZZNCSy84nV4MxwA0\n37mmRjE+lF840qYLrmKy/82aJurmbdwhdQSg3E2RgPBIeOq878Hjz8Iqkcns\n/BcdPxWzNn3YlFW1sCgWwAX3vxmRwYIaDke3y+3eBgxfE/pIRThcNULOHEDo\nucwGH/D8Fpz7pd5LdS928qgYEabWIvZpnuP1V+Vow95WiPeErxSrlTcVb8Bu\nzh0gxP8g/wqo45wI4hUIGHz6B1WmfH35jRZFLukqObu1ATB0BMoM4WQ2ura/\njbVJXMfp8/uRkEyGaSIFS5Kw4KvbMcgTzv+SjL2sI33VH4HmcPLp2rUkAd/g\nMXNslS3qp/r0Grnm86DQdjn+1CVx/8dW1lObDPtdZt7X6YbnMikOwTjbTeZ2\ncGsI\r\n=6jeS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/density":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.bcff8a66a.0_1609964785359_0.4589224810453467","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/icon-button","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2c4d7787a1014d982ed95c009ffb9a5c82fb7e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.79328c9ff.0.tgz","fileCount":37,"integrity":"sha512-Dl2HtSpHQcQ5h5eI7oL420ZvDbFdHiWg6Mnedqvf5RO4WtO6o13cAi2KgBagpwe2IySEoHlbdEeT/O+eXQKZMg==","signatures":[{"sig":"MEUCIQCPRAeGc0hizkAykXhdeBpFeCRjIzOvylpxaA1V9vWBJgIgKXtd1PNfPaU9fQbInL2QJIm4AG4BDxvnC7o3XVtsmtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMkCRA9TVsSAnZWagAAKZwP/1CAmtrOEX+4ZlxdB5RT\n7rNaBitRNO0Y5D7iu2a0/uWLFs5TC7P3bT2eDQlP6UepVJqLzmmvAPZ2MA2h\nSRUxKmRmRfK/1jA5mJd9i3qT0fQ1L9Vqn6dt79Uk8pmwO3BYb1YxRAcjoeiN\nk/fMrRX9s7mdzjOb0UwCeRZbkKb/z33qArqW3AUsuz7PclwNsNg/YggiQfYb\nEEYgjT1l+9+lTl3XjJP4X04IJdL9URIipOaR37j0oNdlAwB1D3kfpgMdKNR+\n3yAsWB0RYv37hK23J22hXNLEvzyMdxfz22bsAX6ufCG0es7R0pMsV/S/iztb\nlHi+T64pzW97wV9gxHIEiLluVxDoZLXW9Vl1fgtapWegp8p5q2F7EK2IoWhf\nZOKhaT0qTxFcU2d1fyE0D78D9MvdZp3XPGKSewP47X+5Of+e5EaOEvaMwQMr\nwxC+Bb/vvWAnsHqaspEEaQyjFYaAQXozrXSXRwozYx306a/0GIP1K4UtvMUi\nSFGD7EPtVaMn0wOlKZ4Sfn27xYIZum9ASKNWSXoOqQXdDkjwu+1siQW1BHjJ\nwBiZlbeqwKaxYh+2ZbhsuH0oRLi6/Ypm7tp1X3PcK8TlLuvmTtqHCn8DqgkN\ncL/MqhPS5BuPgLnP7Iee2RO+6erHmATSCAyBPwI5w6z322mrlLpZp/YUC+gw\nd7oY\r\n=ea2x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/density":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.79328c9ff.0_1609986851731_0.9408919360475734","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/icon-button","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6585f4c30d33cedbc0e578ac254a8f22e6c7289","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.121e1f303.0.tgz","fileCount":37,"integrity":"sha512-mT964peBJNtDkFuuWw3fgcW7QWrWBrVNK3nVBra4Ide8ZQruIWCGQvP8z0W10DTysHzIGhXq73SUOl9NLGJ0+A==","signatures":[{"sig":"MEYCIQD00nrycq2YLTu3C7T5MTxxHEwfeq8vkJtbEDxOhr8dQwIhAK6f9zz0rwvTYELkSWzkJ4C5ebRSYa1k39qafw1EZhNb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95cUCRA9TVsSAnZWagAAYekP/1K/8LNLX08gmaNffpNC\nAdySrxYANo/Cg2NnNhrU874ytn7eORgKCn3qk02/2/Eqq24ATjNS/ixrT1cC\nISeeFG7znffxzqZaB6wLuBmRZJAzdJrvOBaX7b+l9SkWAGYgYkn3Vi7dw0g6\nGsgLSQjv6wmitwnrn3N5qI47bxn1JGa1X0e1ZLIix62TZ3NrqA7XU0+/H1Lu\njasEFxTipRYFT6uhWWzMeT5qNgXaJIBEzlAiJqIaRR2RNctwWfpO6EcwJuqu\nreez4zK4EhGhSS75qf883Xvc8M0hTuJWq+LcOncTbFKWBIskXPdasJF4U+RX\nZFAGyFz4w27S2E0LnU+wR2UTzF/AsLqcoAhsD8xlXmS/G9iBw3lvpzM72yaj\nkDue48YsdSpBWVBEws0mk2Sl7V3Cvw8eod5z93EXHpBI3NS5h/9Wx1VqwKuj\nGjWlozYnWEpaFnh5HZg0MsDebOppowwOuptzqc2etDpeCCVti8iVNt4Hob/7\nKoE9U6NBO5mEQCUuQ1VNXhaYxr1PwV2SJNCpCSCibI6LzpfkYPJSCiU9Z668\nrVUmxBfuBEugDLCkrM6pvtfzuXBR8UqvWvKPxp4M5+ASlzHlWAsUPbdsWNCB\nQ3upVBARuwpNbrFEpdeRpPSp6hr6bfd8+y14AEI9j8FtwKGMsilSIKLcDr/p\nFU2t\r\n=Upjg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/density":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.121e1f303.0_1610061588092_0.544483299457087","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/icon-button","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b431874ee652070f1f594d971316bbe1534d9dd4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.abdd10065.0.tgz","fileCount":37,"integrity":"sha512-/Kk9YUAkcuJ/ZZ1mqsdg7cuEvM5C1lDHMVTvu7VP0+DJV2E3FMZ5BtJ+49IbQYvlQiy2IZrzqZKUHXhLTTKlDg==","signatures":[{"sig":"MEUCIHXkX2zMo5TGhsRoUT+Bs0l9RgwFjMSVzzJDqYr/4cRaAiEA+tX0snxZ8U1Yt2/WVt0nFtnbXO1/G5wh+JkA3NILZGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JueCRA9TVsSAnZWagAADP4QAJa77OxmkY4K2vKv/+O4\nq0Au8xG/rXPdXqi/DC7kK1bkIGUpUuutDg0Z28zLh4sfKzrxAv+YaAzywIhw\n8WXuBHrK5llIHHVhetNBqRiHrfA2N1ESE0aaOYSeAr8migSciIcsVMD+rQ1g\na8MRv6By7GRI4hEYt1qAdaFNuCGRwj+lVO0nhBnqQ5CymREgJSEHtUDUpNpn\nah5WdIfVn8kLCSFcORMd2HqBkGD86CKNUtlp8OOGr3mKAWCB2ih3c/qBJQrn\nr/QA2DS82Jw0CONEf44VI0kCQbRvxlYUywMf/MtL/3zr3MuBGcQpoDG/s6dd\nV+RvOzveSaV8CA/fr0wkuerA3u58ojR+akrd+4IkEYqYnvBdTrt6+V/SpPGe\nnUOl8R1Ch0Df67O3Y/UxwBpeiV/0YhL1wfx+1XBHL5HCiLc1JEeMKA5thd/6\ni41PWw2suD+6C/7WCsrDkCUNXEUZ9+oq08SdK2qdmlw4YcDJ2xvIJSkcOFYY\nT0+uD/AYJBI7FAzc6ghnt9cqhguuY7e/G8OCgWoQXOl69X2ygPTWpp48BM+T\nZ0qtIvi4PIVH/msnx+XshNg+3fGbm8daEmEsrzNwcX2PLJEHmzmpEHVl5Uh3\nTY5iuLmqTQwsXSlWKW6iT1qlMA/N1YDjGUlCZ+s9HcDQjLiKYlm6uaiN+CRh\nplMS\r\n=Sit2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/density":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.abdd10065.0_1610128285704_0.807103210557581","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/icon-button","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8be221fae7646ed34164c9d9af6f235dfa6bd244","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.089de519c.0.tgz","fileCount":37,"integrity":"sha512-hGOo0U4oZyjst0C4ZOEvBUviwLUZ/aqTIhOu6ymZG6CDH4DrpFUGfmD4brAqzy+ccIO9dEM8GJaXIyM1TcXTgg==","signatures":[{"sig":"MEYCIQDC510DgB7ywqaufBW5XoEdrM/pOXRgUD73Es2R+iMlJgIhAJPc9194VBEXptmGhguk0f/EJlAoj7WwI2oLeXSpj5EF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Nq1CRA9TVsSAnZWagAAXLIP/08RZSd6g2yiO7ZwTCd6\ngPk8Ksqg3hcETni5U4+EDAQE+A9qDrLgOtoyUHHEeYoage3LkSASwswheEDt\nq78oJNRoeC4FpqZIV1teMkRfZNvM8aIBUIQ5YtlrusqrtxjYVaz3IvAqyzW6\nN81+zdYvQ7Bxin8Q4MhFjtgOyUckF+SrN3Q2XwlPxTlZsxl8tMnw3jswdyYn\nFzRfYvPhDf1/ySIYlIeGinhpkQOaXqGLH+aLF1K7F3l51HlMMSkfh6xRGP5N\nl+sLv7oabzuCzQheOxjOk0fomK9LvVWpE2Dl8mDaNe3BnMJEzMtyR4QaCdYq\nGiDSA2RItVQa9qfpDnlgfqyVTBxT2rh5/2aQ4VtxaN5UYqQ7J4PhC3T0Kf/r\nQuNV3zoge6XbgVf7Kcci0+xs7ByfnhlgqsPyg1OGSxdGup1DmGV7Te8wOBHV\nblpN2LhhU7Y01WzRNYrmqbvYZFqz5KmzTPAeqd1Xm0Ya6EI7kJ921aYGxLDV\nZOStsXbwJRFIga/0DF7TDWdoYJiiPzp7Zoi55VqHL65lp1euGAzJf/t0Zx1A\nNneisPFkMT7PH98xPxsbWqLwoDnGgKlJNXkNRyV4lOM8MWfdJr6MosY9E2iP\nTTYjkvHJobZNM/eIJFzMRx0Yogsvx57WaiijsmXOVggcjXka619XkjxKNdlw\ngseG\r\n=0mIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/density":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.089de519c.0_1610144437313_0.8725220182985789","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/icon-button","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f354fe8a5b033cfde43a193294f76da7eaadf42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.163119837.0.tgz","fileCount":37,"integrity":"sha512-9Bl9y/KEfx1PlYZor3HC3UCaxm3N3f/WeaCp0mg03/BqYVOEGGRXbZX6vVtQC8Mz6pMR+OUWGrkLAN02rgMNAA==","signatures":[{"sig":"MEUCIDjYQ9UooIqd2B3F3TUqokS63cRO0MlC4rBOgi69XIlaAiEAqpvwSJHnR1jEV5lwq67cWjlZOFsNQvVel57JAFiTWOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6NCRA9TVsSAnZWagAALX0P/RESxHepzcch1i/qCX+r\n/AgZjKy1PESiJrWtIEGrXwdFAxVwzX1DEMFDfsccuEb31POZKdF4g+VRoQDK\n+VmxmFvQ7UncyDluM+O8Rffn5jRyY9304S0/EWp939bmEDILLNWEar/z4RrY\nH1G+eSF+OdEf1cIYGXnJ9Bub+Sp4RPhH9MPeCg6ZLvU5SOjxErqXRDbh7kcw\nItZw0d5i3yUbQwU1oS/eh6bHzk1hWTP1RbyuLU95bAZn5P/qH5ECMcNaDXpo\nbCODDt/0hWOYSsPGfQ46NvjIwIP7HHLUj0HNRIBvjoHj1FgshA7on1dstz2e\nJtt7LchFOmAOyockpAj//RUN4Ncojgq0kqaBSppTM/i9x1Cl48llLqDAUPrT\nxdMkhjw0yup7fGjii/M/ik8DMS+ne8/1LZ77xloDjDcAIj0TbHKICxosghX6\nZUX7UOqtwNvYpBtwpw8abXT5aVEJrHYrJ6MWmwdtNEQaER/ok7ArcFyMWnlp\n+xQghPrzfYABWr6C/h6ZPTZbTyV2wK2dBxCloGtbyCC971OniBOLsSt010/D\nTCoJSVeKuR2NTM3r+YXiLmuZPu0J53P2fwqld2Kv3zormsNAxae5UgLMjd4R\ncF47z3sEKq7mRgN2hrcW8n/YcconmSTtLXiSdgQ8ulKOm0vRWFOQ7KCffhXj\nxPFY\r\n=OYW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/density":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.163119837.0_1610149517138_0.41022911867418643","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/icon-button","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a0148fe5f67fcb2f25d2e555471d5ef23bb743a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":37,"integrity":"sha512-5ypNrjPurFloeXYOsgA7fV6kNnT7yiojFcitlPMzAkN0tGnu/lq9dF5jrjgZhCzifuznTmHXn7R3DBHKE/S/UQ==","signatures":[{"sig":"MEYCIQDxOzXRUINjja1F3Jxd4HjLR7ZhBeRgjA+E0nucDIiURwIhAPZkEmjmarRDN//gC57ncLm5uMVhj9W/PBG7LRKoMVZx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Hu1CRA9TVsSAnZWagAAjmMP/2Eb/NB73AewOfhMvIiK\n3FIjVOF/h+EjOQbfp1gUzcNnb5bdunTbV0eyPXZulmSpyQtTXeUuPKamg4aI\nU4IVGXP0ZeSGY9R21HWXxQkaZOV0JKOR08Xx6RRfI55noXZOw4r7zhtZINb0\na2h8OLBgjP45xin6bB9jD2gzND6zIvGfQapstGWIxTUZ15j03H1u319oFKKM\nMHzX2w1rvnOPH16CSsnBmYZ5lnMLB5SkiRbMP7xH1FLOASq86ag/a8gMk1eU\n2U2wnyCtPDlZVpEoToNgDfvC9JJYs8NvMqJ5wCDk5IZoCwCq69TcDALmYgA3\nTeugtLFm9QOy3vGX1RR/9t3cE0yQ1FMKGPuBVz9Tu4L0rjvKX6Gbq2MNiwj+\nHiqaZN1EicpVHnJz930YVb49dC7A5w6eamLzT79WJu/AzAauAKPP7fM7MdHN\n1pOERlZsjul7MrFxF2NSE66K+clbaj1cAnh7DZ2iNunVOomJnDosXNkNVOzM\nLUSexU7QmzFOsxj4cNvXRc7lvL6QDh4RNKqlmtWrlEIkNRMn/hT0rK1+t6OY\neJ8KdjBx/QBxN0bHBGbhqfBXgWplrt25n7kyctTWUxt37Tbll1aldLihe69J\nsmQyD/7tD67z65XTj1Wu6maVWa1PQ4Tp1wtxTmcdUbLDw6WdzUj/LPm5M2QV\nWJFy\r\n=eOS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/density":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b8a1a58e4.0_1610382260622_0.011786353786646053","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/icon-button","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d283da2fd7db49d25ea9e43200c28ed572849108","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.7584267ff.0.tgz","fileCount":37,"integrity":"sha512-X302MMHTCnj2JIVPRdrAov9QLj67aPy8QI4lVJDlFtk+g6xI7Y81sHEbf9tb/y1Pq7vKVUfWW56Y11x+RWBw0w==","signatures":[{"sig":"MEYCIQChsotYNY/Y82k7mJIIStFc4Z0q1LYWHuZ1rV/vDpQBwgIhAOYqb3PoY5MOw6FVp7J7gYobNFRLMVx91h9g+Vv8r95V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdtCRA9TVsSAnZWagAAOMEP/ifjr64GSpU/kYXXzulg\n3D2+uL8al6AhgXzxa+z5tj5lSAsJFJTBedVjchfD55lbXTHf53IMzxCuALCd\nu0QZkWz+JVWkuuSpBeunDIQLJlFLrv9v/vFT+SJiVGr64NXte98llLexSB0i\n5By6Mib96W9uH8/57n9uuleQd4Q0FoBugYKQ6UTf98LjcOOYtpe12J78cpbY\nrKplxDiQdkF4DseR+qnS8PNEwegBq3571+Zs0/SsDsbO0D6X91J3X/itc0Fm\nYLl8BALeu/5h01/f4H1luN0doz1gAhBRudepS4/GJcybKOLSpHbqEsH+uWyg\nPu/21dFhtSTW3uh0AVo7VxUFaLEHUI5jAX1kcbz+A2S2In2tJbohvsspqr9T\nFQYTnypwkGmvm2j2b1Fselz9VZgcxIHT4hDcnxw9kS+e8WU13G6M9WfUbVDu\nd6wMYj8wby8HyriIwX1tGsErJWpx0BP+M0+fKk4qI/LWjfEQabsB0htGLndP\nZr3vBuX+Lhw+7NXPSJRtwbdVwPoRr7CcySACwO+pu8Sevy9ceg/GBPygaaNZ\nlgM6g49LovdY/JfCw0vNceyZlqiuwZg9s/T+frMnSZ1xh6iyZUx3YRsGkl8i\ncBOBkAa3qv7mbVoNl5Ljjj31Ll6IJqot/CeFcbcqyWujspW+6HrL8z2wScdl\nRsPm\r\n=Wkn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/density":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.7584267ff.0_1610413933111_0.6231669346338209","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/icon-button","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12991b6a29fad9dc10dbd8d42df46aba5e42e37","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.251ac04c0.0.tgz","fileCount":37,"integrity":"sha512-3gN6NJ5a0gj8AHiaLjQTu6yXJwy/MFcB+tqlyBYyhDXC7oq7/j4AXLORm21PYcJln8uugomkIavceki0Vz25Xg==","signatures":[{"sig":"MEUCIQDKDWYkJ9xr90MshSfuIpByIm+wjDynOQbE+uqEbd0eswIgQOZiK6e3XL+w3Um0r2rLb311UtHZehQCCXLZjiDaB4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6aCRA9TVsSAnZWagAALmQQAIydxlYpmMcQK8lexNaH\nhLzzSrNEEcJDxCPH7+80u8F6GDolvnsttZHOuh4nLxuMv3BR2op3x9W+vNf7\nZBHlGyxWe7RBtpToiKHBBmy8DYzXG1aXHxqgnLyrEGM3XkMLztcFchGTP+8r\ng160m2QMzWfaTNngEY7uGIIFIG9oyXcqBm3UQW2pBR8kU19JWVg4BvCeMFK8\nYV+zaSmMR/6JK0ge8P0u3QGH/REIuDR4plQHNZMsBBAQ3UKd4XOSsu8lpHlT\nwbemGLkhV8UHhRazoZXu8tTQlZxik9KNIhVy5KbFgMEetEcrqBOLHtHgADZV\nEiFlyl+my3cW3eDoRUXJlWRCSA67tXnZJxeSI1fIjnkcai/GgWTgWnrzrUeO\nRbYfv/ubb2Pg3P2HstQovhGTBs78p5JwFFK5v0jmG5B2sNjCVSx4R4wESIGm\nW9SvOIo0fsQGQ8TjvB356MEYYLO1HoTpm/hv1NSyTQFqUIqrU+H6H/skx6+U\n8lmAsv6vbSm6iGX8E6u+MSIk2takA/znD9io5Wo3G1pvBGv6WYcOmB22m5Fa\ntEvpSrLmbSYF2gssl2bLHzkJseuor3s8N2I2Kia6niGf/FAiyKAhrtF548l5\nE4saEHOzIVCKH8Z15I43zcdse2/i1l7UGIhCXCsJLMDeUFWaklagUCELWNXy\ntSrB\r\n=hJZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/density":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.251ac04c0.0_1610481306083_0.9389078336963557","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/icon-button","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b062a5fb82e436df41f582115780c863f709da4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.772cc1068.0.tgz","fileCount":37,"integrity":"sha512-2QzZZXHsqp1GzU7lCaOOZFWw9qisQjI8gF1LtGJ56fvq3O2Q4biBKXm9+gqemInqSER3p2tjXArzMcV8khiAPg==","signatures":[{"sig":"MEYCIQCb8JDLaSVqlDxJnPjaQ52m70e3RbyjeaCap1qMSFG4XQIhAIaRL1c5KHYRVExtLD54c0nXn8XGC5KbmBJInkwB9Do4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4seCRA9TVsSAnZWagAAEIcP/1NwVpC3XXvfDUOugpyR\n2lddTWzVFSegU2vbsklrHBN3LiQCjYQS/vetAbASc8dZPmpTVL0L38Aelwlt\n2Jbr0redpThkqvIKx6i2SSDgBlmC0lWDoEviUKdcBHSIvrsmkqT0Z1hwyeCl\nMdUjkhcmxEuVGK/PiqTmIwJkCHZPIwaSNNsCmQpdXZoMyFFA1PikNWpwHK0O\nSjz2fIndcZ3bCdluH9VAUQkpiCqZVD/rw/Rw8as4XaU9kt4VZ96N4tsZYpyW\nAWIjr/8DWXAol9BL/kTOZrqMqJT76ERMKPhNcfDspNjFyNFftrQCzi3nJUZa\nDTIgDXd1RGAYZRFjRALelKyBxze0ciMnhjZ0aIR0IPzB+8mwq9b+4sNWFFi5\noagw5ptRtzqEa0QYLwhhUMI65DLtFEk0D1m+k6Xq/bo6dhIH0k7JVTpkDoas\n8tN6M6nMWsGp0JlsFGZsoG8pvL86Rs2IEgAdraQM3ka2s4Gu7345GESvueMh\n3FC6Dw5OjBwGU7HMcC3KHVa7u+644oYTGEOyIyP9I+rRyrAmGXDY2L0F6wQX\nLbzn8GlDxEq0tT88Q2XbZobhSX+867oNBF8F6XP1Rup1HyEuzJ8+Ym8LbOpb\nLy0+1lgYMZly4Cq1WtXM6UzBe7FE0BEhT1OLww6O9kIv9rXCx1cV4pCSxHEx\nf9E5\r\n=tJ32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/density":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.772cc1068.0_1610582814563_0.7474193294449085","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/icon-button","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4c30936832b3be3f70893a9407f09ee33b6aff1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.fe13dd130.0.tgz","fileCount":37,"integrity":"sha512-UZAO/cJZf1FjMoNRVfFjL9BDR7NxPEdHT3EzDwQimnlLQt//3Sh25FVVsrhXpiTLzpiDWEuY8T6ejG5EVggL1Q==","signatures":[{"sig":"MEYCIQDLr2Zj/TFATSsLNSxPFXoouEwSGu7SXuOp5E08z/C3CgIhANt8hzuvhCgpHqyOX2lY9ZliZB0dR+Pa1vfN2qSt/pxG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5n5CRA9TVsSAnZWagAAB5cP/3zBhfFQXCbgB+tcpMFn\nfcZq1Vdg4jBKmFs/Be28lXiN0ZQEP4G/BkUeglnQq5WU/dIwabAvkl6RG3MA\nm8ccxuNznbX5lyjxZvvl2vPWd57gO5XcaArHY5rTSFNbgYGAhjWMJjboXmEC\nrlqY1UQFezgmNK7tEtqfgCOrW+IYWpfw0LkGhl2Sw2xvF+OF4pwRMOGwdKRA\nL1gJoA2NJdBSkqzW0xOA2wckfIDJ2YNoQyF+/JbLM0hfQqKeMA/v6mTRuUDM\nYJH1NSgWhCukCPS/aHQSTi7vjnkGsg/swq8qlblBG7zHVbOHPTXEKOyDW74+\nzwHQQkTUteOIrDSO0grLA6+BuHkYK/dYXebMC1ujLhBiflIv5qumbVxhj1J6\n5Ca0zjKZYutW98ydLBmZ3T3Q+UareW+2m9zPjI/GGa4hSerm9tdiFzy1Ov0h\njYLdRfV/wsTGuFl8RvtU1CnjLOebxoZHeV+dzTJKtY423iO+dEvqubjzq4OU\njNPCtCnSrz100F6YmiVY1AC8LIJwwBXIXjebKWOmksWifBzr2K200NfYu3yD\nKHjYIEWgtJ3lR8calspnTxjCXkKiIPn7ukbFUqb1eHt4Z4wcT5B9fdyh3B/T\n6wsrmKr82LRhzB2P/AvG0yaWrwxzCbL95g7PT62lYpYsYZe0h/5bg53T04wg\nb99k\r\n=1Zra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/density":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.fe13dd130.0_1610586617074_0.5024335862429232","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/icon-button","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19bb82c4b856794eee22773badd0d38dc4de2279","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.c7c5da28f.0.tgz","fileCount":37,"integrity":"sha512-Hjkv9BUiyfABR5vnK6AB/m1MPxPUkPrYR7nOP9e6CMw1JBSSmIpeOBrzMsg9JeBmQQydPTrUojQH4RXzK6jhdA==","signatures":[{"sig":"MEYCIQCy4cu7cYK8Qw3UmV/SJXhoX2lEj3Tax2NnF0jU4bSAbQIhAIf8P2ftUICuWINmgcH7elOHHw0U1UiCmIbB14XsiRYY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+ICRA9TVsSAnZWagAAvh0QAIOXmR8eEuHVAc0LmpaI\nY4f58zly5E9YvCf3c2vJPV0CRPpnBHJDJcO9d1GsfKJAtc0oVcocijIlRPHc\n8lqFM0OGxoAE+Zef6DoBqfInEHBEYyVwndjmL3fXXqWOcMXj0qmMa9o6SFiT\n45/nz1OblUV4i3U48Z4ajs46JZ9kGmzIV+iO9JcjBnM/DVMn7YQEXDYL8kT4\n69P+Tld6wigypkwXuyCwIRctXhJxqtsJdkOeHOW0WxlO+UChMEmHBsgrg63n\nDOPf8obsAWwF1Gxpp6OMzGhF1i5XFcFzE2AAnZ9u//Z6HWR783tjz0bvxAYL\nxxlev7tTShvFmq5Deh8PNZ6zFxxGEdkbyO2WdvMIhBqRi+ZEP+E1zYO83XjU\nuA3FAubKbWV3RS31+WKfUz8eiuDT+bdPI+u3i49qDZQrWrY9NXbwd5NJfPue\nNGYgHbu1IExKeif/EfFUErhXogWz+yDsQbUbOsD0elG8q9d40lU2zXz5+1wq\nOKVqmUcs9Xs2GomX9TD9ww/ElBDJAAfHExbxLvhZYxlT0Ro9NyQKnle06H/j\ntQKUo1hdV/zSgC6w7waDqbPBKoW8EPwWcAc/T6hx4zxNbUjs2KMKmfmzSRr3\nXSYohZN2cIn4YijXVjiJ+YbsvBlC9vPvpX5PnZLRbAdDEFrYF1CRFSgFu9FG\n8gP9\r\n=X8TY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/density":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.c7c5da28f.0_1610588040403_0.8890543727600686","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/icon-button","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62be074286e07893560e0318924b3cacf1edb1b2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b2faa116a.0.tgz","fileCount":37,"integrity":"sha512-lc0GQ2BK6DWjG8JWByKsmjeo/RQg1wZhg81QflHz1IYTuoovK8ntJ8doFxo/Kk0WD/2gXYpcQL7uwMTq+f7uDA==","signatures":[{"sig":"MEUCICC8ly6UTQWLtYDPh4ARvtWcurARGhzrNrjVrU5Ys6B0AiEAm/2sHe20hPGEdPQauj17k8VAY7qW3jH0YQuest0kCeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJpCRA9TVsSAnZWagAA8v4P+QEo/f7DELnNqOg7WCDg\nsIFYe55dLLxvRLfntKU1RInWzyGZKPMtx8hIOF4q/bqSzGhuaolTtmeatoHi\nJyuwGNc1eqotOZaTJu0FTUAPk6P7AwYSfC+Q+2UO4IR9brlLv166IhKo5gp7\nggechOVElS3WzglsHK6wMZUOB3DSmyVYiDwoZtkm6S6lSluzzImMw4dNVcFM\nEEd8R7c8LTqg/WBPqo2UsA+zqHkMnKJtV1cwM7psO+e2Z658M8R5w5aQbQdR\nWk/xfCRkI3uPgePIILgvlYhxfyap5BJzE3ZdKSCi0Qp9myH9RjQMRu6k25ot\nwyRx+ocdI5ryo4WjGy5Ive6yMno+x+vPs0j8p5Xnl25XxHO1W8EZItfDLuRt\nJnl8+ZqTsn/LExRC+rTjgjmo+agVmqMStCYLcLITz5w5Qm+o8b7GpqzeGWiM\nqnGuLyqhcVvF6JxhcD2ZyulsEEZG81bL5DLHIRCx4dLPDcVesN9NNy5FN1hR\nxOhpir2ohsjJMNweGvwNXcxTtnxMi1pF7JkftZRi6kT0kTlp+X+7cScPrG9D\nZ0RlJSCh2rqugIlDm136/nqVCT3/qE1MHeZw1b095uh7xRMM6mYwjInc7M/M\nqBY6TwXSXa6Wr4tQwaZHpcKHycVgABlEafqVL92W/qCo5Rop9PT1jHG7DwT6\nn2o7\r\n=f5o6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/density":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b2faa116a.0_1611084392591_0.2100482560300958","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/icon-button","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"477a98a44fb9bf97275311c58ba403b1bc23ee8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":37,"integrity":"sha512-xY5gHTsSusiYQZDloFLC93VLwAHrt0yxz/Ry7aEvcODwq+22r69ShWmXiPXVXFX2Y8h0eiTJ/jDJlRVR3cPMrw==","signatures":[{"sig":"MEUCIFkB9Pg+Ags1nuVB1v5V36KEByit4SFAa2f0NUUaFMWrAiEA4/DsAArclF89ZaUbJlPsweoJGCXLIhU6tDi9D12Lef0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2L7CRA9TVsSAnZWagAAbtEP/2meUXVTcyhhJY59xx+b\nbYct+xTnM6RsNML9fj11oUqkyhyFby8uitWFVTipARIHmWQ6jIrK0u5yAHOz\nGb6gaaORo8Vm2psA28TJ/uwYBAwuhJ8mETcP3q4qeiq3nHVS7Njd3R56XK8g\nXbLQv/1CEiKj0AdfFOdyIwPu5H1oFvutxPoArkQDOMm70ZSJbU4msY57kAyz\ncLfuDv3wpwsdE5N8I5Ju9eVfD4i+hy2xhv1iIOxzBlyusBw+KwEFEC9okBoN\nxpTI96L/oVzRQqaNgscnZNoQtOQyH4iEWJABK6nWh8+t+EqMvkMu0A6R32E+\nXnrZYoBgKZ+HYjYHYNZhJPUSvgzbyWYjfQ+70H7bIS0CoWZrvhRH5SZhOx/I\nY7meXy5I04IOOguMfds5S3H08ETxIeIynUQz8ygeJVXTa8FH34QLD/eIFXMY\nBhK1ffXtrd/IkAZIpfkadi5fiEaq9o3knUvQNsUfN83wzwNR4VBnMYZ4Vvyh\nWDFL24GvrQ1/0KQkDO242wTVcuAY+LQ35SZ10yUm2Z8TN8ySKBJlhOOckBm/\nlUUuiiVqDnjrojiPHomEdyV+L+dK5Rk/FRLH4/RmslRoGygfMNUUIkjfxwAH\nYVr9HbY0nqGfJpwPdJnuPlNVf7r1klaJfQa7LxFs5TTYKrKmNqToT8YIuEj3\n/TCj\r\n=oEjd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/density":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.0c95c9f7b.0_1611096826923_0.81702059621654","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/icon-button","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5122914fb02e8bbafe6d49ba25f211397c83f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.5268222c4.0.tgz","fileCount":37,"integrity":"sha512-ZWR+8IzzT9cx1bqmp9Wa5nWly+FojTDYZISToQGcCFSRLfEFm+9Xd19OQV57fAzRxO8cAW0GZLBAWVL0WF4BIQ==","signatures":[{"sig":"MEQCIDEE7rvBIN+clx1bEkj+A6z0IEYCOGwIzP9+GmKRSna6AiAWOGxvack5wigSVacQ41ou3hPSCHATxwyDiXygSfYU4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIoCRA9TVsSAnZWagAA1oQP/1pktPgj4gtzNwH+1nIZ\nP7zEanlmud364LH5ta/8elyaDYNsCaECbsB1pOK3USnP/XCCwLi6KW2hs2aa\nzqymh8s+KeAB17Kuy8G4Y11F3iE9hF0db8FDWl4VOzLn45MNP+2dbMvfN6iC\nufWPnYgTSE+wPTq7oj6fv4r9Jv8QKJ0gG69iSdmO0vHWnRek3PpOcs0l44vB\n4XvNzH/Ls0nWoCG/rw3dj9ROasd6G/mlw8V6Sp7Zxy094vGCnnj+hrelV8Dq\nrs+HVel85R/ty11BJ+Q8Jmzxs0kVkHVW6KLm0BBPvCFrN/lxKBN8xvSVD8wZ\nOrDL8sdQodpJp3eWfR81Tf4U1T1nqtFNJIc4DgpbhU6Fra0yzywuPk+cntwU\n3hgJAPEYWNurTrhw7voM8dgZ2o7AJIytd66K18zNxPUJ3ZxSPDNI7GtkOajd\nUbwIzlQmyIMcsZMrvJzhrbBFTYJsRXBopk5cGctBCViNBL2o2g+c6g1FNNeW\nx0ZrHCYbqUDGtSRBn3rAq/cbRD61DqlHuBfCfRxNNZV2vyAAz0lp+vduYY9G\nG/tUdGBdU3EhjXtBdYreFk/4HmReEsTWAmrwbjlRSqfKOXuGQ3u8CvDF58Ca\nHhRubAkLgV62NdfjtVQxgzAPBom0II96U29Oq26gvW2PSVzMDHOIERTmj4fM\nrRJ1\r\n=uEyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/density":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.5268222c4.0_1611170343475_0.0365761445480417","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/icon-button","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4910df64775fc9b57ec7c5fde3894a76c71e6077","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.2ed2d829b.0.tgz","fileCount":37,"integrity":"sha512-ThdhFuAga3sD6/9qi4ENaAzKPkfurhfDqJaVnkqLCdU4cH8v5j8hqNm59rXPhw36zGNv/od3b2ajvGEjSQHjiw==","signatures":[{"sig":"MEUCIQCfkc9ntw7LLbq1xqveEAHsBdJUC6cpILr95kXti3XJiwIgeHu0KOWng6WhGdXmk+IiHJBkHAYgd8SizJS+Dz+oYvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfNCRA9TVsSAnZWagAAc+IP/jWEZiM6bApcweL+paT2\njpUquPedq9CCjTby3LrLCskCm0VoZLDkXVgkR09wS7HGLU7LzMTlE35N6zIp\nTgcLuo4RJCXAxT4B64fIzt6iICSRlLsczVf7VkWCSWyyPra3/HcFsy6Omg7e\nqmKcvZlnzkVVdVgSmc+5hMRuYfYyHftQWPk6mrTQBMbFmCQ4feW56+RXZPYT\nkwosjyfz7HvP1i07o6I1mIfP0VLkq5XjivQfAMLBT/2fzh27avfeWvXewBKx\naUQ5cJiyVAV0CSYldHFmSF2coEThFMyhq+iOWi4YEohx9C9v3775MTqkL+G3\nhA57StMVStSdTJwFLJka/awt7ZDcdQSLPQR7dXGB7KkVK/3p5t9C8vr/YlCp\n4XpnTT9ak4WZIquVQeyerpo/9e37nhQ3fdCz+AtMYVck71skSYlLX2d8L+l1\nOfcUrpThpk+qlyD+jucpjLmzGVX1l54SlUxClNirNXtQM8UCSYgCGbeVx23J\n0mRsIpS0ikd5aAJET7+0ymeLTs8fOwX1uQ/7aHwOykLhzJiXTaLitIdBGPfa\nVDOeEeA1S7eP7R2dfJBfS8Yb0azicKTrqg2YL6KuoU/KBvPccCKNIi1wiTcQ\nzzX6WTsSwMNxvjGJoXjNfjqQHEGwijjMaJacU8J5sdJlmiXVNc6y2Nrj+4Rr\n+ZoT\r\n=aa99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/density":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.2ed2d829b.0_1611184076726_0.7191025312069261","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/icon-button","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5566f89a398f2320931500bd2899ce947802ab6d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.df00c2b30.0.tgz","fileCount":37,"integrity":"sha512-3Jeeo/vHg84xZ1iOTLMoPvSsDbAS36T0yZ6T3s28OJButham6Mx5wdmyY+MRo9NVgbbAW+lALNBL83Na6yPG4w==","signatures":[{"sig":"MEUCIQDLXNn4cU7wkf4CFLYzKo1gFHApZlxtmbvLMFpCcledxAIgOZJRJaGZh8QLnD9Qp+VmtyIZgh8otd/62IDgydfba1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwJCRA9TVsSAnZWagAAwnQP/RTnbfXGGvIuEsjQqqpQ\nn2ZJdry1tFanFYoNF1fpTvAwbQzSnbHz1pBCXygEAztOE5GOlfcBn+E3x5pb\nCBjKrY18kwDnV9CEBs+09Ze7Y5L+D8+sKOKwbD3xkRvTU6CK8OYdcG08Qk2n\nnkYy1jxy//XF9dYz9oBl8TJMkHShFvJ4GtFSOqOGxV4TtpiybPgVYUIkAv51\nKcVqWyk/Npq8Hl1La5w0dB3VXA1selb5WFylUJ86pHnazimb3/EtcOOcaHWS\n2J0sHjA7zuWXeYyuRB56VNUeSokOTRq+mCqcBAKt8E2b6WtfhKsQonYlJWLg\nVJqAc1IGDablt22BNpTUAoQTb0sayUb6X7hOoYY+2BC1lCJVb9CxR8VUgTaT\n0WXGRV3eGgyWpAcRSiy6w+RDbh1maFcUXtA6O32pxpf4fJvQcqNtUr58Cugi\nqmvEk/JK3ZSZYpF76sfc05rLJ7DrBWeb9+2JEz6qiwO6HvTvrceqB4Ze7Ifm\nRG1z6LwaKxElAH0e9qNcvvJ2hue/xaSSYN9Pl971MTRCV0GPHnKOeIt4SGDS\nauRGLE21xLxAlth5XvvVDIywuEUAlr5uBLkw5PxufViJOEf8yJi8HzL4WoQL\nu48EQANxxzC61LuRb/IDmPbZQantWRnWRmMEhnkzZnVQCyN4pA5EghR01LIp\nAJ9R\r\n=bUy1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/density":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.df00c2b30.0_1611258889040_0.5663188782089805","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/icon-button","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"134645279016c910102e19ba7506002ceb1090be","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.fd61b0476.0.tgz","fileCount":37,"integrity":"sha512-W75R4eSg006VQ3or4lMS0CpV4IXXQkLxYantOMg19uihEO1tp+b1gM09bRJ/mrciXXnXW1AYK5+AA1dkvW+Hig==","signatures":[{"sig":"MEYCIQDVEY+KgNOroagTfO+L2ULVRScqzxZ11hNaeWDYyFEtFQIhAOXHkk64/EIMi3r/hwnwn+D60P+MGdvt22E37yLdcXxc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd95CRA9TVsSAnZWagAAjXEP/i+FYkmrgCetMze2jjE2\nlmXH3R2fuyKA0xNFPKC+8vK6kSCcuhoBDF9gfzcHdGgxV7LNEnDSAFHn26Ho\nUNZ2UvR7KZa+gApHhdmMOGmdWrTDIH+HpkBy9h2JqZwp2LeBKZ4lLP4pL+FR\nab6HqkUHhvwkA5Zp4mIBDPaCT1/VQUwcNeg8/9m0vROZKYJgnGW0/q05ctvX\n9brPf/Zuu94LfXmJOyZfKjF7JsNaPclryODhuyTaDtMsWOJmk1vG3SKGhRLK\nSaQeae1tIximLsTpjEVsYDsAvpHxOKSt3UFcmOnFI2VbQufKke+aZixrpPZ7\nuaTR/AUrrWJtfeTyHnUFefJR2FDiLVeue3Hg0YYwc5i9qgFXqm6PwodC8BQY\n84lhgMIfWL4891rTzgNr3eRrjSzPVVReEfKexkGNQHbllGkzXiChlvBajq3g\nWCQvMUKUPtUxckIF+towbwYntu6mY0hNvOvuZCLDfVAsQEIcNsfI2goTEsGd\nPq9opqJ7ae80x15lOwEbVsH3QJRoVKPJZDfEm2IXpZ9WcSKU4G5U5SbKTbHd\nTdXC8AQfNalC44Axl66JJOZ1DBe7JWnjIYFyu4ci2xVVZL4ocMxFYJ5rNuQE\nZmLzEJqyC2p+KfXGyS896hz3RJtNjTY4ifqO0XBMFr33KCqXdQ2xgr6oP4uU\n432W\r\n=SqEq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/density":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.fd61b0476.0_1611259769515_0.28229705727618115","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/icon-button","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0d9c3d0ae0d360875f2cfe1c96f70fca4bbc062","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.3fb3a0265.0.tgz","fileCount":37,"integrity":"sha512-MR46Lrn3qynP9ZdCty0xC6XaNZzE4Ao3fYYB/t9yR+KOxQ3nVFuq/z5M1UlZJR9qDtAplZgDAfUUZRV40U+F9w==","signatures":[{"sig":"MEUCIQCjBRmXLKON75HHeSqGnBqXM/Kfn2zOiiWAcZfKGRcxaAIgLYnZZwMZ8KUtjDBW8k+S+w8+176f4uW3c4OD2n8ZFaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChabCRA9TVsSAnZWagAAYjgP/RMV/waU3kVuF9p5RNO/\nRddbbe6eI1VTjqJpfm7PrDe5ihud+sPmL0WgQpbQED4aO6lA47vVi5Hb8xtS\nBRQcrDEieuhO/PS1BxtDje4PLJLAt7FidAP/jffVNXVlerZ5MmiOKOZwqXC2\ndivH6ft8ap6hTetwBtZ2vTsIDaHzrItoRY+F7TyRNLF1wnJ6S+GgM2JGtWKS\nW3P87p7QzpEmdqgMjQl1c9jjDQH5eXYassmYm0UCbzuhtpHlfXvxy2BPgG5X\nbBoREywPUlTizXxbpHm5n7NnpSuNGex4Lsa13MguXZgm4DBZE0K0i4jBLwiD\n/5iVw5OYYZjUSBTYFa8g10B8Q6bQJjQBTVv5czPTAY2ISwUZ8uubLuJ/C0VD\nGwDJidJqBAdEBq7hUuKLgB09V9767L82IOdM/90HnEDmat002fBW7S5fHlkN\nvIAESHRtEg4qnJmvIz4irfKq4thRsn9eef+UTstDh6BOHaXaVGMcBDSq00tc\n9ziiFYjNwu4Be9Kmb/rgAuSHDK11B8N+lKdbPZYO3g8/vfZUJNdW8d8dn+9C\nRSiX6pg8XDwSp8Rw+rMFFQ5Y4oheMkGuH5S2h3ATH6NSMHOfI/F0dOWi2fqf\nCTzmWFubgyjQrXaD7plWhm0WFQCFPuFzk3Jd9rSai3dZRqtvOUkegwjgLYkB\n+FYT\r\n=eRot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/density":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.3fb3a0265.0_1611273882781_0.8400946571587091","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/icon-button","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f47a6cbacf328a821b68f167504fe6759862d0b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.07deaec27.0.tgz","fileCount":37,"integrity":"sha512-CVfjLN7/+nyxpRGmGlliDwwr1fls5yiAb9+XlZ9syFdpX5WPh7RzHsGdeCuwAUL5aJiRdk5NQOtoiaFt2RLBqg==","signatures":[{"sig":"MEYCIQDVgvOYNnha6VGSg3ueDC39Pj12WFRJGhNaPrSHrib6YAIhAIAQsYJje2nCV+F0ETYyMrd10WB6yzrlLxHABo2LvB+M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOyCRA9TVsSAnZWagAA8wkP/3HdOOUDPTONXCnfdv4r\n5bd81qXDKNpgPYvbv51QRewMoudMdxQK3AUFlw5F/4L0l1r6I30BJGflFNIz\nXk7ypGiPiM8PKAXapILWGErcgvI9a2a3BkK008JzAmFPwzi3/a3tvLREZPdV\nT0lFvfwqw2Q29zhSBLibtKd4xTakajBk7iW8VVp2AzdloVaYt5IabtAn/F6E\nsHCa5rVx8MVTc3JVmolTk9kQfeV3oqhB2GLCcm2gD7koUzjUz0CovUif1zi6\nTzr9fUBYOxHfNM7+HLW+xXI8hajCkxlhMOUBJAnvnPS8nTDeF4RvFugOha3k\n8yMXOF9uvlGELTNkTsbO6rebmM+1O8buphH/8wJyVA2TPsyaSqpWQDw8Xbz1\nGEX4aXVXjyl8xy3LdI5jkE3WFsnH2qNAdmZwBLULDRkcfD1C0tqOYihtNVBr\nEIBDyDxEgM4Ky9S2GJbDwvTiQehyEvWJakvR9DMyc9G9knWI1O7UU7n+zNEY\nFeAGXg019PfkihqlbrjSXB6H2PTOODqy0WNXMQLiWCMQrAgH8w500qMGDFcw\nLQtlA+ugzidSPwoO4ZUZNTjvwKCn4oen95WeH5/GCeblRVIJpJSWFpLTKQ7N\nXoty13t/Y0bdxVAS55Ygop0woBDwR2aFKRm1qt4IvjvlO2hx/gsUlocXSJtO\n3MUA\r\n=xJId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/density":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.07deaec27.0_1611334578018_0.6589391725549818","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/icon-button","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0997c97d2807be1c2d952c6767d9acdc49fb6be","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.d2959b16c.0.tgz","fileCount":37,"integrity":"sha512-mWOWYc+uiX1foIXXl5UGH5ozkAJN/aNuMSqoblW8wxUr2zxF6Ht2ONX4EsS3h0HTTKBwF5mUcBxFUUJFRM4/VQ==","signatures":[{"sig":"MEUCIFr8omAqui5W8j3UWpZahyTb/4G1APGn9/lo7UAJJ893AiEApW2DEEdIdJkbXBpiyzV9fKShDhgr3m99oEWuDpESqE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7WCRA9TVsSAnZWagAAJxEQAJ20+3Ci/wtdDbwBkDAB\nbTNqeHD7MWqzxToHzJmq+tFy92qr0Bv9zXVcd6itwd6l/HDO5OQZ75B+4F4t\nBE8JiUUuRP+BQ9RSZgLHAxKEjNnSdpu801n+i+VjtCqlMGJNhz/sbA6UGKpL\n5RLhP0o3Ee1jsN2X5uUSqrhBaUCkFw3/v2u6GQ4r1r0mLOOu+pd+ATpOQFir\ny6XqPkBr7jlvoY1KqVc/sHAMdN3qYE4pwzfJn761KiCBbLa3hLCUFtJBn6iC\nj9qeGamx/AKPTmGnCG+3BNRM78NLfbUSjSGsbmXAbTkQATZy4SoYn34kYQuI\nWLmzsJDwNoHyUNRp2hNFXzXfHThvIUaqOp1/oAvgiK5tC8xgO+2LV2vjTzwh\nFutc/keQJIID8MUMUdSa7k4QzOBjzJ9/pM4xze8v+sHZK5sIvFaHAfIjT+LD\nlKB/qynk1SIP/nwC3HMJpOTEyT46jry8ubISUiuDc7ENg6kB70oVHx4lNVRs\nRhG59AtgId1Gd4iCYs5q/9jro+4ztHc9AvA654ZUlF/7QjuWOlO6zF9XPDm9\nnrBcizm4ZNmN3qqE2aeV7SQ2SN2TmCdnNvt00hXVoZBGNXBQftkvqi4zasKL\nJnJ6z8GM84Qyout9yM2/a6knBEpfG6We/aExZy973WUIU86Jba82aodzDzRm\nn56c\r\n=HqVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/density":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.d2959b16c.0_1611341526385_0.5723813333833614","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/icon-button","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1364522ff2408ad06bf21e0ab4a4d183fe995d9d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":37,"integrity":"sha512-0KfN0lV1IdiE8aqEqDEQEA+GkBW7b4RwucwwdK+hesYw7Dpx+Y3/tdMHTFju/0lwxoqysTWZggn9FNXbjL68Sw==","signatures":[{"sig":"MEUCIQCaAZhgKqR1sPJsY0LW5dcY8om8k6lxxZgBZUgvsQ4haQIgUhdAST3dvBPFZgpZ/PkyiInmzPgvT08VJ+EJZLTeQAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1bvCRA9TVsSAnZWagAAOHMP/3Dh20ir0bRS3RySxwir\nQzbxythuzpF15PL/2XLdp4aYmA6r0rIVq2tSHQpnUz/4HffqK23xk1Wb2DM3\nUqSWjbLtIMV8ctnToe1SqGJWidL10R1bcd7L3/bca2Hh/qsqTkW+2wI97lhs\n8eNPp+2jBXetnGW1IgNgM5kobiFxvSoAnpq1hoaF30uiAsdwo+wTwKnnL/l7\nCf3PhBjiYzYeNOAJ7S2gk4jexz4EfAQ0vVL7+48j5dRiFN5MnZME70cQTsET\nrFEWj+YeydRBE0nuRZRPlBw6Yt14cLAkSS4M1CmgUJp1H9gn+b8bgY3wMjjl\nmYHYDI3+YLlADGT71iJZbfJbE+Wg/iKbux+OXswVmIeRzoQ5xmThKxg8/uSn\nr0Rars5+Wyv8XwcOhwiK9yhXG8HQARxXsmI16CvzPQkXhFCkIJFEax10Zaor\noRl/c3u6iLzHYSklMQFoS5SPRzv9qzLzI1Aov8LgcINlF+/ltKxG1Im+O1ID\ntWA40CNWOPGJIc7AQouOFE4wIYlmM8ap84WI5aJmkz8QGpAQ508VF+1uNTiz\nCoBNl4Uksg537kPjk8mDF5QUyoMrJVKyq7RtHAFili95wjByLiUELsgjP9zu\ndZIRYNd+7x9iKBz6Rj0Ssibjwl25fBbT9yvXY6NxD6/peKcJa1eRddzpYDP3\nm+tl\r\n=Axjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/density":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.75f3bfe7c.0_1611355887166_0.4398176642473832","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/icon-button","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a4bdc8f0327d69fd0e04b7d4861eb04f231b407","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":37,"integrity":"sha512-OI/YMsZOk2w0Tm/I8a7wXJgqR6Zi+0YGrvLzQqyGDiUd1QqwatDjWEQYyXKucBIXIuSJfIEBX6t8D4UNALac5Q==","signatures":[{"sig":"MEUCIBTU61Uatr6JGHSz6rXhGtebfqVzmpp15ouVneHfWTLbAiEA80FPBULA222N+m8A8DaOXz5j75rATkg5Ma7Lpkzm2nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2FHCRA9TVsSAnZWagAAOykP/2Vz37nvxgz86TzqEtpL\nC01bHHT+QYPPmujyv8WnkKQTbWwHG7K5xU+6sKvw3qoXZ70t0PNdCnTj52H5\nebwqw3hvkHMbzjAefz+9YDJ6VP2Zu+b+fsxVJsiXjy38i0aRyNefP/PX7EHL\nlck6RoaAF6Ou0aSytZX9i4Nqs+tigyrdtQAbD7EiQJzLMxeq6ZMl1/H7gaxY\nJAazcJz8/sGyKBFSfjl6cCPJ0Z2IH7QOwJlkfTayU6niZ7x4BDVxUVt9QbF7\ne09jwDbpWTL2V/27PswOP0pOorXY7viD44ruFmvXXmI0N00C82r0kDNFLf+/\nFGXesNhGCYDlJtG9KxXQAv71Bzm6smmtIy/ESes0KzPr2uAzT8ztYu0qHAdm\n6FZFR3o3nzqp6TDEbvchxa+m+Ll4wOLMe/vd/JrLdtmFlxMxFaGgersGeM5v\n+HjtgI1CTtk97EmJVxj3k6GA5qhJAsSv5G/liwTmbMpbUkmURiZOE8xfn97w\nVuc/EJ78yCONPC5rUclVQ6TJg90xHq8PNksf2AXqEAwZOjzLXKS0tBUPHLdf\nf5u8XuOk8MG5TbwrOKDskA/vB0JiqsrcIeUvPuJNGSqDQkST3kw1PjyWISEO\nRw6gVPnDU2eTMJ1FiAhATPZqxBI9bDkT0W2VPAyG6b+fn4HKjCyDHWgjczy0\nd3Xs\r\n=ym/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/density":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b9adb7a0f.0_1611358534494_0.2301348638137366","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/icon-button","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cbb82911872fc41a905052c6ec61b947b511c8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.d29ec2862.0.tgz","fileCount":37,"integrity":"sha512-VPYW1fKvdqvKelUGTKsZxR0YMs00uzdvTVwqIKWZOJ6i2Tz4FSeUFZjKlwNAR06GqU4h8BdWOuscXrGSfZSGMw==","signatures":[{"sig":"MEQCIFEl/K5LsSvWvBpWdpWhi5aff4DMyDWrhuv/7kHGieqKAiBXZKrZr0i56sTf0JO5lpsGN473+d4jNLXwpsCgLa6jZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCTCRA9TVsSAnZWagAAMkIP/37nPjStiGSOg+8UQuLq\ndWnc0BYl4Yt4FoE5eR74Dx3hfjspN+CRymhqToQpTClKocP4tNukJWBT9ePG\nKJPNMt53CsvGiBo8sxzyiJPjKvqhshaaJ4U00M00CQJVrjpyagtZLOcXSFMZ\nGIJ+tLsN/qb2NICw3AZK3MLnTfi/aMkOpNTQyj0MV1YZ1IrWyeDNamsEzZNB\nmvczZyN6BWgDaP38IVVJ1/BgPdjr+GC+xkmKu4j5nbMKTtFW2ImGRmjn5xM2\ngM+UcAzT7bFpZ6vDDP7jh3sZ612hwySuTV9aGtvNqsWFKgm17pMODzNTMGV0\n3kTEFkA0aRXTOQ+SoHzfLlmX//mcQ5DQoS9bqlrYZf0tfCgaZWWSpLIfLZi8\n/74C6+n+NLeF3Gt/pSLOEpBoZn0iU7OzWa5F5BSF3Ljx3h4spwA+QInba1tP\nRl+mlB+0pp9WDyaEiTbaLMGIz/zJXMppHd45B3eH6PmbUAWC+W4iXvnygEXo\nXwXNO08C527LTkBdhz7M2QZ0uSf7/BPSF+QZhsBERrl2GY7i/CpqgtN/xniT\nXUmwO1uEFdwPWUAKIxS6fp3qOkg1/73Br6WgnvxywFOn30hPoygaV8t61YWs\nIEry+X+QJWhu6IzfRZEUES3f6Z/OgPDr3jzHO9GaaCGwRiwQs5rH5ivhdXp0\nP/SL\r\n=H1Ne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/density":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.d29ec2862.0_1611591827120_0.7968461513984495","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/icon-button","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd321452a8cfec215824a0173147803a6781306f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.96be07c68.0.tgz","fileCount":37,"integrity":"sha512-ym8cgrRcHhsDilylICUnfrFxnvXXco+rnBCRppTrg7ORVXUbt9y1TKqkEAKPoG1+lzY9mC9jooLxbsPQzEDUrA==","signatures":[{"sig":"MEUCIQCeHjavLzbu1k/J9vGAXq5+mlBcYdM4GgbrZ4PpqPALnQIgC7smUEO++sd5fii/qDrOum5Z4XZqO2w1q+GBoQwvmio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13bCRA9TVsSAnZWagAA9egP/jxo9d/OVHovqWgGWNa2\nauiYUMNB6XtTb6ucdhjvtDZSQpR09Vabg7rnZ9BHomQd+o7NbrAdH0qvF1ee\nZDaWhlozTO36eTdhq7mXh1X7eFY/DHX1jDvVG5xDeBNA27/vFIRjRl/6Ca29\nMz1pO9/XJs968hNjnPPAXNOF5tlytnYfPWmKR4ZiaBShvRk/rX4uwSgzWINs\n3npsbMEv2vDQaDNAuVvEZMtp+8pHcjOKiiX7tJ6nwv3RKtke3j80Ki677lnV\nzCxpncFcsZ9PTlbNjhJibQP1qK0V04arID7ajvZOLThWc5wy0FGEx0vHiqM3\nVUG/rm42dondBWgeGpjqj//3NSV8nD2Dzflkr9WU52Ewu0U4iqsDn6fwbTUk\ncTpapOIiH3gT+2XsvVqxv5BWyj/zO1E4d0G4+9+shBBVkXTgcaFE5J0z99a0\n3qofBPKkVXl94wqF5hme4FiDaE+PC7UVupYOcBXpcgzYNDl8S9Par8t14t9b\nz2quGoySP0H8Vhqz7zzStgzgaldGkii2k2NEtWTQ5yscUkLk1RtINAT0jFsi\n+AzGayRYL26EKHDEfB6Bim9yLxzgsa+fFp4ebtOAjxEDTPkAg7gOXY6eMfd0\nVZlIi30ajYdvi38Qo1Ne2N6iau/1RGRPFAlyDJJ7HpVAoUit+2UVNLQ8Y/yK\nCP6B\r\n=2BE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/density":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.96be07c68.0_1611619803438_0.5832031125201227","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/icon-button","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8507f70351c4c219c7762ed92dba327f31de2b85","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.e383944e9.0.tgz","fileCount":37,"integrity":"sha512-/ISRqKkuyFAgvgnJpADjR7qqIHwtqhAw/eUoZiwgzIH7DLv0e94j2DYuPadgEXIbRx+vDAhDUsQ5+pZpJcfCBw==","signatures":[{"sig":"MEYCIQDeQskfsoA9K45jlpkvB3dmtzkXw5VoROGcOVe7HOWofAIhANaSO3/SoaDk5Spcwks9YQVPeV/0dnWFL/LgWsnqGN/v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QWCRA9TVsSAnZWagAAWtcQAJ/+hYwyvWt7o/KgbdPJ\nBI6nzsIq4RljN+6W39RzBlZE5IA7PBnM5+X0OU5sKleE33qVOGennZk3pCBN\ntBiGeEcVR1Pc47JMNgDN/lAxeUU3TLKS6OPAKQ+FNEhbGz5usn0oxrjXKKbz\nPUNzKo7KuwcAP9xBHag6byOvBnDP6iNOCzes/vMW3e4tW8c+RITfH7RqRyEO\nt5LmfJl98DGL0SAcL0/j03EGhzAXJfZi/sxmFkAea8MvG9YCGlnhTAm77O+6\nbtMUNke936t6zjRbDbAzK7VEnJTRfmPe2qNQhLki3gpxOJi0xMB3zHvIgq+a\nVjULigS50exox+4U0jdt1QKfwixAoWtzqL8o0pJ0jLI96bZDCayZqq9DBYbH\nQIcoyq7E43pJQmwJWBsYvJqyHCwZ7uHOjZF05SknEPlVP+BgzJH2pGczunwb\n5AhjWbwqiv4FR4E1glzKPYABojFnKbzIt/rzPJyCDexrdqhd4rHow4mJaehA\nmDiCNswHdHla5TwsEp9iixj2gnJojtFa9IcUeHOmib2T7XJXjvVCPB8+pZnh\na0M7q9Tn0TY2aDA5wiwTNTXe1KHY4nMbDRArzUygTzMHdAnc0vBo91sdrPZ8\nigGj60NBQXJZtbqk39+zEvWJmE0oJo0GGfFP15J0Ek5Km4Sthr1OqP16I14g\nX194\r\n=Cm01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/density":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.e383944e9.0_1611625494017_0.12492389998929565","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/icon-button","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6237c67aa7726133527635ccb1482d2242157ea1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.623af861e.0.tgz","fileCount":37,"integrity":"sha512-dX220e8dbifV1w3LGTv8mum+/5SE/jWFIXJqHrp75NFNsRNjVvimdC85+HX3xxVhNTvzfQbDn799EBb4m+0GZw==","signatures":[{"sig":"MEUCIBWIa2TpNqvHNX5xjrB3/oNmKXkMMqUEclFSppMct0t/AiEAhWJt5M0HOzU0IyEu6IEaH5TCRWGPXd3uz1Q08AzBZds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BICRA9TVsSAnZWagAAeAkP/R6+faNdPK6RSEbrwhXP\nV5s/4fHlh1JfpA8UQ9ATrWFrFk7t1mg2CJSk22aeC56w67ghOi7O+qqNSkSg\nx7L7MCgwrMiRfBqy39Bk+ooQILaoaukiS1TBeX5xypvcrQaPbzlk4ds10XTG\niQslPIB5jrGeFOCv098lwzhsjIwWaHTgh5qqyE1eBwdNW1zvBPh3L+zU3XfD\nL726eOcU+81nlxJ+bA6sM+a5rOU2AgEEQ5Q81AEN0HlfMCnfXrI+PxOXHijs\n0JX23679n1xYAS0xL0ALAwXvF0CASKMGUMFMI9588iRZJCsLpgHwUWT8B6l+\nbzPvrzEqpFtzNLjURB2+5hmZKEocQuN7cQWGx8hJld2kGnlVr0dc+KN643HR\n3ZFZB2EJhYNGzyI0iBxIatCaha6OgZ6ojOThQJ3kB5sbpy1W6gKqi1lgrsZH\nM8RV6qOymIBXkRaAX7fNE3/o9I1KuSBTED5CG4BjD2I6seE8bnAtnujAnChG\nfgiuUUJB0cwqgu3cVUPkqU4Jv+xZ7JFSI952xeHMO2RXos9RXpGfi3wo68z3\nxVKTt36VTOj9J0ZIEiZcnhJ/2RFDm4pC01VEqSUr/N14bhCCGlHMH2v2wS37\nLkZV8jmbNBvFzmuVE/sfs6XbtpELNBPTGNfMHpBaFr3Aa2AqbsCCiZFMPfni\nok2c\r\n=vggR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/density":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.623af861e.0_1611632711868_0.24028596648542155","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/icon-button","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"372847d50d7c89e230196d554da0721cfdf635c0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.6863fd43a.0.tgz","fileCount":37,"integrity":"sha512-6H21MYCxE+31b+uKl4S2IW2tWfPdi0VM6suRXGi1MbunrNt+oRImoZ2xytJXfAn2QlGLj+KnL83zU+pBlCrKoQ==","signatures":[{"sig":"MEQCIDanN9UOacozaP6iehGmxEnDs+y3cqxR81NLG/gJikF/AiA65NCKYwyGDb2tRkU/bQWBAcE/z1m3J3JasWhfAGI2pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIp8CRA9TVsSAnZWagAAq/MQAJxjPzVbop+f3EJkANSw\nrG8tHPqi/TVv/hmbQSj5+g5CrccgguVD1g3sokRHZAh9bVcPh+AE+5UzKueX\nUCsyeQwxPROELltplt1QvVZIVgtrty2Rm48QZ9FmeSCPOE4cHVJ1MDRouAzH\nDsn+8yOBmJBuyfRjyWuHb5uXhwON0NJpwp0IxALZEpibhHFC+OVmIngHMPfs\nRU2c/bc7f7GNQjUywUINOrG5fbFi4BEVDXCn+MJBeZz2nFJaaF8udkStBeH+\nVhV/S09VqGQA+qyq7sQKv5xxaCD31hJE0yBd8jOLIbqdqFe3X1WMzPpe7llD\n0GtuSBqCWXSOWETsc3K0+s4+q/7EgmQUy9xqWIntvVKqLsbM6yq9zJ5Mnaox\noyc2grD1mEr/Fr83ZLCqpXsgIjrXFYZXVaMX8Rm6lYaNGGS4GdTIbOX4A0xK\nnDMGdfCCVisyaZ7IWnoHypNPenIqBsWkk3LgoJcK1/LBIwNcih2IbEr0dbF5\nKum3ex8RghWy5Hb82LKt91ZueQOJQq4FyElQJz9tf/zPKoTIi6pPKCzrazGu\nUm4j9T9kAXIPm8QnggumOuAVEVg5J1xVDDL88kpttN4Nw3UbQQAozXkP4Zem\nSn/QqAZ3ATAY5YQvp1AMlJnw8p99w68RBKf+ellsm5tXoByPEMgq5sKWV0qD\n2nVY\r\n=jP+P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/density":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.6863fd43a.0_1611696763878_0.17809556414498418","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/icon-button","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f583f22eedeb570b24cf10aa621e37d4cc719623","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.ea55b87ca.0.tgz","fileCount":37,"integrity":"sha512-sLnROLoyrix9k8YNtU+25k4IVlsWZLBwcsEqfALvnwrqE6o1skGw1xJpEcLXtenICXy9foS5cA5FxZIe4hx7Qw==","signatures":[{"sig":"MEUCIQDlgk7Lznu6mEUUSwvbxGaWoFA0/XKuQMPoJXOT0uHANwIgN6AaEyVCH6eVK08WBBeUnDeUtKImARnIJrzmw96ELZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmwCRA9TVsSAnZWagAA5CwP/iuQb98woazKRYFBJPHV\nxoNQODYIbV9VytRdmdoyZ70dlmGmvfXbMLrb8leTnUQQQXuZKcOpZTqxxF92\nf+958sInlYRuckY/1tKgdpqfth351kvrI7V3SxAlDkndFz2FreNHPeHaqrzk\nLwEQ74RiuTw+8jxQ7UM7juEj7RoB0pGAZlUPWIzs4ffBFK9Ktd1AYif32HN7\nd60eGYlsqrVQCqDSJ58qR3K7IxrqFAYstJcskuevO7uVAKP+l+8EENGXQ2et\nnKUAJ62MBbFeGTj685pCOVJvXFmi+HoG2kYrj9k+b5nnY0Qu/FO2VegxawA8\nSAyH/vX5qQ0Br50GyYNhqTQZXWVCUK8KeCrzXuDExNZb7huDm67ELIEPWtEG\nHIUB4hlmEljTXaqTzfCLOvyKpBbqmkPm9RNxXnu3q7+omK4p6Th/w5xytM6w\nPsVppIpzIHsFXPyrLcz85q9OaPdwoPfI7zTGuAYUroEYvOCrBAKpOhrbpL4Q\nPpYFRbhb0fpgLrs8y929T5lxO6ypgrMfTM0DRESHpOAaUFvoJnWDOGGsdTgh\ntI3SpPgjAE9+BS8jg9ARyLaY1eYzOogP2fo2nNWHcc4w86/wWd9eJpTpydxh\nUpbLRXAixtQizZLqIDGquuuLuYkemkt9bsgEpLFpMxzLbZb0+dqdLjZFEAqB\nDDPF\r\n=u7bP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/density":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.ea55b87ca.0_1611704752057_0.2706709525516102","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/icon-button","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34c2cbed8948d6c12e3398ff980bef4046c1336b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.e902ff05f.0.tgz","fileCount":37,"integrity":"sha512-TRKqW/pe4CtRIAl4Kp+O5F+kyNX3j8nnLm0Z413LOyKUNpij75XZGmy9/wxcIb05DNt8QFysqP2XtndIPvGyqg==","signatures":[{"sig":"MEYCIQDtr7vgL3OU3+IZmH7ImzNMIW/1nPLAABjZwurlF4ritwIhANTkaLFEz+7/zgnfhRB5j4wHN/sGkviOIpfTRZo8hIeJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3wCRA9TVsSAnZWagAA+rsP/i0O08m5/IpkH7CTlocA\nel6XkSlE4P1lb4EP588clH3oYGZhXyWCYsshrNVS/9ltYQqTctQgGWktWhQ4\n2YrpX0YFRdb8Kw9nUl5bqUVVI7BhFktZVWqD9RW+a/8FroNlJqD+Me0o1Ukk\ns33/xN01gmDb+5jVteTwiz53mtStbPvTnrhSTu3YkKRKM29qB82w4hy6PVv/\nPgVBITzaJ6fuQ68FgUI9SHogE1Wy6WFG+DoGvsT1dJASb0N7/aW569Rc7URv\nGkE6s8cJYZ63zxwSVGebVYV5isGMITRbU6zHOOAhE3vQG0/LSOtr8V/fP+Ox\nC4M83SPeb8/HKwzrXItPR36xZl9pz50s3BtWmppkkrug5ellFeEC6moPAzcp\nNXWE5KtaBZ84E/xE1lYoVriVynnDNHmc9450NktZhfOQQBcw7BPKz+8lim+z\n8JuJMw9sU3qWUpMBNCJRgTyLEQoy2uo0Dm3ZAhBmBChT5znihJwD/LbQzV3C\n9LTpQE0qOL/rQiKJSN6/uHh6hdKDKs9BWgbrfE/3s/rQU8MCL1oPrPbORKPx\n6bNaGSVoywMzUd2Y+Q2U06oVceX00HpC9iLeP+yxmC+3arFG19fcXAZYhEZA\n5k0Nir+obIrjD/UwLbq+FnyRNdCcwfzlD6eH8VUCle2Ce+O90RKL0M6HLnxn\nZJvC\r\n=RNjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/density":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.e902ff05f.0_1611705839510_0.27904609183273","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/icon-button","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"856d23edf82347152f5723bfa56548a30c6205f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.2c9fc538a.0.tgz","fileCount":37,"integrity":"sha512-bvDzj6QlPRH3HlVFS8/tjSUOKAA2EznWLKOeQ2NE4Pw15MRDqUQ0RcHsODMx1Cz0AuF/PmtEH0/RAM6TMOHX9Q==","signatures":[{"sig":"MEYCIQC9a8ilSrYS006/bkgj6+s8ApDNaxItz0Vz0przQ4z+3gIhAMcs39jytZLKoMdB5e+KaMIoNmCeyv85wUsaYyJE48QX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNbCRA9TVsSAnZWagAAtTQP/1GV6KgeDF+lvOKz/XuH\nMR1+klvfcUKggpC8ESdD60xz1ADMmJcPZkA4CUKl8IIClg9dFJLfAtL5/oRO\nfm2cpL48PM/Keb43p05Q+CXMh/CzuhF/13R1ETi7g0oQoZZpV5KugHvz5yld\nJB4bJbWWK7cJTdRWR+IvPTX3ygewUPcXscCf7RhYNuAtM1E7jQrpA5+1nFEJ\nhtyNdqAtTao0hbGeO7bo+HeUyLLNLRr/JgQkGSZmFFK/DLkW5LRvTy71K6yv\n9RIKLR+tnKFpwHKmHbXOMnY64iMG6Om2z5chNJu/M5Nq08IIKt4H5ydaTpfd\nX/et3b82eRbsKqnR65ozQLXlIDcM6URD93pnsASb/kUV45kPlriOxCqPn5wc\nFCiEeyOAMN4PvXMe0GYTrAMSLHQhvgfVRxkP7yeDY/6JmqaDB/Th1OBolyFv\n2f1Irj+78SEZcrlYOvE0iyV6yATr0BH54dJFdvurN2IUvE1Rp0vlaXMuxH+W\nMGSVOa8JNakLYSNmWT9cjGm0YdRNvPzgqkdmfAzNwNKELR+YeBZ0FjWTG7wa\nyYz3H8XslM3fzKSWInY1/nw1h185eVx0kofxf43aEGSoLCX3L60JrWV6DELs\nlpFdZ8wijS/0qRSAGZS+gjptHSnukdIO3+9ELUXPPyivMfFxQOMpJXUuzWvx\nDo3G\r\n=sCda\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/density":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.2c9fc538a.0_1611707227223_0.05458196141046101","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/icon-button","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fedcc0cc3f2069878baa31989e6a51cb824371b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":37,"integrity":"sha512-zFr4YRWz/I6TNZVqxxKLtiO3ULhJr/Hxomr8BXxAhffY6VKTmTcqJIeLhdDQlQknE8K8bUZvDEpv3jm7mAjd8Q==","signatures":[{"sig":"MEQCIC8tkyZ3rxSFIwkE1H1ieruvM0nSREpJSiNvVIQni87nAiAj5LNG/Cxtvs4oxuE1h1UEOIRNYaKOlaFd0ImR/4vg3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+7CRA9TVsSAnZWagAAchkQAJFPqvlY7XMD7uBm4YIm\nj/KiHDLCf4W4Ahe6pML0m5nt/4C68VrHrME5riRNBOHwVhY/lhitHWGN8ZDc\nDf+qy3QSHs2bLxITKiUAWF8kGf18F07SG6yt31N/8PLKNxrZO4ukNwuQvPgU\nvXB/Rlj/XaRJe6QMyELrMTO78loZ/cMcF4jjwMvDVef5weKitjzOGtUIa8Vj\ng8UmuJCDpEtsZS6NaRK2pVjmcVHWuSfgkXdCykt+cBVbZlNY/V0Szs8I72Ci\nML4ZRkLsJAjD2LoN1FT65+w6xbudKDNQceH7hk9ckfQwuUO4wXkJ3uYvzhxi\nsuulQKoTWDjMBqG+yO0cIonVLs+LYKh6TOhy9MAyKJBFxy5rjE5Canxa6Uci\npRIbxm2OQJ6yNYMT2YqMPogaq0BOM7iiz1lMlaMvWEHZSEe58foxUm7sv5+s\n7mWEd9qzX1tBzJwzz1HDyckIRmE/rSD0BNG1OdPeB9h1liZ6KS03QAB3BNij\nmRg8kJvXQbz1XOUnNdwn/NVoNc9H6GbGbKnxs7BikreH/wi8IM+FnbDdGFDG\ne72+Njb+QmvLB/lqOM6Ux64CIbGOfyNd+W7Q41x+RDI7jeGGl8XJLG8IuiEI\nAD5mdnw/UdrV5ootThlS5ez3GCj7a+rOVIzNi+zNlcFAiFsOg9eT+ZYrhgDe\nsaba\r\n=xUBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/density":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.6bf56aaa4.0_1611710394959_0.4886045643833432","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/icon-button","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44800441b4eec29afe54d52e8b60427ff9d10d3b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.994873795.0.tgz","fileCount":37,"integrity":"sha512-F8jziCOrKBcb6b6YAPUMQBD74w7BFPfr2OL+6ZlrpNe9gzX4wN2TnTds+A6wXlh5RKxP0J4RaMvwoORO0zv8oA==","signatures":[{"sig":"MEYCIQCXPkHMgIfDIcxWjyBbqShsIL4Ve8kOJtj5XLqiEZCwTwIhAJvi0Cz/BfT0lOtnI8cpPe3EeMyl+nyPaXHizdZiYn1L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3XCRA9TVsSAnZWagAAFvgP/iy4VYDDqUkj+REsEVk3\nv1NtPsf83f4nD3xr3mc5M58osWKOVxfFSewMnXG6r2mj/DCGI6rI0RZMsj3x\ntRkNoqy47/ZrHSIXztCkKIeAh893kxQuVc3FJCvWpQYaYIMxQxN7590uovmG\nY9yMivPv5glBJ48NG3aOBrdYaWf2IkwPhDVZ6YFQYtNGzM2E+0bMowxa4lqL\n+b7vStxJM7zlFvEkbn9etl3d32s7SOUgjwJI2ndh3C4zAa5A3WvXtQy+4Yu5\nokwzmEZUCnAdBL44+PrkXZWoH4JilNy7YUkbNRNIFFmsCwWlaSZ9/yONpz+D\nhc2cRKIvOlKXUlHqK2NvgvlMxT9PjulxGCLLJu/HcbrZnc+7l4GpU86ZJcJm\ne7y73QrQth+qs2Zp0xIFFzOsEZ8NkhojBGc/g5t+jooMYoLmtI4DNA6G6Dhv\nEGoVqF+l8/iGIGk4RIMUWpw6+2mMoUVNN4q34ixMYeeA0P0CXltHqsEV+1fA\nxDfa98WUQLJhN/5pe2QwW6wDaaJL4qEkXBzn6EQ1IDNOoV+KRuDzun8MS00f\nZ8nT1XLz9uWlN2pIsQA2l1vYTNAQ2hp3qqvwdYAycPHOrfhzDakSqTWAi8oO\nXCSiqlHklQNsB1YkWM1rXcLqNoEtFxMxUE/vmcloKBxuGvGD7G2T+CZ49RIj\neu47\r\n=YKnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/density":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.994873795.0_1611759062694_0.5128499014088923","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/icon-button","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a666353f7f8c5d25bf987c510450cdc7ae212493","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.96878e1d0.0.tgz","fileCount":37,"integrity":"sha512-8r8Wx2DvLyxL7rKh4k+vLQwGUqBmU6KP1L5pIQN4Jx0Zd4sxehTYLmKe9n19V5Z8T9e/WzpmLkdPKUwaYt4q0w==","signatures":[{"sig":"MEUCIALTD4UjoyOVZ8N/M8dALMQCz4+Z1jZFbG2ooZs+asyFAiEA3iZAaEBrmwmyzulrIFBjgNd7/PjJZ3MZ8hnJRHx/G3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqiCRA9TVsSAnZWagAAiNwQAKJlSQpU69qZkTxNSGcX\noSyKXsxzG1yquXccv6oN7wRDwBGdB0z9JirIDqBDseBFijpZIa+8kdc5qe6k\nm9WT7m4vBhnsEEX4/o16+MPgFKNO2L+vz9iPKGlMD6rbBHtJu12VbqvVKxaT\nMstHLQqanWN4k8DY2A1gC5jCpsSo30ybyxu8iu7axOKo8M4csbIm698iQzQN\nBRDKKHToDz8wQFRbWOIxv/OHU7IY1DIsq+3aRGHnPlz9rhP2uj7Ye7oYO7d8\n1H4ofvZDqjAL0534sGhJNL9jzct7AHSYoNqPmita43kR8WGXKNM1gr6NpBXQ\nnJvRzfLYPm3FjhMkKrVfC5hjyDqu0y6LkS5woS0dQC2nZDc+qC5Ado9oOAY3\nSJemXluCrm4lz9fjT2LeqWpM9F9TkKYFDjxwM8p2EnQ4yW06T2X6Oip9E4UN\n99KwZzJKH/b7qsd7qwVPcbGhxX4p+LYolEjnzGdo1kBbWiVr5DkFImIfXi6H\nsLXbPlGkpGiXr3MlO7ecPUqosIzvgUnh+I8ho5COMCXVRQoTnD8w5bguSfjl\nxmbqMsLFTljkIxpz6UzCYZdSnrOYBbD1dfYfpEuX7Aqc38oIa5TzykwUajfm\n67Zhwk+7S5xCDyzmmGAf29z+nPRbjRRpHJXJo1V8mLz3okAThjvvU8I45Laq\nqgqw\r\n=wDn8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/density":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.96878e1d0.0_1611770529725_0.3512355562432725","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/icon-button","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dafdf1043867c22cc85568d0d45049a3586267e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.3c117cdcc.0.tgz","fileCount":37,"integrity":"sha512-XEZOGIUX/pf0tw7s4pESNmCHLRRgKmrNYiUBX1dbNuZuc+bkBkToECy06QTNcwnArlq+qUgzwzAm3xeMIoST7A==","signatures":[{"sig":"MEUCIGojWJdObu9LBtIXzbu09xjO60krk7dZzWIR5aJEY7m0AiEAj7QnhLLzfyNmQpWMpTGLC+QAr2mPnDlWKkkoyI9l3YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGwCRA9TVsSAnZWagAA9VgP/A+9e/cKxkBgWrgeSKFZ\nHc0Yfr27aVouV3Yn/zCkGQYAck6ZjyFo4pPL6DQS/1WyvS1yn2Rukske7q2A\n6qeKLPHkMVTbWk3WWJ2WxiwKR0OgoBfxO4GcIkMNhOeC0fFaXRjcqfYjKYpb\nZHis/HZHkbHnVUl0m9qP/Q0oOPceSYAE2Fv5JsAw7oJlwYQRBGrPDBs2MYNN\nwC+vNTkGIYG7bTjUrFiTMDXWuuQ9yh1gbqpDHD753dGQ1NWcPlg9QHpy5cn5\nmiKns2VSZcw16raKasA6S4Xc7+wnBDkpr3I46I3lfQUwLX3GXugXByol0OWV\nl4w/Rx7JbN8tbrykBUPyBQv83NgMNTfqRqbj3nE+GJsEbZE+qffFniVFm9ZQ\n14N6vYlZ+slQQ7dPaFvVNCEbh4oWHKUzVYbxv4WEl/jtN9KyZFF/FKGPFhpl\nNBSbAQ315FLTX4RfL1K8TH/CKxHUINzUwWSsTKPrQHSK4Cqnbml+QMTntJMQ\n+zD+et12xQfdhy3Ncq9kosOM0Xj9E6edr+AwOrZbswjIFgy7Eryl2p2rF2kK\nwwqsB9lmA0Olq5nwSzH+Tyg5dqql8E3tHGQu5c7W9FXphqZnJHUPE9RvntuL\nAdZu/mKqWNCbpW6q7d8DKHSVeEXkZg6oPTHiJTsicSnWiLOb/4RggTb9h22Y\nQLVy\r\n=h1h+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/density":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.3c117cdcc.0_1611772336544_0.7102374485993355","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/icon-button","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae5c875df44d645bdf3044b52b6d60f6d6948122","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.b411e7033.0.tgz","fileCount":37,"integrity":"sha512-LHLMztaDEjeQcEyC/n3qdt7tUdWJYJOLWGGNH/a2bB8EpXyfwH5PaL8XybpaO+Nb04VwhoeUwsj1+RgEtIYUww==","signatures":[{"sig":"MEYCIQDb8U6cCJL1dR1fHYWWEWA+UalZ460fwW0mblMHn7EhQwIhAOP0Ne5JmpoDN43hTQ1Fim0953/zm5gwSCuIYjwxFEl0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMxCRA9TVsSAnZWagAAXu0P/jTZ7S6X2CHZ1qnJvCv2\nX608zZ+vVUoMZXWirEZ0Q9e1GZ7leI3ZoM4niAzUfPukQGR3CKEN8QYClq58\npaD3jPHtA2Tn4OCH5ZKciQq5dWOzKey/OXdaSEWjgGh1msGNT3gC5yG8kNQI\nR/P6nhriHaPQk0S7qeZ0PMv23cAULKTh5AP5YUB9J+fG9aGXUWOnmqYssx0O\n/Wed62528htTGbaBUzzmT8Xd0mcXpwDeNP8uvuBmyqx0JHeKZoHjpKqhWjy3\n3jKDbh+N3saVrRjm3tV3paW/2QXT8RuXlo5POWYP7GWMrNQRZguVjfAQ18nP\n1LEmgPqWuP4vooUT6XJRj542JcCWdxEBAo2Eupqjf4WOpWQmXbqSAe4mMu4i\nxOtZAjgHl+IAY32oJPj/wNSX2YGVTjoLMSM6IBWCVJaFL4ORL4EqWzaH3OSB\n2bnJ73/3ids1zH2qT02QPerRbtOA5MOZQAA1tqmaVEkc2dB6r+Ld1kHpMpqh\nUjcyzhv3mIA1NhFxJgqNiWBLnapawfDFUFegRnDjvbLPZstqQp+dF3GTQKDC\nb4MNdXX8N0/wJt/0NnTNoRzIk55M/+N1QTpf5J3LwHyDUYbZ53RXllx8gMFC\nGx3fqLA2WQmTpansRS7xIwczwmC8Fo9R+5urPjctgC0qjHQZYLLmmhiNx44H\nwRdf\r\n=rWOo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/density":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.b411e7033.0_1611785008906_0.8447291410354394","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/icon-button","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"861cbf1068afd22cf6ef29d0748a95386c2873ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":37,"integrity":"sha512-Nm4tawrHkdiOx1Fho8e4fZ3KUJdvS24PymXgT2uNTqcrHkojcUBSkxfUTjkwshwWPppk8S8pwcMJrxKq5eSqYA==","signatures":[{"sig":"MEQCIH0psCuyoBZNeytRfQqdhr7v1/5fFhxpPEX6meas1duXAiAwM4kjKDInrd767UldMtkbRUATyNXpyCBYj1wR/Pfztg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfE9CRA9TVsSAnZWagAAQisP/34D5DfrQu0MbLGBpc6Z\ntOHbCuCwvG4+yXtZXB/N0NHC8U7eL9EbfTzsTpKGHbdhVy8RLZIVWZej+rIV\nmZ9GWp0HJsW7HskF6gUH24JxPXdgdU971MGdejvBVvbzokDIIZkD/Xtew2rr\nMujuamR6fkd+XOKvB4SC5Nb+T+yOo4JIGuxl7Y+cWelFwc7NVFTANGqEyqrR\nQ1QWl+PwYcXs4wnOIYi9ELPJLLoO00RgY5oYRFoTOojrCKySRmJXqukgTN6e\nvoOsnlPrqHT5Kif1IXbf5AAP3VwQBH6vDYA6jH74LFYfKz/BRE6EFvJ9DkE7\nIda4gky/M1Ln9aoV8A9QRZf9lHt+IDSE8KnlllP/3XjbwBfKpCKl6i6PDWEL\n/limcEQ7Pbt/A7ck9wsdTQ3X1UEyWBH/qtrYLOkIH5ibn1P9F/DBuBcv/EOa\n8mYg8gEyIzcL6S5s144MUAJgQxxt8VjvMIJc+ol1clwdZlCXzhpDAfOJOplH\nEYxhBh0+pxHxf0yYPIOU5tXexOD2/jMmRf6qKyR1TgLuzZjsUdGfcsOfkH9D\n245erFxD3hM72SGlDxGTTcNep27IV0kwz3s4hXSHDECJe8ovcQ+XC4OeiBgi\nqtKjdgrGBs3wDJQGd4RyO80Zx65UI0g0XAeXtgJcSDCVBhd+usO3OinjGJ6T\nWTjK\r\n=bQ7O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/density":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.a9ac16b4a.0_1611788605200_0.5880522471910257","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/icon-button","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aca80b0a8dfb26e80e1741a4de994a9cc4dce5e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.fec7b42ca.0.tgz","fileCount":37,"integrity":"sha512-1TgKwaAT3gIkgas00sf/j9dTk51K9trWh41a+LnV/JeRzzRTH68TlJ/vxkc4Bb6/91ypAAeefb12vXylVlYs3w==","signatures":[{"sig":"MEUCIQCdkzr3cidtsfLX445yxc7lfvkU/jVB0tzERi91SJpoZwIgeV/HzQPrhO9oXERHUquMmK2kt0NRs4ell5Si5Asvl08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0bCRA9TVsSAnZWagAATrcP/3B3+colHwf7Ct4tpgeU\nSrLcNk71qglvP7sO+W0Qu/piAkoMKncMYLGRWFc5+L4IJnp+0r5i5annb9hB\nO0euOCo5sukIX/JcAyMDkG3h+g8c7tVa/7B6L8IZIOZ5X2fIDWzwlEDGhXI+\n1zM2lBZmSUoRrhsPSB6E41HMCRMXBGGC1Xbm93H9hQYz5UUC7Zyp4DYMkgrn\nUjZKkwzcEuDMmckQ1uRdHof7tMHSllCzD+pZadQBR+0S3pFeq98k9MNIu0Ii\nvf5/fu/HDvEPESbM78MV2mZAA/mBBWtdDsgeeEWMALH/+cjSpSE6pVap688S\nqCan70hKXEJwpPxrlOBvaDnigCYIA2M9epxBCPY3AXH4bFb3YiLo95qz4pMe\nzbRNIYv1iQKymuzKw45Qr3BvjkqvcBo/MR5f6qhoupVywGTpIuSmaTtHznEE\n47E/KflAuDF2tVmnqk0UMq4CEUVuqmbaghEWNaltSngC9ClN8f11tUeyQUNo\nhrvFtn07JyyatAIo1naaCZEztRHrwG975bVX92Ss9vnk54GJ5FEk67JvsK3y\nBk/D3Jys3/O97t1mW8JhfGDNPGLIMdN6EYVYAmYETsRp247pkzy20d4NM7NW\nqXbxEmScM7Bc5D2k6vuOUegpgxbNxkc22I5dVB0lN5LxueiG7yh+5FoTaHtU\nthqY\r\n=HKkj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/density":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.fec7b42ca.0_1611861273564_0.8504838628609095","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/icon-button","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4b5826b51d12d8058d8d63cd9422bfc609716f3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.8e66dbfee.0.tgz","fileCount":37,"integrity":"sha512-Ww/JauwH5ufGAcVmcKVDnEQoJoxnW3kzyS4DX3AEGFEM37DxvuxjsyXZzTXpBtmqVwaY4eXGwjkHmbRhYBYL+Q==","signatures":[{"sig":"MEUCIQCPIImxWKD0pAUg1bmbx7m65r2qbp0y5Cwp6gqCLdLFuwIgc40/y1KDlYdwnRDI3TZz8vLb+GuLAp2eT2kUGkpkJ/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIy1CRA9TVsSAnZWagAASskP/0dCYx9tmtyuJmWYPCYG\nUA3dWyO1hcXADpwGNxnKLwtdXeBHelqV5QepFTiD0XexxY7SwRAmhtiQKx8o\nvqermi9/4K5bPqrm4rfPZomYwJ+i22ZqyhXkP/kFDeABctJA3GyCZ/4C+2SV\npZFrIV+d0+BvssdY7uXrsyXAwo304V5kZ9tz4Y2rhV+u4dQjT5VLeIt1mO/d\nbry2BcedPlfH1f6QFxMJLaWg8sJARcM7FnI7nGakce4g9lp1TVVIQwVLz7sD\n5IfWcQvLC8dwPKowrIZAreN+OGfrjADJI6+J4A6XcykMS2oBnki86Xd16Mup\nijhf/X+Ap3A+K3b2WNtXSP+W7kjSiZSnBABfLirSKHBvu+ZAD87GMcQbI7bp\nBCZpki8OZW9JwEdgOAe970i1AFmW/GnbBJH/6YSLJEGvDzzsQtNTtvZaxMkS\ntKisuxKP96qnSTxOkQ5rU6j5pycbvo2tnputabNB3SjisKn/Z8kxxPZBCnN9\nKC1KA0ywjgFUQcaJZlNmbjaHRYRplm4wopcAG+GeiVWCMVZxDZ9EudZr03ec\nnbeL/iDa+LPStwny5PL6RGXlvWPJlWiSJndDoQ5Ho3f3J5pjtdO8e0xP3bgQ\nDNiPgEcg72whU1/HhYTKwbt4GreAnF9On6UgoKgZLIFDQdagIaWyl3GuvQaS\nC3AX\r\n=WEJv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/density":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.8e66dbfee.0_1612221620445_0.4401002530361069","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/icon-button","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b497531d954c1d7409eedcfb6930614a4be9f8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.637d15da6.0.tgz","fileCount":37,"integrity":"sha512-KWtbzMImIZBQLGCrkYZninXGB2EmNfv46hsGZLNb6hjYlrmRhPPJBcqljKygUQ0MIfQh87tXcoKmpBxyR4w63w==","signatures":[{"sig":"MEUCIFCpeTcWSMBr7Z6/c5grhsGzmOxAYopd7F7TftHzYS7XAiEAq+tnAVnXJwrUOy/2MAlWkEQJBlZNW5FNRr0x+5kqkRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6nCRA9TVsSAnZWagAAX5EP/jpAk0XIilEnMr7ieTWI\nH1xAvAdAm5HpRHoqP4PNMxHEHCSWQ6owbdXrZXM0kt79mihJtdOTT/S0ad61\nQHPvPPRi+6zak0uvwzD4F/l/g/in9wj/2ZaduwP8CLJ7iJdfsiMBtu8jx3kD\nPg0bQ/6Dm/i871M0uGYHjGhODdiPzeM+7RrN8/1EP5MOuQCXazWGQpIOWu/X\nmYXV8kVac/HBAGkbRrRdj/w1QEBHlwupCMUzWER9B1LLxLr43rWu1TSG+vKi\nXtqfpIuPkeTqhF5/aH8FlIwm2WgRqOAqw5Cgp7+R/p8L72sxWlB/1wNaRnkB\n90ErAfTQZCr+T4ZskIubg+cKTKxNogEGA4fnix8uyl/maF2hwxwS0+AnKndb\nHMdkb9Cs49NyU18xBrFgyOSYBqxTKHVxKI5gtWG1CqEvOeKtc6Y/2JQB70AX\n8Y354SMqwz4TC5auPpYvy/Ms6xj/a+RajevzdgIVGS5RW+HUFjVJTN8EWvIh\nh/IQedNPDyj5d5bTcncqlyXsXWmO7mGmK3aA2Hra3sAZjNrh1CJxzbOJVfi7\nBrrDmx61kiEyZAHCho9TMzywhSzvD5U8oSbwZRfp62I28juH5IghJmBcVdZd\nPgwq7qaEmepvk/NaNXmGP8dELSpdP5VmndIuewJSWo56zXyoPgEpSYkW5vtr\nNLCv\r\n=+D3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/density":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.637d15da6.0_1612291750945_0.9110943270227925","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/icon-button","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf64667e3baa13bba1cad7e755b06ecb05b08ec3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.fb793939e.0.tgz","fileCount":37,"integrity":"sha512-KDhpqYB0xm5VxFMqQyPsDT2iVQmap+mhC2lBv+j0gCeXR59QGklOY8nPyZOiAc8shP/93UtJt2uDEwT4az5kzg==","signatures":[{"sig":"MEUCIBEjU/FOuaI8ls1WqzLOG/X/Qm+Cbx465ifyDTzA7iL2AiEA6BuAPNOZCk2LXhS8KJw9He01AqZxSWnZooxlSpWeq+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOACRA9TVsSAnZWagAAmYIP/1mC0p1Wjd++YPD3PMQS\nt89PiG/9Ds74+OJfjG9LmQGhHbhozZISldDegYThvNImibIRMBKxojDIrWE2\nniZNpwt/0BGRwtwX5iE8C2KZY6TtZIlZovVbon+NxEMEkpFZhRYI0P3SPVBf\n0zREO93DKUi1PtskPTH5boRajQGRfr9bPQxE9j6vUi9veBQcbQcjjc1XfGIi\nv24lQpb8BOmG+CW+wu2n+insaFZH3nXrrrhij//6cYMyg9YmL2Dmu1QfEF9u\nZ1JUZ2UibvjdtRNtYUlUxQDf471/EteDUDDdpK+tE4bDfpARe4zUYpWEeIwA\nHFdr6UNWQpcnwUlaHvcszWn2F6eYZEH971/dQdJ3AUsZrKdFKKk7HKXMqvmX\nmH5WrFhaYdCcMKPPunGZhNVHWiL/bnX/t82dKbwk2YRJ3xf6t8u7YOwPGYU+\ny+2tzXUK1i2ONlrCY9TRMY3iWGkjdmq4fdMKNIYERkiRYKhJJAQeSCgMcTkT\nCHHLQfrAyfugODM85UdC1dFtRBm/4GHO4AdvZkqNlmEPJw9uoqfYid7uFsMt\nfdU0PC/fVqJ4E7y5x1yVaza5FPm3JZDw88DCJBaUSOvX5LmoAlTa3mc7wwPq\nHfLHdZoiWtowyymn0iQduASA5wXIRh0ZNfrG1SaOmuZz78dGA6dbkxxS2Ur0\nIEtw\r\n=t4M1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/density":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.fb793939e.0_1612309375929_0.11697336335123465","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/icon-button","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ece3e89c8b159f753d58e6a5b43af53ee60466e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.15a4d40dd.0.tgz","fileCount":37,"integrity":"sha512-I2VnbNgbre+DrOYDngMAMMzWX2dBQYjuwwqjuzSmY1OEabniFHVCSZA5gMXse8J3hEnBv5DE8JBDXLrjqknKBg==","signatures":[{"sig":"MEYCIQDayaKtwfZu8yH5dvhudOgG759ydl1vax9TKKKXZmxNJgIhAIIqSeszg0VZKSbIRodr27wR8rk7zrkpovFYmL3l5FXY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgf1CRA9TVsSAnZWagAAltAQAJbwbYSDOYq2gdGle9u9\nnjxGhXL/e3fjapZs1A/8NV1Ry8c0JaFXsOdmJHuVZRlVPD5PBt8WGAh9D/gQ\neoahNPWKqcUmH1SWCb9++2Zv1eb3PB8IeNMKN5f6O7I1rBHBdds61wMUcd9p\nhBqO9vMvU+oQBcLGHE5WZu8zGIIu4bgrinY4YDXWcSVKQW9akxFr8GnczvNY\nAZXb609GxTjShyQCHI1GbfNl89ZC0OYaSym+iWJjnzNZ9h/eDeWIuqui4fks\nXvvULyO4nzGa/ibnHvA6wHpVrw7Y3pNBfas4ynYTY5Iqh3bD2DXcNIEhOwRx\nxkq2jN1WB1hG1biL4bLs5SpKApXKSN5Tf0JusWPBhTO0+B76E12UQTxg41gP\n42NLdoYQDfbb6GfiEw8ym5sA3p2LBgY3oy3uTzAQlAKp0zl9bh1J3a0lF1ID\nHbdJbRs9xkp9qsPUdqR6WvsZa/83hvxV7I6FVZOGP/OXYpnu4nH23Ycd/L6O\n68ZQAylURaClazC02qvpSpCxdg3jGTwICPT6SVqJqMNxpvdeBrIBEa/BeUO6\nwDgOt/ViVJgf2PDyL+E4/5TIchQclvDI09wqG7tjkKEDfWW6C5/K/2LrMyXB\nkbwkT5cjbCvfwWH+hvTfzrpSJBfA4rUybmU60+6BuDPM0c5CFgyJWumyj3rf\np96D\r\n=ItnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/density":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.15a4d40dd.0_1612318709444_0.3577827712889343","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/icon-button","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b09d9337f760ef84661262586aef33a56335939","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.7a003acf0.0.tgz","fileCount":37,"integrity":"sha512-J0klyQ8vjImpP26XMml7Kst1SZCAC8zyi0zV5lR1TUvNtnlBMt16h4w4ASyJRuJ4IWQLpYNS11fX16eHL4pIIg==","signatures":[{"sig":"MEUCIQDbXEyNMgSTgokUji78pti3C0cLgW1YRJu3KX9Xe8XlsAIgDsBeg28/+5qW8osSTrPr18TbiCcM7layVVjsg8aBgIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10SCRA9TVsSAnZWagAAUjgP/Rl2xipd5MHy6CYw0BIj\nX/oR9ITLUEraqug+nhCgyPtsmc7BinAqcHTh4ccPHTcYoy6iuiAqBCs+FSIf\n8Rhtyi2Mvf1dvS2U8CyyYnLrq0d21NQlxrZ44XxDkIYWTQAVeY+wgBkU4qd7\nH59YXnvav2xo1TfsBFgjc4J7buLE0GaaEvlUw8qyY463YBgMf9hGAP59QPuO\n4pOWON/znSvbEKv0BwQldOFJIHJnUaxtu6nPwMKxHnwHIp/9zsWPJY+kbVNr\nJELj1CPmVMyeENi3hGuDY0/poFlnbfW9xkzIBIJj0cFY8EHyBXRJk9h1Rsdv\noCyWYCxYRpycQbOZPM8jsP3qeky0j1GFASP3/pCw3NOJFKwzXKeioV8k/Is5\n3hBQIityV15kEFeE5Rsq6Fdgx0z8uXS81SdQoCTIIy1xAjtBByGsCQdGNeAT\nBTNAr69DTnhsg5Y/p3F6Qxmc4nZ7bdxnLchbeqChwbDXwPQXc05jBEeiMcpO\njnKS8cR03bd8NTsd6Fd/QE9cdBHtfnyb1n+ppg4ZlsZ67y31DtnV39piWJqQ\nbUWNVKKgQPDiYAVOjnnJYspDapoZi/YMlCBZ8ijDylURTzRKTig9q6UW8VBr\n0wOKmZHElnyHsM+6eWonUhAIFjHjwEfbxHj1ztKdP6dIn8XDCE+gEBzS9I0J\nVQHk\r\n=+MvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/density":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.7a003acf0.0_1612406034407_0.3685840859847971","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/icon-button","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb13b69d23f5f5cc7311f5390b51954442a16974","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.05f249666.0.tgz","fileCount":37,"integrity":"sha512-ZzaL7iRNlRk3Z9HDRoLkOwgYCd4YpEUMfLWfWmXlaf9hjFsy6ltxI3cNOYfHVzqED2Vbzd6ckPCX8N1CUC742g==","signatures":[{"sig":"MEQCIB1Il9a2f+TQ4VHS7wU0f4iPmgdk+LZIU2g2wJs9TvRbAiAhulqHFgU5fdRXA/82dwfqICtuAODd3adki0I1WgehrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPQCRA9TVsSAnZWagAADIwP/0nRdnOSnMK5KWDkMdBa\nYNhmoPJq8VL2KOFoAfAw/i8Fo9b8NdHhKsjxsbNVIzQnCYj8s6YaBKpqnVch\n/LBc5R1X+U17qcma6VZyHNtxSysZRh24R25gqVI7NKcARUit0xtyXU0WZ7t4\n300FiBKkO7bMOhubR+4ihmprM0Z40JgOOYyNk1bW3RFVrmzS/cD2AWHRwvYY\nUS/fdAYg2N63/K9WvuXOWtMx04P/RKVHvj++A3qY9vwZUIfN+VCvMPz+79KO\nhgcBkCGe/nsln8bkUfhuiem6BNMrDCBFHNpA3T4SX9Nr49FBwiHINAyZXe+z\nfhccg+as55FGyO/1jz6ibzhC4w6mdnRVehIpneXGAlZ33akxUPjfWx8sNebP\nlGFecy26loorEY1VtmQptypGg2k4EWjDtUo8a3kny5lliZJ72B3OtuWeAgS1\njYYnWuVJ4pIF64MEPJrXQ+UFxDrEN9uYy9+iJQMVzrTUs2/emsYlKJVkE4kt\nV+I4T9hGbItBlxgPr0edTVzO5Fy8lxQTODj2B0oyoVor3ouZhztp7vu4uOfw\nDGrnVL2bjXuEezvLB/mr/dG8QTrRlBcn+Bhxily6jPXxqxCS7oyJQTJ5jg4y\nIs+4CoC79EGU3L1jo3wvXb8tFOp1Bq2SvPPXcsalxJdQTB1p0LlpBOdnHbsy\nqp9A\r\n=qlj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/density":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.05f249666.0_1612461007951_0.03136778878792357","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/icon-button","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d6f56e886be333869d379834c220474b8c681f9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.1a3a39629.0.tgz","fileCount":37,"integrity":"sha512-l7ZnYz5wm0sLq9hr7n/jGnBUaGnVAkQKMR3lr7yhSkK3kQ9yo67w7mxtMOU4Q7M/NhorqP3Q+kVfmqPhdzzrJg==","signatures":[{"sig":"MEQCIHvmPa3CH5zGLc1D91/61OarX16geMWKYXWL0heJWLuJAiAkWvKP3QNAVLdp2zbC/Ddk4TU+CAQSA4XeKilzkMLCAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEA3CRA9TVsSAnZWagAAVI8P+wSlHjr4E/lGBiqVZMP3\nyapvFiGqzueLRHDbhCmd/BNt9TxOkBGc1aVK36ZBPCKGKwjKvwjNSQzWrQc6\nbPnuIGe3ZbikiaNUDsI/hIwT3RUKutyFUbIFB6o/nF7CQoFKlf4n7q/xgbNZ\nBW4Ni/pg0/ZmPaFwMW2HDBSXcULVx/ShY45l7YRSZGgW0O4WgbDP7GmUsZgp\nledNFd5iHgiGwlXnFQh7GGIXqTmVK0UAzv2N35D4iM6ELEErqBiUI/DGYO0F\nQ+fArIDIijGedG5NBnCxxd4YKSAQInuS78zWiMYRjc5K9VW+eAk0sduQpE5j\nZGkqG8EurFlWiRZI7flnjK7t0L3ZDZXXxXMnlykmFQ3tXkqj//kFrMwagdmU\ncuXB0OqsaH8/RVn8gXloUMC0iIyCZFHo6qsbIGlq8UsD6tupEFsR9+JXauS6\nwjyv1d7qUim5h06Pzu94iWa7OBpMDfwZg9j3l+jhFCZJnnAdCzIBf5qewIOl\naEo5wrQAHPgjWKADmRlI9dt7r3Sd1cU2i8rZ2+LqTH9W8Oebj2ArhrUv0wSv\nxZldkIlhMeb1IFyoFJJYNaOdyMl9bIPBJHL6a7XS0zTuhjh/oqmq9jnH4/U4\n5DO7KhL9gKjDBZec6VwDq28JFJFuQH5wliO/vbQnj/ZEPmn/5cxoWnam0SkY\nMnod\r\n=TqOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/density":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.1a3a39629.0_1612464182667_0.18505387045379562","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/icon-button","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92245e0ba6d89bbda4004a29adb83c39380c184f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":37,"integrity":"sha512-Aoa5qXH7PpxTEkLqdPWWhfv+89kYwiY98GX22KaFSgcUr7+RoRSB2nPv4/Vz+YRC5L7zqLsFhzgKLRMmAsEWYQ==","signatures":[{"sig":"MEYCIQD/9Ris1eA8ukEfBkfE4zrCuWpou9P7Dd0lrhpX0Yq0mAIhAMnqf5yfUwoINkCHYWXnBW5PdIhu/UKp87sQ4kNvUaP9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHaICRA9TVsSAnZWagAANLYP/0AiG5vl3e8a8Lx1zXAT\n8SgEds+lRuYdbnmE9N4jaM1ddEcqrupHnP30eFKZjIUTPlWXt1U24uAww62i\ndsYo05kb0Jo5DlM8w9UJWHpoINzGgZj80L4DeUnbn9vms39F0AhUwm5+pwn+\nFPT5vkF8fehTyWTfK3blOL6Kqtf9IVLFOq9DdHZ8tXuhPfLl6c+V8EVv13ET\nQH+nK5l8x79DgiHBw0CLSrHfxI8AXa9tBQ+E08WBuzTMisI1urz3AxOMqQgp\naHorJByJxBeuM1i8i9+9NQMi7DyT4OV+G2rZgeZJD7f56qYErlKjYJEgri7C\nAy+bldwKs0sTfuPihooA0Q38MrCYUv7MFoV7izMD3s9LgN+tSH/8TXxTheWu\nbMTJduFuSDWAxLtXW2+L/ecU93CRmlQJKTe0R8v2vcKgxWFlLtt3a4vXAMFg\ntn/jb9iT0NKTg6vnvtm8+E6xB6EnVlbx3B0gAAE8rvL9+wEakeS2y1kPl1hR\nd9R4rSHog0LdJPlfzGktP4+vaMKDkltkwiZxZr1UsZGh3vxISCmKKYyIDN20\n/McqhE66+bwgsPvwqjigvyIgCfNy3fM//yjH7hm5TRerAoUU4VcixmYH3+W/\njyOQjHylPc8TUjWlK0EyO6QghuNoF+BoRDXosata7PcFQWwMsvTHGnq5gku8\nkr3q\r\n=GOsi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/density":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.8b1cdb1be.0_1612478088361_0.1128407376294902","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/icon-button","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a795a1c2b8e8b64681d76103296faf106f07a63","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.8271f00f7.0.tgz","fileCount":37,"integrity":"sha512-grLYPin1dYNOJfPVuxBQ1s6iPVgdLrttLfEYx+eeDYfFuTO2nExWzrUyzb87zzsKRbTU3SDc5PNzdG+4N6l76g==","signatures":[{"sig":"MEYCIQDoRG9CAZbZvtVYiWOkq7Tl/D9OFmBzYTvYaRplt62T7gIhAMu6eYSj3Dw3CRMokIY00EL+gxChYZkCMWOrOM8FTdSJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHySCRA9TVsSAnZWagAAPp0P/iIshkyXLCovi9eZwuBd\nKZmVR+xBOJbP5qmAtmioLotoXE3v9T0NOqUxABwb1Bx7IbNH4gjbZX4WxsV/\np7y4nMuRATDvs8b3uOKjqYc7T4gyQTTfHYyXm2aNksspEbx01MDQJZrvR+Y8\nx78kZCh8zjkhu40uT5lmr+QhNj1D+SPusN770ss8Qifz668pbGPad/JvLstg\n1e0AcbjJJIrdNOVjOqaiqAkq5zPmcQYL9LfPJVNNsox2oMJdEzx0PBd1oRIO\nBYKBBvxfcAFbfwGzLeeZMmeSVuCx1kRBtkx5ySkPqyX26Jcyknw3BJSKiK26\nOkq7E40Lb8CCE2H6bTUl4l0DQyd5CJLIz94lk/OYFhgIfioLD20M/14ODDC4\nPMUiGhXv/JDDOJ5B+rc8/YdGLIMzMMf2erVJZiJbNIi3Q9KTLEQHw72eZi0N\n+rogvPgXG5Qxqxj4roWMyDgqN26hxdUGlsV18C2N2IoJpNKMcgC0ZIpvKy83\n5hxMFxJUgY2G0KrjwLGEft9xS2DPw3e2D5L50FyIQVAOqeSL+CT9eHdyX7DY\nV7O+vRsiQH3dVSdK0e6x0aj7JyMy22X0jQgimWHf+igO3o27vMjvcOh77ZSB\ngSBJCcruRKNUlnLW5c+xOPnP3Ah0X1IImPFaRvw1DWr8nGtXDaf9IkUQ2eZo\nSa0R\r\n=6gXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/density":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.8271f00f7.0_1612479633763_0.2086722482657173","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/icon-button","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"775864de9dd382b256169080a5e9613e3ea6604a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0-canary.533092a90.0.tgz","fileCount":37,"integrity":"sha512-aALCzfOk6TXe+4EaxD59xowK+2MPbAxJt7oeurOYPqWwBW8ZzWnIUp16TrWQtf+Yh48cF2GwiC0I8n/cG/Ryow==","signatures":[{"sig":"MEQCIC2lxxB7dCv1x1PNtVGfcxsnDXIqjxNSPB8VJVGjDldOAiBqpuGdDjuh4NO7MSu0t0bgAaDWKZX775FQzgpDQptjyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+iCRA9TVsSAnZWagAAO4AQAJU2cDmxMuiHfOplviRW\nBn76nG3tvmbxuVlYkV4wsjzsoljOz6RFjCzaDduefqzXQJTz3xLoPallVr9B\nfF09PPHAoaji5tQQfH9wzGlyJz2fucxYa3VDLZU7nTzf/k8yUxOJstAvs2AL\nQHXBT/l3bHsKsfIQDdOpIZWKDhV4LapMMBBUOaj8uFqElIsTH2XirwqSpbu2\nKkUOdQaH9F199ZAMloGJ2pxB2zvIp3lyhZb4Zh8pz8LRso5sIhp0Sy1L2iEE\nsTHAcCyRvvCIQWLtL4rc7j6/BB4B7fbDWS75iu0qlLad1v4+7bA5c71iXwim\n1BRV4eAyOBudwIxK0C23CXPDaFF67IHZTWsv31wnDcxPQE9KdC1J9evExeub\nS5KtGNqmFT16YY8ul/mk3lELFTyt9g8r/0lxNvEYI+c5miaeofkLMhTh6jfF\n+cZCaF7gqgMNzo6OcCCQecSymMFDGkr62gueWIIwbnxCIMsEzL9APTdV++Uf\n4QCE3fvaPsuldQDrifNpI7oExDNxTrG66zO8QcGny+ZUVOnz5b/osDl3Hw69\ntBNt31E3R5tH3BuDVA+ZYpyDG306L4aPLhfVKpDmr3k2IE+8s0fjx0GbvNOV\nXXL0XKkmPJomqIMPvPXu9XC2zZ4s5++j4OlQGeN2GjT1lt1JF7lrbq8B6riS\nLtpP\r\n=nRbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/density":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0-canary.533092a90.0_1612496801732_0.051421073824119645","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/icon-button","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74c7438cfe2baeb824758d52858713acf16bf664","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.633a9fc7a.0.tgz","fileCount":37,"integrity":"sha512-L/D0Fxo7flZMWUHImXpec+hfT51mgAC2a4ecc53hP4YHgMTNBhKU3ynLI4eMqUh2fUYYARpxj4K0gekv5tQbnA==","signatures":[{"sig":"MEUCIAu95vsXO/K6jwpQXah4kxdK6Gc9TV7Jj+0ch6oDpw9+AiEA4j5Pi6Up+UuiGOCi4l48k+u+I46+C1N9/dAC4sv9CEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+JCRA9TVsSAnZWagAAjeUQAKKe3qzxuqb8X7571Zgr\nqdUISBVB0xA+lOzfzA61z6XMt0tsLeNxWHkKJW40Y898V8gwQtK1wWociKCX\nOUIvg5hbh6uwsp5R5TbaV6BFR9igcQsgmSMIz3YFb+js3EOTuAjEr5tUa9JB\nDASgjUsM6V0uYLTL/PBELHMOA95rZgR0shmRYEwWu23qy+wXkuCRnHT6p+Lt\nEVWpvnPnfVxAEy5wV82qKQQS2oW4Zb6jx1St1fVGMQ3z5UIivQrwv5uXJEs8\nMi4itiYyJPrkLeLpXwHolHqitFvxMGJpXVNW6wSeIzQ3/K5iW8lRUMOXHMk9\nujpe78B1Yfs8vJDcDCtxB/IHvqqWK/5f6Oa1g8aYXNjXAafHwfhoXQQsk1zU\nA5qQSuYBYmDyjK4KmqR27eaBTThsF/gj8CO1ae9xRraozi6fPGD5c7nCwVvP\nxUYOxcFoZwuvMAfmRLpSiZduKxkI/rblVTHB3FucI+jrO7Oeiaajvu3qwI3U\nfjX1ZweUZS5t5HCw9L+UNkj3/QwZTGfxZED/lBI7Qiv/22BH2Z7ZMrkVLawc\ngQyvqLzPoyg7GqMA9+bAEUqWWRMp8bfmp+0NBS+6yMbyO4cg5d04C3w+w3Kg\nCYaJT3imrs+V+JbYElrX7GbquGLVSqmHCPdJMprrkhLFjJcQRlGyENDo8It4\nMTs6\r\n=M/oY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/density":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.633a9fc7a.0_1612541832869_0.7631658568537363","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/icon-button","version":"10.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab6a18e2e18245ff59eac1bffe4310a258f7da80","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-10.0.0.tgz","fileCount":36,"integrity":"sha512-e7oQq2LlUA+UGGzlgvityPV+bTRJ7sFs8grlwM0C86adXzc/6nYBNmmgcqUpQDiCtBj5Dqo8oQSUVGRkHIqEiQ==","signatures":[{"sig":"MEUCICoR0h1QkEoM37NfRTPeoEfR5/cKuk8+mk1l+jcEd0wGAiEAqcEQomFI3MXyFETV+QPbKZRjdtF/QigZqNs+1NVUlGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/jCRA9TVsSAnZWagAAMJ4P/1CNNW/kJBdunb7OS/R/\nF/cTE8J8P9Hqb3OxLthIOKaixr3/dd6Wp/u1wnZi0o/E4mXK2RCfBUAwB2VS\nlTI3WT95jWlW407dkBJxOd3ne6lNqih7J/TuXtZYjWSS1uj79EnXOCkhjdlL\n8aBSbF9PaSaA7JeqGYN6I9ns/00vMtFn+HkGkF49hce1TleTNs4RqcBZw7bH\nbZFjDlNLs00mt21Sgp8OR0/cKrcM5p0BT11YNrtgBd5bGDLcY5DFcarCBeyN\nZ6+2/oC6pwmVWsMCrguUwbgjk8lPwMLxx72p9N7GGqmSL3hDSknx964rymei\nK1ZLxLcYeS3we2DPLiIIzA6yFAbQYPSe7hLFDdR5ukug+9ggkhsfTSHS11Mo\n3OTQpyEBqEAxZwwktSziyB7RLZp6hK2ZiN6ho0m9n60loCw06PhNYMzde6is\nwzFRZhp2gNAH3j75Pnbd1SUW7+Hl7WyZEYBbmvKUgtEfmtlyMO2eD9Pu4vvj\nK0GGM1J1QTPjtI8KQTYIqSjEACJkjH/oX+ymyJbvtSoLxaHbpJ1U2GPIHlEF\nAhVO+6zeTyVAKAS+y2bnYbo9pk1h+fYw4KeeP4+TZTUQXZsuM0yNKIIEyFOj\nUA7da3dNY2hw0kiKnf+lJ1WdLUcXifZKl86n1XUUWTMTRiP1oiHkxk3J3GJM\nVtAK\r\n=yxz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/density":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_10.0.0_1612541923255_0.9473395564240776","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/icon-button","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58fdac30b875861ca7ac1dd5095e969fdf6e1956","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.b5227247d.0.tgz","fileCount":37,"integrity":"sha512-8BOl3iOKT9lmu6vdvdeIkl6Yncy3lFtI5eDke8OHl9j3bLjsOKqLOGyWaciR56XLKUjK7TO6pFvHhEo0U/y8hA==","signatures":[{"sig":"MEYCIQDkJ7meinbcgrrFWiwDqXknzYxcJbcpiMYox4H08D0gXQIhAPVDy6c4cpkv4FHLAtQ4WUSq6Y3AfbGve8uHDFeJg1cC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNlCRA9TVsSAnZWagAAlDQP/3fzQXlGJz0rns6ovLkR\n85u/WgQBieBf6uzMkfurKrEyyunNdY7OMINKAuUvzqrUJVa2U0PdcpU8xM0O\nVJNe94yhqoGPufWVq6XpeKx4rrhkgNOfK3R+ixow1+XDiYHMUmR7o1hWbIJ6\nP8AwYh+fOKVxUlLj4x6yuhwFjFJHpqOwU6Zb0PeqBxnz0tlaXry6BZFGgV7m\n43Sgxi/Ig+icGuv7BHRco5m+lO2Q435ag3JTWROAMXy0ekgaODXKTMdDDg7H\nzjEvKQjBrN4cpLUWkGI0UpuvtgxnV1alG+zufJRtr2gwKDEpSmc+I4n3BCVj\n2+zXJL6+00g2iBcVVVqw2a6rbc6Aj0E9IWhDXDgsD26jRFi3pEimtq/jUKdg\nwkjN6qsoNsYyQUDm3zWZxN0zDOwwQoHfhxVYcjvcZqK0Mm+Jdi1icpMaUbfO\nXOj7wIB51TLnmhZTwAZQjDjRVqB28xDBqIkDl5d8K0H8fmYkd3wezXO5P5fp\na/xPExDQVkNNp925i84nDrp69N/48uqFJSfcRlGEy8CXdfRjcEsWZ9mooqr0\n6wvHwDZmbiocf4irhtIyN3Rj0eGNobZzuNH/0G2AQPd00nPbR/TNQzkKjXoF\nzZGOul7EIyYfUnj0FD38A2mfesuaMVGrtZO5oHME2fiI4GH/jmV03dngtu29\nlt5b\r\n=6DAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/density":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.b5227247d.0_1612546917444_0.5008777562662932","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/icon-button","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e541ecd5d08877299d9f83053cd03e10360a4c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.95322b11e.0.tgz","fileCount":37,"integrity":"sha512-w2rqBaXqram5TvkSr7K6/dbI8RFdj7xgia/oVGhAap632Ce0Tlvmcvdg4EMsGYjkqm/+o9Sgjmhq3Qo1S1gs0A==","signatures":[{"sig":"MEUCIGzWk+lCsALzB1/WCsc+t7CJBTdT26e3xuGicuj7nlSXAiEAlWGZjCpqGR4amzqr4a+xfZTQpX56233++ns3LQf0MJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVWCRA9TVsSAnZWagAAIgoP/3hAx5/jXFclqS97yRYS\nRyUFwbTeI5cNfK6DQHnqm8TMx33xd2g/vvBTIqQ0RgnhAEe3/SzAjbnlJtxw\nOzkGx4gimpqM3lFg98aNF563d2Zo2/u0TAkpMaZMHcBTCdJezCjgCX+QjKNQ\n3RyOm+Y2qmlYUZg1Es1bk6PIFLcEoXBSJcWlA1/LJc0ZX5d/zUhhPdEF1sqE\ngp0CrLWgNVV9yIQyFwS6yj0CYISAyNS3MWOGTDSCGsyMzQAVdwkDlRD3O9IB\ni4RonQYziZtAQWytKXg0frkF+SkdUBqm9aL4+iPyD9FReLGT7zbo+jJbw/8V\n+lDzo93IFtvY+VvZbymd6iCHg5uGBHvwoOFgvdSKvOhuylNmQDmAeYOW0iuB\nx4iQueFTj1nfYywAXweBFjOz1Eo14YJwy6onGVYez44+Zydkmv7+nJLRFJxn\nudU943fjwHOxLpOzOn4DO3HM+hs+rPer2Po6xgUTkvklOCKCf5RorEHqqLPH\n3QF08tLPRIq0MRYnsICfb2ZAKHUN/RPWsFl4D3OWBKfKBEQqCcXjsiKgi20N\nfyS7A3sGtpUtCzPIk3zc+MsszI1S7KGSabKiqCTw7yDyLZz0QsRPFJB3K7/Y\nAwGy+3blxh1M1qDuGPMTvuBEzIOlunqZBE1kgLaJPCBaP/TpLiz74Z8PErBq\naU2F\r\n=xmGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/density":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.95322b11e.0_1612567894172_0.5917917377925412","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/icon-button","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c431909730d7d4ed1c0258e993c175c3efdbb182","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.1f318ff0f.0.tgz","fileCount":37,"integrity":"sha512-YGWjiKfkJN29zH2LSAb5K3E56TJ/h/2zw4w71rFvF5FzDKA+9NXbE20Q2eTbdOkAro/12S9d+SaIR+eIWpcxBQ==","signatures":[{"sig":"MEUCIQCWCB7apiG0hRWFhyPiwbU7dehBhCZ2nGC4cdLZF0i40AIgUa+HoGHVj4qGlTiohMlsKMrvxnE2HBp5TYnrwEQcc84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0gCRA9TVsSAnZWagAAlxsP/izG+vkBJPad4GLYB8Fx\nTK+KeKXT37x4tCSkEYjeRZmdgpy5dAwdebOPnJB8m7G8MuoYgkcy4ITSWaDM\nOLWomiCq2SlGT+mL8MayqLEFROPoDERSLHnNbmDLrJoUcGSfMy4yoLBlERF9\nbuXC6t4jACKF54P4uSEHpGlFPx23Z88nkNa2MvGBb2Ase6ujgWrov9/OA40d\nBsaeKeLoO7ulinw/Ec6QZWM4bfLDBVqDGfHidnBU++yG82BdTs/G5xqq3iHP\nCSolrOudWr+RN3Skmofk6misdZGGUn76iwB/UbKBHSNIIXmrY8TCBP/RIXqG\nehkJjPSpBFJwz970+MaIjWrehGdG9x5xUZD6Vqn5lk1S6dn6as+k3I9tSHe9\nwttz3InBvBV1DRo4f6lwFOchNzegJ0AZUEduxvfKB0AC8ukOQ2GwMP9uDz/Y\nS1fKJ4oEVogUhhpoABu5mGOlJSyCircWW90aEN/efvW84RTAaEajKFc4UQAG\nwHYfPVKC9o5uerNTYukRlJE2cblpqG4DtkhNt3VNls0tUR3NYIr6NHF+g2dS\ny7Jhb7fPI/wwu4bLKZNXl/gOEPrh0BL0Olm6KKT2y6NNnpvuXZt5J5GZvpfq\nTeXNZvYYfLyTHW/A+tFVOAvzg9hU4D6m3t048J9jdQCQMX2M5ewXvN/mypS5\n3PTQ\r\n=AIed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/density":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.1f318ff0f.0_1612569887826_0.8487958736248877","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/icon-button","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b681ef844c6f1a131e31aedfc7079ab57b49d1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":37,"integrity":"sha512-0Yco3BmfYlIhl5rBTTjIuHjFBxJki6ZhrJOdMTe0J4end2Gcqj6Xy7ck9GuOdvFf4p01NV06J4JhZ7eomV7vUA==","signatures":[{"sig":"MEQCIAXJVqmD4OkKzQtMQfX8fmjorV76kT6W4nEtoeG5/dqmAiAz6mrujNNOfZ5XMihy5ZozNaSjVUAKaw1b/39VWyt2KA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVK9CRA9TVsSAnZWagAANN4P/1LXrShU78QxToy59jdi\nG41dh3oIPXwQQKLoNGBuQx6MsHG5QYBdHp9KqjY4ycA60bIjdYtoBFthVeF6\np+km4LI3tOhjW1OP3PffE2RHbUV/1TuJrGDeEJQDXqafg3LjGRs4SCZ3OXcj\nvCmYkKqhIdsIxmWYTA3aK5dsAbRkhxPHOXv5AY2bQ0jMHUJpyMgXsrCt5NsU\nciqTUdMPBajnUDwHEWZj83Kqoa7fySw/nG0xV5jds/H8GSc/dIMcv6pv0fvR\n6psLzVaRpLcs9Zq6biYW5H7PPD5q4L0YrqjfajVMwpxnK+LUYkwGBcLCMSlZ\nhxFYleelMbH734ZWHI/esfubSezSI5gFICI5cjisuM4G0K3U628ivzx83d3n\nP0S8/arJ9bG96eaSk3hlVno9hapjAEsRU5GykDyGQbKUM6whsilOrBOoemWb\nIIuEqxXzPYPypL+goK4ZZMRF4emdo1YJoeRIdOzVXQ1RKv+BU2AdbHxD8D9R\n3slBe+FM6QRaIDfmqNY8Gts1QH1u2fPzapUwJ7OfsMGDdLSfl2qV4roJCU5K\nc/gqkbsjY2uE9kMPswMgjU2NKxLvn9FfHdd+ikqOYA6+GgN9v9BNMbhva2EH\nOOGL+z0J+gsGWmbAFmzP0u8XwZd3nAGu5aJy7gs6eA4HuWvQlylf80WMP+J/\nnPw3\r\n=YXWz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/density":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.ab12cf7a3.0_1612796604990_0.440596612327518","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/icon-button","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfa52ebc62fc5708cba25721aa291e47fee731c2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.98db2c5ec.0.tgz","fileCount":37,"integrity":"sha512-M6bnLeDQj/JnVJ5d4cGcW4EpQQd3CIX08N/xHHJtbgOwz5WNchCBsb5QUG/YeYUQFj9fPq9qVU2E/wcqAuI06w==","signatures":[{"sig":"MEUCIQCb02GqBD1w43EjQvTRuXhwvt1g2M1MA/ECA7wPUjImxgIgR6y3wSdzxazqrjRLBT6pD68oBPRPwc/FufEElCPS6y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnqCRA9TVsSAnZWagAAr6cP/0UFmduVEaPkH89J0UnJ\nn31Yf6lQUY0INsKmTRppS8hDYXd7HvUF9qcXmeP4UWVMqOufImjaBL8unNwg\n8edixTHYm2WekZtm0n8NrwwqCPZChMJMBIrf/NSb0QYCzTlpOIHP6EJ9Q8Tu\nSRWXLvbO31iyQXTFn9jZ96rksNuf/pYLpMVXI7Mya1tW5T+O07n1MJWXGq1+\nD6TZZkibhGIeyVH7gWWiO7VuN3dPBUwH0YWoSZ6bjs8b4ALkkQOtmV6v+D3+\nJZNbo0PZSa6IgeJcfw1VP8xDG5YLfxbt4qSjqoQ4DNzezQ1Tkwy+idtxiHJf\n6adqpKWvKu+ZuzaAAPGTSonASPbHKeUi9rCe9nh/x24bjNTqM7b3VuU5+MeL\nQWQqbJaVRiGAlWY51pQa/G/QL2rPWRsQrM4cSktFxbC1aLY2l77AkRQO8U+b\nLScMPB+0oEbstNaLPr5fPSagOXe9oqVRRqCGSgLiLwyPdEhSImeSBPgnjZoR\nXfKUHm3tW+UDYj/UumKhJqq7rY0wsGqkMVUTvepsA0W1LJ2KfX6ZmWz7W7E1\n4q20tBNtis1xj/Iff9SzHvECuOU4JhLbYOt5JLEFgGSHK7QGDg0TX1moQvH0\nvu9bYlGXqJZ4PxOQTXlyMEEBBOcl94wRSb7RdtCwEkuf/1oOO8ikkOgpKakM\nxC0x\r\n=scNa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/density":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.98db2c5ec.0_1612798441910_0.6151574602917622","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/icon-button","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"407c12af95ce126cb35b88bc00ff16d8cdd69d4e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":37,"integrity":"sha512-PDNZN7L+J1wTiHsGm+haEUw+G9MJeTrS6sIFlO2N37meRktB9+CCVn2s5horNvfjIi2xJqTM8/H0xsrik4/Kmw==","signatures":[{"sig":"MEYCIQDlxsSdEKInwaiBohaKFBOWMljaoRLtqdK/2syc/FeGVQIhAMJZgnhlXbFARcDUeMt/CvMtXXX9Q1FD77TgDb6MqPpI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXITCRA9TVsSAnZWagAAPKkP/ArWWoj1Onb19y1t3EVS\nwiHdLvcxUaFCYGi47pvmPgBrCXKoW1Wulh5uvkEyvDeT72X30Qrh/kuNbRwL\n8ZJzV1eVaSGSfu2y7jJsOzdmm6m7suiX7AxcNeJdFIs3lHIn/QiM0MO1Ma5u\nzRxbEVD6C325YIOD/ygPQBSXWeaRaaPZqIwXWEMQ4upslw+bZRXsG8TEgyXU\nuw/I0PKukb08Ipqqw9Fqk96c4xuhxWWivqasFnMeesFJzHUbPM29Xb5IRgZP\n8f/7uqbQHMhnufQ33MdVazWlV/KjQKGXmzunr7AdkPZQGM1oQriqssMTneFd\nWbmxYEXGKqrSMQdZyCkoHM201C6Kus80Zp0VxI2S432c3yaUaS2p1qsNA3Oy\ngx0GNbhaLldDUjx6adHW/beQOyUejsjc9pV1CJ0V04/bzfERHH5/gdxkTXjl\nzeiIW3VZXmhLVaFvsnjy3Kp0TTwmulfdMrPNw/PJVwkx1SRJGvDRnsCuAORN\nVHWyGolYZ9QcdVIaUhxOH9dyEbeR5w8HSlbj9nuxlvX/0QWNUSOwEkFTA9DT\n9ykOyJP4Z/3Lte3tj8OzSmDqAzlk8t5RB2Zdc5rrEnjYiZR/KOUl5pbfSgaW\nWqOZR1CdlJO/LT4sVewhkaO4vGHLWBKicN/nMvpI0Xq8QxFyp4YLxep9vBqm\nnwaJ\r\n=6e9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/density":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.1f86b9f6d.0_1612804626945_0.40392905451951355","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/icon-button","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f5aea401d3fdb6c1e9d048cd2d00eff79a26e5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":37,"integrity":"sha512-FUOLOMuXN0z2i4e3PneOMXw7BzSLMsp9izGodCHV1Hpyll2YfyQpmFr88D54m8DyaqcdnAsU9/cX+tRv01os2A==","signatures":[{"sig":"MEUCICrG0hBCEmW48Minb4wTU5yYsU4h8XW8JBdFCxKS5BFeAiEAnhZ21ADnqS70+j2LOwj4El45F/WMSym1nrJEZKRs2bY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxDCRA9TVsSAnZWagAA8WEQAJc2Ene2u2z5Z310DRTw\noyrXMeNpbdKA9LiDx9xno5XUYtj9RrvgWBuH0M5qXTAtYj2s5DJMeQjcUM0b\nPU0EZNJjbYd3NXMwZBvwC4XUBQwj9F7k9DVhniK7ucx3m7raBxXzr7Xae2cL\nox4fEFuaAJFUlVuSI/n6LjsfDN890DrEILY48hM2dk99AJ5bS7X4BCw02cEY\n+THI9DcKvAwVl0fQsY3Cdv0FnXzuPMsli5ZrIqBNcqkokgvOF3DXU4Gz15Ym\n6JtqnFPqhspgb5rpyI+6S7WNHQCk8qz5bGRYvA2XYdtA3qvz1obGBa0QIplE\nfLEB984pLm2Poue3VjfDhXIN+yOBE/Uyin6NjVeRSXWkLlL7EiwEFEFFMH5S\nANoPcU4BUbi9ISkifs67dhTQm+mMu0Cmh8H0olxhEkPlT3qjlkK2F3yAMqBW\npltmp+pCaGFnb1lAqiXcqV2sb8O6z8OEw4E+vbg4+H/mqpPYuWXaZQfXTjAX\nklP0KwAIydt4B8SRoCFDrpGracVtYwPoMOTxkb1P4jMFMj08LF6yC73zPCcg\nMmnVoOkmRpgWxvqGN4/RDYxwCNHEsbZmeefXFSgfR/uWYTT/Ver9F4ViwQvz\nGZ03rTR0jFWnq24fFkws+HH2/XfDjbUf4MDq4nZYinjDKAKeljQ4Kcs8Lynq\n7WIr\r\n=U0xB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/density":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.aac8f5d9a.0_1612807234480_0.22667453040159624","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/icon-button","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb53840beabf2192500101b2ee291e6be6e00c43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.750e18fc7.0.tgz","fileCount":37,"integrity":"sha512-HUbflxnxP+M3UxtupE4rYdKEynvFUDYJ+VJWdHfFqgNw0B1ikfL6CJr9/IkZ/LRxkJOw8Iow4RGwzZA0i/WX+Q==","signatures":[{"sig":"MEQCIALI3893CC+px1zuUMctxcbYZXkhUPB0xqBZU5TH8s17AiALbHgH5BTKglaEash27jmd0V7i0sAH4bTq4c3dilqe9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/5CRA9TVsSAnZWagAAZK8P/j1k4TKJAyJK7pjy59eC\nARJhu0BDqUHQVtIKc2G6rLqxjn0EPDkhSl3WXuXlLcmXOaA0P7WKsVv/PjjX\nHeCfkHlAaEjp940e6mXu+GLel98P2yZ5aJTrmF+viAFF9ItfjQw1wJKuPjmI\nEXzVy2BDoXU0D3zk0rXbZmLihOK84oCh5BtPoMR6k32xUFEMp6rXG0FWCvSY\nU31rEoxnPofViyPK+q7T0GqqDuQzTHV6txfsEgOPI10ahxXXmPiychBpCMfA\nlw9miFl3lyLjUcVBBLF4JZPnolQIM/bjqcnCdCiesQulp11vMW46rgkT+zAc\nrq41wbbYfVgPH09Cpezz0/04ZXEkTjhskXICjii8790eR1ZGvgww1AB0X65D\nWfn5kqh9ihUmZdBSxiYhGfYt4esL3DIyJagi4pKAml6SFrXcZ6oKTz4GPFvQ\nfG0SUWihAZvjA+B94j+RD5Cf3B6Eaa2lE/pMUzMnwZXd9Pt8N4Z/eej2fTjT\naFGRHrv0cl1FfUE19XOi4SmYVu6bVe031Xaf0iU1GD7hEd47Mc3O1nacC0TE\n4NyzXobXtpOK70bYNP4EQqckHfnAU/g/VFMOHeMQ7DYGs//ps74oQBs+6Pjm\nfGARHfihzevMXMKWAYniuPTC+c/utr1XujfMyrX0QdrFWBV86lf1XAfrchRy\nJkkf\r\n=lOx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/density":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.750e18fc7.0_1612820472709_0.29226905033187744","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/icon-button","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c92d1870a866d3eb76a98c122140c260ca1e4e87","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.b62b1266d.0.tgz","fileCount":37,"integrity":"sha512-PX/3gKMxJQqsIWM9DjR19soTQsoWKwdmVQznx6Cbq34zl5DDhsp6hzn3UL63QCi+SGbwrXucyZer5pjcgdcSQQ==","signatures":[{"sig":"MEYCIQCHHRkxj+YobRKXDl1zhUHqqZYPb3TSE2jsk2tXY6L0YgIhAM7VVcvikaYgXfcUNPlN+GG1p2rLPydADuuwYzWO/x+P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQhCRA9TVsSAnZWagAA97oP/R/mOsxqsQQQ4EPy0w7j\n9Em6KqLIixhthnp1KHX3GLka8LAO3fLEdfGze6OWtC8Bxl6T8HiEP8GAmqlA\njzwP1oUyf03y661/b6jHCMKhWM6OerPBRY7/N0iU6l7QKXapJYwZF7PVUkOJ\nwlMws7xO9jJbNFXA6R6jku2pFgHYl6x6L9BfMK5yKaxVtDt3hox0EA5tojZV\nL/tI8SQxjo5DVKstEV71vFGHsxFglwnePHatP9TCnWISDJec1aJnmtCJVgVM\n5/K9Mg2xkaEh38BPOFmY9zLwvFmGMs3Di/UuNfe/5s5cnDNiVRTBroQKKuWv\n4HleJgPx32iz2XPhHF+UsZoGooE46U1Vdz6Vf4o63aIVObNdbRtL1RhMNuqt\nhNTZLFnkJ/pbnqsvtr/g301EzlutdZj/Zfx28vzEhXEEUtoVZgsijWo5m58x\n96pq52uWKbAv4h1m48ivpWE+wcTxU0QYr4XGam87zzE3SYQhjF95s68R74Qk\nw1acFqnNW2TjqevinDBlCcc3k1e51Y4YV1WWJxqE/WSXTYLg97L9xe3mNw8F\nVMwzV2/XJf6XjeppeXB0MgZ9DkoXRH7nizLpFLNVzp4l7PYt19hne5qzG6oz\n00phkL1x1ZNbWkRx1BKjSrixhUsjmHY5bG5OMlTGqHT4PGl6EmEYM6Z6gTVc\nKzV4\r\n=ksjK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/density":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.b62b1266d.0_1612907552883_0.17959616641835674","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/icon-button","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"592ba8f3aca648057888b11f4e91c34b439348d5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.a6b3101fb.0.tgz","fileCount":37,"integrity":"sha512-dFditjtP5pYKktrZmz//2lvH/DEdgmIR3v9jZoiqNch2hflbiKO2ILZrEDjWfy80OwWyIKfjcPeHj5ju6rMKVA==","signatures":[{"sig":"MEQCIFGgaFCdY9eFcElw5VoAI2u0cx/Iy0ngGmunJPm+o+hRAiB+BOuysOylUsrqqdPbLL8JBXpwYX3Uu/9hyWE70v2nKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrxCRA9TVsSAnZWagAAhKAP/RsDBJ2mw05H87zKE+nn\nsbdxrLUKYoiRM7PFCTBauQW1QqtdLlebVFfsrUwQtlOcSBCO0Pwj7KkH2eRZ\nWyOwDvg3LEvM+1gGG7M7Uya4dfWiwlQLS1zTLGpQPdlkYEwwnQTI1QHBIN3K\nM+oLuj0LKHUqEqUTxfA5JouDHJmCEYktByDakTuhc9bJWeZY4AtnXBA/+199\nL+ojJ0DD9NWCkdJmDPEyBNc78BUclJW5FBkg1LZlM5lgd4MrNCfH7Jaxengg\nn35RYjcVyhJtNIxkppOeamujKmmJDhSuin9GR8JwoHT1xf+0gGooXuS1/c9v\n9KqHH5s+xFFEOLmutTrI16MMiLE6kM2Esniz8f+hCxtPEcdgLLkXEhVc7zXc\nW+nWq6z4whQ+pgzuCKiyy8NJmLlcc9OyUu6RhRsHOUGTfLt+CmX9axKrD4fO\nP2N1qZUoDfawgbuYaNu5vAjHihTfA+D9FOYDETcdemrAB4zB9jhVNdrLJDR4\ntjUaUMzSAKWfs9uYFJn+vh9LMs4M1vJLXh8NxcH5lTX8rMGtZVBPoypCJBXP\nnG6wyrAw8OWCT2l+8h0bHXSij8mGvRmoM3rRMk7YqnkVfzi4PTGhWSwyuhiW\nPHUCH/kRqmiMkyTuNFDe6viTqGADjp97QYcH0I0U7i3ZHSk/LAkWGn2uUkx4\nMBIi\r\n=cSP9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/density":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.a6b3101fb.0_1613085424561_0.18739393831909457","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/icon-button","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a85e73badeab38b806655012d5986a75d0e3af03","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.ed88df700.0.tgz","fileCount":37,"integrity":"sha512-FOb9guNPiDFjQp+hewu+NSJIlxp6CGXBKvaHqNIlAjnWEY15nqgnY0XeI/brFRxeUYgHB6D2HGH18N6Fr2ejlQ==","signatures":[{"sig":"MEUCIHfavpT1tHZZ8a4fWH1xNTx89vJ4MC7xX9s72c6fD+3/AiEA9w/bCbppZdgnQda+S/pcZ4tz5gOOwoH3L3sbCArJxcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaUCRA9TVsSAnZWagAAdJgP/Re/s+LD2VWMK4o+38U1\nrQMkLyE9ZbaeCB1yYV3+0LcydNojJp5zkhhfn6DQK2CqZpFpwfX5T6oiFDb6\nXSF771CtZff858ssBeYSJ2gSG3Kl5qx4pMKt+gwlB9PwXmuOaq1T9QrDxTAX\n6jP4YrDlFKFJ7g7miaCZDq1rgR8ZWJNEi7e5XbqeN9Tvo9ax5/E1cs5Z7for\nWuXOM1dEkhy1EB+zRl/RH9zQI9zHhzjMI0gQZ8Ci78hNhhjBC32/qg09RWh5\nzay2JdaeZ7TRCacrL3fqu+62pyo6QDif7M+/JSk2hBqvjYUYT1IVzDzfiUwx\nERaLjg3e2WmZIQMlZoi2h5rDjSaW9tvTkXXgELqk9g9dhwkb5g4cRnckcixQ\nnSRMi5B/YeMS4fFTCMAQNFvHsGJHkjFY3JWsoL/6pDUTTSq4x3KKxiBqkavN\nUfx96b2NwkD0rKeV3osMt3mqwgq8yC5qXU8jnfHD6gO12BNU/69TRFIzyQrC\npG9ky7bNRXoOmpRUEFL3ddo3+54QM5miei4OHymoc3XjorZsWb14aleyNvms\nAV24GfLiuBBCW0TdKiJK3vH52L6M6kKutg3E2PWNCOv79VyU6TESKeqlNl9a\nyHMcu7iKUyB3jmFLPSczyuJuqogbuVVOXuhdwA9AEdtZA4gYFwvQbxWSASXH\nT0OS\r\n=/UV1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/density":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.ed88df700.0_1613088404342_0.15409474016888347","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/icon-button","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc7d7f9ccf78aae053142ed8f454af0cf57bce7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d30efe6b4.0.tgz","fileCount":37,"integrity":"sha512-Jp4eEjObcFqH3IGeaYneHxQ2M32BLORk4xpXpq4svQjz5VlWS0sp6vRD6Glz0fxQUAQ4v+TV8XfI4Cw8I9hmtQ==","signatures":[{"sig":"MEUCID2zegY4LdlT3GD6EcSsan/hsI/AuR/bgmLyyNZl2daeAiEA9WckSkhDxVWD+a3RVDNnD9cmkbX/Tp3xZhRQ4KLtvwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJertCRA9TVsSAnZWagAAlzcP/0/j3IwdZZ3bWNozl1G6\nIXZTz4NJ67xrnbqvuKese+eKnFdnsUTx5Htlb3ERonKXo8jSHV4jZH6GtYO0\n00v44MRgyWXsyjcYDZeZEKuyb/+KAeyGlq0I99fJpnqcZYW5m+Dz4ytM4Nc5\nR54aj3GFv413o/j5rHtPPmFcFOQR0Z+ijtr/j9JKO0jkaUcd8XmIGT/PIQ+1\nRd1QG8iqyB3oybgQuL/KVC3t6rMOTgNa+yZqGFISJP6D1MS7Za4RY7ypFRht\neB77D19bKl1KPh71O7phV7seVKo7hF1fO+KUFrZDDFOBc8A0o8usGBihVkZ1\nPeenDAhDEip5MSayOgtmSIjXiw+mdRuVLM6V6WvewWS6kMO3RJ7YqGK2rZrQ\ny76bYQ4+YPvfCzqlkUGhZfJe9fMz5iDvOB4LqPXHZqIOHNOv07MmMFM2OKWZ\nT4CQIpQLsje8b2BieWQdSx7r4rbPM6euMdmlTqWqeSXc4Dcy6fmxXLlrUdTO\nhavmbx6ZPGoTDIYfjDN8xEOeBBf6Mgo8tNBBtx0aAKscLqhctssqoYRUGZds\n1gWRPsEiV3cWVqgbFeTKk9CQsN7Jed8QqIyS1+r/QChuEv2pqWbjav9LGwWo\ndf5GtXoaFQZF6hL3VZO5L44Trnax/X/E4kxFFl4Cll0zeFaG3qVB4xO6zeyi\n3OGY\r\n=NotG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/density":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d30efe6b4.0_1613097708949_0.5351382947960437","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/icon-button","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99eb5780084ffb1acb8a83b3d4dbf6937134bf88","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0393bdc4b.0.tgz","fileCount":37,"integrity":"sha512-VGN7bCsC2p4n/SoEYLOouYsKOpy48lhjvqrzMI3E/DxIkdZOGZepEblzdBAy9EeYnScHAzTiS59A4xrg6SwxMQ==","signatures":[{"sig":"MEUCIQCxtHe5UrtwRBpiGImNox/PSp7i0IYuXKgL95G6dWflxAIgaia0R4oPDImImf7LrB0/9vMd6zYe+yNOd4zQEhIWNHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgR4CRA9TVsSAnZWagAAPPcP/3fvVwxkleLofrNizby8\nTeg48rE0wIr46PUrRGR92JOGqD+UEnSgWTrxMPqlD82E4GU0q9nu4bLysinw\n04ar4g3XjcrbuJpX3o8wyy29mMfhfVL/M3GMhnsPTWOiV51PDWVUmll7AXVT\nLLSrLSbsOikY6QwxhjdEjxcYnHPJafOOEEHO4lRE34+xjHjnXdmlW5S/5FEG\nZpAyvKuWr4497e7W0wrCkvoHrpWTwdO25BiR1RfE7nY+y9epRDHOxr5sFaWk\ncBO/0DbPmym38xNN1lfeSPNcbIZyUyZ89k+8xBg8WCqlAJxh49V+kxUf4qiQ\nbHC1pSxN1MDdzR99SB3azXD4b7TpAU3e7zjXw3eo3/abAD6rmdiuCbNFCTzq\nOgjrHitMErTXU8PggVJ1fddGqaJcPQoKRnDbmGU9L5yItfB3GcPlU8h4aBEB\nvoCJqe0yLAVFGtknz8IPOK+fgqvsr91nTwN+xGfFo88kJhijipVqHrZAlgKQ\nuZ3xfGT3Xh3iZmp5MQTPYZ4EwqOPRDropArh3RpVvEyqrG/JqV2hS6y1Vp/W\nRX7KafhVjDi+8NWHpTyT+tOd7FlhH87GEh356KLiDxkTGpq5RfKvImdwQTgR\nCx9vqdaCk72JN1zH82ebpwkydCxu4YZoRghvT5YaIN30trFwwd+sxjDqiNr7\nrmq0\r\n=Tgjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/density":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0393bdc4b.0_1613104248190_0.8756107875704924","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/icon-button","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba69aa21a723f1c4b0ab3b06b0d527fe00458fe1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.7cd26af4d.0.tgz","fileCount":37,"integrity":"sha512-hcSDT0jVhTzOMByENwp1UpgxoWEZ6Ejd9ZbVsxiMwEF4cS4TCAXXvlTM7q0QC43mg0CKRVgkor4wDWgevrs6jA==","signatures":[{"sig":"MEQCIHhpdl4WPaOie0xR39nk3ufjbz+BB2k4qgMEhKSNrAJuAiBS5t+S6uRkNa3U3ENZKwrt38kZdiApBloxhq3OuIdskg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXTCRA9TVsSAnZWagAAia0P/3zUmWa9T8xKgDiIGmPk\n8heOJDYTcXqGulQ/CAOzDQtk5FJ413zF1rAzpWeAX9TWrf4ZVzRzl0ptz2Wk\nx5LvEE7r5IvrGcZ9lNm31gWg3QARmkMUPokVaJXVPAv/yvzvWHYIZGMqp0w+\n9LU+jC6FovgWJ6bQGHp5TiLio9xaPnuH2x+A8p8wBd2Wtu/K9i2wZl5cyypP\n64yRAqpADDun0VzcrkwD7Zcrx32xGWLMm3fb+/g7mteaBV+U5rf4ObdNtejg\nnc03AZt01CrFJk7ILe0EjpOo7rSjQG8PrJOEdG4Nq2zrYKfZXMwR34RczjMd\nFimP7PLMfOBZvFpKtQmCIWa+zENOYcB43OoQu/hUhcZDZgzbD4OkTXzmzwkl\nNWfO7me3y12DjUA2EZvSUIg7rv1jdh0vBBqagQUeJ6VxU/n+iYUzitkn0UF6\nDnVVUMQgQVD0JEGny8MkvAPmH1a2liQxRCknpcYQgkmFhFe8KV4ZbgFZ7UQw\nzLQcVXRt7YYFwU53VliTRu9Y+3av9XDDD4MSImNId5cDprt0LYmP4/DDfTZb\nYPK8TwEjzweig+D6S1JAFaijLElK7lbcGYJF1fQZghRGp1HrDveuBbVDkN8S\nQZe+52SE7xzS1yS8wxTECWT3AL5Bf2RPZBqiOo3GUamSWRKWdLMowbrQcbdc\nHWHM\r\n=wN9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/density":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.7cd26af4d.0_1613145555290_0.25136900801243556","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/icon-button","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b3a5433f4e99d82ad3b3b3ef7b4185311f9dc6d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.71fe9a067.0.tgz","fileCount":37,"integrity":"sha512-hH4r8CXTRIqTVN2rfH4zD0S6l54LSCncn/ZK3EZg6hSLnOkwtEk54hkGvSwTRBQiXl9KAyNBQZXUykgpI37cLg==","signatures":[{"sig":"MEQCIA1jcoPJh29aV1YVQ22fkB5cZKUeKxvT84ZHNwTxplYfAiBrZDmbZwY9CiYyZnXpcQKf5i3yyqrpBLPopma777d/VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq01CRA9TVsSAnZWagAANg0P/0SHmxkZviICZPvQaFYu\nDOQTDfdTx6EM8NA0XB5HMcEYZEYWKGsbC84A4YVqprWZZ040gvW3pwZJMyVq\n3U1ot7hlay63gxY+jlXZzP2u/VxEbrNU4oobjCEojC4UTjYXUo8I76kK9Da9\n2dxTM5YeyxFCDszOOdlaMhHbunGf+yRQ8GRzIiBg04D3phlOKsfiK3qWWwVJ\nE+wwmK6wuBeRSQb8ON0ggJPn0hKgcBVudQq7ZxNlZjt6aluJJHr+37eeZHVa\nbRB4YWseuhgmd6bnZniYn8xliUmp8/+9hOm6qEq1bEXz7qmoVQ6bsd1t9T1j\n7/pXx8jSexr8GArPJGEpFVUbt2McJAwRCTowJxKsoX4Ib82ri0oqt5Sh6pZ+\nGEsNSBnyBqnvcIoSIJdETyWz7xDu6l1DVM4Rx8/ql8zawZQe7Am2vjqqIDlI\n1Sm/H5Ds+dNx8bCMKy3jb7KQhQ9kWJYCKp8L3ZHF/M8djRd2/oRZn2jKtkcM\n4iwmvWrQUovOqYg2aXoOzs4ArywCNZzUofPVqxOyVyrwqrHEdLnjQklKHvEu\nu19uNL5WmySNwQjnRybXUC8e9Q5R2qRdh3zY5vnt/C6ZODOxHcNt6o4Z0xeB\nvL1dYAf7Jmdi8ifzz+LR0G1Fu64urVRpRRick5yoMOhcxAfEGvvK53npqZsX\nDxpO\r\n=4h/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/density":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.71fe9a067.0_1613147445398_0.9317315771029573","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/icon-button","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc7281b56e4dbdd7be8875afde7ffae23669e243","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0fd56a86b.0.tgz","fileCount":37,"integrity":"sha512-HWr6330qobHJDfUtCicXO1bAkNQqbazr2vEaMfjBCJNgULr/baBtlkhXwVBjngg65ZkyCT7AtLR8wmS+yuYFOw==","signatures":[{"sig":"MEUCIQDufTttr/iQDOqfFmnh+rbveFPUkeVqmbh/t9XGj3DnxAIgOvUhHj0lawNXcaTsaIBzkflVYX8WOS8FDF46mEILq+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxk6CRA9TVsSAnZWagAAbPEP/A++ajDbhjHE82WrnjH7\nWR9h0StjMhYufWolD+OUpcr1a5X6Fr94dYVy/196wwQIT9GkzXMGEiJ8KFOl\nuZexDC6W6ArT5m38PXQ264SD9lDxLemOzQktKqqwkQszmQzy+MndBetY5qsB\nIpyuiza2Uj9rYLsGwpti446UW/rPNCefOewQzuBVF0oyop8Jl1GuYSuWa3vt\naS0GM5HmHxH+657qQWDEkBVTvgr8lasdg4DZJSrw//BVQUxPiJBlpGy4yBDP\n/NhUAfGCLsi8CJOsGwF9nJNAL6GDWmg6kzswCd7o/HkSsyCDgusrBSzdzR0B\nQ8gzoltfL9X7yRV/rGnpuz42wtyfUNH8We9jyZsNXV/vMI+epLUGyW+MMVKc\nP1wAviGpUfPi55CKyf0NwEmbd6Tl9mTNE4LO8cQEyUM96k+gPeRoLi+7mxHv\ngx3NbxA4yr3tzdkF2xphVALWU2jqxbBHc58MjkWvG0rXCUOyyTlb4IMt3dET\nki6imd6LJFKO46YtZnUv1K7NZbfxNoDFU34inpF0PXGw3QTz29QxaeYmL9bO\nQlbyldVWU0w0oyG/PwcXGFTNvVncpZDCLNQHCnsxrg9TfuO4YVIqMIMMWsqw\n08JDXyT/0EPtDC4mh+ohSKKtLk2Jt21s5LUmiIqdlThBLRHWoHEQb/xYyi+Z\nZ4i1\r\n=hCi7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/density":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0fd56a86b.0_1613175098413_0.37929821372688033","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/icon-button","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1b41215872c848a43f63d5e398c00e53ec9e9d8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f19bbc4af.0.tgz","fileCount":37,"integrity":"sha512-dzU5wh5TKTzMXcM2Iq5Dcw+Anx58hNzg+G7ueBY+OVr0cnaNi4OMklmkjyHC21qTTfjrOorRNli0CiJ85AmUyQ==","signatures":[{"sig":"MEUCIQDTon2AheVvLvCgNh7COaOLrcoXNZinJDCJ8OIQkN6yhwIgOTWi+K/QsVnutz4tgs+U4MDLSdkSztpCpsSSmPxHB88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQlCRA9TVsSAnZWagAAqtAQAJiIIHAZICArkXj4BDQ5\nC30y6aS7w96V0YiPIw4No8zlpvvjYEMwPM9U5tVE/JNtooivB7bVLwwaCB1J\nz5KASt7nkb4lVpxbltXWmSsEmfqMFbBPGBbOcsjDPQu0nZsVcAnKk+k1Q31q\nxITxgdUYkTyHt5XS7nYmv9Eyyt+pOjPvgQPQ1uK9OX4Ej/OZNUtPcalpxVwz\nZf4VVeEU0tVJr0UUREA1Ys53AuVzRKQoH2LUAlYy3erGi8Zd0nE9fmHhx4eq\nDd1/2a4+OpMvZjd8BfjancZzCgtU6x9KU1UDQAh9mlWxeLiXiUDBMuy+X/YV\nQsqqdwsrvibYFVTu693hfnQIRc/LkjLbgUGTTYiHQn+45d4vPZspsmgP1uNh\nd1L2CQ8EY2S6HIVSqvsKX0MgUDPeYKe/cZ9W+/9qpDbX3lE1EEAuwrb2oikT\nm9F/pupwH+0usd6JwBnlcIcjhDjnl4nnv9XvR/hq1gH3sgQTeNoINWQPE4FB\n5pAeIMJoE/vPQ9pAZNT+0SZLOxvoZnhHeZYihdCd7wtZs2+nBaAzeTiBmLIo\nNyutl5lElsTCebYG9sAaDc1gr0wQw+gQ4ZRx+Kn5NOojPLjqFLjo4CmdjV8O\n86qyp8ABVFRWGGlla6JElpU1FdR5uq0xfriKgFL5aDD0DBX5v5zbpt8ukDF5\nvkpi\r\n=VUGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/density":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f19bbc4af.0_1613513765103_0.8925682034908025","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/icon-button","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39ef27d53cf47e1fe1d6f0096730921ccc743bcb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f9cac96cc.0.tgz","fileCount":37,"integrity":"sha512-FAy+VTOdfd6dp16rVwYr06N6NyJahcA8H6j69jJijZOzwKA0Zo0aPwWN50OYU4daoYpnn9oaot9aop6yLYpIfg==","signatures":[{"sig":"MEQCIFwlzCpMgDJ0DCWPVyLNF6MZL1yB7afZZX6GxyIJEHSNAiB+ius1M37hy8kLxBqu3CJrDCDMOUCIf5pD9VFf8p3ehg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/HCRA9TVsSAnZWagAAsO8P/i3s6LhtSVzetY/5o360\ndwSFF+1VxhXJUX4dYHMkrFZULKAmy8jk64Bzp5ZYq/bWCDXeA/IVn1b6MJRM\n/6MNoIHlS/Tkn99giy8ljX88/C+6tahosu3n2WRCiTUanU6VgWjdkXI+WiSZ\n/RSFRd3H2QdMfCxOdEaXLjINW6qvTwHtJVV02yCc/gDoS3y45dim45g4xiKl\nf4HDO7BGevnjI7SsxAGuNYfQXK3p71Qu0a9nhPWNO9hFMFiAkGm59ztA23c8\n8b5KLoBLyxDqV+EfZpOSTTvCKNN1NpiBkGSPKg1jogNpD+45pqlf61oaVVLh\nIQQvi7CbBPL4g4JlnKzComnFbnxPVeYB7MO/oocGsFLnfFH6F4PnlZrpzcsv\nmxRo70dGD0erwAIZxBtcPF0YWhKU4xul/EfWFxzsyGJcKpxan3l0gCDwKYSE\nSSTujMsMmehxLKv9NpD4FAyOEoOwd+rhWnGyUY6uKFZFqR6SHp5tz6eOw/9L\nJ80joiAjcQDXoOXf/mmFHxOTZezlErTLCKNtJHcDa6lTMlv3jySeSULVxb4l\nmZLgb59KXSs4YjGvT0Eqj6jqI8TgIm9R+CxcKLzfbp52eD8pUPf2eGVmdbkF\nU9vL+40y6q0q69GcPKLMnAaF7qNPSPm3hG/VLIfVP79CMBa6W5dTAz/w1J/u\nS/d/\r\n=uhkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/density":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f9cac96cc.0_1613578182920_0.16878949643838093","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/icon-button","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3527197eff90e228037217969fbbe12eaaa82987","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.79ce0878b.0.tgz","fileCount":37,"integrity":"sha512-kEGImO7jOM2MOik7J73FYKzrMO3/9M15BTDqs6D3GCEflAYcyqtDdSOwEpwzqEv9TVJhmKO9MECDlr6Qdtn81g==","signatures":[{"sig":"MEUCIQCgwDRkW99VUbl60VH/9CGulj7Qv65h9KjadB8KMVO1KgIgRCalv4K3Ot2hDap5szuXFFMUVW5dFNDz+zHk+FVWbmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2MCRA9TVsSAnZWagAAfDIP/1FtYDqqa4me+9PCg69i\n8iCAExWvw9I3VBfWFvZk1QexfFUSGfxMoV6HwqgGVOUXMb+5sDbUTNZHe8T2\niJuKxSprAWwixGpf09GBOiAW51a//rrTbSvnIErabu+Gyj7QLD6ojRdbNIJ+\nFNT72UGTYungnkbpMEL6mI8Fq8SFdyF+y/j18i02heApQlfkRQvrBXiQP6dw\nxNxMxN+HSBvjnrvZQx92EBOAk7bXm0i3KSHw2ABEAPup3dmOGsaX/2t2mYSI\nHXe2cteL5x5WHkYUjPV3dyRwi4qiYm9/HpXnH5jl/2VFwKzkYyLjr4tO5pEs\nrUNpyxFVp5jGvXjV3ysukxs2jAkKHAh7HALIbIQV5q4VhFyaH3B/ELycXJ8l\njD69SR7FSsGzx3nBeEHb0dWjuMcuX2hypdvhcEegLL38iAuusqU5IbOa005x\nhIsjIbIWevSxx+Y6ysamrS4zTqxW4Ba6dDAOhYRlW/IDalYi+xFW8EElGHHX\nT9NAx+zHjiFUSAP1IdQtD33zpSIkL2obWiqUbj0Zj1sB8NaGDb/OL+TJmk0T\nPego4py8DEzxZSAxlV4LyXZzKksJVsV7Vc7Ib5nQ0b+eud4MDaNgBB/2gvRR\nObr8vL5fgqX5PisbPZ16NphK64h7N3aZlAoXHS8TSrpTYzIMojWiQR31Gp5p\nKxKW\r\n=X5Nb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/density":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.79ce0878b.0_1613589900418_0.25729924506029933","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/icon-button","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de8d6fd1746ae2fd9203d31a58e6f26b7d80704","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d6e507b5b.0.tgz","fileCount":37,"integrity":"sha512-TcCVD9BYkIjbx07EzlwrYt1XYbLlsaJYm7bxpzHk6fAHDwuzG53bPpYmzc2DpLYGX8KIjh/4rU4DTmFGS8T17w==","signatures":[{"sig":"MEQCIFhGA80XCTDAfoCWAmFevjKAAgK+YtVGFw8stUuZc2BKAiA8koVLwaIRilHwKRBPZ+Qwm8f7e+aKY8IuIgkZY5Bzfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVMCRA9TVsSAnZWagAApFoP/juXuh6sWAcUMsVDNqfA\n0OC7Qdnz7+3d7xRht2WNrbVlS1TSC6lz6hoZsPcQgt8PWifpNwPqZxhvZ8Tn\nTnOnvL2OijE8mvez34j4I09Uafk6XXpXSHk7zAiW20dkf2Oa2DazC1YYTPdI\nCsePj6ZCiTDkNOu2R/s7v+kOL2w3WjKW9cb6VAF9Ft9nsvR1cfw5Dra2QowO\nmFx9XqX0RDIoq9mcgbnBvMXI67T1KfDQ7oXVpWrNu1VEthlAeg/EHfaIgjXb\n1TWtD9DAGeYuOw5zMHK420vsKA8UFZGkIS2nr+eye+f8tV2HolPkfaeQJadP\ni58LG7cyAyi40eGFudAyR0VHLCjX7qTIMrCz6/Xia9GQ4/jMoIo005c4KmTs\nizYmYJbaN4osvtzkB9YDRB+8nc9kZ+7g8qZEdwRVr2q/Vav03+HonPFN6flI\n7YNd3KAcy1xXqFdHEz6fFSj4EOku/CpIupnG8TurzCf8nSQCgZ6bRQN/712H\ne6RGRl6S4oYzPP8RAYyDlV/Z/2L2MdezBRp/ONPeXTyoGw/1BP2Dgn74snWN\nGzDiowEJFmAxP3Kg5NA2BQurNW1v7B++roqIWHcIF2L2lMlMoRfTTlu6EcPt\nLXQpyl5fINA2qJMElscO86dE7dH25EmR9M2yWxtF6z8N0aQ0MxlBoRrzL9Ut\nhIXn\r\n=mili\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/density":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d6e507b5b.0_1613591884382_0.027601086320429014","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/icon-button","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f095398044bf7eaf2956dc51706f88e05019f19","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f2658381b.0.tgz","fileCount":37,"integrity":"sha512-55/JD2wufggstk14tTmClh+fOtfimK+4e3/EKnsfnChQBMk+KKZAIzg1WLGGQ8AUIaDhddhcKUHLs/UG9pgG6Q==","signatures":[{"sig":"MEUCIDUXZP6DaDDUzq8lSCr1e8Ry6C5Jhuc5W8LO9ZiFGwgSAiEAyMmvpKT86DuTtXRx8v8wTq8U+IisRfMA3Rm1SAVc26Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxYCRA9TVsSAnZWagAAjigP/RJjzC3znUj/pBY9So0T\nVNk58ZgY9eH8OXsG40yX+ZPpevA7bCQIDsxZgGtJoLrXTXw9ToLI94w3sE93\nUTDKYOodboqnAUJ8OLBGACY8nyQrl60mffN/7y/3uE1OORX5KFxkv5i9VTmu\nD3NMV1FcDlBIuBESzoBVN6BpF9zppkyEl9iWqC9eQc98JiNd8WsrFqD854Wb\nYEnlhsG7WspjiCYQlka3bSC3XoV2ZTLelEu3Jb5XiTTgZ0XyDiV2OnxRajCP\nGLJAGhUMQRLOoIoSQ2GlWzHUAEY/lKeonWSpwHC+0GLkTD4Wtb1cOMR6EdMm\nCbk1hhyRmiDtXS5USWyAZQl8H9V4B9C25JoguhJ6DTleEPooj1wSPW70Mwey\nPjvaVR7Sd2W+Oh5lihMYc7hgmP9/PD7cbHscpGKM1LhRAAOnS/2oToVgrvrp\nfrLAVbxGuc/vmim3UyXZTTxaqjpP3Rmc6P4lDJnIHWScfHJj07jn9rbFEgFg\n8wX0+oAUC29ufOnoKZ2ydbdd74dNZzQZ2A/h9i0uj4GcurEa7rIemw7MxUW3\nc7xnH5tE0wRjo1yFDBvAwax2xrxD4l7elBE64YLhuBC23LMMD0KmJ7IhVKDL\nKFkaJDgQdkwRo7TQsmcSsGmAmZ0NJXlNXRMz6gZPTi+zk0cEzpWF3GxgJjSm\nhOQo\r\n=ZzXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/density":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f2658381b.0_1613601879459_0.01345261841037071","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/icon-button","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a59257fb526dc340503f0b99931bcc952cdd3c4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.97c4d4035.0.tgz","fileCount":37,"integrity":"sha512-Gdcqc2GXOF41YB8jAI/aYUjqqZ4frnwKj79exxHGcBSu+uoP/UijTkGHuozFAVJToZs710gAGg8TuvLCw+Fojg==","signatures":[{"sig":"MEYCIQC0GZFPlBrqq5KQqByw3QD+W3zQx2lBG9xd4eSm2cYgmgIhAKM96a2PwbRet/RhsjiekDeao+uNHeriNJs2pCoKhPKs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJUCRA9TVsSAnZWagAAv+gP/1r2CUCvqAzWW2Y4568u\nCQEDenPMYFz+toYPtHkTdTYxMq/rm4TjnYgBNJFk8dRHywUpanChZtnQeWAD\n5IvDq0Cx8BiDCRP3WukDpVIPEk3HYQ1Wg1XMyKIttwGtiEEawIh8+dr/jiuA\nAoys9ZxP/jMhxy5FpXCixgMVNMcVxV4fzqFYIhp61IdlavZjkZNPYORspNMY\nXO8MnWSsH/Dbmb3EmPI+N6C6HIR10MsM04Q2CgoX6VFkFvmIBjYA+0sDYdH2\nTvOVEkOopmfPv5ioXSLjtW3pANMIk2Yu+akgQRQl4XRAOLGiVZfwRxzyNg8y\nywyF5rkfOAQ39Mr+f5EMyxtnSn7NUcamVriHx3Q628PtS7vUsDL/vG+GEvaK\nfVv50o8WmBIhoYxQTPDe43iI5mFt/TOtSLyxpxgEcL+yq3qAErj8hPzNXhe5\nlBYPt15WQlJGDoDg9KSUrEXYaII784+KaYuONnP3bvRgLpulqZqJVMeZIwl3\nCBBoNAJ5wKbgW6PV0nAgoBhU11P+iTZB+3i3Brx1eIkHL/zvQ+aHc0aRxEcS\nHzMbxCnp89YK5327/h4al3M0VzqACU2Ar82qaRf+ZaH1eyVN3BKbkc6qU8Bi\nWSgnm7aVcYW5TipR2gVkWlB2Q6Uz/eOgXEor0pJD4nbRSy2IntdF/5cYzh3Y\nAY8p\r\n=fSwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/density":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.97c4d4035.0_1613615700453_0.09464851763319215","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/icon-button","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28e75a153e770bf97c1ab7faf7be52abcd8883c4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f5bb4648c.0.tgz","fileCount":37,"integrity":"sha512-d+5rkXuEzbIGuM6+E4TM9akbyYQc1X86AXhM1DPof5mz1a87hBfy3b4rex8NoohaLN4DNDCV/hVbY2gnVkrDKA==","signatures":[{"sig":"MEUCIEv67v8qPHJOlZsGOzhQ8v4y2NU06WGmSUVNcW5WN4/EAiEA5hndpq6p7K7V0cxMuPZE8xXj927vdgpSc2KCkDO1Ha8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpA9CRA9TVsSAnZWagAAJz4P/0WmZCdTpQcMDNbrE/mW\nCQIVBRFx+7v6Qotr3B3adlQRoxzElF56709EwLBt/U1UZG2gc1mmkGVOuecX\njFYgcx0NdG6L+YcYs9FqlDZAX4Fc6sVe3sTBUQCNr7UaVWjLQEGK1bulr8SC\nVF39tbLzB1qe90/ZHRxt8WYjM9fxTUxZhcWH2eUTiP0tz9x3O4wQlylGR6fy\nS8r6Qh4TfpcZ/TnJNnGDukeZLbbITb1QyltufglOxY8lfixxIiW/dHdAV+Bu\nM8zqPVgMYYcdpuummyE3r9997YRGq/IHV5qEPTROrGO7om1tbBUYdASqVLV5\nEp53OX8jBrCy8uHma7Qd+E5YJpYF4hHL2ZtsnicFLjEKEJrLXXCEpv370pTI\nYPCNarS2ABHCgH76iNrdrILDBKKmmpjt6JhSwhTQkRw568w/KKkM1ca/4z/a\noSANihFMnfeIff2OIDVRFSEg8pqbdEzZrTWPpitfk43IlTKG/z9LCEFwr5Ct\ngTVE6tSmV625mGCMKBnWtvwHcRobxvxUyvNAQaQ1HciF1HLD5Vjw0WcXtDjm\n6v9FhtAihR6pmb3HckO4LbrMscrT/rvtWCTGnRSyq90Ed+nigoRO6HvhfOyq\nT5LZqzkIhjOorpDRAmPBuA9Zr5SH5oqYLCY5YhM0ieQSEPT6nlnxxCzkxECM\nX+UG\r\n=FG3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/density":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f5bb4648c.0_1613664317087_0.9064255934971686","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/icon-button","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02e4d3f6b7fea9b82439e5264825b5ff49e17ed4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.302c7a960.0.tgz","fileCount":37,"integrity":"sha512-XV8utHucPrruO57l/umDiqVNAFm0b3qpwXri4bBEk/iXasOUAG7X8IkpWr5gZHY8MoCkmHZBv4WWDu7Ph4k0mg==","signatures":[{"sig":"MEQCIGUEq31AqpdYkq1kNfUKUNrBzhuWJAn6fZKCaT4FQoEaAiAbso9YZ4f7cWWTrw9r5Szj3oY75Zqiy6wN0vC45WWOXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPwCRA9TVsSAnZWagAAXQAP/indC3HRvqGY0g8cf687\nnehCiuxdd2ek4XLFh+nPx+2jSrp97qTTxUNrcRLi/XsBiJUMfa/sL14Pb/1N\nHqDigM63k85q3Xv+lYR5XAwdTdhKuE1831xP7E/zrLOWaSfIE6/eCYaoL5xV\n3+p/qVa3DAdx9+h7yJ402Y/fczWAzzedvMtFNSlE8AVNz14UxHXb52P8bVgZ\nsASjDAkMkA7TLYElOXxIGzJ2xZrfZ93v6iSKe5qpioVo2HrKs1vpWSnAyYjL\njRe4D8uuFD4aviwzxReRqA8Xi2vyclXJD9BWpjm8py/mwzXLucbxsxwB8cG9\nb4abBwE3eWqel8jH21S62FtdTkv3jI3ojaEjAchdgR9fVSI38uOYk+8NVUr/\nYd4eaeH159ow6PfYAakvn3gtd6En4qsPsi53NJBkf0GoUpfTC/yWomU+v0PM\npPf9/hcsuMLWn7HULXlroTVJ4V+5OT0abnn0VILbGztGDNRn2Dmd2FdgOGUn\nFkB3T4Y9y5UTxANytkmSHKNHeWR6PwCM3ANihqqYvTK+s0hWI6047i73siD6\nZG3ckyuW2pRL5EocpxEQyxMF9kKS34WSXuCeQABuWbjh2gQm4r9JnRc54B0q\nlTE17rnCEc67i7ajMG6BSqYWjhO3ZG0Z7cM687DNQzaOKmt8NdtIRpjZ9Yt2\nYRA5\r\n=YpiI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/density":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.302c7a960.0_1613673456162_0.21890317063754972","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/icon-button","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b9c4d6b0f950fd0fbbd73b6e4c12813abcc715d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.aa0aaf026.0.tgz","fileCount":37,"integrity":"sha512-dR3A/spJkr4waPo6mY1Be7dRObgikrbEwVGTMKznVHApD/v6tPt4CNrxsqQWvA+oaEkf8w18SQsRyCDjOzZcSQ==","signatures":[{"sig":"MEUCIQChE5QKD/T0SYBosEngaaB6OjXDvE2gu7xioXJJlXvaTAIgIPokZ76dEVuFiV/efB9CthEjYP/ey+W0vsIBJ8J4ugs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6bCRA9TVsSAnZWagAAxv0P/15Ba4RSRsqa6unTUUA6\nfywKtwpGk+Hp8AmGqd5Y4PYLp+yKdKpbIx4lFHw503w9gGJjDNbtxVw2cAKh\noEwuskjHNrAz2/RDJFis9dWnq89/gCPhtohP0nnbG8yvf3hBxBXHA/vmp57v\nLrXrFZmTWlWT60HQGFdY7XBacV5zsXySDaiml0M5uXnMYM7/NXl1TOPj3GVJ\nR2Fm54ikqTuMeVbHz2MAB8PmyNGfrLhIZ9TaXFfmOlzY8Gbk99Opb7wHmpvN\nfS1ZTMvfkH6Q+ZVHIh1UWlISJSv+0NwSsj2u6LmuFrxDd0mzGAgXiSKicWAy\nox9KrcNGFCBATfmz3KZIBEunesxQxdoGKjkoUBjiXWMH34c9k0gZiyIgC+ex\nJkwJkL7s9W6FPT8lrrzsUXWTFw3Y2V8tLAy176OytciR4NHlbM7WoA5EYBlw\nAaqmgvWOyH5QCrxE5hRxsfAGmMC/0NxVkQGk8iX6Cq4B+B8fKj5zc+6mC5Jo\nxkSEEgB11Wz0UJkEzGeLGieyDQc4UPKUC53vSdO3Gvu0MlkdoYrRb9Q/VWXC\nvOvbeayLMDybtox2IYstyP0OXDA2vQo58TgUi+6h0km4pTDoUcZ0r35I5wVa\nwd1AUfSO0ajySJPR2VHDbGVtf35igIhFeVO1aziZ4jDzhdMXf9eNZa7Gun19\n/cia\r\n=mPeh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/density":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.aa0aaf026.0_1613676186480_0.6282691237467171","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/icon-button","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f8c9ae1553e38d6bd257b2fe50254e5c8cace5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.07ff0c452.0.tgz","fileCount":37,"integrity":"sha512-U284npbDFfw0D9wQixESEgowGqwO1vlXQV5/nc1P+nsKM1JXm2h2N9lrRAMh91c+e7xGzvHaCrSW/CvWM5TYfw==","signatures":[{"sig":"MEQCIDFYH62GUnmMP/SKD2VnFG4pm6J5MXdnVl1tb1WgQdW4AiBV/xG8Ciw7Yb046nVjD8PlMeFQDbYubYurxFR2fXLDRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMgCRA9TVsSAnZWagAAmRUP+QDgET3GxsHseemAWp4D\nBdPCc3tRRUMqFoBcVasaPCgND3KnZvHo+sfHjOropOjylxaGtpje9NYNNBEJ\n8xTTwfKrxx3+OQWx097nIE8Zv2nUK+LjIVELhWmFUb3ymguI677pZv1mVsl8\nFAPXlKqpHG667inkerIyiH4v9aVZMcNC9YWNtKGlQxe+sBekQRr0pS7lSqtT\nZ42SXMWLTdpQHaajjHFbtKlNFhEUySQQ78OEE9M+k67zz7RqvaVHGy7E1vSK\nGSLXN9YzjAU5VszLdTbSv9d9HXOZxLHDN9ghUNSWuC5CDFLXJkUcE5ueCXtj\nDV4ARcSl/cmELbPleK0c7HC+thMDlR60To/3oGDO7gqjOh0BIiCHt005B60g\n1jzndcJUxaYSamqosXm40ekQhsk732ams3GaJPUpeL1tOQ77mNLmyl9zbuOi\nah7CorxPreMauWqmf02oDy6A+ufpZNncylaJEXf+mRQTuHR/cr8qJTxunWik\nvS0o4VOm047baK938GxA24qz8vr5oO8fYH07fWYdXC9CFlvJe/zbqF3Zl17p\nPYimnxCxaP7uCpzlkCuGWrmPpGU+Fn88nSljgNFoagj97ea4x0Rau1nrVWNW\na+XDFesjzAu9uv4UCJAW9bohyb2161rhnflZUGvK0d+2KL+yXVb6f9HLLLVL\n213Y\r\n=rDpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/density":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.07ff0c452.0_1613677343567_0.42602319639858255","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/icon-button","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b5f6fa8f88d803a52d440d2551c9f7c57c90f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":37,"integrity":"sha512-qxPe5Cqcaj5AG8dm1Z8QZpqYhRt/qYGd7GY/dEduFWCn8e2ZcWkAjk9lc93GBr1mmLHMyEW3vB00sLw2NcEDrA==","signatures":[{"sig":"MEUCICSY1aAoeXAm3fCwQuVajXV9m3ZXvIH3yXgJXMPsmLKYAiEA6mHoESO2sZA6dVJxP3H1dMTHJGsatTrjUw6TWd8MfpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfgCRA9TVsSAnZWagAAXKsP/jAr65gHy/2AUw7ozom9\nlsEFII61Zends+PqbJFRlM6CsOfSu1BTiMyT+xkevHmp4N6Po5N89VMhQlgb\nAy0OaVASeIxs5RZTJFqBRCn/jAhEiXF9LrM4vFMn3BAblRTLstFVA0UGNRpw\nOu4I3cUHPxdzo49IaF17+4rmxMWw+OXpUgnf7YO6ND4zNhyxItvXYMrGbXZE\nPC42SuSiHVRk3AFhsFoVshFsbb7ojzqXaSGATZTjVebKG8qTzUYEw5Fx7GOf\nlg+GUhTd8KuQ73SRYnQMQTjrgtIOCdKq/QEtp/5UlD1bYgFVtc6F0nbZ1M7A\nMQhPeKhm/ra9bfnWEhHCXq+J2I2oJ0NE76m5PMe2wSg67BhaVxdCIobhFek7\n7PAh5StEpP/UDPMWSTdrwYIbM8DfneXqt/5nGn4hn2nsKFnDk6pe6cJHQhI+\n5mrMvyo8CeEJxWzqwQV+HHuMdaM7yYSCSN9j2sP294IRbdEWmhwo1O1pfLHh\n6eybuItou3ZlCBk/kPGJ4hv8mgV39BAQEtQRcPdB8NIHweXInFjfE87s/WVy\nkgsrV+OjO07n3r5TipUcWIUCb51c0fXiWqLeUSbNuxr8Obn76Mhjs7+YUPxn\nSic/T30GiOcWFooGY/Uz0G0HN0bmNQLJW6pB/IfoHcqpioWG7F4p20mPisHb\ntEOW\r\n=GFq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/density":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.bed7ecd3e.0_1613690848385_0.6694541159569105","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/icon-button","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57efce28ed46c59db3be27f9d13047b45bf85f0f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.06dead2d6.0.tgz","fileCount":37,"integrity":"sha512-nW7wI4abj+VQXTfCXkszf7pY1LKr8PpD6L8vqrQvi5s2pal6BalY11Xm42CS+cjHBVYzIBMqzyu7cAiawXc0Ew==","signatures":[{"sig":"MEUCICPCPzwjah+wvW2tPS/FrZC6KMrPe9479siE/CeKBriAAiEAwFYv96FAsK8Hwolk2raoWK1Suwcff5gsPPVkGneaJyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwggCRA9TVsSAnZWagAAAysP/2swA1TNskX3slELA4gc\n6AD+CsxI4rfynwa7M1Ltx4I4bFtARkhjyHgPrZBYtGtCPa8aDwXxN7A6QNy8\nPlZmX5An+VUwlmq7QFxT+OP3aYvcVOwa1IkKReAoeWm3u3I6JmtK/iiXozKN\nxjZe5by8fp/Ufb5YdT8728hvM6BVowh7bOY1n/nOXnK22Nr973jheXtqoWTA\nrxGBP9b2DETq36OX1QN8JMxqYFeQ5CYmTpayyi2HPLzQ32idhGSMT0ru0OWd\nPgMh0ZEcAgMzJqbZ2aw2ueaYRZtFCV/QwDFYQxDr3CGoCUpOpifUPwD3OOIK\naxgvlSh4K/E8MOlIPI+z0Ya3DGSooLwwuOmk2wcMtRmRDBpTQD0z3KLw/ov/\nQztzcBl3gdRikTUEUpRnmi2G5s9ND94XXnrOhbZTe/lArPI104uHLu3LT2jr\npccpG4c+ow2MXAZGmWzUpVngQAZ1ma/GBPPLtQ0eFjxMoL174svX5Vozm7p6\n0A0b7BFoPQMWYKq3N9BPbLZpzL/RhsAs+YnNNiOrxh6QwKMClbslkE0rWeRU\nPOwhLXSc/v3M2KCOcgKS5VSXsQ195ST8tRCvTMuhT63B8LrMt8xOJWoMndSo\ntfhCDpoBD13O3da/pPJVBWhlqreqLsHarIY3hnqUjZVO5gRbdCjxutT+43IH\nOObz\r\n=nQVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/density":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.06dead2d6.0_1613695008291_0.41026552622399737","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/icon-button","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de12f9d94da1f76f44721724b96aca822a5a40c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.cddb03553.0.tgz","fileCount":37,"integrity":"sha512-KcKChw8dRY99jRN2ruFE25UYrr69Yw7moPUii08ce53sbOHD0uzAIWaysqZ9AUXjrHc5GvJ+Z30hTmh8k54gww==","signatures":[{"sig":"MEYCIQCq/KriD+51pnNdf+JIrQIVf879UXJMw+LNmHWrY+hFtQIhAPV8NsgOUaPlKg8EAd5q61tm+PlFAxUG5hZFSv3/8tkN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzCCRA9TVsSAnZWagAA/cYP/il4mYp8ASTJY4p2nZpi\nSTsPsTA8HAK/dvpfdP8vl3PlR0v82pP7Pl516yCcjgtdbgS7BCdIB2eNB4pG\nyZ8mlmTAfLdIoGi001ywzwA7vu3+wnh0wBLSh8nAmoO70JCAlU42YWbQh4m+\nauy95xYkcAX9uSgjZNVEQbpx/h0/hTKTrNivzO09F2YKtxxhfnEUH66QkJiv\nbzhRCnwNVxDZfoNsd1SM9gga+JqSf3P0b8ZfXF73WJPcF5GJ7nCVSiv9EoBu\nBSqyp4NPDjvFo9NWzlrGqrwdozvRNpw2yEs0VWq4ATZ0kJEwIdMI5OgkZyBo\nnTlK83qtVZKpoJFvWUe8AW7IJz8MIKjLUVw35cpoapAJ65SVfYnnYgvKYOR8\n9fqmkuDNgi6Bf/JwbebZBQ9WeqD/gFtISH20dmplM+dso+CZBpsMN4UMwrhT\nFh+FGmHEzOq1ZJ90Wr0Dil9XYXy85Z3ryDcz1DyggrWyktDUuvdRbcy5h3pB\nTbPLjt1+2WJZo0WykqeksLoWKNZDpVBeV+jJRQkg0RrBZWclbFVEJgy8x9kY\nzvWAn+CZGUIbIZ9ohoBIhDGQsfT8h8TiJ5EvTcEt5kE6pm+Mc4GKB5e74FJy\noU+QrsO/FKoAtLboKWerenw/TwS27Iiz86BzkhDStd7q0pFQvHXDROjFvMhA\n43M4\r\n=A6/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/density":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.cddb03553.0_1613704386330_0.9496450359321449","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/icon-button","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e32a88b43972b775e89d5a185a5e6829a776fa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d6d8d0476.0.tgz","fileCount":37,"integrity":"sha512-iaC8YPZwoew5y0dxMEGimH+vGbMNgC2lIsJT0C4vplKlQF4s4fPJgbsw/bRdZfogpCR1M5txRtF069K2VPw3iw==","signatures":[{"sig":"MEYCIQDYsunW0GI04uheSiqqeDggr9VmSl8b59J/U/8Gx4AaNgIhAJ2SoYAWWr03WI0ldLwr4RRL7Rm125FiK8Eq/S3Z3sBZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05bCRA9TVsSAnZWagAAcjEP/RU8PihnXLBu8FLVQVdo\nu9XmZyn5iUReDqYAQaAxDD2LEKV6qvyJql1/Mnsiu6CbdqdV1MQ9CVdWUWX+\nbQr14hnw7addnWBhoSMue0PiU0ZsMsmoPw5tUnFLEFcpBPygiQSMQnbfPWh9\nmxUD1YuBZvRjgjE0HtpviQxn1pzPuIRPeaBIbpSlBiTbjmdzuBfw6v9mCmg2\nCdOBGTzebmeWtHeCFloN7NEx/kbtg5W5cM54brP6iK55n1hx6FZs1z5e7TZ6\nXopGzA9fnxcwIkWV47Qei/ag7GFYbCSP/BIkldHyJXsNtDWj8YfN03GLZKWt\ncPcYUplrzULIGcaZAx/R/W29azl6eG6qq/df1EtJo6MCi5W0qNiVHCb58gMz\nkFUKl9GghTA94YkTButlCvu+iFldNzQMNNtqD+neRvKG+Z+BlDbmyl02EPSg\nf8AahROhU1PQ32In1IHbRth24TxuLbahqsbe/ZxURn1pTE6krqDkoXTsUq/6\ne8AhVfVLzud/LO7acSzgF/Fr4omI4Ay3tQ0OOi8mBP4OzdYqLmZkziWf+mIc\nuzQ1rcUBvg4LmgKrr6pcN7FkaleV6EvLytUmgxLDjI4qHOC4TQu/TiM7wllf\nkFBCpioke+eaXN+vkQ11r7ZUe7qcBr0aKSoiE7mDVJf3LfRatRiS9ClieoSj\n0GUY\r\n=fUPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/density":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d6d8d0476.0_1613712986547_0.8901887474175885","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/icon-button","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ddbce3d372867a0030dafb8150af0392f97ba2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":37,"integrity":"sha512-egHVlm+kqG86cl2vfcWPuia1bv3OxKToqISrAhptaFhsKWdDlURcO9qhz89FfBA0w+nWMohJfnQOcdw37UJeeg==","signatures":[{"sig":"MEYCIQCoICSVHbVJtDXQwFtrLhropn7G84pE4NhpbTa5yUxpvgIhANZR82N+uofeapBFLfUOLQ7oduegN4nF9BmWE+4TndGJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90eCRA9TVsSAnZWagAAX7UP/ijVpkBQXGYAe02e7e2E\nJbZRs7NHL8uyH62gGLaSFd2fJivP32OuJuatmlPPxhjY9xjiWyyGJ/Hackvi\nooOKaRFLRb306GXpxEOCSiNVNBLVfS33j62mpcpQ1YlmU++1R6ZPx9zrK0wg\n5l8SFCjZVebUbV0zPYefGLzLS0gbmJ2FMBiVrKvjlWZ/eA0bLTm/W6qoydlq\n21Jr/fDy9N6vJ4VydnLyW3kQfB/8xGZc0fTysC+xajmN8cEC5CC+bJ2KQlaI\nhJcbK3T9b5WVyQBkj8ROQf8Zg3BRd6w6hXJIFaoXs2wdJCyZplKJY0Ie7Ksd\nqeURgLTM52jy8a8s9vm9Z6wOKP8fFUxRKTLVWHlTXlN0PoQMvswalPl875Iv\nDHMA/nPfxjA85Us0dtvnbYefXJs5T+k4UkqeobqNSzYHYOyT19fK0tOMsMqD\nkB7Koc5BjUdLIiT3CvfS+a3SeoSkMNUCET5DQo9CjamOD7OCrd1d5F9SM+9R\nPbEt7npZ4vG5xMOehPOanENGzYNXGWkabDMFXeWvxaTQSHuv2k14uEBck5jf\n6QDQjfPBEIjn2f/x9VDpaArJ/PserWIPxXa5QzGGjGhl8DFFIttZ3pnQkBvb\nIDIixmxj2Biw49GjLAJneRvs1tdT39QgZ1s+rVQmROhS0e7A4V5sc8112nO2\nzj0F\r\n=dPLu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/density":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0b4a4b2eb.0_1613749534367_0.6038192206262607","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/icon-button","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0da70fe514030e6c1a4af183fa6054c3033c002","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.3201cae47.0.tgz","fileCount":37,"integrity":"sha512-c2jj67cTv24bG7g+r8pN2Fs+/OQ6jXJQlbnBYaibdz6RoOb0pD7l6nBPTPP3e8z+ussVuwGP4zSf3oUQmZUJ1g==","signatures":[{"sig":"MEUCIHzu3zK4Xdeg1E1gc70Gv2BTeKr17plc/yonSAPd9aYEAiEAxzEaNlRhzoIL66Nu7M7CUSjyt50xwvLv2r074tJ2XAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMSCRA9TVsSAnZWagAApuIP/RWyvm7oi05B2d03ABeW\nVQ56fXctx6EduIGi0itoa6CeoB/iMTQc845QQzm+e/or1y6+8rrXt4BUbW0G\nkfitZ4FwD9ZPp1dFBM3jCEkMUaHeE9+C9o9vEMD8vptTixVokUFAJoZb9uac\nUv5l+M+T5yCsGRiHTmgnC0AWUVdqui4C2oa41HyZ++Ch/8BLbxEoznwfPmLj\n1sbNB8566ofCMkJlwzN44PeeRlwF/BizCjXUdY1I+ZA4LkYuPI9fsOMT/CX+\nQHaD8La1FvjVx7Ci01R2FvKjPl/Y+VTSojVg54Diz46Mj1BmO9f282BtxdQY\n+nimIRk9J0+J1fj41L1n6X/48XwwXnJDYMqA3TRD2RQQcUZ+ntwawmSVe4yB\n1pSZ19llMUJT4uu432MZ8EmRzk128DWriYP65JfTJxAJWc3+fFOyk11+nh0r\nzN7nm1R90xjdLvl02108CvI/rXExX0D0ka6wygXi+aTa+fEsUGxxssc/qZPJ\ngtD3Se+x/Atl7m+wPOSckabTLAowU7G4SHfGvt45MhG6/Qozi0wrbl4V7EMP\njmFXqD6nUoEgFLQsvMv+N1j/8HeObXmGuE+mgGtUmRR+pERKyMXQMBWDfQ3F\niF2GkLs/wqJS1gLShLcIEKmGv4Nm9R6Wq87kZ3H3vE51Wl7MXgs9vJrgXSsW\nYFOP\r\n=S7WS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/density":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.3201cae47.0_1613775633909_0.834909725422714","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/icon-button","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48c8264afb21b61ef5fdc122460fc5f8979010cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":37,"integrity":"sha512-Q/60KcW67AFWYbnYkFe/zmk7UM5rr21kUe6/9KT34pO0Od0WBa0wZ8218DqquGWh+W89vhUwYhAUsMLqa7xXVQ==","signatures":[{"sig":"MEUCIQDXyY11x0093QYfM3rZX6GLeaxu7IY3q53eDKokPFdTBgIgOnseKqFgDF9PpVL6FfLir6Uku7VhwdpAoVxgEw2SHt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArACRA9TVsSAnZWagAAvNIP+wZ9NdtaXqacCT9BmI1N\nx0SU1WeihdgVWmzJaBYCuQLcyboGza9UakRdt/wqwNaYjbwbB9puwRy1Q8Ci\nziCfznoh65H2njlgN9FjowZH7kKWTCfnu2k7SME/DehnaH3XbVG7Liz57/Ee\ntwDxOLbxYL3dwnH8bAmri1BXjqseeyrpl2TXm/lyKuxvUstac9Gdas7avwrj\nAx4MZ9LB8oi7PAFGYyNJZ3Yhuh9fSHjMdZABo1/1jHlumrT73NN2negoLN9I\nrfofRaGkmjsExszNw3q3wLsQNTCeYFO8c2kYPrSLdPAXSj1Es1GJZ8E6lw9g\nkO4jPLwCTf+bBAmMPprG4q6NnFbyv2KIfrXhvI0kPu8+sgeHVZ82xRFxlIpt\nTU47y+Ec4YbLifeJ5dnho/HOvsd5nnBFA01PAmykru+iWVWT/9mAIEjUDusL\n8eAyb7COKl+7qcElRL5J/YSyzGguxxnHUieG4TZG8wcpkyWacShiBhHYWBFi\nM3XMzb32cUeoifuVAydixVE4biNNuldsg5BepqlvBcWfq0o/rLjmsx5JAYXd\nbyqmWC1BLuhHIUpdphYJg1C5rjnkIUP8erofhKtSqAEYmeyl1FMpNN8bUACu\nw7nsOPaj9by3vmMaTsfO4XX9yo6iu2RqeYC1HWs09oXlacuLUy3pdpiEwAfC\neaD1\r\n=lH8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/density":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f1b1fd5d3.0_1614023359732_0.8880262288936012","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/icon-button","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"690bddf57350c32c8bb42b9083062e4af770e548","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.7899e0fe0.0.tgz","fileCount":37,"integrity":"sha512-3pfiw+3DPo0eFvVOEKhOOWy9Ux2C6Da+iYFhoAb9YTxZsTNXIhlRLsUTXikcWaRDSYGnqL6gqkc6IO064zutrQ==","signatures":[{"sig":"MEUCIAy6YJlQNCsAZwHYsHoCP7ZCy3ifuIGizK0sHvVmQD9IAiEA9YqqSODw1aEFaaLcgUDM7mQ6cBaQaPND/RkBolos6cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQdCRA9TVsSAnZWagAAwywP/04JZMylxe9txK6B6glR\n3kLhiP5RgQxT/9PIdRqw2WWla63h0XGDcNkLHwCFzu9iXG+c/UpHWByP5lUe\ncWyQvTAYa+sQMOy++MJXjkgIrhrFQlr8dGQpCyOh5P2uwdOFxBmzpHvQyQf8\nazc1P2svzGgOwlMZxlouOcVqbOH0sb3OJy7RjcIpV+RYxJMQLt4k32IlPVLN\niZ5ykMhBI0JQI7pQzNocBc34z0/LkaUVp2bNOPzdlII+N3HdWBqE9CAQcr3F\nRbUD8YqLcuZApw/Mh9r25dRGAqd50Pjm7YJm/xwTErQ0yxq+D5Dg+mLl6lBu\noHtamHUu+k3hiNWDC8pvoz5ClKCVr8VeNOvECQT8cP/RL3Y8yWpKu7i5um8/\nNm4VBwMkq48U1QoZzWj0kOWYwUZrSYx3CM/j23U0usGIzI6UW0au6X1XaR7E\nH+B/EIxjAMIopqM3BMfmlH9/9Rf7anpkeNFEpmHo0XH0WZxqxd7Z9PCQTX0K\nyMLWxPTNgsTPcY/VQRV3nUpOTEd+7z7pSgLrB8pOiKkEQsg9koxUZ2AF0muF\nujF+DkIkI8GuieTw+bPZjzgUL+tOB/dc1wtHGaLlNL9RISjK3ahWBNpNgbhq\nxxH6fKnqLPRJq2n7Ui8VzN5uqCKHNEL4xtQeLksWlOtbobNQcfhjivG5YdMz\nGy3s\r\n=9i02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/density":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.7899e0fe0.0_1614033949394_0.8823914250691893","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/icon-button","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b4e2e5da9afcd7ee23688c6c37e3794f268f11","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f19c86d13.0.tgz","fileCount":37,"integrity":"sha512-ZNxpi7I2pf6ocv4fawfhqOwQ6dsJgvUattXm3ZzNUX5fn8+AemUOVdDimZTxBMPp2Vl7dABniC6lkPPvqIGxvw==","signatures":[{"sig":"MEYCIQC4PottdJWxwMteJJ2Ogyv/nFVXMmNgMLV+3TEiyV5z/wIhAPfHBlxiJ4XIQ2C6qJfMwsLJ7LpIl3n0O4Ms84/5ILSc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6ZCRA9TVsSAnZWagAAfzsP/23kQ3DAk4BoRqqTqkc2\n90CBjL+pQszHNp6AccO2LcOtrZoMI1jrdz86tS2ZmC73Og0BZ2JC7iIZdq5o\nSfPtSgMX3GT8L1JzsM807MNPoSco0CH52OuxwM0FImyGriJx7SQ0XgeiDlyc\nRf9qMVmtMy6hHyywmKrnSfXoeIX+ik8ydtupnWFjPKWnwDBYj3rPzT+iPU1N\nCiP7jaQXTVrbNvVSUd0EwHEcfQ8QCiA00BtyQZLBmGvXnCHS3uVlVXzKsV+B\ndJqti1W8tRWGFlWU4eDLavu5fVZV6JBYvjvN3hgE5cLMiVLpsUTKaOXQpZDz\nfRNGzsZqkM4w5ZYY00GmZ0FnRmptyAAaUNpLag2pUm1oFfIuULftp62CDFXs\nmExJHdoj6KFzLsRjrRqW7PinGEDoP1Do8X+xAjylljWptYZEmZHmghm65+/K\nbwtszezxeTQhI5lWoxoGR6FezT1m30hjhQAyM9XDmMB3zYePH+oBcKQqFI7Z\nnpqKGdcc/eehQ7x2b2w88/esMy6rAssdcer6kqmTTwNTt8chiMdE2875kVxg\n8CsTPcJEf1axvCviJMZQC4TcquvvxELuovYd2z9avZ8D54jRgWVDE6lhdsg5\n4i1hMIT42/1bUO/1p0TBorheIzvLjNNgC22gRiYi833Nz63w/OysUN+7bZT7\nQCf1\r\n=ACzV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/density":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f19c86d13.0_1614036632676_0.1331358300920389","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/icon-button","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db45ee2e8d017e3895d2963e6cc952c2f6530e57","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.60e892d79.0.tgz","fileCount":37,"integrity":"sha512-cznlSQi6GOs7wM0PlK8oyLRwC34xh6u4Apo/Q1HVoEq85N9v5k0YpIhnJT6kUu08e2QD8YRbh4NL8HhKFSJUOw==","signatures":[{"sig":"MEUCIQDSc/FBGveYVQGZ8G668xLWc5SxS4LwjgXCgtAltZ848QIgEI+2qXRQfs2hdHENv6Z6r052e7Yr6vTOyTKV0TQ01gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFbKCRA9TVsSAnZWagAAhpwP/2CmF6xlQEsMzufIXD+9\nLpvi/icJYzj5c8BuESGaY+YWcPNilN16Xee5Bq0pb3IzwUANNIwYHjWssNhq\ncwOdkUHOY46MZQsrpKZTM4DF61JxEpMXWQQIQ3PxaVjv8N/BKn75TFP/qZ+w\nG2uJiePmdZB5tU2ZCMENg24ELOLbgm9wRxdd1GhM/PX3CleJXqXPHmrldgwu\nk10XmZytgfxQNTn+d+4/7gJwLOa7+F23fYt/NOm0ikGqsejAptcqx81j2l97\nkQmm2JktiCYViOWY1tV5nJj2w6SOW4ShpIfvI4hj6sjdCsiyKUNvjuxcNhdu\nqlqeb55QL2ZP3jZYopP7eYGdgX/jhf1zTCF0mL68dn20GyCc1MOUjszoEd9e\nWivkD/QF+Ct2ZXI8Borg+YrFJyYv02EQrwPd1mrgfZi7gBUc1EW9h56E55Db\nqmmKGF9nbOKdG9D02ffcBBqwIStAJ1d7WFT0WcCEnspEKifqUuQDSjLURffj\n0WEqFFjsNnvG0yyodblownp8pLn1hyAVXoLtw+cGXQBqHen8c2s8ohxjnWbr\nQmGV+EzxvkJtu4yMa1IQgginmzCMUnt3qg9J2evLhoWT+suB8NprDRWVQrEh\n/NgSxfx5o1KOQ8pGdVzyxFrkCgPKZmBhcDwIYJtQmo8G63jGmxc9z/4Hpvuc\noNPI\r\n=g1+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/density":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.60e892d79.0_1614042825523_0.9620480112126799","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/icon-button","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49c46a73bba4e865d6227939378556ff663e0ef2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.c96bfa495.0.tgz","fileCount":37,"integrity":"sha512-7z79gIK8Q9IxP7pcDNr56t+6KLAwuJxqw0FaQtZuj6Xoyt5lMuMvKNWL/IAixyNsIV8iJ7IOq1tKY4zSjOt5oQ==","signatures":[{"sig":"MEUCICXk2P8bVoh+sz9WJUB/mae+Es+JnL+mi81n5TnFwteKAiEA/G9qyIHNwvJsWvprbTEzV7oI3ml8i1XzC5sBmHabxK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVheCRA9TVsSAnZWagAAFNQP/3wA98TOYMr0dmP39PSE\n0zxTPVKRScAH6PHkgk6DXfNWxoz4ceWcEUhquT9LhyydfLmyxVrf9GrUTynw\nipEKTS9r8CRoIoQBcdFDdCScX0aGdoaM5d562hCDoZzd+L4NBDL/IcTrWDta\nqRIwd3h+Lw+vQLg/x5WwJDf/oO4sAGYLn3U88i9kATesBJMdpcT2jZMXd97d\n2BpAeDNWOmyhUd0FgBzoyYikm8yJLvQCxvvZi8exs2O4n4LzGhXkpnWgM+LP\nnHbWtKXOFrHVCSmqxdgVqU7YgYId0m8gndmKVtypu76WjSYv4Zw8LeA/Q66p\nLYBxVeQRjeDqZ5S1wGUGnjALSYuCbCIpi4D62C6hqVr0hs+pt+eNSUc9KUhW\n9Beadm2Xq6gN9fisYdU2l5NLPVCqcM96iwm8cSuT14TyTySx8/Sn2lIxKMQS\nW64aGTGbGxnQcUzlpwNjMG0fqEqS1N7jJolmtmSN1dOTz/4R20+Ic78vfVAC\nB03gCacS/fK7Qks7e/hTYfpjcVVehAge/k3nssHkPoZjmC89X5R7ZvK8a7ku\ncQm+c9hSsnE9CyTV/AN5R1Sax0Ok18i+BBcBUfWqGKWw6ks1wSkQ+nUmZAq3\nDQfJpexyWxH5Mxmoecq/BxLFDmRm70HX8sws6q7BaH7lGzL6s18VsO22iqiL\nwg6Z\r\n=fwAM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/density":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.c96bfa495.0_1614108765693_0.6888795918379826","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/icon-button","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f429ba572b651697c87d8e7c870b681b9d740f7e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.fa9b59f67.0.tgz","fileCount":37,"integrity":"sha512-0Om2m+O+N+MI77lmfCATd+L5jHpToyo0vFzFlA7Uhqt0tAZ3EIVfYjWcPUu0MhlInpgs7pVZciOHfkUwXODvmQ==","signatures":[{"sig":"MEUCIQCTFsV7vXWCzXhEVgPUQwg+c74Mre9BsVlg/17hTVoAFQIgHkTTGthaNUwrnEw01/5FmQUcrcQCLgOjeBEIB+SSdnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVivCRA9TVsSAnZWagAA69EQAJrkgwsOZFNmhV62ReIp\nbtA0K+8PyNZM6d1zxIqyd4wLh5oZj0iNaehSgM2KZdH/wHpOG8SY6APo5z3X\ncuncr1la4UY8Rpt7a4eUYdmZbUsJz5PknDtcig4y94cRdWHOx8wdpvbeZoKa\nM7QHyeU90ZJ/BOtQu3u7C2Mk6EuVXRXesYDbzi9qCe5xxRb4/HnYVhGLvTZZ\n4HKAuxVlzIWbTZ8f3QC81yhLvEV0O86SawsNsy3HzQyypV1sg4co1B3G6kfV\nVtgskwKCVJaW9FYFfbOIpgj5JsPnkAy3js8txCzzscGvbe32Fcm/+iop8oeF\num1gC5y7ZpIDTBXMqjAWUBBIqF0RmcYVDs/UgPGNZQRXph7CsWsjqmSRZtOl\nfY75atNaDDzAc1FxLNbwkmR7+/G78rw6DQan/sMV5LPNjWuIFivTF+ao0Wly\n7szy7RBhiSgd/sepTp3J5bFqtqWa3Y4VdA0Xr6XKGtS6QFRq3z6wEjYYjcYM\nI5HucYlcYw7ZuNMRrhpWX677ydcByi0YoescIO4AFdKB3ca/E+02SOQZSDZD\nUZutqjcxO57Ql3Xv3y3JJ7jUug4RSbapQ56YobDeASZP4NCykEaXfU7ej4uW\nlVLvgNJvOhTD5e90X2djGfvumO8k9cstlQxI5OZfVN25txX5KYO+WfnzLD1E\nVDH3\r\n=GmAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/density":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.fa9b59f67.0_1614108846721_0.12027464510614716","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/icon-button","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f9faf664b40433194ef4ab94e9d3c3a65d2b82","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.869e3497c.0.tgz","fileCount":37,"integrity":"sha512-5cG41j9+tNyw3afN34wWiTPzRmHCcSGsXUux7d/PG7dChpKDaji6mjPzZrMx+f0N/0v0DjCSI8vNa22hir2sBQ==","signatures":[{"sig":"MEYCIQDbmr4OZtFsXq9JoAMacbjaHhJ/Ws7NezKeOp+j5t1DggIhAO0VA1Igk1H/kaMPmBAy4cNpE1dvA46ZT5xS2sGMv/9Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjdCRA9TVsSAnZWagAAp5YP/3H3/wqO0i1jC55h/wc4\nF2CGcP23zSbcecbJrx38BWfSDG9l0MPGOftMUHr3hcFKiFmwSWG0Qqmb/8t0\ncfOuLJcFipKmRR9afPby+MJB5Dvdn1Dw4lcj4/7JpdznIb70Q006w21qvJfW\nRLeRwpguCjIUZHyprT7ukHiPEMqQwa2inFAYUgzJUK3fugnNAg1QxvVvTacZ\n+Pyfyyc996HaAQ6X5hHYz6aekVr0AMAfqMJfTChDRIw2YH8taU3QlgTQa2po\nOTzvxzevr2FHZ7dptg/eWbWk/xXNGi/AKlclgSzbzOxe4aWovd9vJibDU3hg\nL7yUmNsL7ZHQ4NSTl9w55dUNOHQvLmMc1nMWYbmKq0leGN5UMfhwHZEpJ9et\n8ZEE3UjMdPAPmu8Fi100XPPkyqIZu2YMqgW2VxMdNW6Kor5Db65iGyD2gc5x\nyYazTPrJYcuvH4rqeq0t5e4UE8GcW/YH4rJeQiYg9jeXVM+uA9b1huYzDdmG\nhsHS03o0XPwmBnM9PHIZ/pvP9SmLToPMIAcop+JwUXEGJSpBrRuHWpp6TG4m\n4VEezohTM7c9IssBF33fq0VZhX7kHLokRvcqo3SHoq7KN0KYlzkibc7rDT30\nlDd8hZabP1S/HwRm50gkI48DcMNP7+QseTNHG+CysElhJCcTQj5lQTy+T9oA\noqPE\r\n=1dEQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/density":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.869e3497c.0_1614108893041_0.7997799835079549","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/icon-button","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a45cf31b030f39d8a3bcc38266cb00153d65a47","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":37,"integrity":"sha512-XtFHLzDbz2aN+66eiE6uTH2yOAVhAWcWG6zJslR/MMG+kmBvq/AUupF0VUKOEMOsiqI9IGN3UPV7zE7UcQlujQ==","signatures":[{"sig":"MEUCICrMk/bACIxwyweIdDRaxWTXVWewlR0u33MiMqrUbCLUAiEAvSfx0tGimgaSPCLLXyq/SywDZI+zqPGrJyP95Bz81c8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVyHCRA9TVsSAnZWagAAu00P/1eMR2a9ZKu7mJlbnumw\nWBFpDOGGd5O2MWYH+73Wdpl8jp+dWCnxsoPsEOQ6QDPLvXd455tdHycth+C6\nMjAyAyBhzdwed9HAY2mf08vXFavaSYlMMf0KAywxLY/kff/msjMnnNH7NGS/\nAqlWm9bYDlYSunMfPodVQm22X+ODgXKGpa4ex9gmqKa211vQZiTqWzarrjIc\nPWdO1P4oGiglPutfHUUjoVniobkvQpTdb/zSv0thO7r+phyJX7Zha1wdy8wI\ndMeI9m3m+KdfS+DyJGqJF0jhjOUh4MUjC49qnENWkRGptH3gdtFvAO38SKSd\ng9WP2Ibu9mgPF1BJP/rgK615SwGpYJX5Y5CO1TL+WMntLGFqu9ShIjJChGU2\nc+9vdBTUmZwCOquvGJCT2oarxz/Ev2BFzn9TLR/qX8sbkF7bA1qYYRH8nojy\nM+yjvbtPQJfBfW7kLq92s5xfoA5kopdecEsTS83SCDSkV+/lb5U7P44reDBW\nksca8BEJ9jh9DQwTYGheq4Iswjkv4ql8jiNrOOEX1MSroh4PrugR6aZlAszH\nigrhC3ZioLLDTZYMQmdV6nYvhEP376l/7/tpX37vtIackzSbDJB4wA+8fpYA\nLd0VAmI9MaUt27uPDYTPoa/pxLGhi7M6y/q+EMT5+sDtwIN34+YBGioqflT/\n+O6D\r\n=sl/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/density":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.8ecd7c9a9.0_1614109831266_0.37356138627390134","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/icon-button","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada21ad229e09c508d70733b82ea2678f8b09b17","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.9c85d505b.0.tgz","fileCount":37,"integrity":"sha512-aWvfUMPl+nI9TQQP1XuzmMpkAdCd/N+VPW34Ctts8eoK8nDQTF2A26yvh0RrPCyU5EIZGIcTpPIV7V8EVbLyAw==","signatures":[{"sig":"MEUCIQDOHGcyFIpWEJr5Wm8cXQs/qzHsdOLXsj7qfOW3t/QGMwIgD51fdu1hYDkG7AEdCDUCBuCuabxRSEfSXDoV9eBRY8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX5+CRA9TVsSAnZWagAAe38P/jkJ/Qw9EvVaAkbNyzc4\nri/+EQYaVeO7aSmGPs6Y9JYu/1lUzraO94l44m0LOmQZv4RCnuUWDu7D/ytH\nuV1JOjOvD2k1B6+Tc2+WtdJ67bCLYwvEN19YYWr/aCrSGwIB10Ub8IP2FAA7\nGqcRfIAsNhbM4eKznG3stGVB1gTHAvA2wW476v4txvxgitL5OmmrlFxM1eZB\n4EzKnnM6w8wJGAAcvp/zc2USIKBFl4punJcOWUv/lXfChDPX/8uz+9Et1DvE\nbEa8TXwNiznbg4261nU+/wTEfvBBkFxcn8lOv4Vik5V+RlvvKEAg4cFLyWwM\nPFVZ2Hh56t0EOBYu27pYtmhIipBAIoLFwnUj1jH6Z8uPa+ci6X8S456xtQvW\nXh/0AnEI6rSs+fr/l3iKBOEcE6EDbxk6XOvbSmItM5WFxEroCQX4mN6zbh8G\nE9KBsrOFQCqqB33cYoHNI8Bsmb3VI8vylaGPYyQ41NzK8Zcal5WNcT8BIi0a\n4OLKIZQKltS+yj457wU296zrMzsrJT1HyVH7t0iHrbzG6AU0Q7HKY1yV68MY\nT4QDF9+eqOKcuc6ftRoM8UEuD9kZ1q28fNAI49WlmQdTXmfYnsncAoAJR0cs\nOsXKw8l3itNgmiuAy5ZhHFezWGtmLgJAmirIvXWlutLKB8sSn3+lpugIgbsl\n4jQ7\r\n=zT1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/density":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.9c85d505b.0_1614118526127_0.39358393821190685","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/icon-button","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdd8c9bda7776a8ae917c4539574c8bfe504c4f1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":37,"integrity":"sha512-bOqrphf+loEOkHRyNEHS8Psj3TjDdk6qB5s8hdkLsWXv55PbOeVQ9TxQySHL1wEAViZOFSN3Us4VGswKLWALpw==","signatures":[{"sig":"MEUCICxjCDAoSXwen2p85iA/H4x0vWa7RPh4RQBeTIuX1bjPAiEAkfajir4S65HLc55eWu6c1aO0td6aEwzm61vzTw0qEFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbA9CRA9TVsSAnZWagAAxI8P/RLLhiiqR3EOMqKBXx8J\nL4cTc3pkeg9FpNcM9V3xJ6PQr679OTKZpXyFhEOab93qKr1afwkECBxkZjjm\nADLGNi5nGExhZ/Wo9xbmE9pyM1W5jNiA3QE9FaXtMt02BdeDSz4EbME6KOXg\n6HrJT3c4BN/Bqkf0cVYjIq7T5ZV325V5gaOiAK1AP4435n3TLinbCtE72rnz\nHihAsl+zbUZ2DA22e7uuxUYmYc4KqM3XUcvB3JHIX/eWCAdD7N/o/4JPe3T/\n6Vh243GljPsKz7pAOm7ikCkFabEy8fRQQfNdlVDPbpnvEPVtUuDW20GyDtRe\n0OvXVtPWi0zEQKZgY0zwKg5nj4/QE3yWW5l06vUI4mO4MZO6IQqegr7Mqa8a\nXkVcnhP0yzTQmgOD5y/V36xFqcAi5RtQU77bjlJG2BvonWJkQl3CnEMldqHL\nV5xGB9zbxteFenEBS6bW7eZNpe1ykfljblho61HLQRfQSzig/w+zKECd1frB\nu2YuhKxkhYJMHOUHqWAWoB/2mxlwU3tKS/MxrM1e2QcOIjG/QyD/YwFWP+GK\n89Hso8Z/mPBQqTLliOAdV86BATHjlH0hWfX44f/Q9SXKNEkIAf0dZ9jLP+XD\nvj1oA3vTFETWrult1z0QRQZDB6ACeXDuimoy0wUCOWGbpLK7jnQk7GhgXiO2\nkpkz\r\n=MWXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/density":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.9f2e85fb8.0_1614131260429_0.2598466863129383","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/icon-button","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff2395689a31b54ca6866be1806e3b28abe37198","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.19c4f29ef.0.tgz","fileCount":37,"integrity":"sha512-szt0IqHdVdUy4J5KAVfTQ4v2yV8mM08+6ksJ+QxZ6qinnBPFhlF33H2QKf+QhhNWkRsiZJudvem1xkz/h/ZDzw==","signatures":[{"sig":"MEQCIHSnN0BCwAVqs/lUCX/UK6Gs/ZLFF2c8v5KmGlozxZ47AiBEUSNpd2rKmBU8tMQz6ZX+zBHZ5jbtjQtiJD0bhZm51g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jmCRA9TVsSAnZWagAAM/8QAIzzxMx3Ui/oA5cF7T7k\nHnEG9NkeHD0LbtY4Jldcf1VUoXFc0c5/hlqdu+9ZZsnqL1fGIsFYzRiVBltK\nuTECDwf+r1L4capYj0pSqxNiOF1O7ko+6LH8SbmV6lYrsLBkuVyd8spNR5Ve\nrloyLbPsVAHAWzB/ygvMo14eWj9zlyGAykUdJ+SciP5LgyetjpkLTgl72X4z\nzjUtjSX6h7FYwRMC2kRM3N3NA+P5xi+6Rup2MHzXTyEHmQuRF357Zk756E1U\nhCZ1tsNuckzD1QBMdXcVLZGud3TSkpVskJbZCASL5puAhyZOJ5KdQyR5bABQ\nmJITTjBcQ7aiZYabq7KBWCnTyS7rudihHp9QLPtVxNONDlvypZLkmYLyp3U+\nSrMgtIqCWZD6phTrv0UAlXnHCNgoedvmcxOAUCiYzeHnKxKJwAsm65IAoh1m\nbqgj6Z8EOEfaSFXZ3K6QFfT1wyjRssNStnQl4plY9GdPWlpwfGbSKH5xKV+M\nL8FnuyGbpQbgaZqbraKMzpmhU7AzD0F6uXZtLy65x51Ft7RXm1YAcUn0b0pG\nv1NxKvnrwuz3yhTZnXrBm3cQqJYdD/diR1ojT1AwjzMzbIcE/xFOk0C5a2Fn\nLXIOZZZvJxpBiSkp2vHcl7aNzFtTfCZ7dpscNHZetQLoybjbFxJNJN3JeCU0\nz2dI\r\n=K5ra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/density":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.19c4f29ef.0_1614280934231_0.23162632403776984","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/icon-button","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b3922643ae6f1340ef311b6efce2ba37546b1f8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.63df6e9bf.0.tgz","fileCount":37,"integrity":"sha512-2jZ7YgExYFHTlv8uFdCQXt9V9fttAazkuekOYyVHqYEH43gzhcvu77EbL6eUOnKtwuBzXP2FclPu7MQID+M4Rg==","signatures":[{"sig":"MEQCIDgfSRd8PWnGeSokOkzFX6dSiD1rq3YtSdptw12cYEm+AiA+ST1xtckygeEl0v4LmxEPgekuh0BwGjJ3rE9PCjFIrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xcCRA9TVsSAnZWagAAe5QQAJljO5W3yrkHA8ktl5zE\nX+5hOyfc1NjzxwZw9QzKQ9B11valfIUvglpfRnENpzTFoQ9NTYK5rVNbG2xs\npCzAExRUOiYXHRfzzispsOK3PtC5XoKUmBqMFAhEJVFRwYURX1kEl7CayLES\nxPfZc2wH0/Er8/zJxoPRLydmf8ZKvT4ZwwwlvFs9NpU4mGsVzIVjUzvhePcp\niEf4OR+Mlqnij/n4Mj3tiiYN9Mn/YRojVJ6FHGS7fYggf1Absbyt9TqgPMXy\niqx+0Qp0l9hW5Rto03kJ/XxcM2Gi4SwMhOVxEzD+ULZ7uTHCCt+kfsHtZB/A\ndXFNkOIjqk2WBusvliy0oKC3oOUCw2CC6u2DUVr22PUnSu1cLvwq5YzvLNOk\npYrEIRJeMu77JqOVzwtL52YpXrneazm0uKgJ7W77roSC9Xo61N2f/4WSPYng\nsoDvOXnV16XkZ7cjLmp5ia2XBpZQ7XXrkkXM9N5kGTa4+sD73+B7I/ujRWSd\n10lgbFHDjcPu86HZP0cKKXcrZJRiwdiNe7nVKLY61ZDl9nbM+v8je4jh2NTK\nz7dMm4Y+KH6+O3cLvBadQuvHAsNW+lbbwRw4ksRn2tdMBpVsbWFKcQ3gQ7N1\ncmslkHEgVjfCIeohycqxZkOAzifAZKVoImdMvVhoUC0EPiwMYR9bLCXTOoAn\nCGGp\r\n=LFhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/density":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.63df6e9bf.0_1614281819628_0.516895058842199","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/icon-button","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfe445d4092cada16225c3b170adeb17112c684b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.981ad970a.0.tgz","fileCount":37,"integrity":"sha512-Y99jL4LQ0ZoJV6rrD53qEA0yXWsroRR8euZnm8mNkNXLFPj5MGvANdxmUwQ7zRr08wDArDn3hlzYBPSdb6sfQg==","signatures":[{"sig":"MEYCIQD52/xF6EHRSlIg8vtptX0a19EpXr2xHOOiNcbYMlQAZwIhAMISyxjExyYUndwOlWOkoRLyUJfMHi0p96OXjzDb1ZBm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODuxCRA9TVsSAnZWagAACC4P/3PYtJ87oSUAJF6O2TBB\nXHXcvkjxc+p30KcEhLF68OO4gubbL3W0iOWE3uVixgKfYrlyAXUXHmi7zh27\nUAQL5BW2MdL3y6O1mLTDGJHRYiAK379KEBXbQ9qvzmNWlI1kbMIpfFoh3J7F\n3ChBgoPzsCIn3U70Ne0UC7wdHe8e+3f6OV/nDaLhyMtNTexsUZbXS9twk/th\ntdO+StGIdPOja/r3AG5ogV2BxizPzIGz7INC0BFN4WNhLCr4nburLF+9vHer\ntM7F7ihH828vWozg6KOcLtEGYDvavBSwULqH3pvnrv9rslINo9BexWrsBbwl\nyHFg0cZA9lY+Y+Mj3eTyj5SjSAOLT5eHgtB6tDYKgM/coDcTQgQ09oybHr39\nUm6sw2zXhX52utDwco32wGzvxOrEaG8RN/MOcyJh7Ouw6JLzxRKlJc7NYshE\nnBHAfcUCHsTEbSl3nR/gUFmUhYl0xW/0SdTNp+HB/T/EOqzPF+PSwCWaifX0\n5OpXXN7ZNNpvfq2cUH8KGzt3fzSdtVhPHWd6yzhv5wi29M/wIBGrAjk1+KYb\nzL2kQi8B8l9vwS/P+XEnLmaLaahOYUAdELRpSvtLgJ4L5L04BrU/2Uifg1Ls\nRCrRmpVkmofQn75AB/Ys3a+KgU29CKfJypirrGliKEj1W3Pud1y2D5mye1hA\nAwTA\r\n=YBUT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/density":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.981ad970a.0_1614298032984_0.18594737753354718","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/icon-button","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"257767e507e646824673a8b00203a6b923496f6d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":37,"integrity":"sha512-4wmEXV6JvIDIl8PifTJJwaFFDGa0bIp0amfWJgW4tGKjCdZIHwGVqgIa0GTs+DI3EDoM+QY9q9t9PI/jDxrM3w==","signatures":[{"sig":"MEQCIGafNmcVAcbDO9aapvXilEjJGOrSdFNYRGouITtpz3U4AiALqkIS+0/fkvwyAcHW84MvWVaEbMywVWiVoB7f9TVQGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAyCRA9TVsSAnZWagAAsyAP/1ahdEbSEDS/wBDs0eHX\n/NDXy5YJJ9chhb11jmdBE/OK2/60Y8hFdYeYUQiR3ySynbzyrjFpLxov92Pg\n6CPXFJWekbjjIDQ+y9+2zZOkIt/DiA2/pM32nX+Z1Rks+XINsblym33eylAs\nAvh8ll8A0NVRjQqE+umwudkhS9be8O+hv5N4ZvPcAx6rwsXDlraLeR79KKE/\nE9Rp+su+Ct2YBd1fjoe3qMYazzv5/dXKQhwsiM29MWnHHmjksCH1U73UABUD\nsdNxwvF/OCNHyHF/GJPiEXtZBcSrtEyKHK2dJX6kpShPo/qD0xl0D507Br/T\nTX/txrGPizzBek46lgxBnBnThfW+IwTwarZQcOYqdjVdIkruprWyKkWZVy0p\nyEcsOpFkWQv3qqbf/oy1La1H4JS93n8PzWFi18rTuq2LTsHRgmYkI7DlPQBQ\nH8A3Z/Wo9MtC6e+Z8HkEKT62dMIpruBARdI25bAJ/SPJI4tnDY8a8lEmxpnS\n0ktKb10KLQDKpPblmoSeniCG4aty+fAPkHX+qMu5kCxIIZGha5XViOPMpY19\nw9Nm0g0kbh/F6pIn3ramwdIiwvI9oPi+tPNoYupUQIjJeQBv7vz99qOeznJY\n9g77NEMOj27k5IvyBbD7QzAxpPfAY+4g8oZr+9hh9EUloxQMXRdTE09T1PoY\nSnHy\r\n=0+EP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/density":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f9c9e39d6.0_1614364722401_0.22431856940163164","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/icon-button","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"863ec6c13ce8f9803e9dfd6cf0a70be7a186fcab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.c97d7d881.0.tgz","fileCount":37,"integrity":"sha512-5EzN8F/+5+d4y3ukXrDsIePAio/9NHyBinNCzXcnAyOVsxbb3wa5T88jwKtEfCGyazYS40gH3poiqXyhgnWzIw==","signatures":[{"sig":"MEUCIFVh8VJ3WVJirR2+J8lrbL2f8qWKqzo0mB4+jkkaFOk+AiEAguRHgTRzRzbHRY7Eby363Pie5j6KHKnxsLGoKzcne7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQvCRA9TVsSAnZWagAAk7AP/jZuy83J5F8C6STfoQZT\nEW+Ma2n/hE5LdIi1x8XLNfZC70npUjaziNcNmv27R1F3gOHsWF0cmBZptRy5\nhB24KDaDRId/3q26Z94K0Ilm+26vMUK4HQmkYK+LHOHYUxu0O/r91KPcp7w/\nWq39rRzllYgLZ+ApZ/xPN2hrQ7BHnke2tCeL4p3PlvdFCeYKR4m0rish/5Zv\nbjUvvvH1VF9ARhxtEkzulIRQbokxPDGpj/SG9PYAknvVVtTh9k3HolgcVsgB\n8/m/OFoGwX6OBD7OuHhyO3p/fxWhjQG4AMSbvIn35GiFFZMXTs32eSq2SLg5\nOeIIGv6wjeHewGM+AR2CffRbc9b/kLyaKm/JSr9gso2EMvphtcjHDQt+uMVU\n6b/Sle5LVf/na6ZHsaJ4wPUlZ6tMOqxr+glVqo4eU5auuEvf0TmUUHLpXSvR\nM09Q5xI1XEmjk3JqgMj5TsjgiQ5q31PeXtNuUM8SXoo/VDMwCr3xPAtNsmn8\nGbV8fApudqw/TKjeug+WPNZQcWx8vtYLoeERvsaI6OR+GcCDTXRGmCnw9x+9\nsyftfnTFWx1SvOI5DxQtdemJKp9qdXKUvo5C9xracquDcACbCRQutuddwamX\niZnHTfl0nNiaWYMGCjFiXVPR2Hgg5d4H4wp7h08QZku8+tRcx2rSZmQsHE+I\nTICw\r\n=Lpri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/density":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.c97d7d881.0_1614631983394_0.2317041159466744","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/icon-button","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd1f0bd7e2d56b489b7877502f9e53cbf800e75","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.bf670dad7.0.tgz","fileCount":37,"integrity":"sha512-E4ueBfY5u7wJoGXddxkJF5+o4GhFZQXUCiRtk9q8gdGZ3FQpRVF80tzT+TJfAd5fCzPpOm5jJR4GdhZDM4kpkg==","signatures":[{"sig":"MEUCIE5cfmAS4b4PdiCri2+eSgdXOFtb9snNgfWJtt8lhdBzAiEA8LnV6VwiGOcaJUhc2kQzXSjo/OH6YtQhZqPg8LyrnDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZdCRA9TVsSAnZWagAACw8P/jVCcC1OEKdRUtx3z0sS\nsuWImtKy1cos2D9M8d1PdTkcCU946Lqu/IzG8nr96zBZk6zSfvnqJh2sM5Bz\nGLpEO9xPxyYmTwsA7Dn+B28hUOTLbLbhQ6KkrxMa3qeqp5HRvsh3hqR3DD+K\nm8JXm2RANJ6zhvYumraj39naBQE6/aQpjsWFUPiiIemiATOin2OzmBLbQY0O\n+oAcc1Jj5YmGH7mrGOqNuuKWr0tZoFqW8f6Q1WnpyDxLs3AzeZphJb6GjsAb\nELtGXUW7enU6b37tSgRoRBS4VjY+nDgyZAP91ChVkEWZakS96gDW6soyRZvV\n4ePeVOcyYJgJh+XY+5R6oGNZW7e4vDK1wGSds4X0c5/M6+Da+37KTms1Avif\neP9yaHP3xDHEHFgV5WgQpFRMHKkLbz9u6J2cIa7rAFA0YLDeoonamrGvj3It\nT9J8VYPbhpdXqkT1YIjamZXtmCsqzb2qyfjiNZchTb+CQB26QiU2GFQUTcds\nWgFlg+4ljDlmlUznQbLOOF0w0pKriXOPy3mOJE1HuQ5/hbk6v3OvrcVUS574\nH9LatChVL4+8kTdgNj2+0X8XVM9cam0AIMN49RElZS5Tz8efgQnI7sZ2TmNd\nAs7ysLKa9XT7AayZSiEcst+QLIt43gA9FDypbXJPZ0MG2VkeDT9J4dG51tPt\nbzds\r\n=S8Wv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/density":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.bf670dad7.0_1614730844644_0.36512563196649905","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/icon-button","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af13716ad5d0d6e7b78a643428d3dd958f72875d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.c7d98fcde.0.tgz","fileCount":37,"integrity":"sha512-kdq7AHr5mzwbpoXcgYd7zdEEUsWmY8Qf/d8KDM3CpkBJ3x32hIvkNKntRajYEdo0uVTyZHZn9XofxqQlM8ifHA==","signatures":[{"sig":"MEUCICnU6eGM1JUvzqwQxz+R9YDQQ1267YX9Xv1lPEWH07U1AiEA/qExhUafSMPlpP3TRdY6+WYEbZVNG8SWbnZe35bvFV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/IsCRA9TVsSAnZWagAAmR4P/i4f7UV4OuNC7u2ectux\nu6sFELqM/S9VCQ04BZ/Gc8HRCFRQwjS4LWSWNdE+P7fvdTOHedjkTHQT1p9L\nzi/+BhlaWLwgB6z3BHEgp6UW0s3NgB4ruPLh4Z9TcCDrTEXSoUgSicKh+WbF\nGuxK2o55sfYe6dI7W7qmTuj/joNmPVhqxz7OuhnKXvzL9occdPhK/KwSI7A/\nmLBNENK8Ld1sKLamNdUYx49UgKVcaubXME/yloacwieI+9hXab16gOmPpXgX\nVtjOleQU2ifqGn8uqE7LtJji25VQyODnBWS3DNkTx6+8k46SIpVmOOmH0T4u\nSMRfvAUpRnrzmhwfzlX2mGZFVnU5epsks79YHDaywr7cJz85Kk2cZheRlrNx\nDjewqh9Cz2qdUNcmVOgs3FxB7DdtAzrkm4GrAnxH8fbOQltwQ+AzexJt6N57\ns+2neWCyP8YfxY7tK4ckOj3cGhQ/JIMHwhz12Ozfj9RWNSzW3NqJAO++u8id\nK3mvvEE7GykvdikWcFpwZKfZYHp7opR6CH/hMGtgZG4Uzl9bHg6p/aH+i6Dt\nYh8IIxuyl8nJRzpsWxyAF7yu6CAGCNX9oYXJwmRuNP28V1fYp/37D+O2rjdm\nRIyJsK2VCv0veskotD/ueptwr2wNTta6kncTuQNYviknEIaMb5LWs+hY5YW+\nFlho\r\n=v8x7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/density":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.c7d98fcde.0_1614803499525_0.9707405824611031","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/icon-button","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389f5696e5665b3c337367f7eb930fce9f157b70","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":37,"integrity":"sha512-9H0uRMM9IrL+UZwJhZPZ9zUin8Nc5e/BTloi2F9H5piqcXR5DR3J/+55CY3leGHvq1A2aucCWT01D6/teqz14w==","signatures":[{"sig":"MEUCIQCvAbgHUdvSMlHT/LnWYpXsbIyf1myEbtNPH7Ix+drfCQIgVIC4Onaj+AtuSYL+PI0VEun6+EzQdH8vRlZQTH7CC/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqVCRA9TVsSAnZWagAAR2YP/2VleG2J8ngTKxRrOBcS\n+gW8DqLiqwzKLVbwT8q/EvY96oAnsW5p9jucLsSdgyo6LP2HLfcTN1+1mYuA\nUHmLUHIvbXj+uKIslkLqG0ITsMyYmM3DfBnMTSseH8kaTYj1gciQQGKazYQ9\nAwQRyuy2tkWxsEYPRE6cC8jUStRilSWqCtF8RsWa4+dl1C2sJ/cpjqwYr8pv\npLWRXK5GEPtwoqVJhsrsJHvsluuiaqOBbZmWoJ5Uh8YJIFWj59cCh4ZSMlH0\nGTGQSWGZAI5NzKG9nv7I++KA+GcgAhPZYTVbkZVqeIqr3sb0zZKmylA4XJq5\nZF/dxQFqoFC8eOYuLFYzn1W/4eLEIQuX1gdt4FhQKSEc0d2ffOMTHdHRHwP6\nHdiswamLXMd7Yq2eUSqokHJJ6qtbs5IGMecP6IlfRQpmkEQeB89z2t2gAkB4\nceKx+S65AoR1aQgevwzMvRPjW+6hgHbAdG7FBh4i1v8mT9mvkWSHRJUOpF8v\nnCzUb77Yp3iQWPY9DyemRXyMqtVozoPcfsm9Np1/txG3O3LoDjuNjfCOgnO/\nE593qbOc0LemgiWlxs36BL9lPnzhOGNWaOuEg+nZEJPHJONBs7MJ2inZ5IKj\ne0ibZsSmetbaF0Pv84DgtM+AXtH5SSTnmX0T+RlBjAHo9NBwnzL7RzoM1jLL\n7zG9\r\n=UNcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/density":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.4fef8bc1e.0_1614813844712_0.7478891339113931","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/icon-button","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee91a3b4282677e6f3d8c5e82157fa7082d0616","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.afae3a3ec.0.tgz","fileCount":37,"integrity":"sha512-KC48d0Uc8q6X+fH3+b5h3L2cq5sXCqBapgI0oXGSdV1jlz59M0fs8WdHHRShE3D0YFJ/JbD/cRjyjVX4Zt1Tug==","signatures":[{"sig":"MEYCIQCo8fOFa4HilT6IL6eniHL6KCTqysXbwaUT3MKAcwa1GgIhAMrBAlHeij/GKbp++3IkBVeKb6bdxyA6QpuaJ1ZGt2eK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7OCRA9TVsSAnZWagAAXlAP/A7dyTVVYXoVjCwBdLZd\noX8We2xppDqDxA3jE5WIPYsjHoKjB07G2s2sHQF/4vXAJyuWFzjvk7yR8Cal\nYyYO5uSwkOs1Hmc6LkU9EZczHA72eWgArL4e4aMMA/Ohc6JzDW07XEpqh3aa\nvHHI4xtECkQDSCvIaJO7chyuxj8E8kdRXQK7hNeVOJrWxiMT29rJ3tJzGb0f\n2UvBwIWmf4AH/EKDDr21gDV6Qtd31RFxDft1OrsBr/otA6nDJvEs1J7UN1ug\nRa/2IZvkCRZw3lnLWp8HLJHu1M07Fj+3Fg+5JLlb/rKxtchuVnoxJWj2tmkI\nQf3JnVPXaoKeJIdLr3PwqXeHIGs7RhX2+Dbo5ujHmw05M/K6ixNQqE6mBXSb\nT6KW26xAfp6sYN4oAhhDEceWJ9HERNEe6aBwCviyMniIGXYhiTLqR9/x4NWm\nJO0LzOAs49ckW0mOFz98/7lUMjwmiMrf8cfVgLXPcssCyRDLhBU3wONOPuiL\nfhgEuvqrKvwjH2gf0C2ZNrzKFOROEWNDAnjligb4O6ToBZEwF4bGmSewYR8H\nJ10dVLwwIieOukXWnvLuPo2fN1VYqAbQNhm0NDwvGNr6BlzZ5X2kSxJ1Eccm\ns/qSisLy4mvq7ROnkdIFHc2YinE4RahK8E45Wi9YO35LE0olZKGWKid3d4uZ\naDI0\r\n=JbQm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/density":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.afae3a3ec.0_1614814925842_0.406782855796769","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/icon-button","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d5b382210999cb6bc925e09cb62e0bcde18208","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0a0b10f22.0.tgz","fileCount":37,"integrity":"sha512-LBhkD7fn/A0MoDlHS5AHAiA6Ggx7RYO1UHoeTtNLyEsXEyVHyiT8cIn9H3r1+jBQe7RW+QFuFIqfovesAUu2mw==","signatures":[{"sig":"MEUCIESfKHb8L94LbQaLXDCJAZXpuXzg0oCQ410BOM5obrE+AiEAjxfUAIjM40px+EQimv0dRcvlJ9brj4h8xlKIe8bE9uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMuCRA9TVsSAnZWagAAPV8P/24TOvcWgevoRj5Cw8tQ\nQprvyu1eJXS6BTilp3LkB5AuyiSVZO38FdNCgcw5lpzdqgunVV98QLKsFwuv\nW1p4LwhF57gnKzlxzN2IcZSVFEAws5S3fRHi6JSmGebmXJnXMjra7v+Fdr8i\nERKWRt68Bt7UcegJ22j8xh2UkoXPoURABRyjFP/QHb79MM2pDYpA/G2ZQvPq\nlUCjuRiNe5qgUebuRQkWD96I4VBfDsY7jRLcmedN+r6yuDotTLfvUw3SRNSS\nhGZXGOg47aBR8kEhvv2Th8NOhKirijOFfUvYrQY1Hn6u4amZHzvhw03I+Jnr\ngjy0uogE8U98LZGJIr+6tEUASAFgmUUTRV9CsXJ33EsHyWwkkZiDUxFYJUv2\n9oT5INontIZGD9FCsWJ3ZDtOaS5SMygqd6Zb8BvjaFPfBFD4UV379u/SDwjX\nmR9f6uMngnHligSQmRtXpstQPZCbShy18x/veJlogzO1TJh9rtKaswPVPRhg\nBS0SdqV3uDf3Fg+NYJKlzWUclFyMPURhTuEI897emyzZmDPaopEeLmcwumH7\nB9yoDBN0VqHlHYnY6VC+5RMTowdPs4d+eP6H8QjC58N061z/jrQmyXk3udeZ\nkTuuQZIz7wvCvmIpazM2X7HyB9uGttqzOpkvhwRKvo/CKhg32CAMSO+AWSWN\nbFBt\r\n=ltQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/density":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0a0b10f22.0_1614816046435_0.09611719196117563","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/icon-button","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70403cd790f47c16eaca45345ec068ff1fe5268","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.6f678a91a.0.tgz","fileCount":37,"integrity":"sha512-EBfNL3m+VGpUyFtjLKcne3tEn0KFGCtyJ/iKeghM21a6P9HmqGaEgX0e4oHgLQNW8y2q6pHnrMEyo37Gzdz2Rg==","signatures":[{"sig":"MEUCIQDqakIsL0DTDhPHWlnkakjczobxX77G50rndjUuNE6qiAIgTbL/D9Hm7ov77WSCaXChiyqwx3wYosg0tmCFPBCFAVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSl4CRA9TVsSAnZWagAAnU8P/0wktGXH5A1RPmxo+QFO\nfCTo1LsBth6hKluY4sS5VVj80ySj66rWtii3evY2RdSdbJmCn6q6ULlY80Cg\nSKZk2zfDeNHitHyDNZyzG8yYOYh9/y1d8lE/e1fr6bU3pUwfdsu+16EiLAlp\n64gfg1p13dS2J8sCaxX/auKuCGAhEFH6Jzh3jqQPiHMazVatYZ4V6KXDk2qZ\n+A/pmg7KNRudwm7s7K+lKUm+EsIPoyLIZrEiOVBnZa4B0sb+zh++AbtxWh+z\n/FXX7lUXoBVSigN+CYsEhjmAtNT+6HE6CYttHNSGjx418KvSWbX0WcKUptLP\nwJ/GWfSlkyVxU8g+zhLr34XA3o0LDRUAZBJi+FcpqiCd390Q+U5N+jbB/Xa9\nA7Du/sJLYSov/3Gn1qpALvvYJ6W9xzJtCwzzTes6si5+NZRGmu46hJ5XXail\nWFInQuAYvifZEtMoPgVyy1gYG2f1Y7XaQVSNEctQKbSxGiyvX4/USCQwQrs/\nxd9dS0tLM2E1twXNOdXdtjV9hS4HGhrM6BC6QpZfiooCKCjEJ5WYgpPa3UGE\nyAC5zEHhPXhtB/HFOJERsCLYs+BVQHN2pejKgjKeDHwrH3mgzXPDn8k7TrGb\nw0J6P/6aNUWwOCPzKcPDhGi+AycSl1wQ3Nqn2vP9rRqQLIW8hwqjPSnv+/dy\na1Ha\r\n=FY51\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/density":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.6f678a91a.0_1614883192493_0.372503787974235","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/icon-button","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39d6f572a95e6fcd6cb786166ef15f7759beeb1b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f5f1b613c.0.tgz","fileCount":37,"integrity":"sha512-f6QRjHYwC9iMjmCDPCSrRsx42nFV3KDfdBHb7e8IDW+0nUwfUmGRSq5LCLQGmpg00GN4cmxeDWQW8+kr4hl/yg==","signatures":[{"sig":"MEUCIDdy/A/RX/yuzWtRhuumVLRsqd4PNlgV81e50Xq5tpTTAiEAyToMWw7/rU8ajL3LQJGcUKXMNaErqnaJZJgF+Z+mgpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfJCRA9TVsSAnZWagAAiJYP/0evQk3RAjxRwbE7Uadr\nZDMRc8gP4KcPj1MRFeQEzrq6KOacHouDX8Zvee0ZD3xG/+k4nuWlu+ThjVFy\nroHs02Vc/XUNET6tyi4fKYqco8/VfD2Kb80iKcoEcekIvWH2OlFCtysX8a7q\neLf8yPcbzIKqyL527hulIlvjgZt6vCGgc8AwH9oiQverKhOs41sFuak8vONT\n4Guyd6/tHxZ1pWfBe7VVH22GHPqUgbOVdM62txN3ObV07juKUi77dQfUOwVw\n8aHhokbvtZGPE5sdbz0Vlnzzrdp64UP0HR716Kx18AEyyAlexgUmxwwloTiz\n2dKoZSu/JrmTKqW8RJa9iQhXQow7jRIHJGc6J6Wa/QvA2fR0eD1kPBcQCGum\n/mVSYJHxeUG5ShpNFHC2y0cyzjNZTqcahtNGdWCDlZL3RdR+U5xV+naSnOvy\n8ycc/vcGXWVMaFf4d85/4lX6SaQaFWPEr2J+2eaqSk1T5gt5Z/8Jplfye9pz\nloBk9UUkoMyCdtcg6ukTYEFcr4DWvfiuyghCopwmweCLh38ipG2DlpDoTAjy\nbMSkClGaraImueIYOJf+HI3JTzjpLVJY/XO+3GOfPoF3LQPdSKPBtDKSpEUH\nFhI3rZUlmejBxK46cDq0rlTzV+QZ8oJTf3WRXJzxFKFSWeA2SxUQ+f64XqQG\ncjju\r\n=ajpu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/density":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f5f1b613c.0_1614890952502_0.706519781965965","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/icon-button","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdfb553a9b7a1e840baf4c81290260a79636df82","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.606e767ef.0.tgz","fileCount":37,"integrity":"sha512-teLXb+ZFjfXMbVTQx6dItFO5B3lN7o4ickHt3BNGsjkqAJVoSCogaqbs5PcxT1CLsFA5DTYlHuqdi6ybLIA0PQ==","signatures":[{"sig":"MEQCIFuXU5cpHdJ47r6BCcApn6dcIKytLI9ZiI+n//U7DoA7AiAhwpnE/VmiVjSqkFavm+CxeIcwxI8voigRuewjd4EanQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTqCRA9TVsSAnZWagAAwBQQAIdruOLVn1EGeL2IPKBV\nPGdr0TDKnVoMArJHJ9gIwU3GsWwhBmOHmGQTtkif26/TMLgvuBveOSu8kRzp\nAAHOL45Ukbh53U6IVFMj3Q3TH85E2hiytMZ8Mzw/euU26cXBRzGml2h6zj1D\nWpyexQjfLN/Vq832dt9WLsjOcP7plMJeq9NDj7bD3oWFbMyDab0L/Tzcflvc\n14WJwah5mLFBQRXhYalYRWcu00boqFxOfID6ZPXJ4FyDHs3vXLERgVeDJ/yY\nDttwjPd0e4csLjkL8LTZ2EW9Cquagx6iBRGL3HU4lFfmvk/KzmRGhB2nnlp7\n7aEPHud1blvorJ4DfxeMwOLlYKjLM+ZX/UH4nr+vYbMfBVIc1QJ85hpAaxBJ\n38+ifMo9V86e4xtmi54PNUGnx9z7qULpflszz1Dk4Rn16p3/WHOJcybXHnm0\n/BueNr+PWgNbMTfKpvo86Q4mRHcLUVUm08+t5zrxyQ/P3lJwuZeC+02g7kR2\nSgDQcH0YZItdSU6jQcH+i2/ew+BIcjRz1AAzR5ncd+dHjBgHn0NwJFpHuaeG\n7KQ7o3I6JZGvLL2z7Z2uQn6+HJYQI3Mx7ceQYJ/u9LQSExg3ILq9fmxGTMdF\n5T88qSAKr2vIUyGGu9xPvmQ/+ntn27CHYd63JjDaklHzppb2a6gPt+kk0Wpg\ni0BI\r\n=1Thi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/density":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.606e767ef.0_1614894314403_0.7508383314259122","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/icon-button","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa07d598ad120cbf8737e6f85b25584458221d01","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":37,"integrity":"sha512-/5pd1bFSN1rgiRo5JMzdKr5A9LuIh5z7DH33R4ZuRW7pHq/yu90dj3vCZ+ZYIjsq7wt5FzsIAhfY90Z4I6zHaw==","signatures":[{"sig":"MEUCIEZFcrpx9EqqCaRWmYRfKFt8ZaqXoMsEDE5hWmtleADoAiEA0NySGEbq0QtQD7sKfvWffK7J+wY6GPJgVt1oy/DQl1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQweRCRA9TVsSAnZWagAAsdAP/Rng8cBzqk8wKwGEhY+L\nQkv1xYzvD8zP+Ut/Ubzffpe96IlGLwFZije2VdYlIsB6NNzY7EJI5JmAn3Kp\nZB7pvnNcukPZrmuvJFJsBM4LNMfARQqaDnW5pTcwadBjD0yBhHf2ua4hoZ4Y\n+pGYEBKz5tUvr8tfCuzaRi+im4W81sR5Jt4vA/JCvpyfXwTvKDdLNzqkzAV4\njnnNK3U+usjJRmc1LD3ifKaTJpeND2FJXnviPI7C29amFKnhjo+W8C8nYdVv\n9qYZSxYaN5Lz/8Az4PedR+/iWNIZbw6rxZzL+pomTeej4TDT0YTWVugkOoST\neMkE2Dp83n6t8g5PwlcoAYpa3EiKAzou2TqlBrmwFJnrfsjWopVkQwg1bzSL\np7UjsprEzA/G3/aoX0N1xZebY2kk6grq8QNanyabbZGY5WNCfbDKG3zLdBKJ\nTTD7lkg/jJmj0dU5IRPrv83Z0jSKGW5ivWRUHhvCrUqA2qy4rUfwzkXPRHlK\nNsKMKmvvrZenataSvhRwan4M+oy9LqvbGrLfIuXCgoJKkEyiCEvG1UtFtTVe\nL1NnybljGoT1G+zALsRzpi3Tf41Jo4pe/xOv3NB/OUOxWwk1Di3vKgoVj9jO\nkr1u6cLqeVnnxH0s2H+Ps+XQT4XVb9UJHafxzGl8mr2kP4FNetG6q9kkU+Ub\nZMRs\r\n=mvgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/density":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f77a4dd1a.0_1615005585029_0.2827643995579616","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/icon-button","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bf01a41da1e4ac3dba91fc48d8d11345ac4c260","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":37,"integrity":"sha512-CIQMbbkm30esHETZjrsWiPwGq4TcYrtKRgJrGUawtFT1hWbWkQw4OBQ9IvrsWddYVyjBvPOu0U2lwOEo6hNKgQ==","signatures":[{"sig":"MEYCIQCwJcQ5UYgVYTKM5D9T7A4EuCBxrTw/PEHtwCb9bj5TggIhAIB2g0YO6fRm6KtAJstXLQjUrKpl1+U5Rrbtfv6iCFXD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqivCRA9TVsSAnZWagAAhmcP/0YJAtmhFiZtgKTL2xxl\n3Wvlrx894Ug+qaiIkeNjwpaK0zSjOjrOcgO0TtAlx68tVr6AlW1FHg5ZoAHg\nsKj6zKIHj0SQE5QJ5WABpZVdsJqo8grqAV27LInsh/6FoUWzDV2xMTkRFXzi\nVxYSTmlcB8aa7TjXIzWeV/zXAHMqYrBYQF/hYzDP+gOArualTf19KvAIbcyC\nDFBSfOHiW4xZtkFFnA/RPv6jGo0ZNg5Llr7oTjNVMutwvn3gScNLxu2kYpyI\ncuGY2X/bKX7IiQqMR0hH3Cylce3QnUQLb3ILO1UWojJlG1+YC7SVKVlVAhLX\nXx6yNUMHukskPGujoefeyz1ZHLRARYd1laktCmclYLGt/yfiEr0xlSycQcuW\nCymjDh5T3DQmrlqiwdpd79zFghTggIxnuu8JLYbikgemqFy4VMKReHA9tuA1\n7fZzT7xlf3h7EyUjApxmJ33EWbg4v4TP9Ax2Eey5iAzkOCxqdC9RPJcE4Bug\nOylmLDOOv/VaNYK2M7vjaQBhAEQrcEvdvTQnoICB5aGnbbiRvEiFfLhDnZUU\nq78qPpmPTeGIwki4NyNpCDYdqhIWtpMzbd3hPEpLnXXTHhSKmbwObGwJHNjV\n6WCwaIUiYm7VbQDCVI5ekHvvB1WpIv7jGbFj25lYL9IGgceuutEoW00MIklK\nuwRt\r\n=rHto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/density":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.2d6ba2c23.0_1615243438887_0.13777187459060025","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/icon-button","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e1342d36164f1e9619ef5b0104275991b9a8fa9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.7522dcaca.0.tgz","fileCount":37,"integrity":"sha512-dsiGvWo6WGGIgSBPc0T10Ya23hQ+eVhlWNG/tB6Yoww/IAAdTvN4LiNdF2Jj2qeo6smmdVsYvYQa57Tnui5T5w==","signatures":[{"sig":"MEQCIB2pL3vwY5Ce+lBG1xt7m7hExlOlDViXI3YlN1O8yy5yAiBr6rnFHBeJ5NV3f6aqeyCOdlYMZmkfi3c6CZQf20l7Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDrCRA9TVsSAnZWagAATiUQAJmAzBBWzOIfcfuefp8c\nzum2PiAoR9V4k/OSg25/0Qkilpw8W/sPv6kh8bvzSIYXCIeiPpRDTtxoyoTU\ngv76KsaTnqzyYxjuJ2DLXgbV0htmia9n7QOc2fKtt+QF57jklxgAsTse05AX\nn3QpGT6E98biweMvj7I9hwWrhOqpbu/U+3mnhz0d265Tm5hPwzFvLshMCysg\n2VnIKrSXhMZCsUvacTonbvsF9DqaoyqYb/0NHPizxsL+rgRaW4w5GpGNG6NJ\nu/lzUytroZvs6GvDWAJzPUXwvJEq53Lv47/k75v27WtZ7bQeq1/EXhlMudqT\nR2EySZpSvvC3jd02UpjcJbrPJmzoMLQnYqDL9/JQ9wUt1sbgozvWMEqd2Sb4\nveiGj3HKHXaTLACFvRBi13AjxCJ2Qe7fymOQKKbFgmzwRBEFZjeMbyAUaLMf\nBgspsoem9U2H5UtqCy50ieWMBh8/zbkAxJ8U3T7rxfgPUFpBbfCccy3LqoEz\nQsMZJm+fA1Tpq4/GTsx6FxScxv/ITkrDT/mEE7JhoB8I44QVPmT8L35YEcYz\n2tpwOur/pq2iIbuOT/EZJp9PJ/QIfK6pOSuzZQH12BUUqNKSXHwXsB6g6tM5\nHgpU/9jpG3RbrLXxrkJHKzBp+FCxTcaDOe45Uv4CYJp5vRrrPLuryX9TNB9u\ndJl/\r\n=2nSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/density":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.7522dcaca.0_1615249642707_0.28823836395055236","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/icon-button","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ff75339ff2a576b920bb63e0631cafec5a2f287","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.5c0ab7401.0.tgz","fileCount":37,"integrity":"sha512-KazhTHnqSOu9KeWKwxPVfZZU5iAjDpiiQZJPVf4yVFQw6O9s0ddnDvLgfiRK2RWlfoBOL4WybdrF/h7pDt91aQ==","signatures":[{"sig":"MEUCID1BgKcTHvvRXbo5W2TFE0T0Rg+zE0YHSqO0clnjK2rrAiEAnITU/QKuSviDQoxURmaYJI6yiCkOvideXIdP6RzYkwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/waCRA9TVsSAnZWagAAbA4P/RNh3Db+ko47a3xZLRru\nPk+UruqtwkIdomGRJGnA9U2KlssjfMqN8mopTsoPDZof0d1s+UL7XB/Px59O\nygxsZNnjPLGYKUdXeFOk7ijn8LLeJBPQmpbggUP3c9G8pl8xn4wNc+wHTWeW\nR2GqcPLs8dQaJkuHJSdbCxevhOuzKNcAsj0idrkhKpit9SNa2vKhMYmPMyNL\nxPZ8llub/0m1cO8XmeazWQk8QHI3NPXSZkR2tzkHbCX8m5NQRxfJvBr4v5nx\nt654/rTVQR4QOYrXHiZRs9pF6jVaAORlnGIx9jIYhiQJOhDvCl2Q9BWL4YVD\naTIKHE+9ULptHNd5Us8CkAmvuNoliEjLgJDNOl2EysM1eDkSTZbmjjXN+C4N\ns+p5po5T7eWc14Bm6UZTY7mejVNeeUBeX6GqVZ2m+QdybT240swlhkUeRDqG\nJn+39ZxkNzeawGD08SyZP0CbzgIDBm8hNOLc186opoGeiupK7/VIeZ+Ebl+5\n9aLHMo5DTkzRnkV2HHJNsc2jbTq7RxYEgk0qHWboqTrsYm7N4z920lB+IiQC\n53RuZOrjujPLdywLgdd+Ew6UPlkT/CwZhgLfWbv8cGPGxw9hDYht4ipcRigu\nL2sF5IvlBZeV5RRetRBr1Gkg2t9xT7PMGEN4Kh7O9BcdEHNBjb1oBwfM7QyQ\nb2mJ\r\n=fzsm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/density":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.5c0ab7401.0_1615330329935_0.9681459305492954","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/icon-button","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82e03c3f2fffa729507e1f16d2befbed752b0eb8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.59010b6dc.0.tgz","fileCount":37,"integrity":"sha512-uOfm6k4c+KDb/airExA8QnL+ZGPZHMIx/1rmrbYw1hjVM1/yWPB6QMu7OXyahNqK7FdfaSNKoQWlhB4ZEWm9Ww==","signatures":[{"sig":"MEQCIGt4ca2LQjtoPW6YZe4f6q4hcqnqxRjSA0Ii3x5pU4imAiAJCU1fz9M2jC/TkDlMTuRxlib6Qd1g1QVFAYL+XFwE/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpfCRA9TVsSAnZWagAAPH0P/1nVdJfOisRiVM1pDIbw\n5yG+marVSyruGSM2IGKXzpu/0Qn9P2dDhYEB0EUcGN295CZ2h5eZUkEeN+Lz\nYBi6ce3LheqBNUDThcFOnjQNkhvUv8eRm1OLukxB1Kp9gG9YdcPSM5eRiZl4\nmqzav0S5r+Q++fOspC1wwCw7ZSScjWumxpxrFw3e9d1arHvuFxhL4DveqNNy\n8lwA30YPqHi5cNK9pJ33M/JyKv5ANWfN8xuR5UFO24aDFR5xWUgVCTqP3Qrr\nG2qMZWrwwCBP7thYXv4qht/SJEZHoY0vOm2aJYeedp+6HSIldBGowJJG5kpZ\nfdIpaPuDi9vlFeyVCIjKneHdP+dDyfNJDVzkUy63ut+mO2FOJsIMUluwCu1H\nOUb6Ux2F38obXBKWZZS8bKJolYqDqruF34YZ0RfbKbJgAI/r4zMmqUf1B30U\nIkmc3LExhSskvo3eklFpk1qrxTz1o4F8M/rDX0x15aWfDMm2/MMMAXEi6Ylh\nsX+v9g+6LwfipyUUbZdNKrbnAzamfyc82FP9fpyuKUzYHM/4P/siIjt10uP0\nK+JcLbYw+EEul+AFogGAmEw+ZXHf9EErwqIArsze8sGzV2j8Sjng2BynX5Ss\nFgyLMsuG84+Pfkg0rmYEvoTVagMCyOUPY3zjQoxiiNKLlYGEzXvS6wM0RwtW\nbb9c\r\n=Ahb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/density":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.59010b6dc.0_1615395422962_0.6838126147959289","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/icon-button","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e79afb35fcd2d60bdec50d1b2dd77fc61013f5c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.9e52f5544.0.tgz","fileCount":37,"integrity":"sha512-nXQMtkN7CkL3YTj2OcHOUQc0CbKLMMIKwmXCWmACQVJFtjAvPOs21PKMcYZBnoDhOc/yM5JVDBAmNXFbJzYJxw==","signatures":[{"sig":"MEUCIQCas+Y1j9ZhC1yPEEaCVTXeeEeVG/7wb2a/UzqEHujiCQIgSvymeTNc81xJKESXv4yUQPBVah6eiyOX4LGUdSG7eFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVU9CRA9TVsSAnZWagAAQagP/RkBJQDhhVEAEc72UQGG\n0dA2WmQhr4zmqyq577pObXwaBoxhxor/iw/lUfddmUECIOpFcheV+M6Rqy04\no0Vl4j6FZuY9l4hnYyJ8BBSto016x3ClW26hYjA+A9XE30xSguIHVc1hkMuz\nRQdbF2MwO7rhIC2dV4kJNbWgaiGZKW+BzrwsIgtabuA1lllpSwSh8oeq/E1D\nX7tK7laIlUFK87zsokrNuJsMhC3RQkzzqUcOy0xp9wtZfxJtwgL542ookQKn\necqYJP7ov8+N1K3WkoAZ0+qauFQ/q3mbDpsIJIEJwX9+lmkBNBboWpm8mhUc\nG54z/DjC/k5Z5pqdS8JoEQMhJUOAGdx/Kv0MDqo98AM9ZxzGI+YTIjBKtwQc\nsI1nLGHBQx4JGNR4UthcHtXDXRLIethY+nl7LiA33tSnbsqFTIjpbbSgqIK4\nRrXjo5+07gQCK2CuZzekU2j1PMoDHuHwFv21F5rZeQUL/s5ocbagSiveQs9R\n6r1FMdnJAVqDmU/6PD9AqPIU6xCewWxn4CUSBIW64As8l6Kxk5FuiMVLZdzL\nMEpVeJ1tFndk+HSgeiDW3noD2ZFTi+AW3jIXUBZTM9+27nFB9q0iAcRxLNjw\niL2n3mo/C0HhSwS0LC7E0kVupcr8dRhIu7TY3qxWKUNQrwzbDqmRWHbnK7py\nXg2o\r\n=eEO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/density":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.9e52f5544.0_1615418685264_0.37633454662816024","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/icon-button","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e169d825c1985bf68cad4002448b61e95bbda3aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.a678806f5.0.tgz","fileCount":37,"integrity":"sha512-pLeSFhDi+iNTmzS3lAQ8O2v+sbyp3idGja9KiVPiyQs6yRFYBUdKLmn20ZYKxnXfpOL/Ncm6jAFXkYdtYk61Ew==","signatures":[{"sig":"MEYCIQDCsW/8uzKLbfnk3wVqEdSpR/BLpmgp+b8URIoZ9mQ7/QIhAPOSlhRI8wqX3DBboeOHXl2+6q3UcPDYJGhLaGWboPa9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXc3CRA9TVsSAnZWagAAGKQP/R0ooOmwsjiIdUKKrKQ3\nCfUslOKHWAKKt9ISt7sTDHL5P0H3R6tELVenNXCpQnGv2nH5ZFoL59cMalMa\nHGybwiojGSRpm1W8SWNFFmce5xoNvBborLkqrBxp1bUCE98Mj3qbeYfNCtBQ\niCJUwesQSsck9ZdSwtwXDJ4f8RFaILiOzW4S/A7EzYtV9ivOgUuWHFMLgMg4\nbxq/oRFeV3Vfy/k/kpSAOqujGR7vuU/lsadIJ5ZdxuhyxrL9HEmcw29Msdpb\n3hh0pw5KtfR5d9eGS62SpF4D9485Ffc94e8GF/cm0Ib0QFW9n2HOLXjcBakR\nQ5mNQbfvWQizozTjzjSjmS4FV/mhbFQc4jHgvI0mNWq2PSXaOPGnZFtrDoSD\niSM8HziBjkbsSH0/Z+wuJbS+QNDMk5n/Cxee9elbwuK1U0miAVMzaqsh1HzV\nJuJs/oNPD4TxH3cUD2NqyjBDKU52ZUyYHNv2/hfn9ReYa7QMttlHTvE2R77l\ndJ2pCm4oX8l3FDRmCUjKo3aYabTAzA+BNKKa5ewRH7jJvhPnnCWcsd+rke92\n0GH2U7kT/5U0wlhtnj026M2Jz+decLSVjxS29oGjS10l1VWfoEBuyn9dYSsY\nEkDFNc4AQEXzr9Cihgom4TbijR51gsaEFODLOWVTjClZmUQkqAKimf7PODIv\nu2UU\r\n=jXI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/density":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.a678806f5.0_1615427382435_0.23218153802211172","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/icon-button","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84ab169d543555d60d80f48add7b0cd896725b68","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.b2d22df5b.0.tgz","fileCount":37,"integrity":"sha512-1ewSyWyK+uyRzKi26gaucKWxiR34JEbkSDmVL8F8MVm3I9DtnCofkc3x1NZk5jmv0ObUkKXFumU5ZQu1cdD8gQ==","signatures":[{"sig":"MEUCIGWsc2ruYNAHnpnjzrbBncbeBnFpIHFMQPZ+d+WqoSKdAiEAmeVkQcb8RWW4+Dc4rg44nM62iCAE6FG35YJ3o+tnWAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0nCRA9TVsSAnZWagAA+mIP/RCbT8nL0IC/QIXXffGK\nLX2pqodghAX9AJrqS60YVkC+o9h3kc74ckWapf0CSSI/kIUSI38JHNnXoNoN\n3COwTGEIL+GqKpL+mwQL4DokKF1+pzlUboLHffy7AodqzmwmPgzY8IlSaafK\nm2yQqGrverf/oWk8HW73kau7bauALv+egsVPl3HnHmmzgwQqo0LiyJPmasdD\ntmhhHM8T63yIHONJIy8oRlEuv+KOM2y2X0xYm8L2hYo5X0LPVZ+NV8QFEN7a\ns68+sog7QlEDh8MBvzf3cvsIpoXPjwesLecWByPtS1PpFd7BIp4WNrbuv4SE\n/C8WcIPbv72AtvoydVxjthh5Oyt60zg7ISyrZUEyV3GRnOWDNaUmt3vM69nI\nJTPs7+bvJxu8HMTL4gUfl7U9cxekfEd87DFwqoOvPoe/6cJx7NaEbbvojLoC\nwEyaOelC1ig7Zm1zma7EFEfNU+FUNUjn/+OnP9JOPlQdYV/RZb7bo+HO4RB1\ny+fDRSFPiHYYQpKzaDOobpHgFycKKi4FzCdCmZaUToCi3bDpBb2+nvFrOG4v\nYqZfeYSf5QlPf4cq/1zRG22aTQnTE1+R8dSDVeaWaWT51MdHHyWi7pDYP/dS\n5N71wyNaDkM7dBVlWsm/hFFieT8s4xrMj/3MYhpdpFp9B/G2/6zmA3UWPBaJ\nH4nE\r\n=E9VM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/density":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.b2d22df5b.0_1615482151422_0.4165680198673112","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/icon-button","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"747306191b6c76c2e6aa6b438f666750f71ee500","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.81911b707.0.tgz","fileCount":37,"integrity":"sha512-09uT+YqhuAStf3m/suTZcNQWh7oeQ2oNBPtFCbhNM7QSLD4sGpiwQxgTcCBz25CVeg5MTlNGvZ4ZaAE1j70/qw==","signatures":[{"sig":"MEYCIQD7c+6IvEaFKVkDkG/grZ6BUgMHUIyIuvUvcrkH1d2JVgIhAOxZyWS/Ob6idScxON6NeVOHbIwo/Aa3kQM16O/nkVpH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAJCRA9TVsSAnZWagAA3TEQAKF2MT5DFKRGqqDFGqXi\n6BbW5bKoL1kNOgl2wCo0/tjKvKdyuIy/txu5j1QrLkDGoTVIiEY1W3duMWLP\n7CFWqnLhI6DYsYRa8LtoovKDz8vXYfr71mjw4b//j6yToKBpj21IFnc2Baxr\nZCh2fdjJtsZgjitNni4Rb+ayb/IPkJGVhWkgdcXngCQsG+jWhsY2PR7yxOUv\n18Pr4Bg9b1jZgA7fL6xQdfdxmXpWUEmTxMCKD3Zja3ZfGSkznb/sI+6Ni3Wx\nVPtx4uINcl5I2oZKwN9c0iGSTofwfM5leafojE1Mrg7DnYrm+1m6tebjTSGf\n76k+yURljYpwuJ+UVcrpiF8lsJy1dT+Vbi03wyre1BY9U/rLu0LZKHMYyoaD\nHR5gACgMHqKKrpSLleZgvNkSMfJfCce8Nc2XtnF1rzOXlG7skF3+lWSbRe4W\n80yJJ8Gd2x+5QUSQG2+Z5nf9oEiSBLyFqCUCKrU1zLQJabBqIWo+FSzESBPs\nIUJgbbfA/SVfSJIsWaRGu/Cx7IvB0mrZQoQXN5dUm6QW0PUNSI3PQrdmkrtx\nx2Wu4PmWpmUq2BbCigp93J+ZybhxBMRpMZ+9CKkJLcPNyMEtQjiqSXG9gCmI\nz9P9DmVaHr2HBw2VRHawMN2yP6JzojfSKAGtTpQ7IIFUWjBQ8d4oWf4/M1BK\nBAt0\r\n=s+x4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/density":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.81911b707.0_1615486984965_0.11198242086252486","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/icon-button","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03939fcd5ea6536ace245497303a40af0bfb085","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.9eeb35c38.0.tgz","fileCount":37,"integrity":"sha512-5QwmejzLBLpE6X9hhtwQDHO3OoCn6swbPewXhr2z9B9YCiSVn5jEfGUxKQkVl9Itqs2OciSfxra/kBmb/XPR/w==","signatures":[{"sig":"MEUCIQDhKzyqqSJb8VM8wGwpQhJN/lSHH3hUD4EA1eReND/J9gIgCP0yfOsPDUGJfG1B5py39/unEbjnWjFRzkxwz0GVVZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFFCRA9TVsSAnZWagAAcGAQAI7zLGtYuJj8QFRZWiJ6\n4P4gAMnwHX8us5apkmJuEtn7a91F4t2/BxDRjmgaP8XZ4wbDzQXVvpZg5inY\n2bX/v4+sV73Rd1zWh0xFMgFWA0fDhMK13uUWKAZ9n38COLWdxYukYoaxspVC\n1M5h/w7l5wlR+oKiDJtgZG/0dtyl5m8mDh71uTZBd1R/c0NlYD6aHNeThQHN\n0NsDVobofOwmHdUqU/OFlVQ9mD7ugdPzTnvpDGSKzo9lE8yL1+iMP4DEFLIr\nV0gsD1clBL+AkUVJ2xFYkgoi2zamx6Etr/taDe9MC0a3gO364DhCXqgE80Gi\nA2aF37FJdO75WxawQSNaeaskltPw9mxz/4X/2VnvMo/9wcTodtzkeyi3t/rA\nACEHENl83hzeqEamBjmJYrIfLy+9gSe8p73TxDJ9b6anp37lDqo+68HduaXL\nu7WkK8QdVHscW8ImGljCMBUEYV+a9ZveRhfavYS/0IRJBSSwBTTJUycUFE0X\nQw+Nudf5ijqnoItBPQmEBbiyWTkMt8w7KpcFc2ACiMVzbd/tkDf/88rp0Wj5\nIe+8a/RcuSJJw3ktSaU3muWTllzITghRzEIYawGhIwxMxU9EjzStAX9ZKcx5\nlSodTXMlJxTYsxxjiCY2eNQvuNXANomXXO+n8n0m8bCzvIEmdlRXak5Qgp6k\nl6TQ\r\n=bBJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/density":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.9eeb35c38.0_1615491396830_0.014463046342473085","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/icon-button","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"983f65d21c2670527a4ea6b6092507508a3ec86e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.12be3e95a.0.tgz","fileCount":37,"integrity":"sha512-dDvpFWmIpMvmZtriWMVjhGU3lfbV6I/ib9eI3qHL+tuuVO64ulwFET/jTwckHxYyNORmpstM+Y7s+DxHShBCPg==","signatures":[{"sig":"MEYCIQDPS+Fmmr9LuEd1frA+B8esf6TQj/t9iudfUyY24m942QIhALuT0YFmhDq4CviYFlvVpBJ7e1OoboHg5vU1I5N5TA2n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncJCRA9TVsSAnZWagAAA7wP/33l3+3kn25reSR0SRj7\nwWctf/Z3UCiTQuBTIO+gq6N3fVXKwdXdk8pkhGt0uB6Cjp/3ew7X/u7ijDnp\nkqwqx7VodKA/cEVYwftFoFeuUZidY5uPXUc0XDvgIsyOvOK5HMIHb1XVmmpW\ncIalqlA/v4qcs/hRWVhu2K1YkWdi7Ulh/Se2AwqCbt88sTOJhSunlLdL5tL8\n4Q6eMkC9BfV4SjbtgRzmqkkJLCxVqepUK7cDPgca9ofwViCtJNmafro2Fxoq\n91rgxxyZ1GfAhf2N+L8FYHxzN6k25VGoGkWY2fK5uQvp5Pji5W85dPUHcX6R\nfMpiAd76bABCmbMR2c6eDxV9pzm2F5soda/vu7MrDb4PNyaQNi2nGSiET3ba\nuUCdc3IL4vr/ZDCjEm91uIgr7yiCq6COPvPbaJ11FNEtj1kAZFl8ABewz2eL\n5+ngG0rPCSgy69j8ID5b1Vqkme3e4Gun/0TrtK1CEShHaCHwHBIADmf4SXf2\nZTdLLuhlhol5bdnyUXuAAifWO0aAk8alkrYONJSFj70MCl23KpmgViFnhY7o\nq71hA3/tvBqvTNXyNMzj5QvxtrNPzDBkdXIWRDUiEJhZdjTMO2+K8m+69Hyd\nPO6GkcmLKBELLcmymaIYuR4oCaO8aYLnh3i40AGDMm0q7Z1ReL5iGku1xA0j\nx+06\r\n=ZhUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/density":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.12be3e95a.0_1615492873055_0.3684372943017382","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/icon-button","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c16dc1a156fac1c9d9b36143d21d3c20a7d824d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.e683bdf4a.0.tgz","fileCount":37,"integrity":"sha512-xA6h86mn/yE6+Iwofia18EDSNzoQlXpteBZChiNKfQb05AxiapbPligdV6ulYV5/jICazWG8WV23wc1hgm1Xzw==","signatures":[{"sig":"MEUCIQCfuwKDTRiPJtVb46cIxlz3MvhwhNo3Td04ZYqOEFWFNgIgN57WLHZnlpsbiPPPbtoTUbGsJAqFc0eBudbahetvnKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjCCRA9TVsSAnZWagAANhwP/ArfFeuH24BIT3PN5gMB\nfU4Tg/imAaGlyLjnKEBsTEfAvJEMLRE7MsF/2zZdnPMVxNUYE4Jloi4VQrhI\nwd+V6V4pk6O9NABZkd6vniGE/CPofDKmVnT1ylvtayWcWVWr4Z/dGVj3dJMV\nSSgqeLFIBbGgubkNJ/TgZVkRC/8YEXBJZjrf7crTPZAwNe2i9dwJuISYwsTs\nrbOMah6Sf38AmDB0rlKZeYZDq8XxaOPUk9rM9nAw8vOUxFoolFV5JwMskWmB\nPZOG/jCE9hG05Pfp12QXBY7i4DUjqmz+kjY0g4yDKP0zBGcHj3iDdZviOHgI\nmiMmsXCUq5xSdCDJ5eH3xbu6DbSt8eiB3OMxYRqb2nqkMK/PkjjcqvwZfBY4\nURLxWsqsiTWyIRKzLSdJgXSfGS1Dor//Aiwfk+QSWdlABi1dwQbtCwjGA61F\nBULkfEk0Dko76wAAY/Ayx88JQ5kcYRUV65qkuJ9siQvNJuxOTryVsCkWqILN\ngWowU4DDm+WzdSodApFaHSOVFP1WJmoBemlNQGC2i++7Zgohu+vU1WcxAqsd\nku0xTzb9sSwNQoPef214ZqdA0mEo3XmnIdyS8yS/2JMhpSkC6A64kwtGsWZq\n9K+dZEPyf8oPc7UJIKT4jRODXuWIJ31K26xHhCBFqDl7+Ywy7ST9EHFmztm4\nZN6E\r\n=pUlE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/density":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.e683bdf4a.0_1615493314061_0.8038473854871846","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/icon-button","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e64d01569af7f0decc6619dbaad8ad928b3c4c6d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.a07b6d486.0.tgz","fileCount":37,"integrity":"sha512-k50t7Y99BXiTWD9C7rADGYPwxqYHOA0NjmsjJvf12yXFwe8lM5EgdbEMsCiarw6qjPRQ7Dc3K3DvC0hTCzY38A==","signatures":[{"sig":"MEYCIQCa+fPMKk22VRVzRgDhMv6kkD1J5D7vDZ4zHH2QIFon0QIhAKARuqvc9Jz8lZHThIlwSrvttpfhcHdK63u5kVLLRg7A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn53CRA9TVsSAnZWagAAKCUP/ArXffiFcFhYsCQYnHY9\nO3nO8cCKryJcJClWwbWxkOm77p/TswyYMCnQSBDjjem4OF7w0cliFiSvafbx\nEBV2P+PB3bmx2iouIMkaUdiWC/bHlM67MFJxoyd6cJNyZl1As6LwQ8JrtSlv\nqiGgo8J7vgMVjiET7CuveS/q9mNsnYIZHpKzpO6k5fF3oedXub+hyM9c8Obt\nCSN81/JJND4px5wTGhgvQ7FZ/bzezDIp1KUSTXMmedSH8luny2ujDSzlU6Oy\nW8c/QqqqHpbt0FjfRDOTUoHNOr9jDBd98i+ipca5+l4Gcn6IgH4DNjqNAblw\nwK4QWXY+pasKQKhP1QRieHksul0S+QJ1QTeQpK7+77cWrJUXOG0HAV8/naFc\n7GQClDfx5fGM0E5YNHS5BQNKgIAwjrG6J3V4yeJZX1KbKFypYDipJ70NtpQ1\n18H0aHoMjh7YPb3469iBaj3qwT7uw+cFW7cAs9er1HbKAl1JCAKM2llZ/SIK\nCwm6AJ6aB3b3XWMGRdb/qeqzKNOsUfR8v3NqKDjJ4sqBq9oeyY3cYfwhLy95\nIV6+ucP1Ptr/HpIo8baxi7tLDvq/EjwDi5u1/UT5Addg+UqgX3VDt5X7wRic\n6NL4nkN9l4spMoPl6dDTaNDTjb5c5QkKRK+g+yqn6is+xIELqrtc3U37TKyo\nMA+X\r\n=Bf0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/density":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.a07b6d486.0_1615494774830_0.465105307569347","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/icon-button","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1874b8562f2e631553b5cfe359f02c2b6d05360","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.1e0653477.0.tgz","fileCount":37,"integrity":"sha512-wdGOUUXFcZY355zUvMcVr6DM5pj5tbjAw5/t02mrTHSKXEG05xX2vtfV5FZRYGz4rThC8hDc8P1+ixlZho9Vog==","signatures":[{"sig":"MEUCIGfY1bmo6ePuKHgFzL4AYwy+lBgJga8HJSGPPaRGgqlSAiEApWky9EdW4KlrWUrQjgpgLDRwUnv4VpyrwFecrSOFkMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoAyCRA9TVsSAnZWagAAN3cP/2eVzsIJ0GKnzX5WDD0O\nn8ISrRp7+Pwym3dtRgi+Dlf6g4t3clgz73dMd1UTTPIa+j0/SlnHMPeQvHYl\nxv69iXqj4W62jkpORVN/Vf7+j5Icwwbsxcb8VgO1JnZwfPZ1hKAefgZUcsNp\nURx5QnGhrqse9RWhrLDNCWURY9HMtYb7cEZzhjwGABixUhNas9LXwPQOsmdz\nwBPiY8fYDVqelr+urQesGVU2Iyz4docT8alGBZeqW5G6Iod8BF6DI5Kd/ol0\nkKtWkXsTUkZ1MCjRtUOs+eqzI6iVmolRoqRZ2SZLfv4t/SSl1o8E+gaKGejf\nVc2oCXr3L0bEpLYdYhz8kbqUuwPbTlQxl8fcMapR4pZbPuZVn9oC+k+oegha\nRrsSM1sY3dZzCKPLZDKIsSQ4ns2w03Rvv8P6ofNXv8d9hRxIR4ws6gL6c+HB\nUPXk/QOzVwfhw2TXD37pFq/tuMeoZJm3SA3cjOByTncaLrB5/wnrGPeeKeUd\nJt8RnsXPZJss2xyCvHwgu9cjL58aVJRg9Gic3CVNOVNxLqaa4WvmRJMee50w\nzuQOl7PQlIudk+ZwzdCIAv0fE/xHENxadYvQwZ1UY0QGnYZJy6Rzk4H96kvh\nxckoZcNRdrw2wykjk2U4+HnevTcTKTJ40GInNi9oUmMixvrAvpj6Qpk2DYNv\nPdDm\r\n=b5Ns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/density":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.1e0653477.0_1615495218043_0.23851939767361552","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/icon-button","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfb65769381341f2585f623cf3248f9be64a6d5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.148e8cfcc.0.tgz","fileCount":37,"integrity":"sha512-eKVyHLXhEUaSXwuoR7puTK6Sh0RLyB3m+uKdmIuxyVhZekS4YSu/5XIOQhujKEEuJK7iBGyJGt4B9GN6cMrgHw==","signatures":[{"sig":"MEUCIQD+F5lMB7GcmUDChlMFCwWQGCq+pNgyJLyP0oq6+LjJFAIgHDVcMIsbabhYv2rx16QabXWDNbT9/gIVeOqTSUj4TyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0wCRA9TVsSAnZWagAAYAAP/0/pPOkcRwIrYnw6/1Qx\nBEjjyx/X4ScJW8Bdob3jZeAeWR/o1HhE8QEOssjKrLRfkiv67v9yyKEulahK\nTXWoNF2RtPjKmrmAjqGf2NDuSME5dyWcyUyzJJygpbUUU1sK2THOS7m1ZCjD\nzo7eiScFi0hm3PI7tvZsthEtQtDgjv+/CzXqMsVoDAaWcQh25QyFp4rkzwR+\nQt4g8pg0uCFNO3oglobYkDRfpC4wtjjFvY8IJx58xJoExO8EtGb1VPCd0DEb\nDMgbuZdIAKqH7Sj+KswINz7PJvMwE9F5C2knJxblrxLbJg4ZUlj6bARg5fKU\nHmPxKEDOEGUQmVf32FLZyYm1cB5HZUlTpRWTIm4yRwaJvwEXQpRm3cy7trO2\n8oRoomcsjPzqLUKg+5Ed/zqBS2iXxxF+zN0Uygd/BZvf0DB/fd5ylgNWRWFJ\nV8qxaHmpwEmaEvC8MqKwDPbRPSMvBP9FFduXp1Chxa9TEbzpTn7cFgMaEoxE\nMee8klKzCFd8YWV6Ho1nrfbNOuBv6yd97a6xEsbrRtIf7IBa5w6fCrjFTkhN\nGc2cEupHfju6kzJ32CeB30VOBn42OTBLvFVaAInlBElaZOuqzHh/CK6Gk0p5\nrK27Zo46UcTboXZNKRk4syjGW8g7GJjpx7DtRdNOS2O0m8kdRHlR3B/DDn/Z\nUGAk\r\n=msIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/density":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.148e8cfcc.0_1615502640158_0.044582017763544535","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/icon-button","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a71caeb2e7b2ad2c9c96c612c9312d9e6fc3d04","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.73a227194.0.tgz","fileCount":37,"integrity":"sha512-vebkd+mqckqO02ixuppgU/6NO9Dfp8fHg7FoGOgcGnLTqL166vYl9inbczIrd1kNocK4nLPQVqFpGB1y+CpKgw==","signatures":[{"sig":"MEUCIQCAy9PKI05VkNEgXqOwRo3+O0DEw95XrQMxpJ5qfthXkAIgHFR9zjt5eqOszVTdbt8Fhdl3ixjVdi9gDpIhXbCVUVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSRCRA9TVsSAnZWagAA4o8P/346f9EJirAH5+4dKzbi\ngRq1b7FeKCCaXPiqow8RAbGXRmfVwp8fV4RQNU36VIdFT9jCTqxUs7TONSl/\nplLoL6lscgZg7K9zY4q0aq2KUdPJjRW0Y8ptbQDnGqSdSW++nBn5HLiyWSve\nYiS8al/cyrx/kW3MmC/eOI8Gmj39SQO7tZ8P4PGMUM7v3iVvYdJk0an3N9Xj\nB8TzQlKM4U6d8GOa2XTwcOgGD4fYHRuH/ngGJ6ZKPnB4r3shOTtFDf9kzJ7O\nDoOJxCtSkFZ75kW5qYmAczT84+enyzMb5NzUtIxdnn1rClDv3rDybkTXzD4N\no5xF7Eb9X+ShRrAW027Lsj4Kf6bg7FhGivPfyhQRxb0vvJW74O7EA51RZlsM\n5KjhlUkBlvYVz3z4xe4zqZRTHgGf6/kTESrAJ8q55nLFvS6tbXwnD7HV1MT5\nMqpNs2UC37GFtFHQxDh3H/tfW4/0FFEFE7Oe1QEvm3EuvcxNt/UEDK9yyteB\nJgN4Hdh7dgQ8YtQFcAmZpvoq0Or0/Gnfu+sMbusnoabbp5srsKO3/dbXQJFp\nn5m69qamtyfx16nAYUszweCtgbJdx1aH8uvdOfXNFse42+X2tUs1rkghMCEl\nzdNHcTcHKvwUicXZ1PL0k55z/C0vB8rP7/zNL8cG0WKNYPS6c9FMjvJG2XLk\nFwom\r\n=QdYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/density":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.73a227194.0_1615508625118_0.6138978674823594","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/icon-button","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"139a3df5a5d042c684b6827a8a9ecc26b9f4db50","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f8579b7ea.0.tgz","fileCount":37,"integrity":"sha512-yLN+zmeSIMsQWdXxgpjmAvy4ec0sOpgb4JDnpa2BgwrVB5Wti6JcOrVEU8K1llCH/x6ZHSLj+6gTCE8KoVXc9w==","signatures":[{"sig":"MEYCIQDUWnr1j/hkzfnvJvD1G0XLoCS9yEfwMo0FdE2cOLLivAIhAPDFRFb7i2PhIwPBE75FBPrdet3odOYHZMSrCgnalAKK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1FCRA9TVsSAnZWagAAV60QAJupg7DwpqEEDC5OPdWm\nNNDwryitW72kUhAjBH1cWF6f0gBXwB9fnXh0S5U6OcGL5CBHU7q4zhcp++0U\nrV/ntZMG4CC6vG/kMOKBV/Cf79AqVBeajNXUqnFjU9k1gAkjYVox/DEKgH9x\ndkaRDV+bnXJvhok6uE9Zzmkul2+dsBsFAnilcUoQR52YivBXSNEYlThWDgvP\neKb4pwBbXP5maEeRH7sg0EiUBQX9sgVs+cwBkNqjmrBIkiM42JUx9nB8K5tv\ncmmeEEn84WhkmwJ3T5rCaaXtdL/JwfI0mfxHcRsvJtT1PpDTynHqfsePC9HI\nwBTclilhfdPr4egh0l9rHa2pAJrI2T9PcmsigCxbSK029FCEdppZzhDeJvy4\npAF7saB2FHmUn/Y9/YupN9xiG0IZQ0HSV2u8lE9FoIWSsgeU6F650LeEbPpx\nqztd3UUtNBNt6RH5LPMq49jCmVbGA/5B2Y1S2YjqE6TZU5anHiv3rv2CVDsM\nV3+z1e+jFKgDc5as6CNCbBvknufZ1R2ufNzxxLUdrMKzik4zvrtFc+ZVW33q\nzaypTM8zfoEEmnH//WKk3C0BzuAehNUFChE4lL3ubGr/R4FZKxb1a7ZfzI9H\nYritxP5Kxn0dT3c/nLYeX9iv+lKRrfo9bfwGYRNrthnHm64e7lWmvaQgxjo0\nSZ3r\r\n=qqK3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/density":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f8579b7ea.0_1615600965004_0.5076274406243064","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/icon-button","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a30ea47bc54cdb1ba8d5c2fbb71629d0e2018c8d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d2a39d300.0.tgz","fileCount":37,"integrity":"sha512-WRgJ6cFI69h71UC6m5hVDeQ8GRATMhy0pxDO2TvUWxwkcQCVmcidpuzqIVgN0b+4Gx9dkupIrVZE71l3guBhmQ==","signatures":[{"sig":"MEYCIQC/LBAz6ThjkGAQqu0NhxiXjHwOcunviocQJiTNz7p0VQIhAKtCEcEzBaJ+AOEdgy4x+Cgwpgg6RMaKhk6h5foX1ATD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0gCRA9TVsSAnZWagAAup0P/0kBaCHTWfSnC4qS7UDy\ntPUb+Ttez8kjXmxiG7DV+iQ9w7/jMLS2GiqP4YzcCyrze293EUqQ2hce6SMU\nyTnhepjnikv3s+EphYJZuaTdjGwEYSnby8nhdZHCJR0gbwB45EuajyUNmvMu\nHLpqfHM4Moq8AIk6Rqcmf/0VZ20AJU8QbhlvzekdvshoMONuJ0fbm8cCDMYy\n5oTIiLpyMr0xk4CGSC6o+CGYY5mJ7mJmxJzA0pHCh+nVCKRApxohziAocx8h\nciQuUM2+U2YvLjn00syigFG9DLekAOQsHVkxzuO0vdZKuT9BbwdvD8daHBxj\nXWuwvgNil63uApXRWSfez2M2JZFA84ybnBSbyFJYtxMN9vLbQxUyc+H3E+Hv\nxidOdv4bncofiFFnYcr069y5Sywa0C/sYW786HvmneHyi9CTGyouZsminA+i\n2ij64h3FIImoVgu6bYg7WwTVgvJZpTw0DdX9xxHIdkYir4qQVUqPvIn8XrRW\njAgTAIWARInrO+ikR3R65sJX1vUQCqs2jSmV25Jd0aTtyag7iTIva43WEZYG\nDgOFHBNwpoqteDYkQGT0z45CRy/RV96CY12C+WVzPhm3fi6/r5s8L3y74wFO\ny1RVV7XGQld0S2Ss84tH3yO22nEpxE2l0RWYcbfG9DU+jsJYub63Vh78U4fs\ntOjs\r\n=oGAS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/density":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d2a39d300.0_1615854879400_0.3629664022204069","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/icon-button","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43dfdba288d65603a5477316acc707be4d5ae2d6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.7cf67823e.0.tgz","fileCount":37,"integrity":"sha512-HQsGcTNlgWN5p+05YpyD1xa3eA/wxtJf0r+nxhz5r/XtPTGCytk1cXQPv0DKjDB07RVxodSLjl3Wm19byl/KUg==","signatures":[{"sig":"MEMCHxR0kZGFJ0mlweoRp/Cue32MDog9hVo31mZdSPxzkt8CIAf1cS6ua7tmJ69uX7sW2/iXlvt8jIba8rHLVN+R4WEM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbHCRA9TVsSAnZWagAANvUP/1AGzKURPo2vaRTGl+N9\nH6Xp6AIYUSFh/3hDZWkitK62TtpPToaqZ7hwYQWqesvidOV8NaK7COaq6KJd\n5DSvJnBFmrhy+mpg4C8J9iEjJ7AWjuGjElQ4iPT7CHj16PwQw5npCI8AB93f\nvniu+wUlItNW84h+c2VYzqvPvn33cTQJb+6SMh8WZqq1TwhaVqEubvRDL4G/\n54aQia3LPNsN7QtsiMyw/UFP4IfZmyO1h0gKyAN+ZcnanuTqFOXAxA3p9+Qj\nQDVb7fSdG9w7sP3tq63ygzyshfeOE1BCLPNprXvQ7PC6WXpT2SGtegefMNpD\nRta52HeihS+2MIfc8/bpPT7wWhgX3vZG1P0SRYIbArAHytlSyTxR3mJCfOjd\neQe2zMoGTB2Zmt8AXllqrcPrJDFUWdpDrqJ6Rkpw+eqPlB37NjDcfcV7UYwE\njFeJ8+R//itlqxVkjFuFth6CV7amJKuIcXmBrj42d0VEOc7WQ8CYr9091TYI\nmlM4+vm32Izg+g2/65Qrq84Wkt3V5hsKAcV9nYXfSWidJfm5V6f0RYdJVlbE\nXLhdM9P6SGZ3MEwCSXLhxi7E03gBKvV00gYrQrS25/ZidjVR8AO5a5KWIKyC\n/hYDU1dWtrX+dYyYe/fa+W0OtZhy0lPn7IyL2SinXLq9Q1fpVE93bz1vGXNv\nLtxY\r\n=sW8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/density":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.7cf67823e.0_1615918790794_0.9851748521119337","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/icon-button","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40a702c36f7df3c467e510c7487d8bf0c1fb977","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.67d780c79.0.tgz","fileCount":37,"integrity":"sha512-7kIdEAkICxeNGW0Xm2p2evFkebCj3HeCNKoji/fq6h3CQ4yDYn2zLrMaVBe1bo9SUjXyYI5I2Z1Gp/gPoEuxjw==","signatures":[{"sig":"MEYCIQCG3t9hjLUQWlMVtEXNuob5laKEFDlkIceFJqsrJrGcfQIhAN4wPxt+b0K/MUzfAaFVTTvaiezPWxePmMf2gdIl48+j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtRCRA9TVsSAnZWagAAhS0P/1L+Sk4vVKv1HE2TfeVr\nQ4ZRrYBtHf3+zDIMpq6hdm53LUvROoVprv1sHXcUfb3F6YyGQzm5ZKNDFp0a\nDswt9l1JtCIshjl4h0sELgT0BeJSgkxSv+mH6sRR/S9r9PmNkH9iX+b9DZcc\nMK9S0cXWajmfRxmEM5BYpybk0uEc6i4bOu6B/yEK+BEHiXEXFoXegEBpDwS+\n5mVkQUl15Vw1y+cHkWfpPq5SZ++eZJGueAdjbZ2vydVdVVokJQOE+ttHPLgW\nAckVwd9up6Uq3g05avyVzfasAILoN4TFD1OXpCxtnjhEWEKoh7ujE863vYS+\nemAHC2MQYHoazdZBPvOdMSPplxTxHWPySlFWB5rWnnk/5nfF3rKllVTrm8aj\nVoQHciUn/MntRI/hNKK+YNq8BnlO48uBhK50uhPr5mQbct/d/U2UmETDi0e7\n7DMTNYsVsWbnRW6dvWoAgpKykhYA0H85I8ICQU5fRk3bapGRgAWAIcp2Oi28\nImdBfaO/uUEDX7mikEjNDJbyQUQEzqJYB+WXBRJeCG/uw9AYAsZvf/T8Qb0z\nV6EJh7hocdX9pkLF4Zv+DoQQnbw4PiN0TwLRbpJh45x096El86Lr0qsVgbi9\neQ3yQ9YSrSNMDu4WPdrvWN1ZttPU6s9vjjKmEcLdVylKoD6if9vXAYJpjZFn\nU1/9\r\n=vHAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/density":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.67d780c79.0_1615924049078_0.11996881895728562","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/icon-button","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7d7d946fae047cfc5c276aca687e643f3c1ed3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0f358ddae.0.tgz","fileCount":37,"integrity":"sha512-XbOK1odXhN0k0JgcFvErJBxpajrU5Xmo8KOPxH8rqwR30FJpb7bLsDc+wb0+/vQK7dI+1NycfYgBG8nZWE32hA==","signatures":[{"sig":"MEQCIH9OhGH62a8zNL1qEngQ5nqzUvfSe9runE7pBkhqc5bHAiAYclMOG28GKDkUbpb6tcu2GeBNgmgSg0MuKyExGtYNxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS00CRA9TVsSAnZWagAA4YIQAJX8XLs2cHGG9mbo/4QN\nLlxwhx3T9Rlsr78DakSsyasVGMA9VRkw2jKqjOA9yeeCwRRu8URonqEHVieB\nfnLTc687llDXEd/G0zbGuaNOXfBPM7lXiYF+cjNZYgvCY+/mllyRYJGo9UfO\nuZSysu6B6EMl4p2Eq6ykS3V/7qbGE1IAHBq/XHzTqT7woWIFMbV6VnWuAl21\nmdgzKpz81QXReIKv/mcKMc88BkmogNHtc4PLyHu/GzIWkHlLG2LoNJNVcm8J\nKX94Bxnk3HwUtYw+JoHI5WVrPCiSUw0+l6C5WciBH/g3FAl8FdYUbX9jvwLM\nSoV3S3bkXWXJxbWwPAdsKuBXOxAOjGNp087kM9rHS6Lp0GpWx8P7cLT5yMW0\n7kakcuQXa5TCJoOIm/7Sg+hNcHheqiZvE4n+TJdoAqUrJPRkeg+LEm1WqCmK\nmi8act96ZNylhhTZM11fn8xm08P1GkAfr/XvzFpSuQU5z247JfmwPFQkclSi\nKBBIsjbh0FntP5wzAyWFBoGnAxN/K2r89q2mxqGitzYJ9wWGRl7dU3bJx9ZX\n8UOmDZiGRLqO4LGXa02K+9kS01NUgXciIydG79FtfRErj4HOdxCCEk+zYLCL\nhvFy9HbyjIIfrTL4L2U5ivlEIGXk2TXxBQR/XhtlUaCW59BXVgJw1z+mjGnT\nkIGL\r\n=q2ZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/density":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0f358ddae.0_1615932724279_0.6112143259157969","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/icon-button","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"194998bfc62ec0bbfdf95170f45bffa08060b5e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.67eb0df80.0.tgz","fileCount":37,"integrity":"sha512-HbiYMc0Ne87EkeXhcok5WwRmXFgijBUnFQI0Ahij2Td+MfGiAjktn+xLzwy9EZv1fXGAo8mfwEngk/rjbay8Jg==","signatures":[{"sig":"MEYCIQCeZotnjKZhUZuiD7EZzoEOe6f2lSa2HYM6yGH4YdvtcQIhAMlnJcbiL2/FhfhNo2Q61+kbU7YHF6+moZRbU6kALryv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOSCRA9TVsSAnZWagAAlpYP/0u+4qAUvJgx/agAwBa4\nNUKYmIqySa4H2eMqWCzyBc+seH+ec9XtrpLujPREjeFkgS71+UA2zPTTyCJP\nIckhCYj3JMqC0XX49Jm47kSLZY/MboORzvDhjJOUta80jk8zRtcKxIUDp9YJ\nUNl6sukbBE2TVqNvYIXAdFefbeZ9JYS0o/BHfVMKNX/zxVA4jZR4UqEMxbRF\nykmqv47ELDWKjBkDIr1uEJGmp8xkJADS4P7/3axZltUIFcwY3E2N1+oWbjcc\nmYfCA80EuBDw98ePHx0dQTbAlYi56EYPYDFaji3fZosKn7EceOcFyHP2vX86\n+6MYBKT2OeTTQKFEFpcJ9u1kIXsRmJD+VZn2D7wv6vLCz4fADEgQ8ln1tRuE\n3FOmjS4LkFaLFTNQRlWuYqqqBy5LKEiD54qx7LQdwyFJu24/acDXFob4reut\nrxRcBqcFc48Ns6Sd1URW+kCNLXKwHSFTq2L8nX5Chse+Wut89TrKUE8vcL39\ndmIR1L0Bz7NJdaGlJ2cYwnNr+BHvd0wApeFvoLS8fTq4fNXHf/TLxaVqqG0m\nEnoB+j6SCLEdmMl6PsuJNmV15piF6kV7JfOkNxKY/X73m1m3ymoqvD2BtwtR\nr2CvmP5n8kpNKF1jq08upieoczi/bmXLoCWFk7MThwUemYs9Fb+KLHhNlZ+b\nSbFJ\r\n=0oZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/density":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.67eb0df80.0_1615934354067_0.5722348048466468","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/icon-button","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77532a6bb1c65d4b9d8413d3a6954f61479f59bd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.941ca3b3c.0.tgz","fileCount":37,"integrity":"sha512-fsBIU0zzrQBBM5+ccg+KJf6S2FEkY5TOfRPznyLVMQSLYCKyZqYhLimdKKH5JU7M3oLzthULE1+73/H7dxBZqQ==","signatures":[{"sig":"MEUCIQDk6SIdpKPsNyV3Bl5ambzm/gtJmJ7jOlHoF3lDwz+GngIgMcTI7Ukzz7AKCxPdNjtGHaXXm2NLCk9c4KKPxPJ3AlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQBCRA9TVsSAnZWagAAHjUP/1iI/8O4e9WvEexskPJQ\nGwVV9uQXEL7gADe4xKPuRXkF03RkAGusSrjPv7WruEX9B+c1DRPWmHgxp2KU\nUjeg8jtoqVH7TQilO7AxeIBBD2HFJMyUC1dvz9aWmmU+gaVdRe19v4EuZor9\nlaY4Q4XlGycEcWQgkd0DODnBhQY8jaGKtuX986xMEZi10iNWR/YC3fy9xh4O\nm8qnC8VUWGDO28rUVm/xcs6UyLEw9M2qmSOhOXRfhm/Exn+0m6/YOA5MUaVx\nZBYyCwK1SKISDjaHtP9TiVtyWXHul8zgi0UQCm6O0s9eYGwBDIVSWldq5nK5\nT/rqISwlEY/LZempgHiSshgXkvb0g5IQIww7TR1+ZzrOhnY1WEKkacyTL36e\nrGHRERir94OLUwinulU50lEZIgRxh+ilNBf3mBREwv4ZeQAqArLdd6+viV1k\nv0KvsAu3rBfcIf5xGvsQ9TopXInfjMmlyum7KKage5FwdtmmycR6O8IpYzyH\novnGKmoM8DJ51gqNY9OWaCiKPg9SAXwmQ1PKs6w39jtDLVRmJqCLyiAri5y2\nNi9J4WwMbC05t5F+i2p38E7YGeGV3COQDpLcGStD9FncMuHhx4bHtYlP0Btz\nH5ap9ah9hVyml4/b3rn+VPnrhmO22Gjz6ZvJpoOaWbQq73+nEHQkWs+QIcoY\nxlhJ\r\n=1B/Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/density":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.941ca3b3c.0_1615934465381_0.7633733341336284","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/icon-button","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e75134687824eb92c8434f77fc129a2978100b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.3344d12ad.0.tgz","fileCount":37,"integrity":"sha512-oNbS1WsDe/XkJVjtQrMXQLFiofHipuLPVI22fFFg12DuepA6fn9A9GO9/QHlRTZa9/zDugrPFLYYWYcBs3jUfQ==","signatures":[{"sig":"MEUCIQDfGf6IRMRs3suBkG0PrVjtf7Z+MSzODs2UnS6Gr+0F+wIgEEsuEomefipDS7VWrqQzx0YXzBobUOkSIBR0GRJMgJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdN5CRA9TVsSAnZWagAAHz4P/3a5DPExG/W95+TXRzcH\nXgLL8cqSUwEPV4eSv5dgYhKJe8NHQBE02UzfKQsxlL3pAHvfT1FKAnTGwkkS\n4JWy4kQTjNznCi1MZThjxIdPFpV4amx/34a28a5lupsYVhQYu5sa8Jizq21W\n2fTTfgzINanjUBYQFYxB2EJOb+V3nJXFBvM19VbSECKfQx0Et7/MMpbjzhw5\nv8HUKPR4E3nT7xkPvSlBSl1WMNMmVqm5s2lnVdbOGl1imU7mrUyHvo8wOmoV\nKNKPG6OQXv9KE6svEn9b3sNZX7CTfD3ESkGJpEwLH5w1X4cXzhBehUDEvPAi\nzctuPc4qQD7wt+u0AgLSTsYAJSkB0Dkf4k8mASbXEcJhQChlx/IdjtIb3HLA\n8z1jxXh29RtWR7FCo/aqMe8Hxi3QtdwLLaMuyoWIeHYsT3kzqWk93xDgFscD\nZMcVXUKwG+q+KFnbTejFCefTYILPXMhx2l74yQoKWZ/vq+e3Xn2CAlFDvA3b\neXPBl7elfmJsXwSZ4zhu/S+vAPjcQKwBryeTaz4ZF2xFAfr3tarYlXf2+Kvj\nhe38t0agm/hTRRRkUaDYE2E2AHpqvl63PMK+KYCJ/a0b9WnRelDjznj2wl+o\ngirc1ipnNGYIrSdc9yGc1IJVzZG2uLTSthD/nodksYfKNvhuUvswENv0uJL8\ndELz\r\n=optP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/density":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.3344d12ad.0_1615975289464_0.28265681498597606","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/icon-button","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c838ee74d2dfd8c05fa71f60b2c71fd0ee595a38","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.6072ed604.0.tgz","fileCount":37,"integrity":"sha512-CwHjDlnR/zg4MvktngA70YH7NzB7ahGYKImrEmvynkn6nxETozJgVs6WKr9fEN7X4plV6s+xE10rs34xbD4oNw==","signatures":[{"sig":"MEQCIHyEY4N2gnf4s+ZEQIVnwTSKBGdaRILNCE0y2ROFu9n/AiA4dB2b3NUb8WLA3t3DNXJp/LgG6JVKco37O5LrutZ01w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonACRA9TVsSAnZWagAAPbYP/1kTA03cGdRcmA2tb4hq\nnV/KR+rqN0wKFG8H5PcF9c9TC9TSggBUt35K3XN0QzBIWpnlAwd6U13M1UHu\nVD6499Yj6YL8PoIMfyX3a+a4+PakWnjVbF+ueEaUX3xDIS4arcOpx/UeBDOf\n02YClEuxPu1XVC0jhEYzpoZU70JlSKKDRaMzXWOa6w4ABoN74f89bNqSpPbe\n7QE6f6tMWWxR6blbwQYan5TSD8Yta8e5V/tNbEuGCx4Ykb61OI4xr9ShFBYX\n+oEl37fceQI4dk7/nvSFoP8a8qZtNz7f0apjpCgsFlDqkGJ+4f/8ii0rSlJn\nKax2CB466lHW9Z8vyDNFNNBO00Sv4LVpFvV9nOSHu84UnoZCtGc0QIKqG5fV\nt4mAN/AaaqHzS0qbU1WbaF2waT/5jdR/71qRlkw1v5EEeNMAtK2R0xTzriGc\nqM5KCN3GMo5gLnllpjIvj+KQkpG+ejFrgDA2mV3+lvl58q5ccesdvZXV78cg\nkczCcrT1mCx+bzBdd26eiTaZXJVuKjQ6095wMJi4GMCaQpSeK7RH/sjG+VBl\nT+RGETN03iC0EwegpOBFNKCtFqSKupxCKBAk5IArmxbc26byRR4BUVJ5XT8s\ntOL5su57glk7NFmNfFICbIDMs7W+HmvaPtCx6WTtWAvudrMUpmuDOQTD4kGh\ngUxb\r\n=FjGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/density":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.6072ed604.0_1616021951852_0.6563867351661083","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/icon-button","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f0e84bd00301ee67abd47428dfa3a76505d784","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d3a6862af.0.tgz","fileCount":37,"integrity":"sha512-Sdkb9DZ3ycMo26Zkjt3gpQAL8HPueFVzN9zPq2VcZr8HYPvMx56ocrV2RO+UeZF6mIDbnK69FYE62X1Wci05xw==","signatures":[{"sig":"MEYCIQDktkbhzHk6NY5icGhkimEIIfPWjcCv6ffo5V4tU8NG2QIhAP7iGZa3HXlnskJJAamlasFEyEI9C9XujDm92koSCjzd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32dCRA9TVsSAnZWagAAu3cP/0spnOdpt0CD2zTbO0Pb\nGG3nomoRAaROZMWeiIWUOKU85QJf7zDKBNQL/E4aZOeFMXDYbuw6On5Hh3jC\nvVCsL7xBoZlpC8UjWEmJv0QYzNkIaWZGxh+68ddTicVBP5YQUxEu/J4T++sp\nvx0dywEo9UritjuE1iG6yR1bpuZR6UjJGUR3h0lUn79takzJIOOOekRNetLu\nKKVjT/dNttZHUHmcFZhe9ncMKj6/VJvZ1mKbR3pRRzIslBiNrl0YQoC3O4wR\nswPMu5Kvrmj6l7Ca8ibRkHEdJeWlDkOo30lcGqnHIKCwDrsGxxg6Z8Ti+/ZH\nCPCF4M1ciT8I1SrL7KbqGE8BW2XhW9ryqysBSMlta4YJg6Zmav0+gNQOt9tl\ndh26hwr1pENPWdQ2Yws3cCjFEebFQDMxIYAhf+DdmAbMzvzkN41muQwq82Yj\nw6DtzKm2/rDaDd/VpfTc1KvrRTwZkY/YmIXLkpr3XwkwRNZJLwLh92u6ARAV\nE353TwZxG1eDicpu4Smk8O/5SCgO4hnrZXYYy22zcTYXuYlXMXuwcsvJOWho\n0eGsBlDKYMT9K+3yH8E0qPIVpO+lo4dWTHDIiP/EZ7BjseIprpzSfeLyKNQs\nUQzh1x0ljzOKovv1SI8IDbtU0bObYdyfgeMtdxHUnxB5IAchBBhxI5HuTeM1\nRnNg\r\n=cac2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/density":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d3a6862af.0_1616084380472_0.029160380197909896","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/icon-button","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1ad04238760b494f931e2b9120429bd5ca7633","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.40dd242d5.0.tgz","fileCount":37,"integrity":"sha512-1sAxstDa7HMjyJysSOOtfYI1v2B5CMeqbkY2CMpHmJdv8Y4l3ij6Ua3m449Rj2gIg5kZbjeug2ZrKoUW3v7lWw==","signatures":[{"sig":"MEQCICNJgkx5sYkdTEwQiFaOVZeZx5Ozzx+z0DLXcwpkpqs/AiADGIioRRdLccin+7H7DCSyGq10gu4AvHFNXwrSVln7Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NKCRA9TVsSAnZWagAATsUP/0JyNNHtCtKBJtGp7dqE\nZDRRLpr9b+6lgW4yAEeIsacgMU9HhSG63RjPHOJjd4v0ABqgVKEh9TeTtSnO\nhePOR+Ws1GOM4c9eX8r5K8akFlEqibRWlDrUOaK+DIyj+A4HWsawjpWzPEjN\nhklcOaaOJ6v7PdeZCKcGgCdHBvJeR5IIB0ajxDeVHGCty/J+dwWrf22SB1rM\nXSg0Ij207fjjJ7wzilPCNQbtpXWTQQJjfEbbPhJUpXClXo+kAD8pSpulklDI\nVPxAMM5xoZ80OWGNTxpfQPS+1ass4DoijaggIhgXa9K21ZMrIESk+zgQtWdB\n1xc0ThIQmdq44igW4UeV9uq2N22Hj5pey0bOcb+U+iaDED9SuF3U7wilsxx9\nRHE+XfUryRxjTNh82QR1maViYITqVPNsodEvmYT5rHAecOztgEpMbVU1163Q\nFQLwa7k16PRGv4VFpXKhG5E8y++eQYZm0jbcWg6cMsl5Lks1ULt2O0xXyUD9\nKdJRkPTxSGvEj9L7b0bFeLZM9eCl9YV8HqU9CVEczcP5P+G1kyuiEDNBeVaE\ntay/LZksay6uACpILkVyQwjuedS4a7lE6MSl4dznRsU1x5fqea4kqudyye4l\nsLw2Q6186fhJowT2m71pGcRQzoptYih9LmD7d1skXLnWkGaX5yDwSSd4jyZ2\ngos6\r\n=lZib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/density":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.40dd242d5.0_1616102217774_0.5571925243422324","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/icon-button","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2192aa04d9f3ebdfe02a302f915e9381850d91a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.ec8f8465f.0.tgz","fileCount":37,"integrity":"sha512-hj6IrkGXXxRtLT1zTuT01lMavefVEwlGcjqXcK8gRmASNfDaTRLEVzm7vQRj2jP7PSI6S1oDBCln95inUDBz9w==","signatures":[{"sig":"MEUCIDRAM96eA3dXLxkimtHYFJLPchnm2Urfz1EXB11cDvDEAiEA2WhzcAhgg9Rn7ftkdO3xVasAPf86sHWV8lekqGapR6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8maCRA9TVsSAnZWagAAMQgP/0pU3YPQ4X56DUUvKm6W\nvIKKtb+QzfqdewGguFE2fVVQY6WDl9931UmSKC1H3gCEpAvvNFfW4lwpmPK9\n6jGdvdpXNCirGXdiNxM6FEfQU/Km/gImn5Z3nIy3toEmcQ+PeBraTe7GfZOI\nsCLnSZNfBnemoshvkoVixfu5TdQA5wKx2XxOvuMfptJfiEx8kSlQQm0BYc2j\nI87mImEK3L2hUA+uUEL+rIE3vLK3kAKJbcHmqFQSfMTKznuiqsul8wYZs5yP\npKWgsiIk6Zw4o20tbfUKgSswB4CFiyXxb2cWfpKj0+zZgLDrPaCksAhQSkD4\nmRe1LMMXrWds5rU6vBTJ9/6ewNoEYpiQf+tt0I3moebQy5ovbIq7hAUTDr6t\nRbdNtLIFJW9N+j7JqKuEEAHdrRVG3GI415T4sY+aoxJ4AOfC3i6MlAVSOW3e\nDfuo+NEjQWxjtQLbTT24n8PjDGl1nPo6Ili7RGgXYq0cYYPHlmcAF0GUnRYM\nkwJJQ8fK1jRQsd5JZub+mnXToRVGM76SpCVT1MNOWUAfsyFdAaSNiUqFA7L5\n+1DaMp25+Bwyp5WcL13xyiiJCRZ3NReQGCtCMGma9o1ML+sL4ERVfHJ1Tplb\nUPjBdcx+Z5UqYAWjjqTSUGYHDDXgna/UoAtGHj7Q1arz355wweb8vc/bRUor\n4/td\r\n=T2FS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/density":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.ec8f8465f.0_1616103834236_0.7453496527627637","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/icon-button","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66649b45982d145484ffae404ce835526b451eeb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.da38969ec.0.tgz","fileCount":37,"integrity":"sha512-B3Kp22FIgVUOxRFfvaBtaT5qR1s6+3u5pUdfzZMdYjMouBrUZqdVh7UK2tktor/hcrCMnJyv9+MIehdLiN4itw==","signatures":[{"sig":"MEUCIFyAoke+MKBH6PAJzAfTyTft0z/7EXZ2vvHwCU+KNCz/AiEAjZmjgqVyKbJP/QleQ6VPOHv2Pke5kFKEcUMj8V/Omug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9F9CRA9TVsSAnZWagAAmIkP/RyW/ifXcE8EmoSzmMU+\nG5s+Q2KqsT+Xzwo7CyDqdok1ntjWiLpNxgare3M3IXa9kMJ/mc5j9FtusA9P\nnHnZfr7Th7kCiX6PP1F07OuTGQ9NbhMsWSFEFNLyNvR1h0LCuEmJXsbDSRRO\nf2nY9CBXBqrH/UyyMTf51p2UdElIGex2Zn2IBc9KaxCOaCOfO4i0b0bdXIXa\nSLK1ki+fh2O61BoO48ox++vhhJCVxYI6GTppxY4/65Fu1QtVfeZ9+0Xk1zdy\ndy8bAIT0SajbLSZ497LDeoUbq1KLtHtdeEtUODWYFV7czlRA8TZiranwSDsY\nF7uDx0QoR0yEf3R6PD28V8ErHv0rDD3FI4jt364d6CA0ujfzYHU4sfapF4WT\n2X/OIYXtp7f0I9MqcbscCnGVkS2GHUefDECrMFLUf+IjQd2HtVc9KImU9XOC\nweDPkSEgLo5a+PbZ1yZs0R6WzXeE5zTfURNP0/GARiHBiZOjaIaMNT37XOjk\nNrRBHJCDyNr3oB2Mf8g4XWL6IjxTjc8kj08X85qke6j66+mUFodGn2H+NHpy\n7542Xvbc1X9E8ebqfCSlINNt2ndUZ8ho5TR57HxrM+m3YxcUOQFegR6FX3xt\nytXriUgO6pti6y35oVBaH4p1b8N8sFJeMGSuKXU53WZjeh0Ke/QdKyrj8tA0\nzKRl\r\n=4gQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/density":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.da38969ec.0_1616105852701_0.1783946537562715","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/icon-button","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827379233177215c37a601fb059a05b8c21d59f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f5246264d.0.tgz","fileCount":37,"integrity":"sha512-gG2K2aoNlzJS+bnAuw+6eN2nVf5Z7s8uhOMefChUJIeg7nuPyEfGez0EoFMoZF6fGstAoh086Ivw/pMb1+YJzA==","signatures":[{"sig":"MEUCIFGGr799AEq4je0LbUmC6VmmG9ibc6ywmiohhXq+JtUXAiEAop5hAXetV4MhS0z4Bo7ZJxxw/XL5z60kNHaZ4YzzNYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JRCRA9TVsSAnZWagAAOBYP/irE6+NL0ZDA4CGknxbE\nXijphsKuEQn3l0mA4YW28+QamExn379YhhhlvnYZyUu5dWBB64gtAyUz80rD\n4EVTTFuXyvdDRDHvTvygFvAqcLC7OK9wxloHU8azRip1St007GdfSRkOPS7Z\nryNLiuS+3JHjTW+5XgUeMcB0lxUkTjKNMClj4g+tEOKZrcmy4mHuGfVBtWYg\nqtfHAe+UY1tK8587WmD+8xHiWYTDMq29i2kCC/GS8d3XEpDppA/0irndEcrN\nl2zh3JM5k6ettN45A7qb2iktXrBc8oW/jLB++qM220Lntx0+Il5+f01OQppR\nf4w/DlYmsnDHR+pO86tTx8uW7z9j95BBdPblCXAS3lNG3zw6ZQyrzamcvop3\nkh+pt28MjJJ6J6VheH/lSD1OPlxEgjJS9xHv8f6fNBUUb6qwRTEPAsZj3mNS\nRJ4tsxpylfkooKp2Gg2oFTH9UAzSVHvyR2XPAYov8KcMQt5pOzhI2e6TCOD8\nmEDjLx8jb8l7kotZrhwydNivW88+zXKtOv4LBjZAeqdqODaxOMpelEIKBpxe\n8V0We9So2r95Q7gSlXGzOUX5LE7GjvlObveD4O5NXwqeJV2b4Xst9FhJxyrz\niWJjfqN/02eMcWgsL1nO3yUu2EyGQD/I3T8gRM5kYw84yfmqKAckrNIZKfwt\nAYMV\r\n=BaLt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/density":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f5246264d.0_1616114257261_0.3745392972776658","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/icon-button","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bf0763a3087e38af1939aea043c660b9a0fdec6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.03d34bbad.0.tgz","fileCount":37,"integrity":"sha512-tn+YKMmtF6R/m27hImWG3lDs33cDqrnWaY7Ah2Jmuh/tspFb5dyoqsyWPVsR6Ag2bKFLK4346xIsG1XzSsazRg==","signatures":[{"sig":"MEYCIQDvs98oUOYNj+eQ/dMZ0gRURmPj1u6dWB4nSSWvRJ8LbQIhALj03GZnWg9nh/i0W6/w3N7DhYGVN01S6X60r6jpHZui","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VtCRA9TVsSAnZWagAAm8oQAIVJbd+gcpU5lLkPIdyT\n4g21397UOYJzxoV8Bo+sc9OX0TLfBYMjmkwJWsNRWCtnPhbAXljDiDNub/6N\nlwiuSijNar9tQ9HOLJrUch1ghXyPsMPJU3IySYJfzTkY+UBKNqZnM3au9/jo\ncNiVYT+y3bRvHq0vPqa7wsctDADI7HAkJtotJprHf9cInOeRK1nhhpQx8lYK\ndsXqmxxKZ8BBlDOKM9bAd8pjkYTSPeT7zcz0dnnZny9s/liPmLU/kAqUc2Kb\n+RlE4ZxCT0NoyhjsNAsJxNRN0Tq1LsF3wDW/wlXjf9hbMQdN4fThGuhMZfQ/\nCSi+zGUbN/QqHkwJ9iDjXHpXTst5GO6lfOExKE9RKabErt9XpfHnDp45p2S9\nqrBNCPnwanP6IjZ4xe9jE3vuEQhccGP1jg5/CeqVvQCVDZkvTl61i2KoHjvt\n3opTanmg8URCOKn3Evy/AM1LbD5Z1+awKxJ9EuNfnAxa9gRo37/45qbCQDSi\n7yGcd5m3BVyLRfj/wt+P74ioYn6XqJIU7ixwM+5qKnswkoVAyWdxM+ikQfeS\nr406WaF9WXW8W87JrlbbDiYgTv8aaQLsk5r6Ao9h4KGvJjxBAnvD/vYRiYZD\nIILd526yv45nFj/Rw7FmOmJaISdZUhtvUj8HFHLnDPM2CWFm7iDs6T2nI/uF\nNxGN\r\n=Zxeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/density":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.03d34bbad.0_1616115052653_0.42366180389182384","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/icon-button","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25ccb123989bfb9f4d8a565377c92acd90e53e8b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.cbc57c600.0.tgz","fileCount":37,"integrity":"sha512-cX8m6h0H1mUnBi8D8x4ON99czfVWfQ8y3FjHmR/5gyQxIUBbYUoC8dUi8HQ3TD+KrVgxYaQh6Xhm5tsVKLDkJg==","signatures":[{"sig":"MEUCIH9mg5NqgCOxhfuHWqJ1QNEQAVuHaa6sqhwNPZsq27A5AiEAs18jIfqjlYE/wtE1M554jyDiedBlJZTkkjfZMulhGJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/duCRA9TVsSAnZWagAAViwP/iv7uEEckDCIjPu1HlXU\nmPBZV6wGT5RQZug40i7+QIZpxa+9aveSriHOeNUk74GbHHMOC3uhJEAlZoL0\nWZeX/q5yywdo02eEHHIFzoXKkVPBJvd8Pzcttam/aXSTM/T9s5yZgaKjZV3b\nDEuC9WUhtSZ90rNuqMbPjlAS1tV+XIpPHYabJC1W7CiaSRaO4rgEGluhlvhl\n7IKFlDlA81sDEuOlVNyCctsiAA2ao0Yx3jfAT4qzQklB0WbYyAadcBw4Qrso\ndTgclNsIc9bAUN8xMbig5gRBsPpV5ujF9FpB27qyF6Cm+SDcpPOPqRuEggT9\nSb7HO5RdzhTZiuMgwwLKrgE6cCPzmJY+Hwke04pZ+V8u9Y2w7hIDIpJ2WL8c\naebSs0x0YKMWASqrrhKawGIUSMSuyfTG7h42Eb6MB99mnFUoz11j5ex7+9VZ\n3ATs/NUPpqokH2gjZE5k9UMrwp4vL6CUKhE1hD92CNKqy3Owc86X3IpUnGb/\nqsPfGuR7kNm8XUQY+TWCq+FjG29ZOluJ5jjiZxMoc84ZVqANOFTA3nxn9/Jg\nbpikyX+nLEWBCm9xBDgeY+IIejVLTOkGXk11TF8dsVGIwrHo2fOKwV8UQjRw\n5dSF8DY/vUSifx51kCSliS9MbyfkZeCngC3i9ImCdIsWKKOFPxh/K43NNkpZ\n8O4v\r\n=YcQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/density":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.cbc57c600.0_1616115566386_0.19089917353277874","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/icon-button","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e441254497514f1720d486ab83fb346e2bfd271","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":37,"integrity":"sha512-VNJI4eHOsKxDxw87oO8e2Z+a9sQlbIKDJLX5nFom1e6kDejfqPVFDMmA3V9YVXppR6K/XJ3HeOOFXrzeZgR3eA==","signatures":[{"sig":"MEUCIQDi2eKWKSl4Qwu+0qcYsdnN3EoW+1A7llP+Qv1mB9cDQwIgKi2CWiC1UafJcKNjHKj6Vd0FDohLJLjfxXOaLS0omiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/peCRA9TVsSAnZWagAAtoAQAI8a+JMvn/9lrQ6osYtM\nhC3ckmc/whgnJ1yCaz82TmlvzxQodHbEer9NwtWEBNGXyI1czWC9hRqb9dxY\nMArqHil1SDaBncyveUZe2XLo6jPuVpj/+k7wBQa8iK+QRy5kiua1Wj4nEnKS\nHBU1UdWTHTdxzTMjfDy91x28fWE01Ja18/N0nXf5/VhljMq9527Hd4qKearG\nnrrmW3n/2P+80WRzLwBzhviVi3emnmpEnwG+V6cMvVdvlFfkvSFjrD8ztZ2s\nyvweZuoKA+AucpII7KU+xPOFnwEHUSFr+7NxZqGL4HIWK5zOJNrvgKDWPTc7\n+7vmMXzE8Qi63l2cpbr9IlM/TtR7+6XoBo4714NplMmj+1VNqCyS6/BaGB3C\nFXE8+hS857SosXSR9p4pqQkWC6YS5nDd8kVoxskb111VFtsfkOLTzIMY9All\nIY47fj7lYOeGfwX8FmtVWlkUD/w0M+gFL4vpUmj/gAFQUrzaDQOF7O8IYR8z\nWQiTjFABXnM67GU/BSSsyIPv1sRoAfU0kIqOSR5ZLNqD0qF1IJBb1bnnlLpu\n4gWt5nFVjzT9H8ROrog2M3uqRUwXietEfXwMp3fe5esypmyCqhpT5i9ZEEQg\nDwcK4/nHpa83kGqvq7i6/KtKGFspZxPxEKI4/y5jXc/9t0zwIjhslQ69KiED\nbdc2\r\n=kBZC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/density":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.d6c5bcf37.0_1616116317640_0.8190119730311016","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/icon-button","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d3160ddb1b57d7a00ab2274975626bc44aea991","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.fefc668d7.0.tgz","fileCount":37,"integrity":"sha512-O5tjNOWAPOhD4l2KqfQOHspFfhPy+gpjd4d9qkeAniwjl7NxcGzUufAghRuJ3dlPABEHA3feT/MDUbn6/BQFWw==","signatures":[{"sig":"MEUCIG6DWhXd1Ik47rf8VdWX0qkNW2Tr/lSg9dZkV/iNV7+yAiEAuFQiI+feZkqL83wQzaPlhXhmDd0EwmezB+pNR7UgevM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9rCRA9TVsSAnZWagAAe7gP/0X473Yj7F3y1uRxLAcG\npp53+dN235hd8mIqKqL2ZeAamKyBcNsbkaAONY+oyjlC7e0H5EqmaSFx4KFW\nxJUquTTilvyDxLRkLjOfBwJoLSSxBX1h9uVso487h1o5IAviA8j6lXo/oCPT\nK2DAVB0U28D7942iY/X9EBMIRGh1lb6DitOCj4LTVs64xJgP+sAjUUDytEs5\ngk7264gCJSmM59Ru4RBggyzgfjvLVS4IuqmVHJMkQa2ib2bwGs6W+8JdB2xB\nkYRwaz/ZxaRfj03c0op0xoQGx3/9vIgbcwBCFBEKACyHD5m2v8WZ/4PYzlvi\n2xv05OpTJjEySSbhMMbOmIiYW9qmF72DoQmOMUp8Y6gM+cm/AyOFqpzVY/lj\nmj0wOcs9CMPgJFvghNZg2sqUM+rBYueiJT3p44lwc18sIhni/PykPYGz9PVy\ndTTrh19sfiOZk6vRro///a4+aad3A5QUM4yJ4rHCSeHLziQ5v44386ePn4hN\n1fSkvgTJ67GmnXZf21QeaRviopA8+LD+LkolxXL3f6uTEnqzErzjWr25kGsl\n7rKzm7X4eP12ZHBeXvRaSXFEf43K7t9Z8c6nm2o3YZw9ztuAAJX0Oi+AhV9f\nNOX/Slr8phDs3MGpUXK2rmAw3kKqUykWJVivchFgTBrcAQHyKkoUsDFCZdBZ\nWTrA\r\n=T46K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/density":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.fefc668d7.0_1616117611186_0.2215963513939938","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/icon-button","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27d5a5901177021d588d480f598e5d5862aec935","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.faa7d3226.0.tgz","fileCount":37,"integrity":"sha512-mLeswy5yyzWDfeZw7LEC1A/nKDK+7B0tuaA3zowFUn/4CC+g704BM27EuoanJzE3i861DvjL78xHL9s4R+U8rA==","signatures":[{"sig":"MEUCIQDWYZeCXrWsDzBOZFK8JChEN/+M7LqNtqEhugf0PuH47QIgFtpu8F+2fenVF64lK3pHU49hQvqzX79UNW/46ApkAns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLMCRA9TVsSAnZWagAAjUYP/iGgGbx2s7BX89cKBZLN\nIf+bd5b5UO8iJ1XhcbHzVzqaq2xNEDbZD35HVPY3FmDgIy2eJymX6tfH5kQH\nsR/w6e0g2w33xJOLZ8ctuaWS0T75rczkhRF1mz4/wh3caCxC4YLLtFUKUNFu\nUcaWbPqyKYoe5XQLDPwAv/w0704cJge7NPh119ZmP5kQ+OQ9mKlUaEjpyOwH\nw2QsAaGHah3dz7HOyZV2Cj3QcPTVDI8MgbNMr22f+Z/w7W+HBVFwQaik9Qv/\nrJzwGp1kQSmPTxifsLCE6kbPnFsByLkln9Fyh7FuW4Cnsbt6slstLmoazG7P\noFudYZKyxX/yhW3tqhJKtk/YCGy5GiNjhszNYHOzvJ2ylJq4Gm5vstsEZtOH\nHWPoM3v05dk6Uu5dSU+b047p0iczMerVhAe1aMlztrRXXE+ySFTkxgNv781E\niGjDJ6fHWoNtKhreCnPdkL5z1ITsvhElbFAs8+I6o/HD04IMIkRMORDH0DhJ\neM/tvQbbGe106oEXVoVVS7O7hGcwgOHZ7abP846iCHZG6NqO4EBF9/9nxtMV\nX/WpoeEB76ZSKZ3LGWRgk66Gn/Abqi9oJkJIcpCTD27xRo7HtWnY87CCC/ZZ\nbbwFhMoAmSVX+vBeMo6Qg/7XtxP++u7Ym2s/gWKBAix0A4eJCafo/foxQdzQ\ncWIH\r\n=ih49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/density":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.faa7d3226.0_1616175819950_0.4571860027295058","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/icon-button","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29018a304135bffe69e777a3049d139902ab53f9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.c60449bc8.0.tgz","fileCount":37,"integrity":"sha512-+3hVx3EqfIbn1KQKholboC9EYf3ar0Rz9oR/tcENXKHDpmkLX48Ipq93jt2ThWy3ZgZVar9Oy2eJhbjHZvo95w==","signatures":[{"sig":"MEUCICILEklemaYNB37azLbAqjO+5L8+MuKlGv2kt/l9ToalAiEAvaq9nDPO6MMjhkO2vbgZ6VISvLCHx31ozWMQY22h3GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfDCRA9TVsSAnZWagAA3GYP/iQwphckQZA3uEwWvnCM\n9fAHLSmSC9IVwFR9z6lWc5fTc1ZuwptdkKK37SOAk6GIdpHh4M6GDZImC35B\n0MwAyqSEloMbZ43fnttAjqCGFntNCAVETfevLPhn/aIKAWz/ZmqzAbm68qp1\nOMWIjHXztmUS5XCa7bjgpATdHX9SqAI9obkZtsrCNxe0qLUucyb4sP6pRwnE\nVZQEgOZDUZXQuG633M0gHmiesHlwKN8OEbhIrIpAJvQocNw2ksut3oOBmMt5\nf1Dsb+yjENitqIBtV4D8va5d0RgsawHDUMPKV+8AebiSs2pYtkQUQRvb2uQl\nSRcCO/kAECMCX81rfrb4NaAmQw5JWbgT9cqRdMfxOmzhTM56HCYjd2jOMIyX\noaCFE6pbCSgCpHOywCmTatNhyLJ0WPifgvOPilJRaeGvwI9nZG8DmbSjABUP\n4ydCNpGHb6JRAVdvqbtzhVw9oWTbk2AGzep0WIqr8vW9+iLX8yVNpeKx0AEe\nA37Wyi2ruEZSpfVzbmTYN2KomS2BBDCSAnpATDrkhCMZ1soypYWJS83g0Mr1\n6DvQI8HFN4ySkqDiockYjmdtNJ6GlDegPhYcNT2Cy844nuipiXFRbFJhWG85\njOAy5zdpgqeVvdFxebK6Jt1VLbpX36H6UGsXZ1SenKjSX3qjHfsA1A97dXQk\nMEJ5\r\n=6aMN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/density":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.c60449bc8.0_1616177090654_0.99273546466685","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/icon-button","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"582cdd1a1978ce271900a7a0227b198fc9bef5a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.5f0fc444a.0.tgz","fileCount":37,"integrity":"sha512-6cle5d7xODAjSe8EqPCmmV5jPnEAsVLy131S3CU46Je/n7j1EUMU5UAn2JHccglVK5k260AAVgvFborMrqI1/g==","signatures":[{"sig":"MEUCIC5awFxMqAo6X9uUtctp1pDHz5vfJ2pnaFXruccoDMuzAiEApNLKGAtxtwXg7EvmX/E8oocaTEuKquY9pTsVq4sMHnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9kCRA9TVsSAnZWagAAWUoQAJMiMifx0OPg2VU3+Txp\nDcdW+MvWaRR1potEUAVfXpCy7Ga9av0FSc6XO8YvlGzL/VD/ubmcQ1p9Xr3K\n8t9rp1aZ6vEWO/GlRvGhjX89vH46Vc3V8Balwt+7AdvyEd9GF/REblArwG9R\nxxfIyh82dldcJ3zWsVa7TV7SzlLRC+/ZAHGSpGj63pV+A9O72VFcxKQKWJ+7\nd97VnsPIErsXJM2TBF2sVrk5uXuyfeZ4q8vQ3lyVmodc944xvQ/s0vwTDoie\nNxv+cJmg6wFLs3OfxEozWxTFRSYTs6iSpMbVnHUgvZK5gnL8hyrF1sxuvZyk\njcS/MycCGcRPG4e9iplxVabvEH3jRfxtiz6SOtdnp6siW3D+0GwAp8JYdskM\nLtJOKvN4+y0TORF8iGtksnoEdb4C+xsRAt9hdiDyGYHGTmVqt6VUXFuKQ8pW\nJt3tKPJGA/uajlMd3usdl4S1Yu95ZtyuqEJ8v70h7BqyPWTmTputSRFOjEKD\nOUnhRobHem9JVc2eXzFiPro8X/ppcc9+f8UoPD4h059ec32VQx3OIRzrMOeD\nLrh1BTLYKktWF5GFIGL1C2DzWaiQoRKl/Y9TYoYfptXocugo0VqVbZWcQvAj\nN3qHuDEE0wF5NIqFqhc8P4GQJpIFuJqJJzHTy7+JrXSni6RtInNGOjKWP6FP\ngl0u\r\n=7edE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/density":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.5f0fc444a.0_1616179043795_0.25284296297942577","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/icon-button","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5a535e9beccbc65b1123ecb597953d10da2d0d4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.4567a750d.0.tgz","fileCount":37,"integrity":"sha512-b8kzISKFBIpSdyKvfadtPX2TWCXJvwPu6jO6tCdU+AKNOg6knkXM0Ha88ig6BOgcqK/EF9syhRjYFERyEakpxA==","signatures":[{"sig":"MEUCIQD0FU9l1Jpt24ud3t6bbZcqX9BilEEN1UvnLJ49XuUvOAIgXrTYbOwW5tcbWbHCkI1k/xvvNiPYoCifNwm7IDlBBww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjgCRA9TVsSAnZWagAAPhsQAJ6IBBXK7/8IhuloMznC\nzeevPQYHYw2aI8o9FrWL6vkIrVvKdw6o6M2EJe7u0B1E8pDA3YgM63npL3IM\n4VYDWeD6ldjVj2+DMmZePgpvZrCpFUS33O7fdH/R2q4rn4Zxtjm1HYsDs3dC\nxc2ZXUQitqyKF4ivXRwAs7qe85/zDS2MPHRaEhEQZirus85kFv8h6J/sUEsa\nz8J3TZitMvM2St3LQubMGNq2k5kylVCKWqPPxQVsKOHPIK05UWvUV441n0Rq\ntKUGwxPE+zYcxLl3uw4Q7ZCmaLVqXgjWMkA/oaXpQtTO1bUHh5j2Ztx2lYy0\nAlyihiIh4PbVc2gs9eC+l0M+l/YQq2SV4BvbOd8czeW9qAOXv2d46wremwEu\nTLCR67dfVspqHFbrztBazOgj2hGoorXgOJxQn9suQQywU5tyF0sgkzncEkS8\nvyM73abfqkTFC2m58JSVK/Fhb0A8zJJdfGkwrvGEfw3+eRMzWk90ofG+lDei\nNzbfTPZiX6qqJA1eL2Hd5Z2R8m4Qb2+VOZM7BkSPyjZyomm1ouOO7+ZtNq52\nIJoM4MPZFGUoYjJ5Z+q49pViWmn2P+80BrmePxO9imcaPxZMaSlT9i0bkFs7\nVrkc6yoQvSIQg/uPEcCpdYlw9XPj5lxrcw8pGZCR/87+ozO3rarGA00TQLRf\nz6JV\r\n=R/55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/density":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.4567a750d.0_1616206047585_0.15921857445913457","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/icon-button","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d02b81e3d382a69647b0f683b7cad7559ab36c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0cde52f5a.0.tgz","fileCount":37,"integrity":"sha512-5WS454cVFBvb5jhGhu2y8+7+tLMpz7NrkJphBoXDq/BiNOoEzfGtRiVgREk+W1OrlK9TnK6S9BeSNCe5uTy60w==","signatures":[{"sig":"MEQCIFdAarCOACHSBFIwzYpLYi/MJ+sSe10nkOJ3Pq1PfA1xAiA1xBPsFuifm2k2fTPQwSBZ1D5Lw7hPjbu3OK15pwPKcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAXCRA9TVsSAnZWagAAhe8P/3LSOzJR03+4UkvD8A+0\n3XmAe0hjhblvco1bGxiqhEO4s0QUFSBAxJmqX/wQ7APQxXpleDbRRr0SxJBD\nrHi/ti8ItxlDQfSLXULCukLatxS1bdjZHf76iFU6zVS9tWpJoBV60XS+mQgS\nW01wrJr3B9AkR605Xw102D0ikaPd19MEkwfBt+m8NRPOkZr4OKeJKXDrJ85X\neALYFMBYVqM/zcYDdaxXGW9F3vqZc6KszJIgEctCmEM3mPOgw5sDqhrclPrj\niJrAOtZSahAKt70nNk6/4JR1UKvVwZsweZFT7j584kjFjj+SXSMwjaRMjUtS\nLsCPs4vonJoIbHVGYE3o/kKJcyMksax0+YiWEscMyWxbZIasY6r6aXuAYwuS\niMWKNYLKLhqfHIRvnZTcKauFx4t87l5UycSlFUfHPsSLAjuN+KNHTu3S5ZqH\nlxEqTDmszZ/YGh1lYJsq6ct3ldNFJkl0xlizpMpPOsmFJ8DHWGNrdGxltQ94\nBulsIKLXIVnXJFHr5vloaT/B/t9ngDpAeOAqAr9SEox9HxUY3pgAqPG+aba5\nGLgEJ4UsWsaGDCRZCkA7seEpPcDpU1wpNGCqtZ2nutqbpWYpgp3t3siWyOBi\n8ziNcSf3z/Zn3MxtitPtVIVzPyqOrebaztkvqiam4VISXv19TCE8pi95A0gh\nUwkp\r\n=t+M+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/density":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0cde52f5a.0_1616457751389_0.7892420610578428","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/icon-button","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3daf4075a516e860b47c94b29da3eeafe01daac8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.48f4b67fb.0.tgz","fileCount":37,"integrity":"sha512-Ey7p8Cnc1Dlrt7DzuOVQGyRUkM7y8568zXgSrVTc8ZYFufuMExr234R8KOrwXUT15b2z54HSvQEDuxZDbD1NEw==","signatures":[{"sig":"MEYCIQDSmM/CpWxIamm5YRHkmCKhrXXEZ0GR3QfB9m2t1R4PKwIhAMXtcP7Ngku4ZuJsoItdL+pQxSpQiQEQiW6yxXf7M9is","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdICRA9TVsSAnZWagAAzlEP+gJJwNYSg4ukgzMjUrXv\nANO0FaurfCreLdxyd+A0HOmSur1sgp+RcOzTRA2JJyydNkFIydnp1GehK0cF\nQXYzM7zK2msT5ngP5Kq4UuLgZuqf18V/5/+ayMoYoFe0v6lucV+RmVllZT1+\n2v6Srq0GPt3EbEqQocMgD5cyhhQUvJ1/H9KV3tXeMPpUT82YSINgUbr+9uqg\nacpQz556rpC/LktztFBqi6ufKLhaYkcc5eB1USNCuFK0taA2bwVWTPuPyXfm\nZdVYpwU8G/gX0PYhaPmtDyH0piiwxO5P5IdL5kFpq063wDuNWb3ie2zFkGgt\n8Ho050MMMzh8LMEf1dDRaM2xRVZ73e4NtNwJDq3lNvHjV0uFtxVD29lCjB5i\nHxNrRij+hlGgU9K5vUEgk/H2pmLO0s1gmPWuW+F4d5dTidb+AMc3gmsjTbKn\nJIlw1M32iT+CIHnmVPv2xjdvsZSLZ32K25AIXGGA5B4qsci54ssvVbyo8QXC\nmxzWd/yNmDeUFS21yoMK9N0U3LSsVoCiADkc29bJGM8+PyBT+LTI4/3p+kwI\nXyuqJxlea7vKe+vCwkVkyr3HlQnHlK6ceBUUlsakUU30gDo/ehFgAOkTt0eZ\nbriIcgavlO/t/ehBWNWtgzoSk7b1PtFsfItMLjStCkSo/NuhLm7zOOhP2Sa4\n5VK2\r\n=BO7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/density":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.48f4b67fb.0_1616529223640_0.1998225819214432","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/icon-button","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a3d2821a2c380ac3c04d536e150a52edd6b3419","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0b8cff734.0.tgz","fileCount":37,"integrity":"sha512-CGTTwpRqA7itpDmz3NE5pq7Puf0ygDZdFw0PH32XOtRTu5GU0jv43PCpeqW/YqCUe0JCGeDA0S/vtLMcw1ogDQ==","signatures":[{"sig":"MEUCIDGlTzKbjkbbkOABT0jFN8Oo1bRjkaS9d6jziybiBgemAiEAomVEvUGYMUjZqw0Qx0wQf2vi2OhByI5mmKdpzc9sQW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknDCRA9TVsSAnZWagAA/McQAJSoGp8ATd7JqwX078By\n9huFiaaokfUcRLAvdqWTCWhGyH4/AuzYPO6vAn6MGTwTc/dWLJBpKcb+oQHa\nlpliH1CUoaxRYbfa7shtcB5ifNcl+0dHlx9DAQIQFNk6BJ+l5iCNHZDKS+R3\nnuE//QoZADZ0pKqTDqWkbnbuHGmzmzmc+36rfnb3vK1EPj1eiBIZKW2hHfoe\nij006rkUFETWt2sGlgIYf06/0D33W+jHRtEiWwDhrfJb5y7H6pPOMRJKibLt\n4KLGWXYH0jUNarWqTcNgAnaNA723Cifhozjgxj5zzFcJETWaNbWXCkhjgCIC\nYhPgt2xQKLLQjrDMNBz86a5DbrOZCR9B5n3g1DnyKpBT4O5DoLqMRoFDUxH1\nuMdKMJXqdamOUfrZ5Fezn9Erafp7c4X0YCy4LTS1ZNBmPNwaRR4PN+CRmE57\nqg4eZelIdDB0ff+t8GM21uVk0t17f4Qa41F2+U6FHt789350QTY8Aycbewog\n5B812fJOhFnW3PiQyC7DhfxKmE4ze2AlSCjSQ2ug5oZQ/9p76pl9cqCTOTLf\nhPSC+pLbmWkC4ARHwjUNI2248pFaw8p7HqWxUun8OflQT5BUj986o25daLpv\nrVZhnpkpZ7DnZh7qXQud45iubP01H+W6ZmuXMLI0IVfbvof1OHqtUdlYcLXe\nWuhG\r\n=uTyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/density":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0b8cff734.0_1616529859353_0.9533427716050751","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/icon-button","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"412ae1a393195ba3b4f72f55fc588abcf0464390","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.8943b991f.0.tgz","fileCount":37,"integrity":"sha512-SdG+CS3FPoExPu2D8/SVFNX3F6f7r5O4mo09H5UXG843YSFYMwjeAye4qxUsHcvTOOu4KEAkmEQyU+swBIud/Q==","signatures":[{"sig":"MEQCIEsIQsTBieTsRl3UbpiM+lqjfePfhGcnRZaSKhcBeT/tAiAjvNWnlmcHThfvKSV7wQ9ndeSizsbg8Vpy7ieoLDx1Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+fCRA9TVsSAnZWagAA1+UP/1DUx5ybfDTMBS3wcfTR\nAgYHcHw4S7ZMh0IK/qp/51TP68D7Ab+wGcv2+wjVXGzdRIuAaiGw71Qjaxfx\njX04lFwq9R2ZNjOxk8/JE4dAn5yx7GLgIiCUp6Hng4GB6dYNvI1AyeMfZSHw\nFKfTRxz8/t+GwRHvcbc4jWqV570HUkZ1Twu2xdwUV0qmNn4OlTj/TEJVbx9Y\nJyumhPEZXqwiBwN2YoCpfSx+2zOxrtdZRrwEELl553EeXQVxnxXtHGWWyVwN\nWfHRx3SSWexroTe9JARrFSURZhQZVcEf/nPSl8jpwrufEzrp9LuLSFH57plz\na061U/h6lamwjNitKf++zTjOKEIqmVIL8LOtK1fXtPbVbu/wH+BxuZdOgF8K\nbmrLU+oN9a8zHjZFHHJ9MUeDG1lmHR9KQWPjjHXU2x4TNZAuUrrRF/C7XATs\nCBA+UTed6uclXTxN7ftpQTOuCTjzytMQW/qr6b2++ZeliBqrvWEQVwo7QiEc\nkFyOxYrK4caAvGhud1fSUKMIsldEwKgHSwW+kvxz6hCCCQst0jKzRNpCfmWt\ngXHvFlEsAdSq3BBcnptv1y4/qtrlgiWPk9J5t3L272+RgmiUmQHru/HGyYdN\nVxk5kWfWzud2ajMLg/Jp1YlhxGiLLI0mk/U3kOuQvBPCcz6niJx68Si3Kv1R\nsbBY\r\n=Whoy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/density":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.8943b991f.0_1616531358447_0.21458380351185635","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/icon-button","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2f8462996287b566bc6e8e206e9c57347bb94c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.3955d8d3d.0.tgz","fileCount":37,"integrity":"sha512-ff3EA9VqtQuEDPraf5lV5mVDSUGHhtH1ZcVtDmIIwU3+eoatVo61nZb8mbiMPGVGpCKkOs6TV6/1brDfmUFkdw==","signatures":[{"sig":"MEUCIEddlyL0E62bq4YuwdxFB5MDi5hDIqLuQouKbH255UMQAiEA0RnjXptFLXARMrqCYiyL0R70GA+k3f0vPmnqMlsKlPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/yCRA9TVsSAnZWagAA7+AP/Az9SZVGNwM1zdSH0BnB\nNsi6QHPmebJHCcyKRp56iZpfSv4lPN5UwgiDz1M774jH/HPaYqabptS1vZKn\npkZRbNbuEUYlI5eq6cGsWShIMWmHOBK7PsVlRnfOH7+3mooJKKeq7Y6R23k8\nCIsuV5u5Fjk0+BrvX3s8iXClk2DYJsv0bCGDGvrhjqxsglbKuHGiiXTJ0dJo\nSm+8YQbF1Y/sO+kI8XA6zziWYDLwIzXYEBpegrvU2JZpdQoDYgAgiWsUQUvv\nr8vVEIbZfkBfOjfcBINrER1kILaMfnLX+X9tbtHw/6aKx0BdLEy13Obu3eS9\nSxsjp1RI6kh2ztR0q3XI+TEiKgJx0cRSg1iqZNCpyRN77j2kO/f5x8Eccckt\nMGkzTIbDeD2abMb8ur5zy+Px/TMtb9BHTLapzF10/d4PNYmbyx8sImmPcxTA\niymiQAfnunQPZigvM7EZZJSfADwmec2wXqYrL2snNEb7he1jnEYk2f5VOIFZ\nTW6Uj4E0hwahL+KnAbUmEW63H6ce0nf6buEjab6mxZCVqsUJmZBACX0b1202\n4/izIRsPv2Q1mR6cRBXKcmc/rCkTdTfVtg1l2JRt1sp+GTgmh33luplK14EU\nHC9COaFUszHoWUre9uRe9VFdNxUvSZZI/1FOLKL+uQVFERoSCOxGiwlWnuj3\nCNQw\r\n=JK4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/density":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.3955d8d3d.0_1616613361886_0.5831892885487777","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/icon-button","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ced696ac4c81f73e91a30b20c47de9f53207378","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.23ea2d85e.0.tgz","fileCount":37,"integrity":"sha512-T7auft3tAX/yUeU10trK+cDO7VTvNqqIiBnkT4guLQeXUC/4/r4v8uFeHfUwRnieXs/+VIZ6oYdNchkLLdzyBg==","signatures":[{"sig":"MEQCIEEXCn9DHJ9eTm9B5h71CE0JpMGEKACACvjyn5mY+wJAAiBiGHXxbDMxfJ6o647mpqLsDkkd0tWBOasH3CeDSHWKFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMklCRA9TVsSAnZWagAAGvQP/jLAqucRRN+LJtwiAbj5\nxVzTo+PQFFLDoUvN61pLI74XvhOPX+sq6ENsNjlyF73unCFqT88OSw8l/w+8\nNQrcIboPeYk50YPatecVb5dGBj29SfXyBKWpiD54IMRcsFE9Kl6kTmN7kFpK\nT2OPNa71HWk7dvQduYNnxxyHZEdmdEiSy39yLQLxOCaXa/OYCDSjLBiB7dFo\n+LWN/Kt7leTNfRSav+2F7F8Qd57X+qAGWtgdKSZTIJmY0bTo/cK9nDoTi1a8\nFQoTCFonL6QWt9stCHbLM6gPkyrdGzfXTsHbqDwdkiftCEc3RgIaUp26owzQ\neZ7d62kaZ2/Q26tUXwHHljob7FbFOjplfed09wkN8FRgvFub5fI4TH/wB/IF\nprehZMXOivNFPjGFzuTYGRgB3PFXJcDz7I6+tIZ3/Hq/GJf8J1wejwtMXgiu\nSYHwyWVLgaacNQt6AImR8um2dxKbHMK6/zY1KsXH7VdtBtkEeFRAt8D3dJdL\nB0D+Gm/LMiC1cwxWYnxtt0DKX7NS6H0OaC77DPDl+GfQA7UCq/ZpV4qm/E4x\niLHUw1DKcdlF7ZG70yJUUzC8t9toACYOmzYOs2Ckm6GzsyVkQHtNs8G7QQdn\nea8LH6R2Q0q5o69cjMgSNgYBiGanXaf/UAe9xY7AWdCvStHmRjetKHUEsE7J\nYGV1\r\n=gitp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/density":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.23ea2d85e.0_1616693540542_0.14174984730281937","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/icon-button","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9960cc7e51478c049e1eff2ff79bd4ed6782cb6a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.e3ec22f45.0.tgz","fileCount":37,"integrity":"sha512-zq53TmQ5JdHNWDV7+fI1du9R5diARilg1WZ39YgyzZBOriA6SCDFGgBsOpMLav2hMpjvRNqssMZ5AC7UEaE8Pw==","signatures":[{"sig":"MEQCIDCodFUGXiZChaYfdVHSeYZmTUp7RUvANqUqJZazha19AiBm1ko+JQU66NdoSQksabQV3pZYdmuVS0kWGbHHiHAXJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6lCRA9TVsSAnZWagAAtsMP/RTqlj1N+UJLE0+27Ie9\ne2SCc+0lUA0U1IWAjNZeF4PvGiGi+f63ChCcBsHScYNauJdWE/je0NIzSFmW\nhd0JqiSE8++gsuRUBpnsUbvBPa5wUP0N5DMoHzYMu3nS6Cg5SHMxKRSIZjhE\nYaERmn2M64LbzgnVziFSvmLC4i9bxoc8Tzsb4BILb3t1JHAOhXO724Pj0/gn\nX1MdF7Xed8ZE7r+d5Qq4G16EzAE9p0KeEr1izTI0jOAiRU4ay+hbO0CrFSjz\nJFZBKhuwZxa07fbqDOxr6f4Vq7rLoa3RZSTHfnNal7E4Im76qclTIVLzIqtn\n8DqwsPQKRFxLGOzXCuR1OK8OCo/jVS7KVTlwJmMb6M/NOZXUpgnWeOF+eeVR\njWqvqlbg6WoQRgMcoc4wupt0uyvgS74Xucki1vA7H6IMK1zwHOWTpx578Jub\nX+vsFQNvvR3v+Bmrr8hXDUu8wSK2JqSlKPfGR0+4+ybT4VYYaJimrdj8XcA0\nhEtUp+u6Tjb/4JBOng/JZOZw2yQO/O7x6dWpnuEYZiL9TYlLNE/72IDihr+O\nYQcOTvAO5Kw9TLsh5h6w3GmQut0SmKGr6er0HsW2sfn5QtjzPv4uQUe9DskH\ngrSAqCR9G848aJKy2GCr6zjWvsZ43zEIo3iGg7Hx+A+7C/wuj3Rz8lCQvU18\nYbxr\r\n=WhEE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/density":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.e3ec22f45.0_1616694949271_0.7714930804395308","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/icon-button","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68ad7e20d4c7f9b2837d436f7543b5bc2d604768","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.4ceb42220.0.tgz","fileCount":37,"integrity":"sha512-RnO4pWmnU31biXhlntcrjyTv7oUOZDBx4IXbP+XylobSrqzKV7EWZgCT6by76iG+J3jIDCcC5N/Rlv4SQY21bA==","signatures":[{"sig":"MEYCIQD/XrmcDemwsUu7RWEzkk7eY1atgfuF3HBYpvkjVH8BYAIhAO8fHJXUdZKYqLUnmEBZAE5kHJMCmVGw6VZWqcisknPf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPTCRA9TVsSAnZWagAAe50P/2SFDnJeYCEyubcegQIa\nj6whlzNsK34SIAm6ZX/boN+DqOrKHLnro7mFyL+D+kpmfUNTw3W3VUY059ia\ngtklVrzL8ERir0lgDyhwOh+JNQRBX/gfq+PPyh4tWaYZyYIWW5OW5S/GX7+F\nwKPZp6d/Nq4QdedilH7Ogalqu8nRl90/cUyTv/hIHje8fq6h3YAmOdDO90M+\nvBD5TQ1fOYk+SWYDqv0mhwHkhHr01cPH7xSpSJj+T6EjmlDddgYeEOagUpb7\ncYOIL+FyG6chuHAklblqdhw5FWDEkvxbmxiSWW0l2yCqxMwqn5BTfkd2P9kn\nuUIxzDC+u6ObD/fqnG73qNy/E5OROACyUvq0pWHhaVGj6BMuO7ClMW0vMLav\n1F280AcxU3GyHEZu6gfmPO4q9XktF0Ek9IqI4HbEJv9P1x2pKoKPFR4VheL6\ncPwIsI358k8/5dIEU8gKxn3b/v3Vo9dXd8SE3sgQlMtPQFqnc1TUIpGcGuyt\nvq3rwA5I/P5LDbINM+I0w83ydTFc3JD6bBXVOiPRt1j04gIxrBSRfbpmacxm\nvN5xEL3mzUEh42nSE29E/WbFMqUeL9hqdpqYiDHfkXyz2sHMoEDqQH8thDbo\nNdkrT9WBK+EvzAAr0mMrYzMxKGTI0t4/JZrPtF8iKb3JQCTyxcrU4mpGN/qe\nMeAl\r\n=rBvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/density":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.4ceb42220.0_1616745426821_0.4051910744235945","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/icon-button","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8c13e687930ba74aaf18ef37deeee7f567fe659","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.dc9c84023.0.tgz","fileCount":37,"integrity":"sha512-H8Z3wZ8nRZBDLeCjqNBH2UB9U34o5qrB+Ls7E8qXQ4Yrq8bVs+aipCvsRHyuGzn4RfPhNoaseDC9kgdzoXmKZQ==","signatures":[{"sig":"MEQCIAQqbErEWUusftk11cCHIfOY2SX4K13m08Swu3XRaA5cAiA0NQcd/nBNK0PMSw1g3pYOBAj1GJC1Wm7dP1JeK0zIfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RjCRA9TVsSAnZWagAABroQAKAPjuUI0dc6/qXkmeY1\nLXTjPYhRD5l/rOr4jhkYaiuGEDaVNrrvIaHSlOQa8A5IvLaFhOJzXFkH9et7\nPztn4oX+/gUmCHpO7qWMSrLtRVbUtavl7a+XWoM/lsZ5d9NmzUhVjiBuWCrf\nuB5xMQLjBM2qvZ/D3zWjwCZmhj/ov1oz7ggIZl9Zc9y/aupvDDYw+5oukikk\n0vcF3Hcpc5S5vEflBl4UwZ6k2q996ozuvm3ovsTyqVdAtkEFR5xKuhH9CGts\npbb8Q8+coXvNjUA9alxROjz9uvmoFnOnKvVd5zQknR2+2XAxuttkzPe7yBCl\nuFbIQqm92CwnDC3+P1I8MHuHxfusTqHJIc9V3WQVgO0QLZT1gX88UbBBvIwk\nw3ruABLgBePC3swLDWJR7cLVrj37z5LN2aTS09V6MqvMz5ozA3Je3vRxQBBK\ns4XddPLUe8GkbqfWM0b6nf9m+MKVyerXwdj+0WrYNdp25QN6tAp7qQfFZKGg\n9W6w4IfjTJBzS7qAcRA4RxTsx843Z3VgpFX+A9/b3VgezRZfCDONZCu8jTRr\nOIgVJKHNwHNyGHAMEHQBnkBeDZAm3LqqldYh/hiMHMQRf5Qvxu9ju88+BfPg\nNPmBVU2p+6eYLC38mIBLLrn4HnLF9OxamXKqR8Xnzsmm+05KUrNCpiaUGXZ0\nYCZM\r\n=HIbg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/density":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.dc9c84023.0_1617126499493_0.5511438190407429","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/icon-button","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6ef7575b6e7bb4982251cba1c51233984aa8e5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.56fc26962.0.tgz","fileCount":37,"integrity":"sha512-LIZuU4BY1rQWBAudSmCar9AL7U1vjG5O2LnnIAk9w0DAMsynqvp+F+8wnuOeXanqrp/pgQ5/wLdtCrInB1rpMg==","signatures":[{"sig":"MEYCIQC+QxS5LTncLvwVKancqnEnCdZeCnaZpIqEY53XZ+TSLgIhAMdEqV7G0f9ChkVarXhKEo9KE9xozd0/6c49Yc94uXUO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BTCRA9TVsSAnZWagAA9kEP/i+uOLO3xilYuUQ1BHjZ\nlbStkkeOeBALBIdIKumkoVwgBDu6+ffc9sUuLkbvw4WV3QY1nOu0Ep9xz3sz\nZ26towa3JSXaUfLd/c7MkTpqi01gyj+EPjtIxNsOgOiuOYZfzNOkfGsKcpSE\nxKN8HK4nKBQfCGT3M05QMjYlHV6uOVrsaqKzwReshjf9xP3xW2oM6PndfXWx\nmiATI9oNeRgolL4CLtIt8AkXwlNM4fsljwKug7yDcnlef1DVyu6pKOWqkcGs\niBdlO7/Ai6nktGttit3wgcEGUbuJ71qFhAxbAU77PRsKBBk2PflqfdlwYXv5\nlhl3nZuzw5B/Xci3kJdBZZi04mG1cRm+WK9fE2X08QTwZaGi+EBMAtj/+6cJ\nr0OiTngsN12VdSHNa2iOYj2V2/hTbKfqEoFMuSIabKMBCJH4/1mWJcXUhxOA\nICgMeYw7SuwV9+PC+oTsiqkeFHVUEsUFxwQNcBYJYURUVwlWw65LCTjAUr7k\nFMfGqp2X34CF4AESfTCoxXMD97DUDCMgSkcymmBGP8TN9kabsT0R3c07INFs\nwBcB63sTCxp4UKDRhe/9xJlUX+Cd/HEhq0KMS1RC/aYseNGZPG2dszPM0Ga3\n4StoVye/i970vzXpMstp6rDqiuphk7agFWBJ4jA941e1kxp/37u/t9BZlheU\nT9p7\r\n=xrLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/density":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.56fc26962.0_1617150034623_0.5532596421030789","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/icon-button","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1509839fc453eb54dd79e53a0b29f6824e0b7155","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.bc318250e.0.tgz","fileCount":37,"integrity":"sha512-q4Z2C2fQmb0Tg9A/oDOFrD8eVkHbrFG6T1iahe6yk1u8BkdaC2DiX/BxpuT2wTKq0rqm9u6UKkLa7zbP/SGtCw==","signatures":[{"sig":"MEUCIQDVyTeBNF+zXP0SdhzPJRp5PkDdOXeekXrNUDHiIsfwfQIgKcNiJ+mqNUuyIHQ/RcF+Sgcll9GtQEQa8edvWtFMf6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FoCRA9TVsSAnZWagAAsJ8P/igWYCXiArGhkJvPyvpX\nh+RE/W+SWba8veVle8jobQBB8bfsnjil1EaleJs3wZYTrnrvSYOAkG2CYdd/\n/YOEVSdZBvdtRp/hsIK+0MQgHIfQJ5cmIH6ADLpZ640PJUzCrMvyGvTqEOsy\nXS/zB8KgaGlaQ1uORWgR6h8Dj8svzNkpq+nk6XXZGxM4fzEviZluETo7TrTJ\nBA+3fYN4ElhynT9McVfVbGJsxyWavNjviisXCCimlLmQkWuozxmymztZh5w8\nk0Mw0UcevfmqSSCElJfSdgxgRpnp6aJ0M/Ck6fB+oN8HJwb+FB8779Fa/Ux+\ncpjRZD/8mQGMUMfRhc9K+zts46pn00cTVz5b1Y+M0YHYVbEp5OINVeayuAyn\nCWv9YJ5Oq2aalbVciJRU2FwnA0czj7fl+lZtVOIqeGArQlhCrERWakpJQD7Z\nAz8qmZujzPNN7nwdfNWZra0VQ557+ArYbAQqaL3Rptx+tf3HguVJq1a1mIyY\nGImeFpyAkTaSQ5w51qdKL8FaEQS3HU4GXmfp/lRo6kv33RKw45r35gHOFmWe\n08YObHD0YL4OOpNFO56Av0wfhdx6LfBV75yQRiHDm9R8QDv+DUAKq0u5IkYq\nWLk8oONV4Uje14oiDC2jn2D7gWF9Up6M2KVk0SYMF16FVzpbSzh3WjtZd68z\niDcY\r\n=cvw+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/density":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.bc318250e.0_1617154407790_0.2929001299869922","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/icon-button","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d789c0d8fec6fc28acbee839cf258c96f9368cf1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.edaee19aa.0.tgz","fileCount":37,"integrity":"sha512-DSFnakwdmoRPd6WguyiC50KcZk28svS2p34cRXvvMtAJmLauC7QbMDnOBf3oksRXINKGVAksOILkgnapajld+w==","signatures":[{"sig":"MEYCIQCYpKtqH229e8/DQlTGuLwVXQU5gQpAruNT41SW7xdALwIhAOc+B/MqkBNFl0MGRvEOnblvvBHIUtm5+sxwCl5X/b5x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pOCRA9TVsSAnZWagAACOMP/ioftXuZv4/BFCnyahFk\nzO6cZZKVd0f4SxGiiGeBaOJQoJ24RNy+A6j1y+WEewtU8JykVlASAtT7MPr+\ndfGSol/lHlfMIMoONZSuo4bP75AMiPGllqv09Z47VhTOx9OQcVe1e1xFc4n3\nk50l5cV+Nct20+e/5PHSUxb0AU0tJArI09TfEyiJBo/St7YB6QHI2WWisO8y\nZG53IKh391uwySd9dM3eV/7LTM8vScEWtlcCyIkZKS0iUu6idgbtEOBlTsae\nXTFtLKrUjHfw5clQAHIFmHHajSuCXcd0hgDLudga3csjSbicT6Dx/18JYVh7\niN7WER+Tud4TD2AA4Upras7CUczZVK5ZyTM0qWvYWlyvfK+BDZvS44buRnby\nkQnUrA5i9iEo1jMR3aTGAXbj/sY8M+eiEI053whKkYg548hdD4I0xqFB9N6/\ns7ljIcnkgcZIjfKicq1U4bONwVUOKuZg/YOHCJ0zwebVhCLIsHdzp0/J+4DD\nHQpd7l/H6YJ80OH10RuwYtaGa5pw6mj6C86ebrL/g4mh4YOFp4n94X6WY/xu\njAIZzacjh5L8WBglN/xobCskvXSxOPDBHfhXVtdsm/j1Q6yZD3bH5vArhgEm\nfENIc4cjcncIKatZehkVOC8j73dmgujrQVXWmPMeBTWtMjk44fEqnH4MV4c/\nAKSD\r\n=JOGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/density":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.edaee19aa.0_1617156686410_0.25009344243563936","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/icon-button","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9d3d743143984e68b10d6506083c01b9c70c09f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.24609b822.0.tgz","fileCount":37,"integrity":"sha512-sF8/MpR7tu41jdJ0QcAlhSbYXCqR8bdHjH/9O9/aj9pm5ok+FdZE+GXTtyXXIop722NGKDs0cbY0e+B63+Xh9g==","signatures":[{"sig":"MEUCIQDo8trc7AOO2qtawX/cLAFOajyTzUoU26xqQ8RC7GXQZAIgfzmNBK8ia4geNyuyS/uuicSdFeKanpK77l5+btPBUjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIVCRA9TVsSAnZWagAAaiEP/3qpPlG7JGFhF5bVq+uV\nuqro1R3TcqpFaJ1I8bOnwPpYKZSAFR/jk+UB4oMzPbMvlRM49GfTZWvcgiia\nkMB9wCPpNs8/g6WSvGU4g8PERIf1eFpHx4LcyZGNiknSdcICBn6XQbr53EG/\ncG9FNMlmrS4fXoumx5kVRBMbyzjiBDFk1oE86hCH/3hk1Fl1iZRtySs69Chi\nS2itJV4flcOkW2JiQfiUrHw/xZ2Fln3xnPHTkepTEGcu0q/1dhH7KIuxKLiu\nJYjdAfw/ub5w19yFOW072fnENcyKtMNygD34ixDKnoqAMB89AcpT1qMilYU1\nWhD4AM+hfuuuR6fXHigOOc06+HODjbvAyjOyZyqIvw/dg81F/H0u/O2vijQg\ni/LBcIGC6A60fFniEGmJBrpWMClEOoFYxkT50W2haNXWQt99kqsdOrLpxPCh\nss/CuX2Z2t4yKbgilhxPrMuoATFsHCxNbDQuVnED2/07lF1NpPRfW3JuwCvC\ntqWkeVmGpYGF2q4FOntHgPIMsX+OVdvdJsjrIOlzPcJE4BHCUTAx2NgKyxxd\n966c+Sgqc3SRPlq9xhIY3xFJvWXVM/M8wAnkCR7edEUsvJ9vRUd5/wWL6At5\n2k5898wUtErxHchmUZPkOdG4x9CMoVMK96o3gg2EAEDyhX4jH3SqhmD6+ct2\nwkky\r\n=h5HH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/density":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.24609b822.0_1617224213479_0.36466063737435217","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/icon-button","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adca6bcb63825121477eed47af4788aa0aa60078","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":37,"integrity":"sha512-w0uIpzzfBuZDAQw8IaAIT7a+iAMZqvxAmFQCab4a6uCO1n6xSWHVZ0OdHyee7uxH2TfZO87DllVVJ9n23AUlow==","signatures":[{"sig":"MEYCIQCnStJePuY11x8nTYcmYDbfStLoiK4NzcBlR4w0zy7lvwIhAIfo4EUTUMUsoD5qSlTxfS0sqUSsSu4/nHJvkMb1lj6v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEYCRA9TVsSAnZWagAApPYP/0qxt9FG1BhLefXUwUxs\n9qKOx0ef8llEUIKcU0HprbPcaVeCke3ZLbXzZ9y5zbFsoDM1UGpYKg2ggU/u\n4sTEKAY0H5YzK+MBGQXAuo/rm9X6P24uUiXahi+4eHbBAL0bUijUnXYzcknX\nJH0+iZE9AsjKUpW6Sh8Xg89TVtBwZbqiGz5uw3sZSfH6E5LGu8z/SZmwSyee\nXiuj41tG6sVRc44DZ0+xOJ0ZU02MdMS/PrTduHg1KKn36sgYYYXMs6OsRGW8\nIT9qlB8tmMF2X0aIhF14JZDjI1uHk8z+lXAeb17SxXOPLsN/pKQPZ8dVaZ1C\nGhMYyq+z412ljwwdXivpfs6jr6v4tr1j3DEfj6AogXq81ZLYIcrBs6345uRA\nxXeyB55qj+LssEouqyCKWG/MAxhS7EamjIVEMWqaoGRMOsa7rbdQm6hui3kv\nW1xFCQtOmMx1b8OOsh/MMrgbNIjuC6NjJ/1D/6uQcsg8Clntgv3cyWEW1lSO\nAbUu9alyPx+naHyziwYdgKmJBM2U2/IXD0N9h8epQ4JHXUGWOiAcJ/22e0HT\nPmVInOxuyfIb+GZo0JAc3jQ188OixJQqZipdeWmQMhlaZ4Uqj25ug3z+Pvfw\nwWzPQs8jgIsxaHl9u2ryokxfXpSToR7cBu56+ktZhFJMVix3MKL6jgz4s/nf\nxGau\r\n=Fcrl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/density":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.b6cddc2b7.0_1617289495372_0.49355234789826663","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/icon-button","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2515426dcf0d528d0fa086a45964d95809ab010","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.94937c78c.0.tgz","fileCount":37,"integrity":"sha512-PVjEjus71Cjx7f5Qc23+h6Wfz4to3eHV86UXJWxNyl2HmOY4g7xqgnBpCdLYyLm9u3jNcwDPZdzHJoYznQFxvQ==","signatures":[{"sig":"MEYCIQC6ptxiiAt3whJ7jtDlnWPaov42cAvuksSm6IU3YHyPDgIhAJJGXNi0J9FSLtrtBFyJSkwyS0thJrWkvWPdPcky+sVw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjR1CRA9TVsSAnZWagAAr8MP+gNQvPWUWNbRPgq4Og8+\nqF+VDZGTlm5wkCJIqo8zUKgmaIhYcxRDOTl4vZUUxGA+XaaxJaDpnYSZMwUA\nd0oddpgxPmM7ma3urXhdp2N+qmbOaHXUrs9b/TNDPdxH2ee8U/GSnThgsTnp\n62YtWD5EL1RlEq4fI5uADM3B65rJYwaH7cbIm1WzRuAhN4rLQ+Q+sd+EKxnx\neQD4Q91lWyrFjrU81LspJC+WgOxJRrVwRvSYo2GDSpnjirIalkDyPVbhjJ8Y\nEUEqDcqcWOeYH+C4T/0qCFvWvntzijRXy/MLesyrl85lciFfqoWezPmiawO2\nMH/JIjMNDMT0TAWBs9REy03RiS6fbcsgtToKhShe7yCuOqbzDBbzrB+vYize\nOugThFB7a2KekJZqbkYHgrk84PDsppc52B+UqHyjF2X0asP3tdeBmj4BqHGh\ncdpgMV4VqpoZctmg8uelry8qcgfG8jnA46MCecrhhq2mgAKCAmuVR8KzhcoM\nSZFd/y8fMo/sNfW6Q9k5WMeRY4YpYVAip3yi0EJQCc7h6MJDDdsrNYMfoLFy\nBkHsnsCMnoaGjYgrdwW3qqiGWf1JzeAxBdFFA9Pqmo4FHwqHeO+hAshNHAod\nqujSYpZp88/s0hgdv0T1eHtpmeNXCjSINDgo8QEC54DqzGBfqQsT/9jKi2cU\nBq4o\r\n=Z1h8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/density":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.94937c78c.0_1617310837354_0.31989354325897956","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/icon-button","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04b70f036115af313f87adb9a49d2f1f763fb32","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.e7202cb57.0.tgz","fileCount":37,"integrity":"sha512-NfY0Pkk6gD43rR39Q2UTaqT8D+qW3qLv+YrJz7JtCZmL4Su0Lk/hzVOnu3vMWqdM4Remp7Fldx+I/toKciaAGA==","signatures":[{"sig":"MEUCIFID+mb/85X83kqXZJNW6Oc5obLC19QaiXslc76iuMCVAiEA7AMUMK2uuQ2DRZQVWSXeusN5miAf+OfGfLjLTYKpaUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1rCRA9TVsSAnZWagAAyqIQAJsGCuW+ZM6c6jxzfNMt\nuY4SPeUHUwednDUALRtCjvjGl0De0JrpQH61YOlF4Qk4UUk8cnmb8rN1pkGv\n4XEgLtKtIRo5qwozzGDC9PTphUa6j3ngy3xwVzKSMEohvwBZPhNzDjEEY01z\nveaw0KUPLAMQAztNSmuhTyFD3wTF3/cLHsHGtBx6klKspGTCaCvzv6hfd6jo\nclfq/4/WtHoiJ85X3QWJTyRcQV3MQA1MTL8iHBUosYAHs5bFkMc+duIKGr0W\nXRFOhDFEww6mrmlR1NRqA+ZyAs3bEjk/vGVwoHQbzJeD/x6t27wmHs/NAMxv\nDrhdCb6xFsLrzTnXsv6bAcj+0FUAVkKQV8gYpnVZdWNxz/DXuqod5YLQIh/E\nEBx2/8DamWcsdmPI5YB4t0hVXwGxqHTBVFx1Kq+IcFxidecy87sF921h0RlP\nS3q2eqj8ZdePqupJNst41HFeY7WV/5rKTbAzF2aB4aKOEyDAaKN60YKgWX2M\n9Fu1EgTuPns1qzQxPdmu41NBo2mtksHWsgn+oreguaPh/mpZKw6rHz4aqGih\nhohwbyoIm/Y4NQipatbpmb8VvIYtTTvjgHouZSZqpHiaC9P+GkkACihNn2jk\n2hDOCs3BtS7vUQHZnAIgiTTXFQuHWxrw8ZrKCUJyOj9pq0OVdE+fiWLnhUU6\nR08t\r\n=JlE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/density":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.e7202cb57.0_1617317226552_0.7859036190757165","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/icon-button","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc57e158ea0a31feb2c531832d0509e623863f0a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.1f636b205.0.tgz","fileCount":37,"integrity":"sha512-ggs7OtlBXwj84iWRalIFPjBWKrjscr7PSBV1CBkMIrigdFqlzdMtRC1jrloLPjd59Sy91tPJNZWMvzSjdThx+g==","signatures":[{"sig":"MEYCIQC3kJeT8IsF13UFyqRNFvFgL0PSrjhEQmetL7z1PO9dlQIhAPmZFMJmDl9rTll+u6kAqHZ6UsazrVhtTYNoKneAg0hG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5luCRA9TVsSAnZWagAAhX8QAKTJxK3hFiln/KU9W4aE\nRFuPUhchQLXWGZpw0Pa6yCj2NZhO3t1+5Q7cFELgnQy0w8CSoWsAjMSeokeT\n4MP2VxeNmqbVQtpYix4ujWt762UqscCha3qsGk21tHQ2DV91IxDLnC5tx8YI\nTAqNBkZZ5s4812PwHuk+/22TRBSVm2tXxPDMGywE0DCjulIwW5uDfY2TYgib\noPeQIFtJb62Wd5ngxPju2uPri2lrfBZvtXwNXzdfuL6jL3FfFbpd6GVqW++e\nfZ5sRagHTwbTLp7fGQrRtNpAppH8nkcus1Kj8h9nlqf9OlC7c9UNE9hCjVBw\nL4MHYJE6X3YAEAcYrc4zIXib78snn2hxXf5DqXHpbSutMeJ9dMtxT8ZjbG28\n3PwEczLx7BqYBpAcbtkNJkTbozOGdxoPC+X5ZzsBR0xDp83TiUFm0XFUWo7l\nP5AYUvzrqEvK438WQGUljIDdGCsDdkV0e/o4P3XhM1RD0hdlLPwTXUQTP0yK\ndY+Mv+MXdPMb+nDGowopTexiOpvx3XT4Da40olmEpBzBMFTeJmA4kNZEPyQK\neDz0fOU4QFv3bloSnRMrKwXUlpQ60fl8akFlThUFwIoZyoRnTZ/cTQRB8ist\n+dsskRtx63yC7Nixt2zsVK9v9h4NOEYekwiYzeTHfmcjCeiDNxKcw8BMgnc3\ntuCK\r\n=qCwc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/density":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.1f636b205.0_1617402221942_0.4181070212442488","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/icon-button","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31c6a88973b41881fdcf0e218f2bdf9293867f24","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.94f50b260.0.tgz","fileCount":37,"integrity":"sha512-EFTRo9CW9zDNuoPjBCJkKanL3LGFd69vvPsbZPX1MDq49QWQ3jRpR3P2I0xl1Z2+8qdTyYvuTVkvc7bX8r9wRg==","signatures":[{"sig":"MEUCIBOmCytfpU2tcXADtWUgyltheOXHnNWlwJUXs31GB1/KAiEAwsNHNwm/5hjOGqgwvxS80VWcUzfiJdEmEvk5v9YiWPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycUCRA9TVsSAnZWagAALSEQAIZcyMJga/5yD/LieATo\nQkjlfhKUSASAMzM3ljIhPFlIVt0fPjv6VNF6ul4+GUOqVI8EtLj+iJTgm5zK\neqM7pvOTBcSVomkHgbXeZII9GzX3pEBoFbsmxZBSPvME25/lBjE9aHKBeXHn\n1KbKXDsiaYzEb3tilGIlsSOKKJDuIQlpcJ6r4Gcu1Ct3+I0HLs1R1FIZ12ZI\npbNCfgMbTMgY3RshLzf5RQSNpRJsRCgqjexiB1nHvsaVBafcnObHSi6gktNN\nxVH7Ek2E2A49KqdijgdzD9ZNzJYirSX4h8TUJLGVOblzXcNPK1IPtWEYIOxA\nl3FhXtYKnallRK7hd51d5/zu+jpEqxWD29FX+uC2bld3fRMSHiiLcZXM6/mP\nktCUjD200cX2dVRfCp+/YzzvcNcmkn5CcmHN8hUm7/0GY5f3yej4eXVir6YO\nARTxchFnfspgODFv8t26TlVqen4jVgbda3fbhvPHbgkp0HRzGpfConrXYT3U\nEOkD9AuL2c9+CnUXjsmTQqHvHF5P1UWo7QQNIrtydk8dekqiIpxUInQjg36I\nQNEsjEY3vhq0+7sfSA9el9cqelyUeFxRonBgmFfTeUKqpooLd8jCdhPLM5jW\n0D8LXx8VrHoamhojnJb1YM/Fl5MedmVUxnEeDVDieSoRMgyxPJhcp2q07Nu6\nBsaf\r\n=DLax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/density":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.94f50b260.0_1617635091776_0.8536661568791759","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/icon-button","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6f5e671683f40a320a1e0ede09c82dd56579456","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.a4009b80a.0.tgz","fileCount":37,"integrity":"sha512-E3Trbmi1aJEjwd33fWctsM69i2GXyEK9EkPWBLpft25Fyo5OnVBrHULMxUpTUSlp8GZs/A+no9yzGk5ZrBc1Vw==","signatures":[{"sig":"MEYCIQDurqy+15cv7nUk4wlQ5seZwX1yeVi+ZvfhcZacM5GVTgIhAIBOKchYYjbO0L9mgHhg6ZwPvU0QkomlFYWMlclX6C2I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4h0CRA9TVsSAnZWagAAVxEQAJwZqQpFJZapTi9wR3zF\nZ1IzeqO7oUgbSw/UyQSEM85G0k3m/bt8uzFwwb1Qj69kKsEoPpO/nen9i7Uc\nQQHkINbe6fqZvb3fsEEK8Z5ClPLTF68gf3AXHeUQUfLAJH7HQ2OF+aQ73shV\nvRkDYbE8B7P8nc+sMyWNBYi7EhqdcxnNHhbhl9Pl7HAdC14ZILvbCpQqEsF7\nw03dBJLCzjn5mCs37gbXbZKthHrK2+HpoMwXkwXwrkd93gCzNWIaJ5/XdItc\nQamx9TipgnNeCq2mgKK+MYL9i4PQ8DXBvo3sJpl2i+vii2p4PwtydhrCPn9L\nli7nk57pDG0JqbmcjLTD2gQSoGzHU8iuoFQH+hgxwv2Q3sX0P4wvd+YlffuS\nKCjszDIuWgr7EeHlcOPaTI6Pr20FilfRQ+sOVhW40WpazlC4RKRqOe3FjTeU\nFLBt8aENYnuf1rf4qiAjrMjW7/Di1za2kHgC7M63VNVwCQNmQIKnPMdJMmpi\nQGM4t0SZNndXSZJPf8jzLDcky4eltG2dwaR9mJAznPjfCZ0apBkLSKzNSXnd\nG11njfcClVEqHHmIPHaZX3Eyx3Zig9RnLix8I2tIdUygVuG8qvGCgkrKzwXI\n493wtT3FCNWBs6RO7B0+gqjpt3fdhb1EQa8u9tp1v676I9ebuPYWz1t2oNIJ\n2WJD\r\n=cvGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/density":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.a4009b80a.0_1617660020211_0.3280867433680017","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/icon-button","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508314e8c9b3d64635d6804099955451d32d1050","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.15604bd0d.0.tgz","fileCount":37,"integrity":"sha512-1tLmdVp48DPHc3Vwhkwk6wQDgQiwSeVpgg/ptzGNpLcbdkfue+odKLBPyMXzmGUEbLmOBLvcC4DLLGtx0ivNgA==","signatures":[{"sig":"MEQCIERleXymsVeOO7XflKOiBSXsfoMCC5gCqXLjW4kiBmUGAiArRurVzRS5d/jdckn2qiiaW5irKYbXYr6eP0+ay4JBIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5I9CRA9TVsSAnZWagAAp+AP/Rd6ZlKiOT1vLS9Vvmv1\ny+IJzEbFKF6VwK+1d1vqeE/15DE2CKSGQmvQ/mNnaZUzce0AQ5hZ4+QbK//s\nBTJssWqoLa1Mjg8JAId9tGWME5laVf1GFJcJxWcNbzy1K2NbL2dsY04WVVll\nhSm3CmEOl7y/6NwoM1ORJZfQTPlH8HE/CAgJzpwLr2MKLDvr8/TNXg3RSlfo\nT7E62H4LqSbf6d2dpoc8u0zfNNV2dOFe82sUUAq84bpa4ywf69125bgAuCei\nUjq2yVD2LCU425790dApudpIc1EbFdybKCgWIbbOASv3mMGFmKSHY4XiRY1n\nHCatfD78awfp3qs7nTwYs5tqGO4e5PgyxIRWEoyU0nKT+GGC7sdMtdwdivYL\ndiz4+1BvBw1X3KxkGSsdPQvZZxk8EhuASnxbyXZ/24BGA8Q6WVx6w0Yh4gOJ\nKLJR5mFG7C0LFciFXqN9VFowq+IIAbFgOVDK24mkNF+A8XNZl+FQKPRZZhu0\ns9O5VFuJJHK5PQdWN8FiJXQUJu+5YegKrx11ccu6Bfw/C8x9aKHaG6+Ig6+O\nv99g+e1P+BPR8uG5jqXEO/n12gKxyWO/6l57rI6aK0/ZN3hWR0L+Q+fDER++\nwK9kSQGmyNlH0GYpfm1y3xc/YXL/1SKBoIOXlxhXyDcADVwbThWoBfBirdSs\ntmJs\r\n=3LEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/density":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.15604bd0d.0_1617662524701_0.9818604060531784","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/icon-button","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b712395496ca01070cfc268488dcef82e156ee51","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.76da7876c.0.tgz","fileCount":37,"integrity":"sha512-GSyY4WjAqXhAH3hv5TxEzuS+mzqEV/VyYPxRG842g9NatIcOT+RBFqXOFTYMknw4/TeLbbQ8ZKgUqg0/mCRXGA==","signatures":[{"sig":"MEQCIBx4xBjRRgrQynExiFHgCC1RIimQsm7BLlFtR2NE4RGSAiBkIvpT9eb2nUm1C8ikuLtBkDV8HgCNVLOFme/bR07gLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ59CRA9TVsSAnZWagAA2nAP/0DJJuz/NGyKlM9jUG/0\n4VExGLE73uhC64fTdfD1F/1eW9IXOKifBb/jNl8YMtWGRh64lko2LPUHGGdK\ncvFdMfKt9zjVeimslkPGf7FO4obdW6yfkbOvkPXO+oNiUaSW8beKJrMZjFv+\nnWshXcaWZJGu0cJceZmI7V87x2a2uMHwqZdfmrod0Q2BudnrJYjeUmXxq/zB\ndPCnL9nVQgFu26cjk6lWh3u0pY2kjK/N5w/mj6WoZT+str2d7njPYHnz3ASk\nkyBr19M0e0yDlNQpH8GK9jLsSQFj+8ylXqEEL7VQa0YOwRrQ+kWNGqC9sxql\nZGOiPBodgKRH1TqDmJbXB5ct1nr9jW+7yozw/RdsbggHpqnfwjfkC50py1AR\nOx8wUecMhOKLiHMjc+3PScpz1dQednCn4jc/kekyRH10u+3HNN90U+04uQKn\nCyDJCzExK57OUUG0UCus7u3/lBvWsDutBTUJOkUPXckY9+goxT88vfpPmjXH\no+RuvqzbFC/jS41YaxEGu1NtpDp+ozg+A3NhU9inJgnuR5NKfcxf57gFSgk4\n3rBHwSmTHqSHUZv92aKuovfz63/GuL3xEUKLHWUG6jfXz0tFgiFVoyYwOypr\n4qDIg3TfnzkuHO8AQj14BOLNhywSFFA+iqI1T+FwzixhbTFSh4pj5neQMPCx\nFJ1v\r\n=s5I+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/density":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.76da7876c.0_1617759869237_0.6402145529314722","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/icon-button","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35f006f0293e2746c6968899a3e37f5084ca0242","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":37,"integrity":"sha512-84I/oF1VrDj6tS7O4dWARODPxiAUiBzNYgf5NJS6EWhCr88TMz9SdCGO1/sdGUyVP0WWyMi2RU4aqjEdNXA7qA==","signatures":[{"sig":"MEUCICbYJ1bxyZL1GoNzR9lqVo13s4DJKlG7MtxEuy0hU1J5AiEAnyfV0Bq7UncU1MBsvxEe/g2Jp3mSk8upkDbm7d9hNSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+1CRA9TVsSAnZWagAA558P/26lH+LA39mWw1+HnhjM\nt7o+iRIrc4UInkPgPnAamxXY7AqASaCwrnpvWvA17eRy9C+/khI4sZWUNLmR\namq80bzbpBI1m8bVZpLt3Ve7Or6Q8RuCHussUEjf2gD0+P63dyFpxEHfIfqM\no44YNEj61PShbX3JwsmtMo/vhPoHhXUtpESzYPj3t825JH9TUgomajExcYvi\nE3TX/Xjx4vZYYwci9OFYrd4f1kv98IAHB+Py1lkdQQfudOQbZhSRYx0DVbfQ\nJbb16LYpdJlEewUFqyXrXhx4hKJZ8JK1/Yus7oT6bsUs1BnL6Rh1pGFsxRfr\neMeiFO6Y8FYL4LTLlVJbWqI8+QyqvqilPuJvX207t1Y8M5hexFdtIgsTVskh\nilSqU77WQNsoNl3VtpO4P0GB1gc+XgfKAhpGZRHyklqrSDE7lSBkrRcStZOv\n8DH24mvru16GIkFuui/jr7tVL+bm1uxG3Ig88EQG/BfsktERp5y/z5lzgugs\n7xfqtm33b0pnWwd7uFGtgqiH/BU3VbctxYFjt+uz+exHvUtf2RdObAYBZEi7\n7SOmnyv2HsUJVvqvuxcizVsmFq3jp4wButubXIRXYh1HQpvLmsEFMrJ54eUZ\nZEjbdzcMfYpJOKc5xRqeqBLNt4/HhL0Vbiaw4wYAoDqw+r6otZAkH/+RHzD1\n3zzE\r\n=2bh0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/density":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.6bcb6cbd2.0_1617821620645_0.07781273485645768","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/icon-button","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ebf6dd9a058060b12151b8a723269680079221b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.c91e8d141.0.tgz","fileCount":37,"integrity":"sha512-yP1jgiv5Cjz9Ig1y8VG3GREoJyIbic6e23CKwVLUoytbyrBiT/xSXIF+bYbEmlH5bEwC236uSW36EsqNWEFBLg==","signatures":[{"sig":"MEUCIHILp2+wdr9pUqtb0A6rWQMpFZbMs5NR1pEop7v2LZFuAiEA7rWGkb6OvyYlofkROC4mCybdh4H/xpfV8zWuxHO5dh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCgCRA9TVsSAnZWagAAvwIP/1ABf0v/iKUa5VSLetiP\n0doSMaLmJG4DtihyOX/f+wqg6Qav+gl1rApTvT23djqLRhUlgmN53+DY1J5s\nPodycG0vU9+x/WJ55rhrdlla2KIMwTBB4slBbjDtfTq8cIU2Prt4qkedHOyo\nKTzzUZbKAq/qU4cLGi93KgPLnSNw8IQ+BgrE1IF31th+2EjmtluQMGH2y3OX\nQi4msLI1SAcaV0SqG1OrK9U62vpwKdYY09nKCUMNtI0bRgKYl94rNF3R5hFP\ntO/mtzPTLyLs0bqlPfWLINxPNdrQhrXRT/DjiUKGCP5fNAyL6VUoBpNaNIxk\n9KEB6WvVwKRlWpR+12FGR7PJOpBMXFd5D89sYPPZHvhZ2kyDqYfc3Sk7Xsyb\nNZdKmMMoLyPL4ZoWGUH8sOEL0A2JzTxJRSDPBESnz+spUXv+/T2zFrwYDEFE\ns+ZCk+6yZmWmPXdj9zLrhu836sXgDnpazoT3Mzb1JnDnoCAoxW8OVk6caQBO\nNqASWm9fk637yg8cjGVDsbb6qkc5mVx1VjjN+HW7a4cu+2O+dHtez5/MyY6x\n4nSkA08T0dFKwkKvTuurxDKN/yAy0caSKvtkTejEzkGXhIgOfSCMD4vh+xAH\npzlL4bJhDuimpQDIi2VDwwmrlceAyhm17AVP5A9HViQqF8Bu/J1lPx7ec2w2\niMoq\r\n=An5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/density":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.c91e8d141.0_1617821856323_0.8154064122720817","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/icon-button","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc2769c00b0d11c27a435876a0d0e918e69f42b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f77c50860.0.tgz","fileCount":37,"integrity":"sha512-BFmtOY7a7NSQVVUziRBguABAe0n5TsfCtV0VUuXms1q7FC9a843JAJ+E7WaZ8lyUp2vKYR9bnDhO9KvZxpKOtg==","signatures":[{"sig":"MEUCIHsKHOvxqhMQCZAeZnJua/AA90LnOJAYP7dYKyrgrmeqAiEAqU5XswPXgI+Pn+VrnjfntnaM+uJQdJeyTbq7c6GpBVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLZCRA9TVsSAnZWagAAeH4QAIRjXk3iPRlURiEP1KMB\ncDHX7XSgCFGOa0oRqOMjjsPFCxpc4YOMij0yTAPjaarlXNJWc15Ot0DUkd5U\njpGaGre6SVeBzndSPyrRkVzJV5nfRe9aII/7nCf5BIjjscCxMszJG14KWBX6\nW/tbzItxFPEuLAJfM/KF593VJ3Bu9uqLWldSzJA9vLVUthqd/BpRMX4bXTIk\nuBFpYACtNmWm/BBRqxh8dsNIV0kFn2ypLYIurQPWHWPWLeylSXQrSkdxaBm/\nW7WuVd0O9ULmy8gg/Ykm+ZWVkAoeJHaQBj0c/5Yn4JgRDZGOdUAPJAOHkVXh\nWLLbc9MqaY+f8kERVK3VxRK5CgPne0oy7nszSnr1tdD+z/8Y489/lwYx772z\nX3EK9F0Dr+Aj1OBcKVy05roMeHAJYGqEFDDpolvyuu1vx5D9LMIN9pE8p9Y7\nfxtHSQtmN6X0U5sMrnhMspgUVtOHBB2m2/eoD7zkZEx+wflq/erARg3rzZ3C\nZTf1caYy/3FeXqxuMu43eyj/Z0mZ7r4WBAIfXVwnS4jUMxyfGUmGqj6fP9ub\n2BPDt7P4lTj/Wg5HaB4GC+4SVTntOxeCo6cXq6x6D7jUHMrpiPD3wXSDB84+\nwnhucuoDKkawQZBxRKCHlLtlf3AGsz2lMLSiHAfuPQqnHJWX/+t6MWyoPNYM\nIdKX\r\n=R66m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/density":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f77c50860.0_1617896152856_0.9851250713122282","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/icon-button","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d926261bb9863b4beeea63591c11ff3744df1ffd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.367d88bdb.0.tgz","fileCount":37,"integrity":"sha512-ZaJJ5v/QQLrrlhBdzA+0c9n4utIV2Wt5oHDbuZC4nzM/k5PNlDBxN/Ot87eI6rRXZLXYcrM0sgAAtx6Cq7baVQ==","signatures":[{"sig":"MEQCIElUsAzNrMx4BSKxpqLe8FK3iBXpRHzlzO7wBshOHCKRAiANyBtg4r2zDu+97D9v0N5g5imqXGfJ2ZslzVNMvsuhow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGBCRA9TVsSAnZWagAAM5wP/2mcVBL9adIDy+HbuutW\nvJW8/ZeuFDJytAxwZ3GNmLFuD2UeNdBFMLQq1866GkzGXsDDxOo1LZWd+NSK\nKdTFn1U2v1kGi/vnwFCmfHHPzGV/7jc+qaSSPl9aRsZaF4nM+GA97a1fAxqQ\nO/aWXtOMCVBuLsTsssTpf/JDasSL7bI87M3nSMLN+vSOEetXz9KeYlO6UFF2\nmZOA057nTPB69zzuKB2pdAhQOHClQ0zU2r9/wRE/cxeitM0yk7avt3D571rc\nsZPb8/XfXAyJIjL4qDZDYTlN5dqiC97AKhOUSGK1sZ0JZ/rUPRjglybY2MsG\nvhFaLsOzktT4MD/ZFSYMxnNdL+A82HUrpvKjLse02nu0lQE0ATe/mtUggxuz\nToCfuJZBan1ZCnyOpd+QvAbPdUAyNO00Dhlaf4R5AeMkM7KJkTmTEV7CS0Bt\nnvyasWOt80WznAjcnf0Aww5JdGc0aQHVNUd/HHCBgm9SUPQeP0x33/bjyxqs\nU8Epc0P0vUtBw0ZqfYOpT9SYUD9EoEVpV+Wu76khJA79wsHL3chYLM2DOOXn\nSDVxq3rT95HRhqJwoINwBew3nald4aq+uBK6wYxuyWkOB5SxVBvL5LcrLyJc\nsAUYIru8s1cZe+lx7PBttoYurV1n/LVgVr17pwGa37KO+6ELUcsoBQD8KHC6\npEnz\r\n=9RlQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/density":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.367d88bdb.0_1617899905498_0.045221494707020415","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/icon-button","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0887668071e1ff24fcaa6e35cb6c305c01e5ab56","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.0ec437d3b.0.tgz","fileCount":37,"integrity":"sha512-+m2R9OJWbx9aK9bSRSpKbfcI3hsxrO08O5wdGY1q0ZY7clKB+Tjg/7Hy55G7hVMeW8xHBgoSLOUJNq1hmiMkLg==","signatures":[{"sig":"MEUCIQD9baicGVJGvysqJQCbFtOUgliTGuWctlPZrpcyNP8MOwIgTnqbz8Tjnd/JR/rVlsScieTuFDzR6SrUEGSEwbLZg3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1rvCRA9TVsSAnZWagAAnrwQAJy0T6xib7cdBIze26BC\nJilBYAreWgY2GPgVt5fnvx5wIR+Z5IjquCUItogi2dZrFS7QzBU/+EI42idl\nBISz1NhBJgWUATx5sYonk3DAitNrbK3Ct/lcm4jylp18uamCGo+HcBjoJOrk\n5tMYPyYjf7J4QwS+NKANOnTJQldFZtb+Q76n05N7atS4ihd4LnDmkYUNtkM9\nlFmuFp86Pe63WKDa7XYq3KyuGJBkvnMtR0Dw4rG7jiz+MBoADOxeL8f67OBK\nMJpkD9SkWLeKvDiDZfa1qqd14K3dE/sTTHuKKAmzuUOdJX80gv7XG2GRzzW5\nRG9hiWmU4KItLV7vGxFuvsSKsJRcWqrQWqeDquGc6uzPw3YQfJO5IP6VMXwC\nmq851lrkPtLoUAdp0ppp/492jovNjiibxGQu7SgmF5J78boUEVyj/GzMPhRV\nywGUmR0nqsVgntUwEzW68Hz/4qnr8O+A2QI8Tg/dZ/veaevt+edMDog2p+Aa\ny9v+tApLaj180oHpaBwrLLeHmFF26xtI7aYQLrqKbaeReq90mPOJpPlyrsAZ\nUq3Ip4cUGrvEYcyXW4zF82fJLU+gRDPtGjSTQvDTCiM3jU620jCqiY8/YuI2\nLRdEGrf87tcOpD0kxqmIjtSqtVdMH/FuY10GOVCRBYaWET+q5SHRyEsx+gNy\nvLuJ\r\n=w7Yh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/density":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.0ec437d3b.0_1617910511323_0.6519864441769838","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/icon-button","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc99de27f0789616ea95ac7d8a00715a29e7111","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.b2fa996a1.0.tgz","fileCount":37,"integrity":"sha512-LDTZYQRokbluuppOgElj8AN0b6X6hq/7fHvbUuX2UViecsdVm7LRixj/FEpoIXdWxAc6IrG63nvHjZ1V1oXE7A==","signatures":[{"sig":"MEUCIGomaR3kxqoIuMwjSEfuvno78UPsICbflwcx8skNkeUuAiEAl/qRreXQBrrj4MhtrQeVY2pkF7+VZgdtcz1GrlEVbL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG55CRA9TVsSAnZWagAAZQUP/jM6M7OxQD+V35fDwx09\nXJK8YRl5/19aQuLEmRkTkshBcVdkqhyTJy9dkEdImCbrbkAslI2kycGu3tcX\nqdJpfY8e6nbwcff/DGRHT13rYEZgh1XgepiTDVonLqTt9jn/ciAHs22oPdl5\nmnkQQw0Y0EylJjz4zIN7lVEuJ4dkbpEGbRQBsQql/0g90jbxjBgkZTugLOtd\nLUY8HInUje+wnIgDHFCHeWd6TVfJPDbDlngYzgYdzcjFAaYoenO/Fa83muqr\niB8CmKi4buucpdPxXdecGROkLUmuicpzzT7DB7WNd7hMeFrPNxTLFuvSuP6m\nR3r1cU9sZA/mCXGTirI4Gp162S3KchLf8eaNrMk2lPlcet5nh7PZa+Cc4XkB\nDwTgpQl0QEhNh9Skp0tADWbRWvnoCWYxQcuafryhSAZNDQccfXc71/MCF/HW\nNlz12VbGA0tD1wbdPj3wHjcxtV/lnj0nv8/6+bcETpPNj7DaxA5LJYXQHZ5P\nWvw+2gWaWfm7fSr2Jm5WzzoyRSgtnyG54nlJ5TXe1OZiWLdJ1LwnCtgfjZuX\nIwT8cuXl6xfz3QHZrzfRxrrjXn1fWmoG2E6UCCb+mcXERVVSi/Vb48pQD5dT\n9i9UBeJxfodgbQVGd2aqul/kK4c6Vp562f/s1CImGC8rQZQGduW/OB8pP3AT\nmfPz\r\n=07y6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/density":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.b2fa996a1.0_1617981048816_0.2046669429371879","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/icon-button","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bccfd10b5179529789270d995a2e2793d41fb72","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.24255c408.0.tgz","fileCount":37,"integrity":"sha512-mq47F6hEX4L2lTEuDClllg0dRLpbZ2OJhg3OTL7ydNX0QrIpPFOUw2mv8D53PaBL6GoaTc7QtgBXaQKdaGhUww==","signatures":[{"sig":"MEUCIQCEUmUpMoa6ykHYUA5jlc8mM1Pw5vbcqZ0RFoj12G7fswIgQzVWFcDnzndEV5kGDzPBtS63nnj7PhILIXSti8UMke8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUcCRA9TVsSAnZWagAAgwEQAIThatlYL7+FCo3Lhgd9\ncve4igWorPRuIL8A5w3Px5EpYwvsHOkaceOQGY8pbyDWv1qRh5c+YKfmfhY+\nDhAloHBgWj31RVEBK9PWAtVIdcHMyJd01zFHqsWuLm9ZNQbI8+GwVrlL5Hsh\nihOEyHu38wtJbUoOK6STCfeVdJOOWnuumM2EOHBGtW+evrBlvfvqSobUoech\nWViT7RmBRMAI9HvojGYXnCrUnEx7vkONsRhXnamaOn8UCEVOWo7G7aEp8hPK\nrI23d4wFW3q4dVcu6E4nV6hOh3KFMEhq/751NXqaKfsH+cUKGdiNnqsBiZ1c\nHdnwQeCJgpn5g+BmDHpDmgFQN65JdPlwKcraD/JDcLXtqvIQiNye88A6wCvh\n30plF31RZ5Eqjq8fME9JHeY0LVEn4Y8Pw8ULzNHG58K2vZZOPMZvFWoKLQIZ\netr4BeEMyUoe0U2qY2HkY6lTSJwIcJzTAHR24oQpI4RLDvtTuE08LZoIEuKS\nW8bndG51ON/EO/bMxsOPrMMwuqpbJj3IATI+gWYcua5qQJ0FDFDC/Vtm3Kq2\nEtEWVwVNMNmGEx0sQxec757Jb7vE03b3vrvtZjX1qDf6nm5Qqsugjeu8Do1N\n/APZCF9Hg4yKbb1VUB349hsqdGc6qbbA/SzTXk8LTYRdTRP+bBXV9gAg46/u\ny5AN\r\n=PdEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/density":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.24255c408.0_1617999132722_0.09724476194008069","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/icon-button","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e93349d52761e981dda4a776e518f753159b7b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":37,"integrity":"sha512-Sai6cjBFB6dw7czVv+t1I6MV5dONY7+BZ07C9AdVj4rVSVbhF1XoCGAJEKofv2d7ewviPiXxT8igPUhHBZeavQ==","signatures":[{"sig":"MEUCIF2ljL1dAueDn1Sta4sEpYNEfZK9CxBsfTGNb2KFHt6JAiEAtMUoK9f4nG+LVgXBxsnbxUsanNtCgAP2eubvYpVb8FY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNrhCRA9TVsSAnZWagAAlgEP/11BepewaV3WdLHa6U91\nHd4vD8mS1htKkkQvW5FstUFLYQMuUb2Z1gqdsP93o9/tLUOzu0dxYWLEdugX\nGlChrMyYNsXabJlic9jm5qi2VIVltRDT1lDTWENEcK69o3160tQ022pbJgIA\nPaNa8fFMt3BrasNf6RyIOnWd0syBEBwfVs4VRvcRGR99r8yWMtmUEJMKekpi\nw5CL1SImZxNHrw/CcmAFlvCH19uaKdhXHScELRv+JjRO9iuZhpD6z2Dgj8Yb\n9G7J/JJ2Sp3/BvkAnltwEzA8z/rzMQxoDa4GY3uFWUdGnpbQQLL6fubaXNRN\nNyA+liEXj654WzhnQPLY6K3b7/eCFugWe6Kh2sKCx7xfsi3erp8SB5pUVwk5\nglIdl+uUZC9P2WbNX3gelpKYHWxvBzzY2mGf32k5b1mbILct7KeRv2fMyAyE\n6zOU3gG0U9sr8EW02dcMjENiQrErjkuH9uuiadEZ9IvQvPBLbF5F7MYnZu14\nX2xykuTmj0nzT0l5FXX1xJcPmcX3KwwjhMnvH/m/dR4nWKXWBHHFjGTJbyAd\nZtHEFt2QHqIR5d5NCFYDZYNndp/oPAYtryAHws7bxnOgWiaPITj43sJubhdr\nPcQK/Ojde1lMYxtOqLGovO+wJmH1EqRYu1Nl/+lkv+vDb6q9d8uk1Y7EcIRT\n5K+b\r\n=w9Pz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/density":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.7d6a4bb72.0_1618008801313_0.1147313155177021","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/icon-button","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b109f8f87b7f1c876fe014dac7f9179ab2fcb7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.352b295c1.0.tgz","fileCount":37,"integrity":"sha512-cPQZq06LrNtoiwMF44zQxXcx86Ic55bI4I4btByYmxpoItUe5+Cyh1vFAwDKvfsW8UVtWbB9RE6eaPwFti6H+g==","signatures":[{"sig":"MEUCIQDgj/KbTje1iSBDDBBPJsDNzQGFyqnpeM0a7bmp8zzsEwIgRIzEczgul9x9eqPx6MiqrKszDHQH4gnZZP8nF8RJZTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI47CRA9TVsSAnZWagAA9F0QAIStiOvOjzMv1Kxdy+Iy\ntgnnu6tote+SuSKDMzmyRhllmi0yaOz4pNG9qdSkKzLZ9f4dseT55RDcQoqa\nhFHf5koShLWJnR2TpqcNoYQ5wChhWvI6DBMAGI+HNQ+Si92l2KKsbDefNUbk\nOH6OJfpHAE/HFalwMJdB2PBbrcb30qfaWeQEyrrLAGCeXLD4cPYUX4TnqHJP\nWxr15Ed/TSm2oMs5ds5GRgTt25uAOHzDNpGOkkC+bfi81F4D1207qkNkFk3u\nNjrbwDS5Fwd+h+cmXflvZKJHRUcFwSCC3AQ9HLw9HgYbIJiDMw52oxbdvpg1\nA5Yaklp1OTPyE6WKQ+vIDZ/cqRXEjrTXn2s8oRSjCcF7YqDoNX9IhAV4Z1Od\n/IxoIV9a7HFE9xvCl9eGaFX5yhIku7AwXCnCpbjmCPKntpKxrF9j/lW7JPF3\nZwJivPK0EKFLrEqOMpGsseWt6MZbXMFANonbTbgJF2eVsLjnpXJnx7NDq75M\neczsNZgmMbxRxr74ZMuGfbyehnixBcBHP8+NrCii7bNFlWYuZAhgnOpcqh2k\nXVV2XwoGFdns7eWUVz4j9jPg26a0RmkHg1eeOFVDymE4IJcLjDvloxLXivGE\ncOcbLDNQkgfYmlqekWvMn9M8KVHpJlUn0jqfE1LJuLIQjxFkoPkubwA6m1tL\nFItc\r\n=pjRz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/density":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.352b295c1.0_1618251323322_0.41812734858769884","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/icon-button","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b12eae6edbc0284a4a91dba0e4537b75454ee16","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.ab99b8064.0.tgz","fileCount":37,"integrity":"sha512-7AktppYm+KKNj08Lm2axJzMDNFgfE6lobyD/CopXiXiHI9/JSsBg1LR5TgNHew1jRP+tE4n+8Ky/e/+6dl7KOQ==","signatures":[{"sig":"MEUCIQDI34MwWNX5j5L1VNa5E11oJk/J11w3maSWxRpou8oqwQIgFfrVTrZd8sbexaWRRxG9+oV2nflydWogASU4pyflr0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4DCRA9TVsSAnZWagAAUeQQAJH7c5pMXP1b9NJ5DzKk\nNMrBi58Rjc2ONbFruRajjnU8XVR4mPkRIZWz39bRw3fFaPyNvMt6N5dddny6\n/2Md7moxFTTaQvcYMLVg1q0+mUq7Y5/gwq27jGqprtUhgPKGSBSo6RCvjDR/\nvFWSFWNk300LPqWHkFfQ6sfAebXDnUbDa3ADtwXIJb9gFeDvdILmEh9VSqGJ\nZQK0M+wh1QhnukR8Epba2cACFkmT6HmXrN81SZB92alJE+1VZdRTT5tIB05E\ng7fMtUux0vhO1Q/lzmkBVEsmCRg5hhYD5mKrZD4PBCUqp1znJbFq7wUs3zIX\n9LsnIe7OR7k4sYryP00R+9p/ZXvviItnF04bhawi8Hq20+blQhCPNR1YfPop\nAfQOlEXODfAxHyq7BMCMoS6cn7kp0DfIMqLpjC+caTpknXpgmqctZ5TTQ2Gz\neSKfVQZ06QggvaLEy4a6d5Je6ihNAAOP2pn8yhTcWHLSe2+ImL9aO1tpx+UX\nFosjERUIbesUBHLfjhbMY0OJEGNwLmfne59LJOUHECD8OWA0mgWT4Ta595qr\nyzxn23ZR/BVoJJ0YTE2Ci1zvlz7mZe2plNhLMitxygwfYnmJK1wJ5KsgYsij\nve1z9KtASZLmpRjheYOMzvxQb7YLFOFvyGEt+texp2BYxqj/gVo14OjRznOf\nBkDe\r\n=eClF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/density":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.ab99b8064.0_1618324995250_0.24852070048277164","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/icon-button","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181bbfb446ea771e2745d84ccebbeee6ba5a84a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.8f0a11e32.0.tgz","fileCount":37,"integrity":"sha512-prQ7HAv0GRL8xK9s3JLyR85oEH22xFo8rlgjlV6mxGZIN1+GxcTe3PgeCP+qF/0bSnj4f54RhlKuccx6ZC+oxg==","signatures":[{"sig":"MEUCIQCXIETn34dzn2r9L89uVvRgKSJRVJG+ktVQopK9dkZvpAIgB/mXqgCo0miPnyuGKXDHDlOjBwVhqOotSf6KFMWoG+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0prCRA9TVsSAnZWagAAIhkP/1gCNE1fLlrXmdr5p2Pl\nldhXe8G1ZX3iannhvIb1c67lqF/KTD3bgOuhsmW622lnMXOoGcNkFyUvugUd\njnCFlEpKhUggJYxwsH2O7FouZpCOJF4u0q4ubf3GIW5kQETmWKtvqFvLfAY8\ntT57J6LTM5XhX1JqO4KU9eSEb+14R7E/IY5Z1Z6WQIV1QkHZvk6bEQGw/qt7\nw0ua07KsDQmRT2pTaSFj8IMTUDkjFLUlAewO996qBigtagXbbM+DcbwVajzU\ndtyQC2vzfcPqNIKQoOQtgBURUdy2vKMWZO4E+urk/MK3gGmROkFlzzvzQo8t\nsYFmimtOXA+euF9uJijgUDO0I4Ftpvy88jk8dPKcSBKHoyU9u3dWBqVXYeYO\nDo+tqEfbEy4KlbBxDxkKsI8u4Wa1Ps0rvi7IkkxBgqs/q+viLU/a+8QsViX6\nEUEVuxyVjrVJnCr662FJZ9vx5djceI/B13f9Pou3wyppndzawsBlAac1SDcb\n0dnn3mIlS0GF/gX1x516T8LZCmgvuWUVB3jl8K93s3cCnQkgwOpBqoU1O03z\nfk8BALvRMBAsdmyo+v0bmmOVqWXMA5ryiFA2c7AFfM0SKHHtenVkmTOHBDnJ\ns8A5nK27YGvYObDuvmKyKO7t5Nc8NWuLno1OuJ7DFyJ7yQDybDWHJcnHcGIK\nmPak\r\n=8AF+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/density":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.8f0a11e32.0_1618430571000_0.9275911803927805","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/icon-button","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecdb404b50a818d90646dd3bddea706626e47c43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":37,"integrity":"sha512-jqwcG8IcNFzcK83+voGWWJwYIzUq9ewFBgYNfmbNCxZfE1DoX35Kx0ueVBowHAwa34tEmT2ATGs8uAEsMZrTxQ==","signatures":[{"sig":"MEUCIFJntOUB0nqiuqRjBPghuLCjk7x3YA59uFUXBQGlJKohAiEA3KIZNpbZugI6LhS2MwTBiTogTswGZtc8lrT3q+GmHp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAPCRA9TVsSAnZWagAAj1YP/Rc/24uTOWQn2+e3jWt5\nRvm24QCL6PRtJ++NVdFHh9FPkZxYPBhrpjvNLJnuw/ntL0LMp5eGVcWlu0gO\nNlJVjCP/UhIKdYTIHNwLOdwAL33M7S5bev78dTsoP25snYf2+qKw4WNp/l1G\n6875jc/Oz6uOL2LlMAh40N1MDj2bKLHodh0lnibqJC5LRGjUzZoPHKrOjjVK\njpA/j31Z8fURPkvtd//T6NXXhlhVAYhlXeK51eS3AcThQU3AfkHYiycP380f\ncQkZ2zMfNhMyV6D93cuGXZAD7jPj+qS3cflW1FUL47cb1JdUZyBrU/cGRSq1\nzXOpVTtQBBl8SVNqp92MzE0eyX/1D0TxSMJg7Ffksp5fAX5RXh6FSRhDO7DU\nY3VvTxxWEEf/0woiBAUT93bV6tDSCWP6ovmVQFj7vfVbRm2xKm4OAM7j0UJO\nIwWG+lEwvOmQ1+yKxCRKS5oEfT/lpERRjvZi0I9wrHLYC4DVJ37dQ6r0/XOy\nPn9gIbaj5vok1NFe4zNFXoG8KckDE/Z+9KJFyxE7IPHlE409uXgseB+WMpOE\nU3yFHPiVgkuPgZVk823qFvl13cUmL4V0u+WLNxT8eVARhhlJo2QbnwrE9OVg\n3aK8noJ9A2WaLSZGi/iCdbe5BdFmuI6f7Yveds1hgCqhi4AEb64Z+NQ3JTIh\niCyR\r\n=9hQX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/density":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.f5c6db8fc.0_1618509838750_0.5576717379034024","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/icon-button","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f8717ee15ea328deebd578d825eecae4b7a83f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.3793a3143.0.tgz","fileCount":37,"integrity":"sha512-Xg6zFF11s59VTcqN4S3gW2kEl7SRgNyGf7U4z3tzfG+1aJaBsNN+Euw8jwZMfgyaxTj35j+Cw8kLDfM7AFNNAA==","signatures":[{"sig":"MEUCIQDIPttM88Jvrw+/mlvtFmRG7wGD9Iz8itHLM194mAW4GQIgFRVa/g9fJLvzEz/P8l7bWdD7zc4v5bk2Uc3M8qbsWfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZsCRA9TVsSAnZWagAACrAP/iaJQFpAW0uWgJCky1Zm\nijJkCjHOoElN1jpzi6bzq66HOqSoFkRT2nw67TzdnhEHZDsIAOoKQDAjB21e\nQuuAc9M3zUteJLZacsc+nmzdIvbqQ42exEcd13VYl2n70HsKcahFc2XEYpE8\n6p65k0YJGIgT/4bnLWC81nsCUljPgCFxuJx+0K1ESe3wLpK+dxbOGln7TjEn\nhKZsi7Y/1//b4BMtSuQC3XTXjJTMGC9j04PzIjDy2AT/tsIOiJJBKgL9LkPS\nZtQX3fbzM+FN6c3LANH3UtfSMsYmyp13LLb7jmdLGlzhw2n6n/q55kyfo3kx\ntxJV3tHfHerjeu8xJhLMEwWtdikXsl5qZTfUF6s3SMWsM9jDEnfI88/CwcCf\n6nwA8NQ3hJbr/hsu62wM6/oOeX2puWz8yjjaGkVQVXgiTGd3jDwbSdcnGWg6\nAK4Dizb+Qi30h8iuMq/yIX2XDUzhBAw00kx/bF2ClUUgas2OZg8XBpE7gYnY\nGb/E+ep6wKAa9l8x+nGtGpiDWuv9y/J1dvl4cBhexK2n53hDVT6kF7zL2vUM\nELm0Vb+XrvcIZd9aDBWsMdVQLeCUvZLc2M6JJo/ZFdDz86X3gPdIgQjmgd6s\nwLnHHIpN0CVX45/YP09o+/dPmA6dFPmKXl2MXoh1J22ITMTYTde6GzhkVsF5\n5P7e\r\n=3/kd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/density":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.3793a3143.0_1618511468436_0.35754125720937857","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/icon-button","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2906bdf7534149b887b87b3852c1cd8e4f54a1e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0-canary.bc104bae7.0.tgz","fileCount":37,"integrity":"sha512-yBKVjoUpSAgiaV47ntP5PRolBq806uyOwY/Hi2ZjnIuUZnXTBnTiHEF3fHZU3fkF4s4euKbznpnXoeHcadCwKg==","signatures":[{"sig":"MEUCIQCfQjvFnFsxSmt/FdWUUqnS4OkrL+8ip/b9KhTi5JSQNgIgIEGDy97+3mJ5V37ziOi8PV16aGOCcUPPv7eu+BawUHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJf3CRA9TVsSAnZWagAAaSAQAINSZmbsnsfY8OheIkKm\nMLGWIkRWhBiSU7R1VK/aavhmqRfv/nTPAu+S/PjIuRazR1V6jkUxMlzVZ/4a\n6vtnGlNR/U7STqlkxNsm+7//dVtK8QRLXN5Lxg2TXVOTuJkF9Zvzt3ru35wU\nKksdAZvevTs4NhM+DgvNKv8UdoDRFgAqpHzKjmlIUxe/3NuDRFsWyDLuvTUc\nmUDeNffFoypnOaASw0d4hoWw6VYWp0tZg9ko8akwLvlafGKcH8b7eAzyzl+j\nPjU7BBm00I5MJmuaEhE6P+tBS/VFRtOhn9dqpAQi1+aLOARi3AsoGItwz8Yy\nP3jNOdpio0VNG3B6BWXqPCK17RECHShWjyf0949im9r8O9vlrKmDOGY3ZLTx\nhhhMLZT72BRb4vHP7rPtMZWK9S1NM0Ai/91UFfd2Ud2KsmOV8IK4jsB0FP9O\nDRYLSqQvxl8qFdc+u5MUW5SIgxM/dcMPhtPpJGN2slBfNBqR8N7CPQ7EzQDX\ndS3vm2UL2apmOCg/8mqAMIuEPE4rdzeGGw5YaxAXdVpCj1ae/fymTHB4E8W7\ngQVUAKXb2fVNaFUd2H8bW2DGmBwQcWmFh0D76aw7GcazvCH7ddi8/rPGbMhU\nuwW1AyP4B4n+wpz2jcjQzSweyHE/IG2dOOCX5N+P8KLEvelbcJclljHnJy9A\nAPmJ\r\n=zMeE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/density":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0-canary.bc104bae7.0_1618515958898_0.2781596651820941","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/icon-button","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa78ffbc72a5d316f8dae289502bf4a2a6d2b764","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.3f342c3f4.0.tgz","fileCount":37,"integrity":"sha512-rIgAbbNkjl6LyYtrFdhXk71AlOcazo1cTIGyiFhjk8Tk80CBm3UjmHjvbUoo8KyoGcndel95Iz35kgZXNiIASw==","signatures":[{"sig":"MEUCIAS9wdNthLd9wcFiak4R/ZyZtaURK2ZSkFXf4TnQjFghAiEA7Yj53Pq27m6caHOdhPP8vZqqAfHf6N7yboQ8WnBcLSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQNCRA9TVsSAnZWagAAUYwP/0bC3F5N2XvcmQw5kq11\nTf5WapTj2drBVJM1jb96K/hsq0bcuq9F0XvZkgdxMtt5tIUolP5+mrHLjtJ1\n4QZKIfEtJUdOZ19R7uZUZGAIPHpzJ1ty0lD0n8znUPUGSyA3+VOnIXiaBqGe\nUc1JQaqfft6XxukcElZ/cX46Fh0jD5Sf9tnraxVy1g3iY7tGiDbQ5rzeqhRL\nqZI+OJ0MKU0zxNiXRcwgdzuArd1BXYkDygB9BvsCWXfnQCt20ImZpG8NvNea\nBFeJ1xhrWrZ3LceeaLZjPPXBPXnQy3icSRJReKvLDTfqB6VDRr21p6UP01TQ\n8MbPA2Is5+Umpw2pxQa+ton6mXvvjwQNDUBaOZnTMv5j0sdPLQ+Kbv1QTdVB\n+qQTAbeyZfyh9rjjTFmU0k/flC2J8AiqGoNGObVnpK+Ku/F9QSrrKcNsgyVu\n2CT0YQSGpxe7ZuJQ6xRUhvEAoEph7ST94plRtRAQ5MeLVnXo37jn36wkKxjb\nEoxVIdmebnI+3Y8W0r54QJskZKN09sH8Vnsj0EHvBx3FHnSFbx3gMiaWqTMU\nEQ9QF+bhc8vLyensClXeLt2cHRF0Dtbrc8a/JgYcEMU1nC0pMXWdEauIXYfA\nVoni8FQrXpyrEQZBimBYrXcn+ZnifTGMvrN0EN30GgGgOxTKqTO+1Tur1557\ngPbM\r\n=IWsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/density":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.3f342c3f4.0_1618527245279_0.9360320949129473","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/icon-button","version":"11.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"655eb0d44a02fd94f814bdc80bce2e4cfd97ac70","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0.tgz","fileCount":36,"integrity":"sha512-rlX/RWOD9ZJznva2MDNRnau9/PnqepxKcHTG4YirkgQwe0m6dqdabzXfeTrorRsJNMSicaYlRV1SwGPShZk3CQ==","signatures":[{"sig":"MEQCIBhG/4MvYtGhD72UI8PGiEwwCCBtkETDQoNR0Rp+QxShAiBK145/aJkxfQyPhvAKjbekIYL55eRkB2IUQamUDGb+dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMT/CRA9TVsSAnZWagAA6bAP/39eUDR66yn0gWxfYoQP\ntbZU7RjkeVxs4mtltk2Ba3eIqhfErP5J4gUgtP1qvGk/LL7wgNRdHUfC7PEb\nV1pyR3G6eRtAGn8ndeym2LUwMVFaNGTNfBX+uKJWG41hgu4wZny+ayqhvdcE\n0ZMcmECOrvPWlcN+fpY+jhDX5v6onw/0wWj0V/Gnl0MtBldjHPKp6JZdKgAJ\nuZ+vEAQPT5v6gl9sQEfELYhuKpXc8XO7GEHwMhVR7f33bNtjt3s7mVtSw485\nXSuKAwah6iGsr/1Cv+C/5g+OA+0ifDuGKcZBZmz+qZQioxURXIXDgGalIQ5A\nso0lVQHVLM0TOgWdYDpVHFpakdXxYfkm4EEzCavqFA+wJXo0fMmNtskOnXOg\nMSPktX7UBzXaX5DQb7EzecdqnkYZigOZTV7wWKmRC6McmuOFd3Iu46dSVNq8\nE7Gn2cRxh1PpFdn0pTmMIiSN7bfnVOa7ajA2TwvxfGySyS81tD1+6XjmkRIL\nQTx42VicoN6K4xmmnd2aku+2o/l9FpP9O5n8ET8Ap3f75hyvAD/jgd3whlq3\ny7qELrmigVj/zzXHY1tMYheKliHbMRSjeQlhkEnnPZ1C51J9/rxwtShk9TqD\nCFKDsw3Nyg3AUU4DzxuvNRwZ3bjEn8fDTlBJ2dWKUPaPVIi31qnpkjwMPanO\nNc1R\r\n=uGaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/density":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_11.0.0_1618527486507_0.4292741243693161","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/icon-button","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2365c56e78976469ebb588da924f7afd4b74f950","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.2ebfc5374.0.tgz","fileCount":37,"integrity":"sha512-B2tq7dg7l1Gj+uOv24zD9DBasw5xQN9SD2PaV9HUT0BX1fOB5CR0c45QvNJDMKEFwokbm/kZWgPNzS5BZshzzw==","signatures":[{"sig":"MEQCIEalVQPfRayyHpII5Sxs3hRf5jzBktz0A4eMz/HL7TitAiB3KvIZhHCfRrNXausk9iH+0NU8h0O+thpzOfk/X8Op0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefc8CRA9TVsSAnZWagAA+agP/2KazcVf8VhLj6KVBrMX\nriOcqJ3/G8qUFR7VynrBF0/lLw1nezyP2JcOEaJJzY2sYgyjDoKS+b/iyAhk\nLQW0BFSk4aLEoA/Mwk2IraRq285m15Y7ZzgH8qlQDb1cVpftFK6d5APVLGcx\nppXMBlSODpDuqmOF/jA0wluz9QdcOdY13cq/GZExiJgt0Wb/qBpAJU646LPy\nKdqyx930pFStPu4I0OvZsOO+AzwiZP0yo/k8bXVnt8f1u5RdqY7YBK3pla/4\nHomXvjG972WEyQBQtmwX59ciAUFb/SptjaKwti4JrHSBJ2dDIJSBrqAyrUAW\nzqAGBV5NpeL0pTZ2QuSc0CcTxvKd960UQyohTtYR9uIcMPaL1om79iarpdoj\nzmfVQuVKlZH/U1Jh97xHbNcvEQ3i/echZzal9hzshPeXyheE9nR3i2a1PjmH\nypDzMbVVWBw0npAupOdXqYPc1dCA6vuN/8r5WJfhJ74hRNLHrhLxivJps5Mk\n7t3vBE9IDHX3t0YEO9OEzvyTYX1JDIdjNDLq3YTTM8C//clFSDm5Jj5+hDuN\n3GRX1kr8CDOq7BmWKMYRMyawRIXGhx5nEfpvLHj7YUyEUVKi7wUVcZtvkQaj\nRH9TsWL7xOTYc/k9DHcUJ0ElN89MGQdn+NUQVETrw1wpCBbBcIiWQMvTMh5I\nLCf3\r\n=D4dP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/density":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.2ebfc5374.0_1618605883888_0.6087797338576559","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/icon-button","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"878cefaee7e6902000e0ec97bc8e97c97c7e042a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5631828e1.0.tgz","fileCount":37,"integrity":"sha512-ol0/+/idbkuhRmZf9hdMYC7aQJfpHpNh0JhDQ3Yko0Mwvia8O/DbbznjytuO8MfB2bVyDen5el0mtQxbVYD8tw==","signatures":[{"sig":"MEUCIQCEPO7V+Q1J0IGPNiVd6qugAJe7S/6UChwyYEAQJABpZgIgXtDD3Q/emqb5NY/ZujIzJIbnKpR3SElb5tosMXZLROs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJhCRA9TVsSAnZWagAAPF4P/j1l0G7xhDGCcGmRp5L7\nlifrAKDl5VQeHR9Ieies0PdXrPAiu8eTZrpBpIKdoamonyNfwwGDg4uo5xBN\nbeEjp9+vaTgjNilG8k71YmWutSfFn7CIm3dQCtvUKZC+b6yyH4NcIt3ehIyW\nGk6HWyVXpyQN3K9OMGqZZGnM0u7aHY+AIBxtvDkxFjV9SNaVhQDZg7mOmmIa\nEVk6OHtfKQwTGRCsEzvjRs06d2BIY3k1W++9MT/Q/2c4PTcZdOpcahca+AQI\n4RxNzcdxRSoiMeWiGSMOgESQn9G2KxNrw9CzAz8+GA0TeuCPFpZJKDZOJAqy\nyVsY0RA378oh+YMpwAEFptfoUracCwIlbGw3XZBfxbZWh5HDeGH6g+2809Uv\nvrsbe9L2yV1OSI2awm1ktQaWJjRRvVTyQ2RPx+tI40elgPNcU0yrXruWvxPe\n9mHEyBBoCYYsmQrcCSCTOafcfwcV5/4JYbgBaSJgrFfXOpTGeb2p2FezEyxJ\nrReV/+oUpweki6SCocJaAc96pjnhcyHVq64eBlaI13DppqAKPI+8PTIzjCEG\n63+xPvD/kgmqx8uJ7xoncvgL4XZGRa8YWizx0pD/TRw8V1RlMqYHMsWZrj7O\nZxx3Kx+YVI1VOVv+raTtPHXlH1+lij7rMRKjz+AeDyLWrlVbtfm5uMlfdU9R\nW2cd\r\n=2Pzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/density":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5631828e1.0_1618645601439_0.05916365138579338","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/icon-button","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b51b4db92fad221f4e1e334f19ef7c0e748e095","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.bd685395b.0.tgz","fileCount":37,"integrity":"sha512-8ExAbGFfqjRQB7MzQh6WYW1jFKXkqdiozESehblr0LJK/J3yupw9uoHnMiP6PfqV/XHFySFafqK1fdxAqtSXNg==","signatures":[{"sig":"MEUCIQCFGoDdh52UtMsS6a5TV7t+lxbPqNqb+5rwJPzLcOcVfAIgEuKEYJS+lcgN+skGNKQw+HNTzIdtYvzbliKURQ8cq24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7HCRA9TVsSAnZWagAAIzcQAI9aArn6sOabrzq+K2E+\nfV+w5EjmnOzBxeWaKBuvfUJcL1HSoVOKhLTneXLLP4Zf6LTtmFRAQpHUbEKi\nqaoe+y99syZbePWoL3y5xz6ns/9j6NVnLDk6Y3kINvM7nhQie7CDdSUvfBb3\nbAPj6D0ameEHJgEVEUiOoqOBAFjg/xlMiDVogXLqKit6XYTGTROpx5dDhhrN\no7r/9S+2cN5c3EL3koI9umwikenRREBX3T7Wd2MoxBFRqvycI0g0RPmVbpNE\nVPeBIW3boIFQ6YSkQgpQeiUZ9eXw3Sj2sj36Gti88TS8Hsl+TNNHhco2VYKD\nWkkD6gWRUAdO7ZxtWOVI0s1e3T6qXn4FLaPjRy/IODzH2NccBle8i3HBKBOL\n4TLvmVSml1UnPAERuHIzPOoFR/29DSIaV569dbrv+mbrYqcnI8NIFt4CB7FG\n6D5x5esBQify/5vssC/mkserePvEacj55rVVJvWO74gRDzkyYVzYlfPZXBRI\n3DIY547eHXub1JR6CGw6wr46Dni8DJD0dvXMfwayAwt7dGEwNw2HW6AamrCo\nU410zVN6DeuSl2a3xsg8D1KV6qoNCcMs+GMpXr43QsC4otYy1xkuKKg8p19t\nz3NM2icKxs/8c6vkLu0egkec1jw0JX4u03uY7x89u4Rbm4Hm6PaJffQnivAX\nGLDg\r\n=nafh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/density":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.bd685395b.0_1618857671400_0.9341779166421837","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/icon-button","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5104fb874f400be6660072817b876841e3475795","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b52196498.0.tgz","fileCount":37,"integrity":"sha512-UHNBwYibEi/7qj6aU2zhzSDdPfZNwnXlmkV3n+ILtBRbvAOp2bhggApuPkYTFsmjlTUqGkFLivX8YseldUPfmg==","signatures":[{"sig":"MEUCIB4pF7kimBtjdbDkPHgt9yvhuUwHtrCyUD+ucE88UnalAiEAsUdJeJs+dPczL4FtU4Xg1W5AGcYn7NWSlltUdckRT3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeC2CRA9TVsSAnZWagAAraUP/1DApZYSu+kvKIQjJHr7\npieJ4rw6+k7C8LAJGzyzFJ6dWjtnlPDhtXr2LiygA3Am+1jpMVz13+JC9DZO\nzS8eOZyuwgQ5oon4sghK5mQptlgiRRv4z6oiB6kgIviy1YqaVseuGabX8QIt\nmYVV5WFrkivX3+je2Ltxp1kuRGSfNLU8n2zUU3gaf9pxmVHj2X3LU0zNFLic\nsCea9QCsb0K6BdgdJKGmqvAgRWLTmL7bwHOrMhS2sExSj9W8XC6/+n7NJfgl\nmsEkqpw6X0sSs6LiDse5/1T1gjVu58YdlAiQXSFXilkx8jrBEgIcGxE1gs1R\nv3K3Y96clgEfGrmu77JzuCN5UyeWVkFFtFEyCmruYUVlSktdbiQgNUYURhAJ\nNeDziYCI8qw8uCIz3/f/2uJsdLDG+2GWdJbaL8Gj812QKw3NmWNQMcqDuVwM\n9CsoTPWoFOyqKZtSLXCPhCr4kkvQNzJchodErEUVV4WOmPFBTuABYKuomj7N\n/KbnXjLcd5VOFzpQB6R6QGbaA2Dl9/6O5ZkILoDeEtskpGsICOOP5ix5Ia84\nMEniPHBL8A+pURCZk7OndrEPFGjt+RH4zqL2jlrt6lQjDpgLueWGK0m+V9OG\nr7UduLZLOX3rnoBAVyp86HxUi6WWcZQdvsy/YkrxwRFG2HHWod5Z9qb6Zjf/\nEmq4\r\n=pApt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/density":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b52196498.0_1618862261684_0.20559005678173636","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/icon-button","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a93847370b61ea68a44c5e44c767fedbb07078c8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8ba3e298c.0.tgz","fileCount":37,"integrity":"sha512-GTDYkHrBXhn6B+EU4QX6vgJPC8Hbh6Q9SEg87IQTTyqG7YSFxZq1QzOYXNOeIHR5JTacWtvPLZUjqS2lNUNHGg==","signatures":[{"sig":"MEQCIHxvk4NhHjk9NpMOr2zHBbDdGl5BaarTjqtN7A5a7VgMAiBg+jR1h6Ba46IT0MHKOcjpCmf3/xIxIKIpFWN/bH3hWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHWCRA9TVsSAnZWagAAVcwP/1Z+D8QrqqVeho5kZ/zB\ngO6qVcWCtNMkqm6Y2pIEwvp4yCqPdFx8QGcUgwYd0RwdTt7eWIwEGoHCXKW9\nQpglg4wlPHl70ypu2iqUbVK5afqOdxylTRyKwLx/QWVouU6Z+43trdX0+wxK\nI4z21cEvlp+WisgJb4K+KVMBconf5Yvtq0TGAuNd6KniXDtNO/fTmqasNE+8\nGX7bx4d0YIJk4ij9s0emJHSxKjrTGHWk6oqe8NYSggETzg5749EIYi1yvGfR\nk5VZc8L0cEW4W80/L/e+qLvPPK5hfohD8d0TlUPCVdd8O7nVN0AHVO+HT2w0\nypvFW1yexzftN+bO6B535Ek8dll/1NUI3u6+ic+n5qeDOc7xr4WDnhe+KyJx\nvsY1Z9HxJpwExKpIWyaLFuK/vCEaU999AWCxnRWLLYEWq8PZq+URD8GJX5I+\nIzTogi2JfGPj2hWpwIxG/lSPzrsOVOByl0mVFTtBeLqCmomkWgZjwy2e50Vg\nT/RKDzkHCYGC7s4q9abZaXVt2TtHoeG0k1Nh0qOk2OwT3vcHnIDTrYclud8R\nR2BazsDxPUSJMJR2PbIQO6vhDoZxTM9ljcL1rJohbRU7+4TBSN+rHswHVpJi\nlTokWZKCQb47bylbS3WK+Q+S9I+rYFYSSJ1mUJEZzvF47a3ei2811EndsRVX\nsZ1d\r\n=u+sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/density":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8ba3e298c.0_1619014101926_0.2402717231468683","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/icon-button","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"202b99a07f7b53dd8054a9b7ab04c37e091fe67b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c629eab71.0.tgz","fileCount":37,"integrity":"sha512-DK+z3yPW2txpqh3HoqzeMG4/BMMPgtQ5wZN/GnzIPSQEKk/kt9k55h5IlqE1X++9Im4Xb8KMVa/cTOBPcX7l1g==","signatures":[{"sig":"MEYCIQCShVHw3o8X1nTBmfhQNOpb9W9MhdSooRbl4M0g1tKjVgIhANgqeH7peP81aTt0mmDKkFBILhNf+NzN6RigGlVHtRF/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOPCRA9TVsSAnZWagAASeIP/As/ZHTSGm47rCGEVq2P\nNfHdCHaMWSuqLHpVO5+v/BgF6O/FzaLmC/g3RbmXoBcFziorrv8iuyLRftpo\ny1W0L/8o9ZiRLr6ZtDz0WgTkdBc0bOqatXDf0XI8xcZpMD5oaJZcVTI0yzz9\nociVC9LmfGpbTLNojaVnmRS1BVzGZLFLF+AvYCdUoSC26EieUDaIqprTlNN0\nonIqqzlkkJ3pTzRVIEySIXk+qRY66EmssQh9yzU0kVP5QZupmTq3E+a0HDet\n/sCxGUb8hhH1dHfnrlMC4Y/1RMgjqvPVyRIcBfU+omB8FEFqW+yhpFj6YRAT\nWlmnoNk87tx1MYIk6fI+tFmPxwzHEYiKgkpp2d8eX0/nDwQTtBOa2FiG6Woz\nYrYoMGafdCyUgRIfZxZht/pMC0aK799u/TadJxhgz8MtD/X0sZ4Hhv/thM5T\nCepY4ImsB/7oyOphFRUMXhPtYC138Eag/kGBbELrQq/5auqsfbIwsYqgOn1A\nTrWVmQAnFCSfnighgUEwyA9tqjGXiQZYYgLcYTPN/PXBqegXAko3qf39uzhT\n+Hxdfr/S3F6+Pble/q1BhLrzMl845U+Y1D/VYgnde+pLQDK8VKahWFsg+QrS\n0yH0jY8XVPexigR39G42NPRF+tSSMd0QaLME+2htf3uYd/MnzyIMxQjO0Eg1\nX17l\r\n=VLia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/density":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c629eab71.0_1619035022835_0.38269692878899675","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/icon-button","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d5629f4a6a80c9f1e9bb38bdd4534958aed442","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8ace3b810.0.tgz","fileCount":37,"integrity":"sha512-z5sPHGAWx+sr2XQFfuT8dwXvg7Ai5Z3dbMqFxslxOI6IU0gKNtbGHnuy3V3ZUY3gbCAFD6dj68UdOMUCXarLmA==","signatures":[{"sig":"MEQCIApp8s3n2YCxEOgfpXXil/tw7qegCW+SseXxqJ035Y3lAiAqh2pK8C8cmL7xYplL3WP8e6L9oMaz/bmOuIQ9P+EZmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0WCRA9TVsSAnZWagAAyOsP/RRmBeOw7CQQR/Zz3MHA\nYfH1NAO8q9HKM8zpwAYTK2Fj9bTfiMfBNR6sBG8d8HEgz8MNHFBD+W1YVNYp\nT220oHs8zLpi5Cc76vLMXtHUSGlx4DEp75Clt/t7HWvLRyju/tlI0stGwqKF\ndQgfbSTwEPkJ4QG38wHQma1AYdJ13GlhJCPg9wfg4M3q106LWwEu30zLa6Sj\n7cr8cmv3OK0m6dXz6fstxpgNzbPzPgUaI29yD2xWiXtxeLR0+BmlrltN8srp\nau0s7EYneA9dzM3yIAO4m28xPLi/qILmX+FJnV/1uu2uP281yCSJ6RuHsqFj\n0HyG98l/hln0BWjvszCW2+9PODMr3GRxGPlEEHJJ7Tb8T+nKz1jZb/+irIEZ\nWdH8teaJx7yUYbuZRyiPWpQmJJwhfsdq+eD5JNNc1xQUUf4JLNVZxGbJ8Nf1\nb15LJkO37uIWLyWoZJ6m+2kfMWibNTOyF3f7X8nb/q/Zstuwfu+ul/v8v/Zf\nJFT+UQ7pJm20iSlK/I+ZQJ/I+KCGgnAfIz66o5fKmAVqFNw6Hf413rZGJWlK\ncnptfDFwcYer562EgzeF70Ci1O/ZaA8aYbp5rC8p9syp3W1X4lDA8wxJyqfd\nzjlgQkK2ejydmMhhhzDqjsp7yNx9uSF6LLnQdYveT2qk4uknibYt7fU3J7AL\nyzOc\r\n=iCUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/density":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8ace3b810.0_1619037461610_0.05796982863041067","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/icon-button","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbc9e33992bd547a4f431d6ad3ddb1e1ac9e5702","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.70beaf42d.0.tgz","fileCount":37,"integrity":"sha512-qp5LVbI98h9VPWszr3EMz+0XopY0Mg+uYKAtr84lG7yhQw4LYy00n1JH+fV6/HiBbtLkRScVtH1JB/tx0jZelg==","signatures":[{"sig":"MEUCIQCXafX2lxHKHDlbm4JvKKqEZmBzVcYp5kU/vKNeLZaZkAIgE7/cbK0p7cWg4uvhLhNpe649MnLo4BkJkbXZrC2wUsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/OCRA9TVsSAnZWagAAfaIP/RkmfI/b9cH7map81Q2s\nK3KPb3kkCEq5jxKfCV8NcLK6kMSRYaQ05UY85N3bZeo7AA4QanWnm2xVgkP/\n6Sa99ET2ArYSY52y4YpOF6V8S3t4nEwuxv3ZylMngaqPZec2F7bqrw9Nyd7T\nGIpyCk3OXEpx1mC8HzS3sb/2dFKqJt8Wz+QmqArm7tm7Z4pmKalGStDcYR3V\n5VJFBl7771DnGrK30dlAe8uOKzcxcZgpkwI17UXgyVmJKbqmQVcmpbxWcVe1\n3vXICzc6U1vOQO45kU/RpmFyf8tookZADhlZxMUiPoW47Y9qs/4a1W1lb4Sr\n8f6woUcf0FvGBP+I/7Je+HBPJeCDke1cxy59kTVnWK4zcE60tq916ek4P9ba\nEYlVwqoujbxEWjtO0gWBmKeEdPsINA0TFpR6J17rrcvUYa7lRVTKFwy8Fk6e\n4JjCcn40Notz4gvN5Wb4RF9W3skyu7vdQ8mCM6eNxfzgmU/33Zam2BClN8pY\n38QnzR4rS+s+GnhJ4Z7v6k+5ZZ8CgxkZj9s45Aby5fsO3IwAsqTsxrcfPosu\ni/jZmabtOU5Cy9aqDb5ZF8GOONOuSrEHy7pEHDF/M5LezKSIWX5zopP+9PqN\nbDfi8sAb2atWUEV6hsjdwr8si89tuMtqWYw4nvE+UsYB/Gq+kX/1YycDibsq\n/rI3\r\n=OBkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/density":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.70beaf42d.0_1619038158245_0.2867715858463955","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/icon-button","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b8852cb1898da778384df3f6c7828d05b092e08","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.cad489689.0.tgz","fileCount":37,"integrity":"sha512-CuoFbPaFEr0lCPJHHm+FmpGo45KWrrLYYrWrmiVc53Sevsyjh69HPbwXCmJwDUldPoKOSh1qx9L2pV1w7SvPiQ==","signatures":[{"sig":"MEUCIEq42LHj/wJTzKxlZD31Nny7wOWWnlHXOl+cabhD8lhzAiEA2yv5HLpEyMy+LS+Ys4HE77nYicVj6HT0CRI++pdyZ8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakRCRA9TVsSAnZWagAA5CwP/2R3JVTW7DVffelQ54dU\nx53VvNrSSJK6emjqywS/JklyK7VxrxBwjvDisQtYogK3Bj6jZBD5OJrGthzS\nomxIw0GaA8CqkWJVU8JCDEnUbyWd5vUa34ufR30r4O5Z+wUXlb/m1Pc9bV7g\nsD9oSvjVepIP32s4d2kwM0tb0q2AnCfP0JNysKupBu23EWDsPgqNSewdwrza\nSu93j6c4PtHWwS5EkHpbHkuKb11CeGN/oW7Z+g7DmtywoMQDfKyxbWHJbpiC\nweeZeXp8hNW2MZ1TIHsxvBzwLFed9vjEtaz1j00jWSoIkkoVSjGIuhDfQ7n+\nHeUtn1dgNjUACJwJrsKNA1kQAPL3zkCHCBXGYEEPH9rIgEpWHohcKIw4twQI\nFSZw6+Zjo1eujgZrhEQ9arqCnDbnUUIGGAnqsInrRUO4Tq0GJ+ZxGGVju9wl\nuqvPxVr/+WOpZ7qQifKbiGA8AQdsYQcnOwMHcbFeBUICxAl3NiA3CLcuLh8y\nDvMngif/IlKpV3jj4CYkVfQNzLlv9AGpXXRQhtITeuycQ3HiAPzkh/Fgfyyt\nzQaOn5bv9WgEjvtva7GKXKP9/K+c4Rc1jnG4BWBRYQbj/QR6mp/293FsWxGl\ny28TQ5LkLrc/Pkki2AROpO8lte1Zx5dMXf4lIQLbPYiAvMrHdhxqVEofvk+j\nGhND\r\n=2F0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/density":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.cad489689.0_1619110161105_0.9477833126477606","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/icon-button","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"862ce25f768e319cdd564ab0a18458285670f5b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d928692b5.0.tgz","fileCount":37,"integrity":"sha512-ZHEQOVOOLOfOY9+0nOXLBx0OfSSVlhtD+cJsqKiSj+NnkWdsAIOs4Tt0+2RfTWn2eaw+8i0o6ZINaeoQk59T1Q==","signatures":[{"sig":"MEUCIQDp0zZBJyxrpLFEIBomkZz4cQLCuH3SfqLlR9bwmShdoQIgD7fesj0Xa+KEsWTmspS30ADQoAMkbsjfyABbO6CUNf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUYCRA9TVsSAnZWagAAqpsP/R0jmWJzUBnNAtWXicr2\nDsaOHaQls/P/qVCPsRvdRn79wBar+4rbuJBTs62ZPzhss5XrwCeeX0gb/EKD\nzP5j1U3YrL13aekABcPohH+3XBZdSSmm3ddUKCmxZ6QKN8CouAFExafugYDw\nLoFHGckVN5p8meuxK00uPSEeGwHM+OVOAJGNq37pS0sq5e2bfuyVgzz21eQH\np4lGyHRyQHDUKtEQTsZ3kK3u9Oqmt6nSRYfK85gLfLFzTVVMvmHzv2CZsJ5d\nrn+kx4YiTiXSmOjD8ETZc9pBmfEYjnvbyEYYgkIMs8a/CItrTlJdKS44lc4I\n+yyvHoM0lnNdf/LGA7t4fXq0eUCgI3Y6U1w9/bYvpDyfuWMhxlxqQ7p6vtFK\nVflP3NvEhoZPCBpT3Y4QU18Hs/nUq94N/FKkUg3XxXYi3yNbi05hI56JGA7C\n072qeJHT68oPEvFbELgUcGzthSkqpKxCtvdTAZga3+zpehJzu0v2tEgHUVjR\nHSNw6aC7cWWfx731BjbTLMU+/RKx7aJxthDVRB/IwkYEup0h3ApnWvVRGVqL\np7keRdt1hN85/6JAmyXzf63TjXX70FZVMMQDou3XlH0Z3F0gkvLvOIpRRAQK\neqsOtz8pG6bE99lQxzaHbmMPHo0RGUgL2a0sN/jxs54Q9xUl4gWX4f6wNgbN\nxpMh\r\n=bY2N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/density":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d928692b5.0_1619199255851_0.4944228988100501","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/icon-button","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4d574c6291e6d8ae68d9871099c001ff44a3a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8f68de8f3.0.tgz","fileCount":37,"integrity":"sha512-tR8jPl9AygDMtmYcpkclC45OwPKuslauNhJwF3Hwombk2OvpL1Bl57VfOzalc6YjT1jp4y6UpBsylO6w1DqKAg==","signatures":[{"sig":"MEQCIERPPHfiZBNfTL3WRtBJ8+M3mP2SmA3ATopak8JwjZqhAiB8YQuN0nk6AcjKs33ePwOYHI9RXjpBHBYtoTQtEKcSdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4tCRA9TVsSAnZWagAAstsP/2pdMSHv8wWXtLRa4mvB\nBkU78uiSXfpJndbJowNuRWadgunwg3wIQ9G5OfSOar4Oi0mVp/iibU3LP8Tv\n2M9Lnyz7mob0fWf0gLcRusq+iQDENbe+pAtjFIDAaa7z/OhCzkqWNdVkPCqE\nUIAB44YBBoQbY1e+tMRMY4Nuy9SWrzetJZBKwth4h3Ti/8eIKZdrhNatUWTp\ntOMgLfBYfJrPQtbmQZv1hIu9gdnZlj4ZbavEKPvzkh3+m3iPll5ahjn+Dbic\n1tdvv3kU7/qspB3WKn62kcbsh09Fuq2hbsRJEqMHyPW5eoKPF19/iIvG3e7P\nFub0n3PGTyi9LuJzSPRw+gkBxyISZvQOkW8MjMswY/DSj0i5rFxl05LcuFnA\neZL0RtCSFC1IgQDyLmneEktuSKo04sJL5KJVI6YU+AKS3RR42nZuQ35djtB3\nOzfo/Mjd8+ciwxJvc+6ZbR/ScvSAySoCCkVTZwg4q8vn+3TXcytMTMw9QLFW\nwEbo4XPSjNnnGKUBxziIeZmzf/TgsyH0KERAKimGrVHHR8z7SBEwW2Ku7ZX9\nf9J3/kUfavsmpnRrs2AwRPqcDpO70Hd5cLlgCNTijlesb3yyjUXmaGDKiueJ\n+SkAcYgn4dkqDsVco+61Fkfei7YvbELGkma+YvXEFDrm4eRHaGltt+BoeMeQ\nxq56\r\n=CKjo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/density":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8f68de8f3.0_1619201581409_0.8955528818039908","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/icon-button","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c78beb3f7049ab68b70946dbcdf493b1161ae9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.05753cf77.0.tgz","fileCount":37,"integrity":"sha512-YPw6P+jVAOWfV/Agmw0UB/EQN9C8PRfM3mmhQOW8oDE6f6n6H4Jnx1addTKOqUTPLYE1HpnUAhgO0zMqk18wZg==","signatures":[{"sig":"MEUCIQDjfbMObWp1FKvA02jAvNdgwOax1DwQzcWdHbZK1Z3NbAIgLQ/YJqPMnegdUuQvyQDA+tVRyB2cWnrGMW6GDhrLklE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1uECRA9TVsSAnZWagAAFEcP/i2R2n/vhop4pu2vN6L/\nDpiqqTesdNSKzu5XCU67udp1u9lNgo/UY5wlWjwS6ANXCSavS7Ue8sPJ5QVP\ny+s42vLYX2D3pOgBxVr+j7WsS93ZsjBysLfZP07bzH4XplRsbwKUqoqwtHNQ\nqrOaCvIxVnxjSj2ASE+ZPieS+vS9y+RwoYR74PHtRlI/Qs+rMG/TfzEtLuaX\nDjjnIAEJLWQZ9R1spoFCjj/mJ8zgi5V9wM4pRYv81/p6GVt9c2xJKiptm3OV\nLCm3dI+WLiO6fcY5bZb9N0/H0gyqgCFvjPwi+oevYJE4LiESHPY2AsHpSATg\nhTKHYl0WPr+9eSVHRpcaQ/wZYzRvwHpwmuWsk4PIRooCJJhvktL4ZhI5DWGP\nznaVbdtllHcdAdnKzDOyxaDNcK+d/nEVHd22AkzMvYP4E2uvyjf+pLJ0NG+u\nCGWrkCMHwZX3rxcKpjTozJEqQaD9PcRj1oifGky+N4z8RJtI5um4e8gxtOCV\nkzBq1HJ+ZBztpIR/DcDog9p8F+n1RkwnhWSD/vD3Oe56RUU1AsZtxG3xlDqY\nF5pAJms7aVb2QUevzEHua4KUSNJZPX3skuDgnxxOMICNOF8yDZ40VoABg1Z2\nYNw1MkClQTkm7/jvDGn3zYGZdUV426ezAYs9C3YFwTD1rsaaEIGVBZ4UcjaI\nqV5o\r\n=AHBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/density":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.05753cf77.0_1619221379682_0.3964730251057229","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/icon-button","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8841d066e08992561edb4f56c375df06803cbac3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ef43e6d96.0.tgz","fileCount":37,"integrity":"sha512-Xf1HK/3mVF3M7rWnNKANOOI9IQDV2GOa6TPVg+zT/fZT+ayn9luV1KlIeW14pBnl/XzqxCJ2yRgqXzwxi8H3SA==","signatures":[{"sig":"MEYCIQDvlIzSr6iDgF6Wj5ZPVqQHVkTaIGfQlejhR+H/4+MyxgIhAI15us/Wcejx0l/RdDZy84SJwjEh0AIA9K3rngvAmgEC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1z+CRA9TVsSAnZWagAAv8MP/3isjiC12agMWEgZOYT+\nnjqRV4qBp4qdGxpqbg6M3nsp/8BFT7WDCkYHAEg8eIrUI4HOLkWpRKCZ/njk\nJRetzcIkmvtYTx+TdSh/raYah9ycKT5EqECV8ogKnDd7q/g55r4D1t7Tbv9v\nzRlOTQ37M1IpUZvcCbYrEQxi0T7rwFWU3BXw2FlLYfdisIqhUL1AExEkN4fu\nMKoBN00RWrajXxqt7LCCw15ibQAP+lVHDDJZNftRmrt5y3ROhDxcPcTaRLX/\nhzSC2idcZpttKzi0317Q/gEBdq7eG2TqxzqAYlsXU/f/XNhvPqkoCXWjZyfM\ndqfscyaZaMDlpr5w118zuQiKDM3YoGwhwOXOgR7y7NsK0eR2fL3QMYliBIl6\n9m8I47yrH00YgULBzkO/Gw2iasuC5pgS4nLAKaplU5Qf3yPuSy2US9F/UOy2\nIFYZdw6sT4/WQc9cVnhae76YlnhZ9cb8bgAMJr1VRpe3+k1GVoTk2/6lOVC1\nQFVvTTdLR9gww0sKB/6DI7ZxgD8fQMiz+Fzq3JTOgr9ZtZ3EFi3o5Znj6teD\nrkQRLDZw7NwF5D2PcmBggmxf6IQ7cp3mKiRlvMQee8KnM5MYnsz9isgCHQVh\nLq4a8PmAOwKbSXanNIXOigoM+h7YC0cr8joQweyq+qxEg5ybNAPSB1+9zvNR\n3xLR\r\n=Atnc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/density":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ef43e6d96.0_1619221757987_0.15002404751246567","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/icon-button","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b0f141096690a3332f2c024cc9fa95cc75503e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.197f64fa2.0.tgz","fileCount":37,"integrity":"sha512-vKxEa4VfYHUVdk/Z+30uz6LYEpi/2w36Bcv6Hg+sCtQDQIW7xhsKoUTjjq0cBcT5c6B4/sW+aY4vO73eywPZJQ==","signatures":[{"sig":"MEQCIAVWsQr46CW9sEDs5Ri1Yb38vm6NUNfLgGxqYzZu0R83AiBVJPc3XCMgUdo6Mp4zbz/gfDLCMt+O/yUmTJzv/EoByQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPUCRA9TVsSAnZWagAAlewP/ij0+Kz05J+5O15JBrxo\nl847YsE1H/ya+qYdcjQB4u4K2MXKsFLjCWWGFfCu+cUAdnlLuXQdNLlapVpz\n2H69iBeuts2HqkCEIp2AkoFGDnrSW6tVzJK+bbjMDH9nNtrXde3ijYfzMDQA\nyL4DhXCCums4c59yACavQWL3lf2f34IX/YLdAW9YFnzHMpnGD+etICfCT5c2\nyaLf+av2OkWLw1enha+BgRXMQui0e0LPkl1V2hmkwD+ioPHdYZwX3FBbFNn+\nUoa/wDU+b7Sa1tZIk2M7MZ9FY+s5di3fSQzFFcB3Hg2zODsEHHhtMW3N6mbO\nh9Y6WbsBXFC7AgsbQLgrm7NEIXpylSLHnMOGNk9rf0SPbt6MPLlGq+g4uz47\nPUOecinYz5Nokb8WYyfa04LPDe6K8O+RSuLKFUb/MhESs8d84QASE3K6vEU9\nNYVNQ0xBdSpAYa+8rs2isruPTam726PZlYg1oReg1OONB4PSYqxiu3LWCgaG\n4yVwffJY4A+4aoCSMN6bTItnA7X9Wa7nha64/gWLAvyXpd5NnHP6pwhGABkb\nmJwMNnp0ADQrHyOtdP/v331iG023rvh6VQnNKSeYiXxcpYQd4GaPaejAkM0V\nANYGuvNGiyIJRSV/0JS56OWGBEnzE/5b5O1csIqSXZ2xGqQov4Bk1aCTEe/U\nFtBm\r\n=Boih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/density":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.197f64fa2.0_1619456980322_0.8581121703251304","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/icon-button","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ac3323993ec03f03dfbf767cbe2927988b8bcc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":37,"integrity":"sha512-OyqDpYBqIhohLiNdokRWaM6L+9rd8I9zgoaLWTavsfpp9+9Qpaz93ZfLAPSAdZLHydDqn/SURidXNCUp3sLgVg==","signatures":[{"sig":"MEUCIFCCE+imo1kOpB3QdAoDhyOhW7qJjZGc70yRlz1fACGLAiEA3Tq7u/DEVxYxayHKhdQtz7TKBhoTL4eS+nxlJS0k70w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2awCRA9TVsSAnZWagAARlkQAJcTMWvEMA1wenzGkrnB\nOsgCV+YDHOdcD1mcYVs4eu9Sm5sqlXwW7Soe3ByRGUscb4zolpMyqEL3VZlP\nhh5D/i2OmHlPSDmQgVa7yXvWkmTvjp8yLeOuOPyUgZCNZ4HVSC/Z7F5ytNp8\n2fWpsskclPxZgQf502Er1F1CUNRK+tWvjS/wdZ8U2C9DhybUHnvcPf9rNyNy\nsMYN9fxUYTq10P7ntDhsiJ2IoCulWNF2D0QrbD6wBuYNLrb/YFvayXUmLZH+\nuvwB+wq7873bp3aban1v4Jjwu46LpxO9cXvTmAbi4Zrx19wY37bna0tujRLK\nhq8N0WVPIPavBvtrt115LQMT0nlPjwvVOrkHB8SWwQUQDE/DUXr2pDaXDtGN\nxJdiM5EjOM9CgNnQ+18vE0WQkGKsyP8koRkwYDQM++4lUaViqWMiSGWSDVwg\neZoJwQ9uYzQ7gZBdek9b0es9myDi3aB6SFEISgWJ3YVcC+cz3wAmGjfKmefw\ncZUmcLGe66VC4/3FQyBMZU3MVymb0xxcQgAWmIGXrxmpcARjMrPyb/kTroct\np6HqM6RgraOCDGaN2eRFFP5h4y6UiqXgIZyvPpDDZmSyYr3SwiCNGM/POBpM\nfPvmcZQRcqHENczRNEB+CZinWXJaySHb2GlTjJalR9gw+EQxEfUIFK8VnVcb\nF41P\r\n=TRhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/density":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.55ad2d7d8.0_1619486383963_0.5653084758214302","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/icon-button","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd8469975c00c45dcaa1237f7f25703de57b06b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ec4ac5234.0.tgz","fileCount":37,"integrity":"sha512-GA+7aEyh+wjWa4uPHmIOgreSMkeucypygFIEIdqkDUC2NaYKURHagNwBQfrJPpUJ+dmFHI8lrPyGlr0VYT80vw==","signatures":[{"sig":"MEQCIHZ2yqXolW4rTqWYe+jYrP+RDJFUNFvbRylWF0qS0NBsAiBBI7Tc8fGXuYuBADmX+emNBf3owQcIK2tLE9Dg1HfC7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QlCRA9TVsSAnZWagAA+CQQAJX2aEhZJ7Vb6XEceQre\nH/UvXQTVp8mHTbhvX1h5hf1BxS18yZmESChbxPA9k/J/4FlcTuU72FnzGXkO\nNZGU8cl6miXd1tCWK7y+Zb5ONQ+RwvAVcwVJ1c2RteJ3baIxks6EPHq2ZT1q\njBQoxX3CusNI8iy7LgQrkyufhBlIfW3Gka8as7nCtr+L/VTjHO/g1SCERtSM\njA8LZbK2miP82zFe3oV1T4YCIyzb8kSBs5Vru39RP1OKZcWbVjPahXAw+Twj\n/rFAkUiOJcL6zS9LE0KDKkYBDM7prydO971DhPl0+u3O/N+pRpH6OAnE2D4/\nyepa5lPNUPBw8if+L6JSQuXsJiUtDTiF0E7K6Ry9eRp3rdLSy1bJalqHmV9m\npjPx7YlBxnCLtBSt1CgXPFgKf6ObZdDucEf/VTmAQkYQQSdp+It6paQ1tE2x\nFXKjLrwiGT4iGhUe7QX3TymWFt1fxJlO4YMexfspzQxOwRnCAoYwfcR2CgwY\nzR5uFS2aKqh5S5pzBjtogNA8H4VTZHIyfOmXxQ88MlSf9Ktd5Rc1kzonV9na\nlxcIBx+PblcdQs+cPdNH3oaPo9OOcqw+33zBhqH8/k/Lt5gum6tOGwBGxWfZ\nGXFJd6Z6fwQWPkKeuooCBXXDddCnxPF271nRumeezugcrmfz7NQzUyjN+7lK\nYscb\r\n=c9Ua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/density":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ec4ac5234.0_1619510308546_0.1909794174053594","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/icon-button","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d1052b2952b4eb4f62d0fb8cb438ed9ee673df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b0579acdb.0.tgz","fileCount":37,"integrity":"sha512-Yicn2pJOGx2JjJJ4PUZLf0/TVk+A74lWRBJonO3Ra+tA5y+gEr5+AYc8UfGXxQg56Ble3g/GuiyetAXeyw5woA==","signatures":[{"sig":"MEUCIQCgGpYBeh4ccrele05uqeETB1KbZSU/USbrG8iQr0B+bAIgYd4HnQZx9dJfkMzzfNCmLxEWfU7NV7Be4ytwjmHoRjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8z6CRA9TVsSAnZWagAAav8QAJSd6QZUw6fc6otHqcVB\nmA1QNDXvQFqzL44LHCFuGxBqKyqAjoThBdGfUxXuO+Xpdo4kTSYt4P69/6ZL\nAtEllNCUo8uHlrvl8Yxd8LsDwSDBsMIG3wr69y0vnzA8Q+vQusQ6u4ZcWVr4\nkeTzsIFh+kvPgCEU/shw8iMoNO4M5n6L1VruHnIPjZl7jpzQLy/H4tl3S/f4\n3XKm3FhBKoIZCFw00DLcYWAtIwVbEG6/Auiz5WhoGYiJwUwq6fdPWiAxuM5M\n3HkNpi2F5xlmq9wNVemRY95M6oXlY0PPmiud7CasSxrGb8fGHrC0q1Ouzahb\nryzfB2gsOU4c8aLdA3aLxi7+ZVw9kpz/opFsobJevDVEJ9bv+G8rvVPQ4Aij\n4exo+QqsGbmA5JQm9q7XaQdkYqMtPfYgyJc3yMSnQWR/628zxN4ZbBeMMPpY\niT34LpwC0f0K+UkagUUXjd3idt4D2y+bg8pb9rCVZlN5Zz4B6sCIQg/1ywMe\nwvP0N1d/XN+BwRo0sE0zcU313behSDBdTnCT4oOtk8DUE2JoLIULQDR6GCHS\niTWfzSrq2nISHyktqIQBqSamfWyTPO1eZh0Qk9zkbcFHbegiPhB/OMrIGKOz\n1CRwPVrzHJfBgxU62DIQE5O8zuUAv85Tew0cLK8oS29ZnWZ42OEqt3HRj6o9\nR0LV\r\n=jr6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/density":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b0579acdb.0_1619512570223_0.8644446816406448","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/icon-button","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f012dedc18d02cfbd97f055feb9b69620818a76","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":37,"integrity":"sha512-fgFPjEi7ZEOy/hwJ9PXkve46ywt4/umPlq8GKakHFf4SqUFiQJHajCSj746F1HYd3sw0XbGR4NFZetR/+xHMwQ==","signatures":[{"sig":"MEUCIEVkZA74hdT1SSAgL6mFcdxzYnQ/y+EAf9EUc/zJz4K9AiEA5QiyBBLvv6srX8tG9LtFFvy0CIIkeKs8+KzRo6ymqgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHq+CRA9TVsSAnZWagAANZYP/RxBxLLA6uj/9e6/kqS5\nATBcNRbf9SVq87jYoVaQX1Nq+VTeh1rrltw9dAecbF1/OjVMaPzPce6Mo6Of\n0zXVLkp8Vix568jAnL8AhfmsyU2mf1id7C4elBOAwopvopFCOn16NrB+8swg\nmPE1bepvD5PwBjj6ZmMmmpLmI5A6fE+pMkK66hM/Pj6jZ+UfquyXvF4u9Yow\n2XF5Vj6OCHzHW3w0FURWnKeiYwaze70gUmqIbXekWjraj/X2rPxnsvBDzn4V\n56qZSyE0PSkM44yyd3x/k4WjbC99JeZteAn4s6zsFfhR0CF4dGTvNSyuD8T7\nFLKumo/5CfrcgoXkkJcdxnLtBzEdodxZCQ3Ct3iV2dWyAuMo+rR+upnbkXXd\n0jR50uNF6e3/B9r5NFverbggXBsnJobQumzZfM+4MkCH+bfq0IfXdSBIqlpY\nmUgMxQUGF8GRU7/isHUeuXTwaLQYiA144daVckin1mEzk2Ihnq0sdEqfbYW5\n2+bRbo5rbGORdqQNi6Ueskxj7rUXyiV974Ss35QOoTm1Xlo2ZnHTDtSBTuQU\n+RNzgkLPdAtteeZHnRS2FUg5CKq8ZHT0cdRlm1+k1Hr0xmUmfHwUrG73iMLE\n+VZ+4EJ2Zask1MyrYeHfkzIGyEgHqwbYRowUI2fxfEpB4tQSCeaH4w8BV88W\nqG79\r\n=UegP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/density":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.81e2d4ff3.0_1619557053904_0.21712550157388177","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/icon-button","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"174e2d8e3e8755020b55ed272c846ee1f83542a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c8edee52c.0.tgz","fileCount":37,"integrity":"sha512-OgcJHzISCC7sVQh912N4LE6iPoVeNuHCkqwskA5vNUXHN15YlQlZXREz7eZ1HpXu67YPRGqAvmN04U+9X1CrMQ==","signatures":[{"sig":"MEYCIQDQgaJpidJUfaPhIuwO/GyYa9gJ4uuvby7VRvmeWPmlhwIhAI3fdJ6eWauBivwI73R5f/Lx8fG9NsH2xhl9+WdBNeMm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYVCRA9TVsSAnZWagAAP+MP/j0bI2L7ggvQmlUwvWcF\n1J5K1PX22G3UhCec226jlKSw0Da9mjfEb4oirDFBLJUG/Uk/2z9tu8GJTSSq\nmMSIL18t4+JCl90hy05zaCiwc26kITiiOsOFhowg/CTPiZbhy95510SJKhpg\nME9/S6dvCtyNjAEKByqewrAAscwAnSm1USQRlEdTQAEJRAD8HpScs09cM8Xg\nIZe31JeLI4BzKCiFqaMqQ8LcIcbs+3xaAOAODqtI97w3Q/Q12fBcrBRq19G1\nt2ahEa3M/bEsu7vSau3eqY6+TXsRcz4x7SYElnxLjo4XiUicsrxc2fKzn7c0\naxi23GaBr9+Nlef55jdHlE5i4SeRKJIQ3tK0qcgdRhKvHAcqSYOmbEMnzPyF\n7dNrn55er+NDXPiN/pqI0y1WvteUdHH+rwhWeJusgx/VYJw9JhEFuUi0Zts7\naAtuyk/WRURNucS6elIG952fnaZp5JIu1KwpOg9DlDrS7IvrMaj9OwJP8y7C\nAyOCXUcD9/+1ip/9o8A3lXlcg6dv1G8MzF/PsQmPv83XyF9xlcZrXE2wdMKj\nECPrtrO1MrhgC1zzZN71TP4knU2ncFASXqbXYcKq8qm1KrYPKxro1CAOeP/w\nLJSf4tMI82XRhlo0c2ettO6/wKoUPO+zfos/d/ws0ZG/7ngMObxm2aBfr9vq\n3PbK\r\n=kziL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/density":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c8edee52c.0_1619559956773_0.5473590828029278","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/icon-button","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2725cd0176406d1d43868e4341bb66fe9b175e43","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f5b6110d6.0.tgz","fileCount":37,"integrity":"sha512-eX6TvfbjlFcxz2PcDU75bwR+ajKISbZ4h1qU3wAN+KMxHjTQohaN//zKbQ3b5QxNs2egolLpfBBAkDlCfPUg1w==","signatures":[{"sig":"MEQCIAqU+d3IUR11PYtKqVZd6A0E2M8HuZ6TGTE/jNNvqn/GAiAbaDILryQwWIcy3F301s3XWpPANOAT8y/UV43/CnmldQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsdCRA9TVsSAnZWagAARIwP/A7FppFGCerQNQEMhvfp\nQDM1k56C9zWbGCX/82LvJdNS9znUSitRN23SeV/6IOEXD+1AFdaWDOaO3G7w\nfCIr6UmxNaXFz4Cf5688N+tads08mSXVsmTP+xipcftF8Y8JZPqKybR1vGk7\nfRZa2iV0C7+sije33XxuQpYFgW9nZiqVSCjF32V8jhuMHjHI6pqVq1iiOuja\nG3mPJHssYCAUqZZyZQm7AYCU32iXr0tqOvU3+S+PFlas8Oxhnn5ntmvD5oSM\nhddki0jLIS5PCssQMYh8LXoe9lBevrVIt8DAU5JRNe8NuqjL5dZYS2DXDdcG\nIHZR0ZHIjVdQvKr8PxDmAX0xsgYOv1dh8bkW3r9eLTowNRB3sT4SAd5z5mkP\nzANCbcoIRtaqORPyvO9x2+ypxMO3R1OiPyUbyxgJe4do1HZPazM+/iFxVbfL\nXxhd6lQV4m6bewBST0RiNMZkLVrmEXjaWxrWygIf9JWvtqBc6mrOKb7gMsdy\nrJC8bbsf4MphIP0YKxS/FaNAEitXA+GW/3fALS3f6uczYXA8UBVkOmINvbDz\nWIstg+mVCPLQeAfKB7kd1R0Vrm1GsR0MqlJqfZC/7WcOpSN67DMsdi4yag8h\nRea+wpE5enb/egSgx08rpY01JGe84Fd/orSk0N/P37PfLJZOq1ddg5JpJ1kD\nMrv0\r\n=asJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/density":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f5b6110d6.0_1619561245353_0.027122444224718878","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/icon-button","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06e7f8ac7cbd5e8c1220ba1bc398ea27489d7920","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.cee9b9e22.0.tgz","fileCount":37,"integrity":"sha512-X7G35lU4cb+6jjyEQEZpGdYNULnJBjC/yz6kKdcfnhoECe0YNJGbAVGQYMHZPbENdheB2R6Ae49EGAX0UgUjMA==","signatures":[{"sig":"MEUCIDuVKJkjy6eMIGWuDiZeviqtlsCZTLh9dF0RHAIQwrIiAiEAhM+T95gMOkqWDH5ML6YsEP3Fan5aKBmvPihRJICd4j8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKh6CRA9TVsSAnZWagAA+28P/04gDBHK2QfY24TE2xok\nwvdZTIg6xEu1SGFXRpshAqicek1wj+o+VChUuZHzP7pJf+o5B8fIh5qtZD6B\nxoyLn0eAS9T+8v+ayvcdazcRBuaf6QEGPMxk1DeZ+IzKLNRYZFcDeGdFN7VY\n8quJ4Jkidsrt1R4iJ7gVLesMxD7SHC/PkPs8fPldpMUKb5R4YpxozDz6t09B\nCw5RWL8lhkLK47lkmyMW92OvU4KaMip6+Ij+SlV7zZljVeF3cbhwO3UilUM+\nZwt2r3H+SSsQOcjLxi+AnXeCPlgXm4mAv9+WSXylUnkU9X0i85TDJiXE5Y5A\nLF8smXwmnUbYKmv7ZZu/dw3BZbjCD5C7WHqddyPWdwV0NO0vs7CiFc7N3FhP\ncJFUkHQeiN1lYN/Mp0F+MlWLwE/e3apX2PnPoavZcqLN4wFyjziq/Fk+pzeU\nfK2sVpCZIsJvd5crhz1h3tV8p4hQ3Qb1Vj5tk7OiCJGAOCR5rXWSHEVS96cj\nIoJ7EtRCZlZyIvr8/TuLxyiO+oYeEqFoC5tjD+rkpKJyIgBy6PqydzRsoIPk\nidhsG3q1zIxseHuCcB08GQ1mzuI+zLC3sPfyVF/ZXIrekgwHiEQntN1BggAd\nELJZCX5zg065XiJyoOHJgEvDjPCQMNSQlnY/RsbcMovXvfDQtyKv1m0/MsIA\nL5Bg\r\n=uY7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/density":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.cee9b9e22.0_1619568762104_0.34305129448140503","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/icon-button","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea69706afbd6a668078b4d6f5f1112b3846c5eac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.96e83fca7.0.tgz","fileCount":37,"integrity":"sha512-pS1TwcEGnxQ4Ks6/3bczwvuk4lGcrKJIsVRDO0TiEIb2qDvGF58a1lxaoEfOtXLvnNJU+iODnlPm1v28BlLCug==","signatures":[{"sig":"MEYCIQCtCxDnodJ04wcW6GpjUevVw+/1WcTKJbGr4dOvsIhD9AIhAPrV2aOOc9xGB9BMoL45YXRYD+dwdFpfEwlRkgcmpSSL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzSCRA9TVsSAnZWagAAmZoP/1mzdpSnOSNWwtdgAEB3\naSoaCXBKA79Wd1x+g5z31sRoXwZahKECYRtJcRHhzvRkfXAGix+6Owxwyoz6\n0+dFBrIB9xiPa8qIR7m0sNNrlOvrjBWT2kgc1gweUBRUQgQ4OORhVoSWYO0c\nInTcxHQ0+l/g06cp09pWWq8hr/xb50LJonstlNecwT1qhdDtKQ1BqD7Wnl0A\nK1TKp66gz2ih+5gQWYKzgFkuEa8FFzQFDqjYOzRUPTWub7i/nQW/uBcP1FcQ\nnxTbpCO7mG3klKFBkpwHw1FqniCqORDS2NdlEmfU9OjAHziMxFuEd56n0oMY\nilhTdUTOdVuaR6OXkMtiRHAdvJLXkULlgOJLQikxGFPveJezdYQem0OS8oAT\nNQFygAa4W90EPMh252YlY6sQtyhmzjAGxP6fGeaGcSdcu59xrunusARWgytq\nKwjjbuS/ZenG15KzlC6Whtx8YabH+txua64kKbpbChFVvjOctpLmNJyjmDe6\nvu7if7Dbh7buuDfPJFWbs0K43pCvm1GOJ9htaXiNmLdvYOf3d0FoaLYzP2gs\n0EQzwhJLYKo5tJ997Et1KJIEXW72QvFqqoqeUnoPKucGbmGL8qytF/d9EUfl\nlue7+C032f9N3Qz95PeYbYgISaOsynboN5j9UFOd/pDzUqlcHJ6JgsPxTVFa\nr1h3\r\n=U7vH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/density":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.96e83fca7.0_1619578065633_0.3421295729998848","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/icon-button","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d32f839ab410dac7ff12a4aa0a513b030164a6f9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4c497bd19.0.tgz","fileCount":37,"integrity":"sha512-l5AR6zGHr4nWYZab7RhPKPGBXUHiUN4XDU6NgrY+ZfoF+paksN1BQfjs4mBz3r1luh/kj7phu9fzc/zJCQldoQ==","signatures":[{"sig":"MEUCIQCb06gOzLMo88idNqVQOc+ELl6hmNEgod8gL1qJb0b3sAIgRVRTeZS0guG/FbKe0GhGQ7rfzKdy/OHoRlQaBmnqf8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEYCRA9TVsSAnZWagAApkQP/AwWFgoZyR5+zIL1zg4n\n9xaLUAANSg8g3yTw3rvzKp+n8A/ViY8U9fSUA/WZTzzr59qDw2V8IrlZg/hW\nzmJKaOytx/oSEL9iC/9dN+EH6wotz7omQ1VhDrFfHbT0N1s+WnfDe0XXdCVQ\nfb9OyAxWjueYbRj0PjYfkHaOLhWNji1Sxzd6x7pfUWiHRvZLoL0FPlAnNkjb\nMmx9nxWQDh00LWUgPjorUqIRBFSJ5lY/UoOKaIv2CSs7ntZLyAtX8aSM5+9i\nOfBoROHU7u5bX10TOdJ3s5Ck98bnL+fW3IiOS6fh/R+J4mTMX4YDTXvY1k7Q\n45E4cQVWYEr6+6qOQCyc0hqpXzuPi7/uyP4FaGzofJDNFTmTz39tyJqgltdA\n91H8db/tICoe1wJqMBSuL6O1erB9RGb4ABEvUTkZchFeSMXxufHIrDpTZc++\ngwtryrEe7Buvsv6ziNr+gEKo5CIrukJJreVJyqv+/p58bDs1fie00UP6kwgq\nZ9OqazQM2/a6sPfMnh+7H197WzvfsvNfkjwLmXre/PiVXvM/BDbBR/0Qw9uk\n78oVsCJdc7E+5JxFQmWzfwk9CM3NRJgKtFPNdXwxzgKivcSoTiSPG0fgvmrz\nhAJhdyHV3gZDUpSTDvR+dfB/FookQyOvXm06BzawAtsasCBwN8tNu6GRUxxm\nNl7v\r\n=I+uT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/density":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4c497bd19.0_1619632407396_0.874979301442323","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/icon-button","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79cbdafacc2d7951a77d7014f7dedab5ca1be956","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.105b15b96.0.tgz","fileCount":37,"integrity":"sha512-QvvMi3gZE3wouXP4TEdZNB8FUchwBTTHhE64HErW5/5fuQmsUAHrYBUbn3KKvNYRMRw9OxemClxhPDBszb42KQ==","signatures":[{"sig":"MEQCIBHCJtLJFKhlC+kFkb+nDDB9N3JkQRl90hJ70VMGQWMMAiALpQJrvat+skZYvWVDKFGlmZf64RLWAlRseLTiqfzXrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddGCRA9TVsSAnZWagAACFMP/1JR+9qQDvRDTndB1B5p\nsChfr1cTASnPxAYNTpl2Rb0I24O4hBntGf7u+vL8kUCi2RRY8V+nEogyFVvy\ntuY2anLB2XckBj4H84OyKguvjMbYe8Tp2kwJDwsLZ4VjpsgLTFl1VYXR/Z2h\nnimlSZQCCKKlwP5l7tiXoPB+t4Owmrqnere/lx/sHqy9ViuM4wKllevyqKEo\nt6bQb0oQF67mDIQVoHRoS6yS6Oj3HJ2bkfKFrTu16s5FWrL/Tex3sQ5+6jI9\nEwKgpKuhfYkSVjdyWbdMMMINGzoCcj1p11491HXiLbsWTGbnS4krnplGgCDc\n2zYiWZ3Iph3KEHfmdu/KicRuKmf7yU88gLkAco+cFS3FqC6DxWSQIsqSt1qC\nxBIgAroz9nCqaCAgUPKjotRmTqkR8n0rfv3oNzw99I/T57eC3ezaqSMK0mmM\nR3tYTsTmf2ygpwDxDf/1gmvj07TN/L+/LuAHSZO4kB38WOXWetfPOpnY3gB+\nPBHfYW2Zbu66riLOGVDg0EpT810Uo9AI9WzbZYXVYlmZAlwNEO540XwALWO1\nyyKEBDQMIMy7wHfSM9BOYKmRG0e9Rt9gIE7w7x/jCvu5jB0rYm5iyR55tbNL\nPoeTbQm+SiSg1hdzzcauI/wqRJe4DA63bOz1DYwpq/ThhU4Ce+fmp9jkJJXV\nP1e+\r\n=Sini\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/density":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.105b15b96.0_1619646278314_0.36700208592254646","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/icon-button","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22cd53a2247d917ff1fa127fca0ad3566f5f3d58","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.6e20259e3.0.tgz","fileCount":37,"integrity":"sha512-YhmDcmIBBMhE0mPaNos424HM8oN+JT/ZYVmNLAQ/nmLAaHFbRIp6W3BKzwDk8emfAiIOLudS83NMgnkuElBFhA==","signatures":[{"sig":"MEQCIGvFE36keD7y1v8YyStY0Psog1KyWqh69jQTPZbBGtgWAiBpCSIS87jiE4nYwQ/VNnq+j17f8txkjOCWSkZYt+KoeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhUCRA9TVsSAnZWagAA8Z0P+wXe4o4x8ad0KivxNIPZ\nJMgYSoHyKvGCgGEOEPj0MXn0nVP5stCcEVHk/uCdv36ZAdL3T1MqGhDoh5Pf\nfJOgsof/4w0o0t3Mu4J9IsbUk6zjrbWB9VG1kPq+BZ9LWdse9JcbE0egAVBm\n7mXeos8h+EIXOtIN1Ot+Yy3nkFbez3/jGPdtr/0dV5p/mLEd1iKIAIEe1C1X\nUkusdBu1KI0Dc5QEnNmjapVJftPf/Alxuz0GWF31wNAFHKhlOH7IbrajN7fl\njMD1GC1MkoXyFeasA/iO9qfeZauvzPWnliMg9xUGETaRH2vFKwN52qQACkJQ\noF8B30yIt3c1tF49/arbqbipz5yfOmJlbS5z/qLzP39yE+xU1ZCs+wx++V5f\nJ4PhHIbEB+pwrKySalMO/xspi/RAt77yov43G1IeZy1DbQ+ckOblEVggQ1rt\nXvcilQJfbLKgCbQChS830oO33jHVL4FHtBZDoAN9Af9DPTBPlD/+NXu9WIx4\nEhXMB1NfOmTdCbMoAPV9fOebkA7H/1OlYwUFsymLDzLTXwTfCWI1mDmu66Nx\na7PJI0x3fVd+gKYf20Hd54patCt+MFEWL/MHkr1gHAL9bBleZnzx+94ojrTa\nqMQaBbkIRUm8Hc5uT2AgvDpLIMuyHcVvjlGLkCZZ7TI55Nz4LqFBkX4wENvy\nduGj\r\n=Ynv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/density":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.6e20259e3.0_1619646547962_0.8714486010844198","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/icon-button","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6df14470906543a2b57c7bd88048a6ad5ce424d2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.0f79a5d74.0.tgz","fileCount":37,"integrity":"sha512-igtNk5BrT9BupusVXpVL5nKrC76yRfvuOwAWF4/4FlwtB2ODsh0tbfeVqibUqNWdJ6ULq8quKFNPR0gIy7Jygw==","signatures":[{"sig":"MEUCIQCv/hnVmDURLXlVh4wU14SU2H/U/E3mkuJS07oLEEb/9gIgFq0GCR1v2aKmxdXQZPj0JnCEmkMzDfn8tR/9Im8gG1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTtCRA9TVsSAnZWagAA1gMP/RCHnJh3eciibBFKLZXs\nr74FnarSTPZmNZAWuZftSUySXRq6Ck4ged+T01C68YsMuOX/U/p8nltO1P+R\n27/CSwj2YCRIaEOywAhV1fkWaRSbWt9Jwnhosx6Qwu1Cfott5BayzjCTye4F\n9sedfUf9FepKCsiRobTieoSGJ/RLFJcfMHfiPBESI083TX799Z24qgnqbQ5N\nW9m+PwBpiLCFuTiNfJUDLAEyN6AytGjryIvQr0LONufB2btwo/Bu1HAQG4GV\nT3wDRMavBeTC8HHI3ho0gqZ5k9wrJ0MKbfDbYy8pQU94nD9jt6u9bxx3cvUD\n9+P7vOC25L8+Y/wzPevJi6cpr6cGZybcq4Cv3qel7QFXGDGfEZSkQXl6yZeU\nhEcjqo6tllmQ1g1zxwETyVURlBVcBj5s0t8aALP6suPQjtZQUYT9N1SG+VLs\nf+VoIL03ZYFTvkOHxoEAqTjRdFgWG1qcTyydChtXMjmuoLCPH8sd3YYEYfBD\nGVLA/TrbJ6HdI4KQQNd+lOgotWqoPI5Ga0NYA6cnVQcDz7WFQAKvpWBD2gBk\nlBJykfuJ9RlElFigS9HKPb2EHWuBXcVi+RMh0j7bHPpVVocURy3Sy9VCudPh\naC2YesUV9xNJ5/N3IiRbTT+YR//dGk2RRdu3vMwlwnQ30adnh4wfeio5RoC4\nWO4J\r\n=xKen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/density":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.0f79a5d74.0_1619649773524_0.6328283464199642","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/icon-button","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe65c2c55f36d54b84051d5c8195bed571783d7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.84f3db9ed.0.tgz","fileCount":37,"integrity":"sha512-FGzUDx/eFkeHOIfQ7/Vd1OOC3D6+GiAbomSAHIb83msGTAyFOb4Fs1yd7m26uMWKdOMTtK/1sjAgq8WOiBve3Q==","signatures":[{"sig":"MEYCIQD8Sqa6egpiLcFKcCdYoWq+XQiE/JCDGJ1RduJ05M/KoQIhAJmOVTLOAVpb4IaODGTLYQjj2VS+bpb/mQj4BhGT6rze","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisAKCRA9TVsSAnZWagAABhYP+QEOOa28VdDj4njNuZQR\nixH3STugCmMqgpqGmnbfErvCUw1sLQV7PbIJ3qMMF276KcpvpSstwWosO07P\nuBGXuqUfV8Obh4qHjn9bZ3XSFaxa54W/3bA/yaI6Im9m4DZRkX8DWIJqzFky\nwfFDVY1v87djtPzfhyNJYGwyrtvS/VaayoMpJGngnCuV20ER1MNqCnL+YDs+\nntdCQfdNdcdtYIsvckFT5n72EDNeG5CIa2Ob4Ks4FqIPyONU4FLLCpWrSEnp\nLGawHItHV+VqOGwjjAr2uwQryijDxpZ0oyjPugG9j1nPMmQPjAaNSiMg4n6Y\nlVuUUKm1gkks2STRXy8P/1c+YsWB0PLVVhaokOQGDTTCTXotk3ap0uR0QDVD\nFDDb3y3eb1GLcsJS8HynYAT9LK2EawR/2Q4q7UJgkRU5UuzCJxAs3x6c07rB\ng8C22ztqhoIKySmF5zLRGKtTsrq/HFkAjNSDwpKJgiNpt7bxwXWnUo9rtxrI\nw7jasCvp/biI7+OghAfuU+lABkf/g6JI4oZRpAHII/CyF0rG/G9GUcunZbpt\nE4SzxN4sA9pz4y5kb2iX/BYSMqhFu0SOlBfofWkGt5rOqd2uJrUj5keYmaDg\nWrhzkiqbLRpv67m9uPC0eM50927CRu0BpgVsBA6yHJtxGc0Ibb/isA81Y4aw\n0+Qb\r\n=9Mjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/density":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.84f3db9ed.0_1619705865898_0.23282513522883397","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/icon-button","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c099f582dcb21a976542efab45ca0db20d92239","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8fc29273c.0.tgz","fileCount":37,"integrity":"sha512-zTU34fWnEizLS8fwbdT5m5t5OC2vl5CAWItcvF/OSP2kUmjRJAewtw4RxvUpcn2ZYK1ntrHS/wdhci3ZqRY6Bw==","signatures":[{"sig":"MEUCIQC5MtiDffmPJDrGzTwuVz/gnrCS/0OSXOxsOnYGkWeoWgIgWSDsst3usvtaEwnz0juYdSIdjzEqeJoeFPrH8WRXFTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPVCRA9TVsSAnZWagAAIncP/0xsOXgPasd8uoqaGICR\nwyFS9Xqa3GM3JmVfYiUViX0laSrsUArwef7BVUWEgkuzd1uUGQyu3tTlHtwO\nDzTEmRkiLmXDWHqC7tXiiZL+pUJR4B+lFamdlwOJqoOykdUvUNlfZeGCuB10\nKhz2nIEB3nAhqk1DDHuKD0YubkXV33oCa/AJNjQifYooJj5hyjiyk+8NkdRm\nOUSaNCpGL6legZOOiANF4gyjIWXijAnQOyg2AJTBoNq3pl8NyRwVLUmRyqi7\no4CgwqBr96sGTtlmA5npmE60uRKnMUi0ogET30ypfd1II5cKDUqHiBTp2BlI\nDd5lhpWT/NWnFOI9/hOCnrfCKBTz3HdvAwsaRrGC76HgHpZYxJjCr6YC+9gm\neIbt9KgYs1JzezJQHanA5k4B79r+tMlCOqLlu9haZYdeLSuKWa43nYxZIYZl\n65/2yrGo9y7XXJleoQ8L5/iKAbzgL66sRnp9CHFnbCdyLJ3wMsQVUJ4P4vZB\nuliPn3Z/vyjfLNZ6FMqKChBDiP3y8nvHfRWcJx7D1Zgyy650GtlzqZIlEuya\nBP30/PyWC9ECRTbYPAmw1rU6pWsmNQGITwAZ+GExhqEWZopVMRCBicPiTeeY\nPltwyveFiVXYVKrZOZHD9MCCjb5TdH5QYB7zyoH0qfglzCvbRU9RacLMs9bQ\njzCk\r\n=QPjw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/density":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8fc29273c.0_1619731413468_0.5040499340491491","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/icon-button","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93d039265879dce96de01437575f628db89593aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c50d20bab.0.tgz","fileCount":37,"integrity":"sha512-GkKv297plRXAvI5c3IOtUhYd8+1m8ZYyJvQ/qUh5NmdQC5ZJ99ho2K/4Hw9ghuwvETNrM5S4HHJYemL/g/ghRw==","signatures":[{"sig":"MEUCIHp3P+BinO2yxcEQsJUgv70placgdbU874GdicMuuB8TAiEAx/i4Fe175o2EY8L6di0BBcZEMc9cUhXKPUeaJXPP/E0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrfCRA9TVsSAnZWagAAhlAQAKTL7A0kS7lKNgbDCZ2W\nKmHdKbHolLJx1nYqXWLKEGK5/MDaohR9lzE0tBkOU0SEjgEyQ/sh9kpPG6Yl\nPvmr02VB453oNP1POF/Notruns9c/NMHf9WVOgWios4kH5p90MVm+gFdTCcw\nOuoiPZCR+BNUnpKQzR4mu5CG2xXSN6jVAEJhLcHk4pibLm9AnYQdfCWGsJ+v\nFdiE+LvsHcnqnmPGcxbCKrhVES6TN/hvhfGJKgj3FR1Wl3dtXZZM6L2dtzui\nxCbugPH+yVNSHw1OMqkJ6+YVXZHxIJ9A1hFa3X7yEJlNr82vmUxwE7c6zgdB\n1jN/ELuDYeXDW4hzG+2mWj5WRq0Knce0ndHMDpc30o/J9jc/qSIeB0wN6nov\nBAd+z5dtA8PNGlrE8fHOtGdyraRbvPtN813Ofrif6uBQiOxiKsN7X1zjnqJj\nOfw5YdcjEDbrEvyth6+CPMYicMJP6y1FcjplRieqwhpyyFpfodARbGFCoukO\nTOXF/e4yhD6v58/BOMbvgIcqHliYK4tlHVIf4qkmUOr+AeUH8j9n/pDTFkJ7\n+ecJqckGs0/w8R1Gu1iRQ6AklFKfQVdtVEfh8GxOm4ne8V8ovDvSKyy8Y3CL\nw9yLbx4aXBkvL+GZr1RH5ywmniqq4jpdArfJ0fOjB2UeH+kzFA4cF81mN2pt\nLdIT\r\n=IMOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/density":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c50d20bab.0_1619737310968_0.1518263650180618","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/icon-button","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"976358ec554776bd3da5cd47a45a30b475022dff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.474836ad0.0.tgz","fileCount":37,"integrity":"sha512-v0ZFbwQMFEXgNs6eqgaXz2GO6EtfbOqtRY+biXahs7rf6M/ddw4AvpIxJovJxaqwyjbNGnOgOubh0tsJqBj2Tg==","signatures":[{"sig":"MEUCIQCxANFecc8rew5/QtFKZnJVk1YrX9tTyqx6DMsE2nao9wIgXH/IkEk2mF48rBmZO0n3EABl144Eq6+oiJLaeFN22WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0BCRA9TVsSAnZWagAA4WoP/227bP9t4Ejt67LjiRoX\nwxslfzypT2mX8u4i13d+Q4X4TG3DJffuVO9KMyjNjMMiRSFY4xd05pGcehuH\nuSn3NL5IJnD2lvVaP6pKaNOOsO/wMCk39C7JV2ADX86dDMjyYbEmB3cBykYY\nZS9TKzNSk1n/YD88LN/toukmudhcVA7DHlVYFgJUEgy2+gCW8P6yojfJ8BB9\nYaInugKXntKm/arHUdtYe9ZPO8ve7Bb2pqh/+TIUBJRoTkrwl183KM8D8TQ2\n+bl+o4xnSl8NLu13B6EMlzYLyy6LCe4Pd34rVzOvv0qhu4bG1VZAVcY+2XYV\nbQRVIUp2sbnAXBiyFnIIeNkyk7fYh/sEtaafvX8RlPO2RtpA1VIzcf8+j+Y5\nQ+VUrzbmj9B/kHdm/WyzHDmRc0a1IceeEoXh7UrxwgVnAHC1qFlAYMki9pAk\nknoKsxAleweRXoxeUknoOzpbF0K7sWNJo34z2vuBQC6uc2oHSSbh+7a+KGwA\njAEOts6xVbT//hxNjka4rjlMIoshKVUUxM4Gqq1jcAo9o7b6/lj635ZeDhTl\n3joP8XiUMSO0nfzWDh3nchac2RFDtZ4saiAuNMsBBCWzV48uuKWtIjcwiFW/\nqMRULJ79alymZHlak8Sz/ACwXW5F2WZNC0Xr7qNLTn9WfXV+x+bj3MPdEroO\n550M\r\n=05dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/density":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.474836ad0.0_1619840256943_0.7270238709943138","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/icon-button","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b12ac6681ecedb9a5ddecffaceeacd99afe2d4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f5ad92287.0.tgz","fileCount":37,"integrity":"sha512-J2kM0R/+QazON02VKp10XLu3dG2XXbGiIx/mHvZ39kDcrh/pLHafHoH84JiCbUpcgs/FYpx/BeQAvWrFzrivkA==","signatures":[{"sig":"MEQCIG2Ok3iA9fCbFJ5D9LGmTJ8+7RVkJAM9MC/ZFRVLxiHaAiBBPujQEsokWX9L+xYrFbL7+3fxAhJN65tkAgorgwdEjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9TCRA9TVsSAnZWagAAG7cP/3hIH3nI/P8JA6ekeSea\n/yHhsQlAQZSgkmNrHhqOGa5o29mMaAYGP45O7mfkvWmC/4RQ3IadBAxZYyOk\n0UhvZsy/BXvOoNC0TfwEoyMXst1fCboKRGsCMi9cWw/+1Vsr6xT2VQ3AB4zk\ndiIYe5MsY3uaCDNg2FrlPtADdl8b1u+/vwihhEzopu4bB9FgDE/YGv9OTOyc\nkXkC6n0y2kjumsjmqXdZ7uwQ+IwaEqeXZ6OSJLNvp9u3PD60dm5N3IZ+xZpb\nKFO63YtUwSAnfuex0FrDsWyodfitiu2od9IMxw1yxd6V+rBWM1kIYTSiopHQ\nbRAxS/yq4Oi/IwDJx5ST6KwvvmVdpfNqTZbuuYTto1VzJsq7V7aYO/HmWIcZ\n5Mh4pUDSThyxkMXs6NytO9JfJZEg9xJE0K30rbwxUNnxQ943eyyoG8Tu7cu6\nJScWhWvkZzCDJSGHvCzHeiX4tr7UkzboC1we6DW3/jWBPBexynciTDFgn0ih\nJ/5VO5NT4WGP02gpUsae/CdzXL2KMxNrNzlB3D5pZDvsjKhZA2DsTwKPBa3a\neSJFzMgolhmokLNfArNZ+2hoReX8gf4u6vkJjdo2N+v4jtgBHVKVXGYAnScJ\ngZEPFQ9U5ojrx8A3yyEed0rU4zXzNt7e8Z7gTUE2Jm2nMyXWSO+1XZJYEEcB\nFxF5\r\n=1Hch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/density":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f5ad92287.0_1620066131271_0.942694284610309","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/icon-button","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48af1129142d475fde3e9dc4de154b9178a4ff31","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.af453daf8.0.tgz","fileCount":37,"integrity":"sha512-9vdoQL9PoNAw0fvCGvRxyLGCEh+KHNsPJA7at2ujbTfy7HH7npM1rj3Z8QPlfd3YZ0UW3yF9nAtzv3/uj6Evqw==","signatures":[{"sig":"MEQCIE77FJdBZ0p4HUQBMpl0x8hSy+nBvrSIGteFVSDqhX6nAiAfW4rQru8DPtupHNwdWA+IRk0VAMtTMdZpahr3iBqQkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEagCRA9TVsSAnZWagAAPSgP/2R4tXxZLcX7N18OIvd5\n4+/VkN9uBQcCoka+3DzbzxJuTc/Bwvq2z8fG//mdnCCjE/D8PLjRthxQwppd\na4P6owVcDBfMjQUWWrBDHHJHkRu9vJBk+eHTpDIdEvqA9YZT2YMt8WbyUbM8\nYkaB13CVqsDzgjEvnUVhWK7IONvpcfXTE5kSHBMoCpYaLg774zMagvSSu1jA\nyA+R+xq5jGLlHtsfwU3qqant4qg4AmM9DyhqxbkgtQA6yqJ6XJNGHoDCSuvj\nCtFMyZnVHUbBbFoytw4AsVrB1E6TfwH/r5OgjRunnc4nQqj9vSECch579Jap\nrARrkJ8tT5EdpuX93f1r8XakKQa0QSDTlZogVoXiPofko9I4OR/rJYwQbbnh\na/tZlnOfgT4i/lBPEU8NX53sIuPxgIElOiIgaqTuOThN11wgrucMy/aLwy4/\nPA2IG9XdUYReWIkyi4VlwMjEbYX01B2vQjhsk4jNe0GoDgbzQsNz5t3WH3jL\nHtyGFkiIzNPt42EK6FO6sJaw7xg8Sz5BxGHFpbHN3G9i2gW+XLYrRj20p5Pd\nr5AFuXkx8/QJyKSDoHQDVwoQ2bWCp6QwaeLci1QQd5BU+k/FSqX+xRTPfbpS\ngSue3g9QvYWhzwIwj7gCBKaZmQlRXBE9Y8Fxu8iUVKkaOqrdXPLHp0DIXVKo\nnikJ\r\n=P9cS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/density":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.af453daf8.0_1620068000418_0.1920354080562967","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/icon-button","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8a8fe4a483150ca7610af748bcf91a6adcf3ab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.1f1918c24.0.tgz","fileCount":37,"integrity":"sha512-9oJJSuHBgB95wlQAwwwDaTZ8jYe+jdKJ6uLkKeVFRmuk7sXbMVd78THr7kf8bgs10N6C+JnxLAZspsEvvCzTsg==","signatures":[{"sig":"MEYCIQCQeCQuN7dcLf4KxyGjeFawI4pEclr7b3rQ2NyB0DUOXQIhAOlONpBvqhOS6MOWkvnSFwceE3gaf03ogBVkGMhYm+3b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE10CRA9TVsSAnZWagAAuxAQAIyE5QyBsu8ivdRbcdwR\nmtnAftiHKIhuZJ5XxlQhdNnqdXaZ2r/EXJB5zqx5hYJwpjKYz8GLpwGwzsnz\nq4qAyVE/CaMcvAK5g8xIHvgWQnhB6nJBTxE98xJgzoHMI6uahYJ/AsFTRgLN\nbEg5qyQ1LnxjYwxVExxt3Q4pPg56N93JpDQI6g84kuUdqQ6XiX54BVsaa71F\np+hXiV7wHE3LquWVvBDZt4Otgh6nrnSJaoRcH8onBAh5QQw+/eUJ5xIylV+7\nOu3/QmS5fWjhDs6mnVtHp6woHjrU9humKAGr686M38xixKNrmPf7Yg+hWMXY\nty6ltNkePsz1YMkPnMdUnOwpt8h7eoDdNo27S+r/NGxIbiMRB/UOw7BcVnZy\n+DlAMzM1YTCIGA+LybPHYjUvbaiR/yY7wuu7ZXcNQ/zTLqWLpEJkWlAxiRIx\nHwSkE/V1Ab06a9a+URtvzZDu7i/VmTbInCiwuQvPquU77vTqbJMXiu/DHGrh\nowKh1tR91dkTWlRhoX7nixfZ+aYzHPBVJ9X2u+T2eFy+o9veQp5dx0dBrqeV\ncqtxMn70FW53SFlk5ARiEVm2kLpZzDrJZaWkxdg64dKYzRxYAkzf/4nU38ts\nFVDk/66wIm876iF+5liUW6ky83rZ0A7gX4hzx2eNZlcUmsSpQ9nGbknjmnOZ\nwLoS\r\n=aNYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/density":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.1f1918c24.0_1620069747981_0.8548337316838597","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/icon-button","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b0893af29bd330491bebec5855da4a6fa104d25","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.33148231f.0.tgz","fileCount":37,"integrity":"sha512-HKNfmpsyVJp8GdCawrirAXeY4B5O7JNCCsi2FOXyYMx6Ab6C243+/VZ/boImPF4xUsDxAkxgRebGKxqbNQtlfw==","signatures":[{"sig":"MEQCIHfQcdvXMMtsi96UBxKtl54xT6PcmtuKPNkSLBZY6XsrAiAo2bX6xKYy2sERBF2oqzJfF//ak66q6P8TpdtLGtNDLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFDCRA9TVsSAnZWagAApWQP/2QcDy8iXx2cJqccPayD\nVhEvm939Wv2v96xqm7I85uCWxCcDOflv/NJDqm92ZZrN/H2cJl0hRdrHPmsq\nk9BUwAG1AI1ljosuAp2PwWGeSRBT/kIG33JdmnM8idv1K36oGtJgskHXGMwY\ngIPrxQ2DfJ63zQj9buSWw6bCWbK+IE8s7jaCHUEEJyHT5yJBv+XQLQeJu/88\nkACsDA7RAiRZYE9bh841ccygTR2xg/ZCxyxyFFs52HHFVN3p8khlxcOvDnjU\nO55EtYxIul+xFhgNqTwWGcv2oDl7NTakzapDlgU1aeXlaKTeaHUvyhQxEPuh\nK9fhNRfpJPNsHlrwTNvL4SeVseB6w9YhRYZtY6W6XB1WJbDClmTUAkBEdxaQ\n6nlglK8Zp3aeCbeNFNf8NNETGqmnn4LB2ol809HqMfEm05Cm1xAupvrFSj7W\nzxP3/uBNoBWsJcwaifwC5unqxhKetUEalEeMPvE+O7wt+iR/Jj3wa4KJRmLw\nw+XZsZi827plnJ5XRsbNPlfiJa70Ttb4ayigRYoo9dPIlENcVRIHteDF6iNs\npSh6jR21AjQHXxNVvH0tVqrfEgkMHtmK7Q0oQ5Cy6mce7i67z9Q+pSBWPJIn\njtnZNeV716QQVJf9xABX9NSuDglD2q/WV8mptKyxcm+K3hEBEPcKMiafnFyR\nspOs\r\n=DHvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/density":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.33148231f.0_1620070722654_0.47092464932636213","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/icon-button","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a85c7e51c84ab8872e2c5d2b8b07d7f9ca950b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.06b76fa74.0.tgz","fileCount":37,"integrity":"sha512-BUrIQOyC2FaZtzoZMZZVS1vderIGz0eqAXKNbugVi9Dc7iLNg5HEm+hxNVLsNGEG9YGtLzVFysglS65QKR4mbg==","signatures":[{"sig":"MEUCIQCTE5Yr2AZ32OIio4Rpyxu1hj7Wzqv/iRVgJxqnoIt5WwIgCzRP234ZwiRWZ6G1tRdKND92neoGnNike/I8l/HcMmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFL6CRA9TVsSAnZWagAAR8AP/A/BsLAhsWCaLe0ewcfF\nCuZcDzHP2WeJxplt69iDKW7a8bKhu1NGVKgq3FH79l1mLzNhvgsBipkkf7lY\nY+IgA5XhFCpX6HLQp6h9eBUZR9qa6wMPlDJwSIHpHWDYv9Y8/fxx5Bf+dFE7\nwKI2NI9WgccrPwTOejAt5j+iIKJFB2kystyX8aeb+MTNBElFhylPUXIDKe2K\nyiV4/sf2qzkis3/Uq6lHQXENsecuXUDZMi3qOl+qOZ1AfkeECIZivrQxw2gT\nRX14HNt8k9bGNxvCJzyDl+46KbI91ZeZtvcuUBGbPreQ2NwN/PIV404bo5ir\nHRsQXNCG3hcCuyCrflxS93wOaOHPsJH07k03DqoL0q2AyUg5HVfT/n+osjwu\nd9GiIwy3MiUysTsguoAP/f0/amVVcWTBeeIoKxA+IXPekPpkk7oZMkWiPkJ9\nAzl+iSwt+kV5d3csDnD6BC35oU55MO7OcyTGuN5qBGqPSJcr8kD2DWA+RMoM\nOoNjuKtGjxMoAdZCReimk0kOMfgL+OFmDcB9nLOCkjqJ0a5OllW77hjLcpCx\nlHsn5g4s870ixsLDapRSRyZx9tSfcX/q6bLEd1TZhkXGlpoazCPxdVXYQCv4\nP/8Qn0MBSt0awh0iknqc0Y1LMiBdr8EGZNdOouJYMHJ2xfH8NokaqtLvuk8+\nSkwC\r\n=M6KO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/density":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.06b76fa74.0_1620071161821_0.5838547307239024","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/icon-button","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11f062ebd4d4a36d924da730e9775d45005c666","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.7c5000473.0.tgz","fileCount":37,"integrity":"sha512-mD5/BivF5+e8MegWsQTeO8lWGI1G8uvU/BoJWDtVsmqTGey3sK169HPqkLrvjrKMJ+U1hgTytiybrf7kyLwTMw==","signatures":[{"sig":"MEYCIQDtdL2POFp1jBFdJvO/2uinGDeEDBydsDqDtUDYAIy8IAIhANyxtTZ3u8lailxTl6hRCfHyosyX/TuRjHLbxO4kaqQ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwgCRA9TVsSAnZWagAAkIIP/iXuZRrbB+nBWNyYuavd\niVEjyS/aLlZ8zKNnMG5Zw2CawR9wTa3oYLGV4pHi1QSBREma93a6mYt8hgJ3\neKeqo5FTA/1JfPB0J9qch/i0QqNWet+vtt7lWKiUw8UrkkqOmzH+PoGtLW1h\nlJ+Oq+62k9Xv7EM5TYh3eSsinzaAiOMjbR12u7BdDsXr4iBPxC3qVPWAbufP\nZUcgB8npacZbYDW4MIkR6wnTzgUcBQQhWCbA/FSkWzMl3ff9fVRY0oBkdEfh\n8JxAksa+Kl+T+vXvP2WQ2Dr29F7BHkogFFQsG0HoTHZ3Nn8OUF6Dgsu/40X+\ncQAiygDwi2pye/gqFL/mYUdC+gXL9HJelm1wfGp7Sc3qU8LsQJYgJTa+OVsE\nGdDM05q0vBRMvrs6PA0xOXdECTnJITh519KqJOzmBXEs5TZ3gilSGAyIZ/1w\nU8oq5VJea0HOTnL/GPhNU1wsmx6SUQKsasCTrq6xxncAPaWpZYU1ZJAcTuJl\n0X98+0I80KQqiBJLgQdglD1FNQhwOsH2pOm4Pnu1P4SwVG14/rJJQHjdzpvy\nIp91rmHRnp53GCgrOY3t/M8SWGMGtlAfstUR4H/Eyp8OdY/sQI0oipr3Aw7J\nVHb2VxDnOte9I2U6FWpswmZcbDKcPnBajpYknOdl4475SyXusEb9u8CxCklX\nlOQj\r\n=pCXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/density":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.7c5000473.0_1620081696336_0.8699486756334667","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/icon-button","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"756ae5ea41e14427bc47bbfe70c5b904bdbc56df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.de997644b.0.tgz","fileCount":37,"integrity":"sha512-H0E4Yc6q3CScYojg7wWbzklM1VtXq3EX6hIS3+Uzqu1mtWCrIFofbbiIgIz7h6nsMmNjr4RbA84gKAvkA7Mbfg==","signatures":[{"sig":"MEQCICUNpzIszRzHwfqazJLLPRPHLI+HTnty2iil97wNXoMEAiBm/zCTe3mAM+4pz4T5yjaQKEeEgnkVX47Um2Tsk5KVwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQmCRA9TVsSAnZWagAAadIP/0YIvoMk7sNdpq79xUtJ\npaZ7Lc357QeGYCVePDiwyPAiA4OFUNZGaB7DVT7APp86VNQpbNVn+QVt9Y+u\n7gbZMqiMbrUTtToPRfEInDyekiIFDOpxTdhXTkhx3KE+/3w1yo3NrDbL2T7c\nznndCGU0DGyL0DKSjb6CMiyOnIwGKcAo/8rn083ZVdQM6AWHw8z6QKdTq7wI\nPYFe05851wCEc3zAg6oToXLZfSSPCe9K0B9z/NEdiHUZgmDO7zl3Ag3EYAe/\nbdbAaKTsX+Oc2h1bX7BKiNsVtkolnqb6TMG0IFI2PcJ0eHCT+Vy9l0I1tzBl\nAlHcgsSCBwVWVJaDzbBhlxsJqTBxRasvDUK6T41XhhM8OL2QXyKR9E+5I2Lo\nG5VvRIXejbxXf6mHvwKDfdKjy6PdONSguu4s3bL4YFREIW/VWJdK1tSf179l\n4SZwOt0kJWL86iVAFtonyKiDMFnvDq/XDN/qvN4qNTsZz1cAVGL/rJJIR1W+\n8SM20wEdvt9RCd5cFjU6Lolt11U7FZMcSS6UoePVCA5cJaL1gWZ5l2Wbx5C7\nR/t45m6MPPOdWWV4zj5hyURlGJWSUI/vDqjVNOoF+kcaEE3eomIbW+UI+5mJ\n2PGCmp4TwtVBb5f6WjhUNuZzW+Ta+fFBmE0Bl+P2kKompopOJ+0i4jb2j9AS\nqcZH\r\n=s9f6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/density":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.de997644b.0_1620149286239_0.34287245037688474","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/icon-button","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf937ecdc804265ded35052410c2199a5654f4c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":37,"integrity":"sha512-75+6jLWODucWLM6DpsWp1YXo3iIMRwNdPDVc44y3iiZdqBelMGQi+XGShQosPxP0eTyCfQ4TmCmc+u4FP3dt/Q==","signatures":[{"sig":"MEYCIQDKUpKR5sdxzQpcG7DJixcPJmaZLdxp/8nGCh1faOEPLwIhAIFs0GOA+6LjKqHe6e3tO9xF5MqAF1fnT/7EnD7ABRce","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpuCRA9TVsSAnZWagAA7KoP/00+/4cCfaicLKGwgeis\nFs3ESTtqPsUWIgeOivUNF9ilQm+DyltDloEU91QkNZcYelGZMTs9viq9BQhJ\ntxJTZcI3P8b/3tyz45fEWfA0WVrNUZX9yg8yBC94RaVJFpqBCdLwfb4jBdcP\nMSP/7Np9ZZ5LYdg5ZOD0uTqONvhApeW0HBPhh52rCXomB+4C2FcOLp4f/lIw\n7kpzD6hyuIsqCmP+xxf8pPQA4J2qua8tipAmQnFi9BskQzKQgFNJ6j9R8g12\n+JjighiaNbhGwbfAsAQxOmrlHXTiaXxZvLcSmTlN9J/SUWHnKpbd7idkhe20\nyJSfMWG7l3vIUlrB65IlKHIT13gXYvbF29+hwC2XnMWxM32xHX0gbh7eIzZ3\nOux4zuFfvotWL4B/X/vxbHhQubltQX4r5sHX0ujc27LvFBTRtZeMuch3/iT/\nWkMupzn/MpKZeOexh/npczEAPOxEihsGicuWwjiK/aOa4AVf+N24ZEwh73Db\nWogPUDBpzTGtPw/ODlcTBiC0SBxjwWyg8n5L9a4OfW1qTsALzCf42mpDpdRL\nGug2VGZ6EpJW0nyRdG5QRvGzsBKWweZrdBMd9PvlAZwUrTLXLgfkEdV7oXxV\n77h2inJGo4I3IKwB677rRFKdQqPoyUhRIb5SLqwwE6+S+1q5Ad7rWkIuQp/D\n2Niv\r\n=URcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/density":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d4d7f1cc2.0_1620150893990_0.2855220797928413","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/icon-button","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c0fff58664e82dda4397d09b6c3c9c10f51770d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.be999eb08.0.tgz","fileCount":37,"integrity":"sha512-yUtcltT8GUrPFyjYy2BYOpKeD3Uy5IPJ8nFIreYmNd68dGXlCqDIamtlAfotc0OAxt8pOooF0nFzTkkmVcDang==","signatures":[{"sig":"MEYCIQDbG3VLaH1qICt2uUYdND1LXP2VtKkKAx4Kh0eQRG4I8gIhAPyfaOSlNuEBJGItp5xgWwrUu8ryusWu6s807k8frNet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYu3CRA9TVsSAnZWagAAr5oQAJkUOF2Xnclzf9oYffac\nla0sjQdkATDQsyqQpHVpNTGek95mySU1/8YcvUX6rmfDPkaeDA1oB1HVLkDz\nKUjkUqWR4VCjNL9rwNx3OMyvIPsmHtEnPOJM44fHvipJBHPkgY7siWY1csD6\nFDMkaKEH0knX++iVBvYU3OQgPt/f1pLljguxuGz7q6i1IeXZ5A+uEb4/wEVE\nL+3vConNW0Kf8QgbkMd5wFsYwhDaDIBTtxzINHrIee+1PShPY8K0WuNJ7LYR\nBSzob6of78jfefxqjgpIWFNZOavYJZWYicR7R0VsoOyyJkh/X3ozLLB/othX\nJMzkqBbxxEJT+4eby0AVPJGwfYmYEsxUSUkt+XJdnDZQNpaf5lKwVhT5Uwnf\nhEWizIRtFPilOsMOSFfN/Hl8DmLm5pwto2lIletmhTQKMTUTUSKdX29trLJC\n3Iy3V3sJ0B/12YdgIXPPja38w33Z+BQxs8pMK4NY2KzVv/W7aj8BaJ+aOovh\nZTtO7W4craF/U2QqPgvW6EZzhCrhAL/W8ozoZgf3dh8nPseELLxFVOqbmZGk\nd+d/9ixVqTJMUGVe6SXF5ltD/gWuVn+9A+HxBqt1MWxaxaU6vrSARE6QTi9p\nY5ZwenupH4d5O1N+gyWDKcstJRkKtphndyy3nWBr11p2iQJydTU1uQbhGJ1R\njnsT\r\n=60VU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/density":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.be999eb08.0_1620151222519_0.02900495946658177","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/icon-button","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e87add12f19f8cd4f8b0882711480ab6ddc66eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.eda1705fc.0.tgz","fileCount":37,"integrity":"sha512-Xxey8AjbyS6pIA1mxIBIuWcbqmsEG6CyypZXg8Au2FzQ2p9F0kXcOaWQCZKKQmKlZ8dSxT5N5wxcp0dk3rrUVw==","signatures":[{"sig":"MEUCIDIdu9r/fPHY7H2ILXLAjrKfUAGcXx1++Kx7bXx+1EUgAiEAlQOgS6zs4hUars3CaRPR+L3qnI1VbjyVRthsNnn7WsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwWCRA9TVsSAnZWagAALagP/1irnSkNTMhe8NBVcOuR\ngZmGgPfeAR3P2mj0P6b+3Fr9YQ1WhuiwTHt49WyCbRJ+RAiIGK4UIayjcfng\nD5s4ch+MlmlJm9P/9eJjjBQRHeLp11ODFckL4wvG7N48DeR3hTivsCiZWZ+U\n7uL6Qp50rMw08phXuB44BQ5iDGjpkYCOOioV+bsUqNCW5ZZtXrJvp0Q4Qpvj\ni0XJ+MaGx/iaKQRgVr52P8AKqgi/9DjS2n2AmlIrAyjrHQ5UQBPtgTaSRvdQ\nQA+FPKINPjadwQMwn9jG/GZIxfQGsUJnteo8fFKAHwJj5tFA6dFzHQ2sggUf\nSdDeU+ksJE+r7ZgqZbAPWKgdTKMdAPJrzKHRqlZTaG5fAxQbFceIR2CelGsC\nmeuRQ4iHZVuaLwsF5fPZaocIpZ9g0mfAp0hOKR4+XyA6UuvgNNzqBvXiAq20\na+g/Q9pyzt1c9EhW2lApUJhEWKtNR9sohi+NAwVy0eXFDVkKJgp4pJQ8ghZE\nshg+C1zhnRftvEc7W4LmvEp66h3PjYzwl1djotNmU6+BF+hdTiw363QptxAT\nwjgaMN+Ry85WU31OK7GX/6fR2biPCqxBU2bAR4gWR+eBRxgzSMQbWVVSRmiN\nIjyy95WQ4YhoK9O8N91XN+LL4KcEhRXcXC5Yie/g1gjFBBVb737jvo4Xb5i4\n/l2o\r\n=lPaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/density":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.eda1705fc.0_1620155414298_0.6037011409877602","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/icon-button","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"646883d85af6472baf5ab8ae6ccdef3456318c33","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.718c90178.0.tgz","fileCount":37,"integrity":"sha512-FvsyaoeeqrgQU9fRLVCAn0Beg7IdYjximv8J09TCI7CKtPHYeduGAL/9ObzzgFRrGBA2lV4DN71Jjfg+EDKWnA==","signatures":[{"sig":"MEQCIGENoO4Jp9ikuxu+Eirfr36XeLHMPLpWlpWNBZTsBWF/AiBuxKdJm83o5eOfbGTOIm3Is331I59SJOdyaUPcRCSJFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaApCRA9TVsSAnZWagAAeGsP/1hI5qbi0XElBtIcbxjw\ncpN8sVNlwSXnhFfnrhxUBtsqWdCpviIiKEkPDXu/KW9eOqHsdN78Jf26W5nd\n+mJYupvztpsiIDSNXjevNSa9DmU8c88bdVS+RUNzzd2HhbRAkn4DdllRiHHI\nCQqXP0I/b21wtYLXTSxJSwUUxMfJaDIyBn0INYp7uvo2dJ5PkG6s8MmGTKxi\nu+oiCOSFyIM1lyQyzTz7HajYhS14MryXLvsKp8UX9cNO72VEF3oRLxV7NIFh\nbhQs59ZZHpZylWQPllx579ghjgmscySkI3I8Aeq+XdJ/aTlIsyeNwFePtLVo\nc5ul0bjhWj+MF0hlud/kFotDzzyH/tVcQZsSPgwLNqwFxgy4cAYm2gG5FvZE\ncW7eTvqld6DaAUWDyoOtSlJeokSZojjDrnQLRlJUbXpggSFbqTnIZrrDHx8b\nbIeDp9AXxfK40X/uwkE2HJKBnIw1tEjEdfbcwbOoIwxrXJU1TPecDAALrW/L\nb9cQNdf88MZ1KvWCQu4MVjhFj93okmKT24vummHOwbvtIfNy0g9Zkm7M4J1T\ngd902FgWZjZwbn4hwe/3zi6c+UcwpBimCDe14U9PRM01RPLNTInDvNN6K7Q1\nYSYN4JRd13ZfUSATCMESeAAhhvO/P3G6zYpwR3AXFRIgsUrYrsFo4Ppw+smN\nvvh+\r\n=OFum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/density":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.718c90178.0_1620156457246_0.44812553762285434","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/icon-button","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c823b6bea52acb2fc2a16dfc8bcc23e5dbecefa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.0e3917299.0.tgz","fileCount":37,"integrity":"sha512-ukB3Lfal2S/IUZao+iLQaniRrYSHIimRJ0zuLKFIAi6wKbYsepYabXUmUY7iTnpJpEPQroKTEVSkSEKnTJp0Wg==","signatures":[{"sig":"MEYCIQDHbZwfT9+WJ/9tBULsIes1QCgYjZRObo1fm0hFu75uHgIhANrMwAH351d9WwopZy3JjnzEV3eCT3LhoZ86a7v/Yo1U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDMCRA9TVsSAnZWagAAEGAP/jGWDe9yBa2Gn8UFT1U3\nyMHPs4EiKziyQ3WPiq6eJXsz9VuhC8GHQ2OtfZuyqy3UJXk1i8pgmIOkeFxE\n2UKHK3gC/VOzxuIMZPqOOxKfeizyYSF9BacBIp6/+cUZgKi6GO2LVDrL0mvy\n8jcHvWdK3An2kTexrBATd6JrDh4VrsGVijMWO2tHgHM7gHamq5f05hhKlRMW\nA0TOsZwqmU4NBRPnCV6qqy1C5Oo442WK/2qhtWQyQRhYQT38QqtYWesORVDp\n1OkFc5A8ygVk3YYxITNitzT6K2sDko64smyBYA+dRVU7Xc4WSXMypjrnB2aN\nOUmSfhHyHLSr1nW/7I/GZz1S+Vrt5Ay57roCrhyTmVc5AbL68Dz5VF6eQhQP\nliHbtvjBNOjMYBwlQ1RqAcmChXYG6Y6Zy5WaCKuJa5evK7COSoqK1gdiBCtE\nNCucvd/Sqt2HokPV+Kf/7Nq2LL+1yLCji3HKelkiwYuI6Sb29NgwzvcxwsCc\nIGwOWCsznSWML5qIT/iVCI0jJ1mmyZrukQjzgReVEsJ4tFNoq/uPjBC4a14F\nzrrjrm074PVM1G0TgTvqs2LQbo46FJEtgC1SAAo/2ZZXCXyI/023F3St5MzE\nJepj2G40MTSrynWznNL4qEaGG/ka+uvKKRp7rqlPIFRtyu30hWc8lQETBYtL\nfeqy\r\n=SL+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/density":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.0e3917299.0_1620156619639_0.29597389585925793","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/icon-button","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6995601b77fd26ee93e56f3508f3fea0c14fc547","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.836b3c7db.0.tgz","fileCount":37,"integrity":"sha512-7ISfKgB99kCnzaCcPf32iSs0HPhQfU9Q73p3YAscV8qNsI2h/K08hgyHjEZcF0LA6blXdRrB20KobXZxGLaR0g==","signatures":[{"sig":"MEUCIQC0J+AwzQAhmoERBoRLp+zfpmSrCpjGMg+XsMzWSqpO1gIgeTSUEOUQI/bSlJvIy6AcykyRbqHBUBoh9dkyKUwqrbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+qCRA9TVsSAnZWagAANwgQAJlP+9fq8KDRh3KmFLg9\nHzsQINoF2w2efyR1fHJiCkD871EzUj9M8wosNqZvlI6CioDyj54SsZKKNAF4\n/VFkhauq058prISeAPKBPPV52f0HrCQWfOPBDGd5QOTX2tjikuDjaIIeVp/A\nmZemlL2iwnFx+4Yz1o4ff8SOHsiOSJByrTHWAdFNzNEuDQU1oLrqT7MAeYxI\nVqbAqqazdGP5UXIb682DvZGqMfQSFf5XLJjMCyix5y3nV8q4FBj8/Sbxps/T\nsJMysjnbOosCFSH5eCF4/MrwKFeNNkY7imAYiRDQa/zTwaJah4IUCxfwZ3cl\niGITfxsWbTduFIygL20OcXMOXjLtfNo/viZbXdVlzu1youZUxnT5t5qxIEGF\nP2V5EVZf0TJyqrxbe0LMmRS26p6OgA+BPZ3QTNc48kP0yvOl5fivz2Ry7LoN\nFM4TEmIJYdDso/wtjn4mFC1xdWpxy2y2+pogcFBoXHMqO6068Y7p7dkMuoAi\nzWnNBIGVjK9kqFqcUEqGw49kGLgvANQm9WBSkrEpBb5CTSqrkoitEIT0qX4X\nLLV1HamfvCciKA0WuAE0judBldQbFOZJyVOgOXxU1GEZMVRVhhSs40P56FCp\n4eqfqEsb8U+ll12O1AXdXlUlbnDBccBr1xE8x/Y6VwokgZ6fScavFOq41hIb\nphX9\r\n=rqDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/density":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.836b3c7db.0_1620160426184_0.7919587042606344","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/icon-button","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32c6ab06c6f9405d1c147e5fba7b589b6258897","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.53d4e6d59.0.tgz","fileCount":37,"integrity":"sha512-HDuw+bZbxl3/k3XaekxfHuyQStU1zU01NVsBiv5pgPIkCeLAbYhAV7fBgiDXnKuPj1j/xx3usGMIrWiOcTfNyQ==","signatures":[{"sig":"MEQCIG3OfG4NDOWVBq5IeZSqybyUz0VkzjIsAJ9EcQ4UyigTAiAKHuFkLOSEhKX8q1+tW7ke7xc+OlFc8cv0NfmCehHtoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNXCRA9TVsSAnZWagAAEpEP/2hKdkCy0hsAVsA8ejdU\nBBaYPxfhk1OadF+jysQ4rYpWpG7YqmBj3VMu3ngwVHYgkGiWzB1zsq1/XDI4\npan0OOZrElIlVvOb0kjzD3CDUjYnf8O6Y6wK541CESoxVuZ12rTl39thixzO\njNu0sLpr95zFJV5pgcuz9Bbn3pPCUuMH+G4XAeTQL0mgJDRDKUMxATQQhBXh\nH7IRXfWD6LK3lMNKGcaaG30dTzaK/u7F1Y/duInxEhcvp9F6Huw9rk+JUWpr\nN0wXiVbVAxi9FARGrW63H/XVrA5aQMJKTndBPDG8aK1HcQ9bc56FZpD/FwVO\nKDz3tU94wrXUAT8P8BumBeTC//kPlvxd2qSWWfXZ70M20MNBryREJ3EGJbH/\nKBNGkkknyqhS89qMmIG/ROL6GxSU7spZ9O8n3I87cerNPic13L/d5gLqcHTW\nbg3evqqnj0uogyRenmSerUEGGiYAAhuUu4IXpfHKtIgFTPadeNT7kgd1sFho\nKkuExOUaJkBK7z094oFBNMFqoaYRaN+LnYFPYFVHXFe4CI9P9j9FSeCkhxH8\nDap9KgHVlK4BKFLXVQtNYcHDj32cxyi4ANjUiuT4GjgFRwbIwdAMWEVf8qEM\nADteEBPhzIJTlMC4TcnHGw2FtPsaORZPsBth6wfPseln8sgwRHUcFoDB2PzW\nSw+c\r\n=oXCR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/density":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.53d4e6d59.0_1620161366768_0.7618797662232666","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/icon-button","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cc10df227ed2b3e9f7e3378d563f5ebb58b0faf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.18d147e27.0.tgz","fileCount":37,"integrity":"sha512-HKI0CaK+4j2H/SsqPwzxsD7P7mh5I/y1vO2ZDXe8ARlpiHc25Q1DBfDvyUNf3NLArJ9SiBmP+6BPOHsiWc3nmw==","signatures":[{"sig":"MEUCIBk3J2W8kkC81YG1ImKobcMbzUofqwRVpDC1P70IZTdJAiEAjz9XbXEWYeN6nEpf1Eu75RlKXPGfAPKQulrcE0OSJgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVXCRA9TVsSAnZWagAAL44P/j5n97i1HkmPk69+CJGd\nXIJfxPwrc9+gXTpA7nHf7o5Ivo2jxde6XZur7U/TFBXvsIzOuOD3U6rTYEE3\nHw7WqPyRjfdyywWNfEgJN/1GVTEerEVAw44x9Vgbq+vurVMt5j38SK1jTyT0\n7Eur5WL9kCd7cMHH/F/FP4Z6W2buLZYyPlceZWMM9xwbpIOYTf8GdlBCviF2\nmQpMwAmHYJOJaso4mVRTHnrsI3Mt91qxUxunTgnlQrNSzJnMevguDEGWzBhx\n2VQbv6IOa7665ZQkbmVhVir73+PttNMYmba2v8joDb3X2KYjVm2Hcs5sxd1b\n00Gatw0ErMEna/yNFWdd+nk2yOQOs4AwiqzqrkTVx7SpsXFUXHkWT67En7gu\n/6bmrdEUpXIaEJAuS3CbVm7AoNFzCe3UVzgCO8jw5bdfSsnZDDq6Vs+K7UG3\nTIaYtgq5OFVuD2Uv+PV7HCU76Q0YvzmtTyvPe9HOkXCKoRNrUBKbL3GdG5aY\nyHtMZPyVFoFh6C2RS+AbUbj4d7AClU32cMb/Bl94mv5yEScgQCMIwvz+AEl8\nv0K9oRanFtnH9WHgi93jMZ2MJPaY8/QAkubmuz5oO8f/E6lZblgdm7skKsve\n3VBYNQsVciheEBzZm+ou3sltl0jvkNiNa5RbwmXKU5OpgRrTCf1vrkX1VbMa\nQnQr\r\n=tsig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/density":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.18d147e27.0_1620161879455_0.8868500277275209","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/icon-button","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83a9cde4e77e8662a8194683421ce8e1628d7ea8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b9984794e.0.tgz","fileCount":37,"integrity":"sha512-QxN06paFZyzNR9747tX+zrZQ2ceKCVjN/NdCBJ0F1h9/fvNlIVGNmHn2kKGiQ8Qvnu7QiOkrM+ke9XxWdaBryw==","signatures":[{"sig":"MEQCIDaW9RoKNU/eOEYd8iT00xosTc/v90ZqvEsh54FS5aosAiBb1Qj3uhkBqk0nVw4BvIiO+R6z8ZoGenam+T5m8OhUCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKoCRA9TVsSAnZWagAA2J8P/jkQ8eil/YZdsWj8JQuk\nS7sJx4ywxtJRxwpaNWDIfqpqeBalTcMknAWbVoXPaYXgOgAuYaENvl+BBBVc\nG7MoKoVpcQXu8IrJRNmqIu4pY351GtWdWwjh5CUCQB7FcLQrooolGtMsi7EB\n1r3NtLQVCQHpKFerbHWO7lfkRhUzTADjAn2wwdjK6rZg9HWCRBio9C1fYFcd\nh4+yvezLjCydSzE+qGSA32hyNt9tgSqQ+lozFYWJCxu7OJ2o67D0XGpVl4Eu\nMzESe1zNue81Vv4uDNeJa97z5lmgHjPTInDovrJfHNVD5vbDgI42nF5quzq5\nELbMH1T3sZvGooLhF/cMz0cRDmXjJvYGpTjmAm/NoPEcnUwY1XJIpH1Oo1Yq\n6yMBu34CWdAB1npXA0Il9XEmbwmc2N1re2DduBsl6RAe4caSfhUCFRzGgHxv\nZR45TZj9dPx8KXItEk8XRt1jsETGBj3zV1xpFYqLVo5Bpck1r5yoNbNNo7D2\nGxQmpQVXozWB8t1CIyfySMq1uANfMQfLihmC/w8Q7k8vpItt8pseahfyXkBs\nJF/7m2w45gTMCKHoeDawhHYImSoYLWQ5YeyXFi3zO6a8RCRxPP0Wu7i2+2BW\nubTsYI2dUIp6uLpPciIiNF9xJkC3sN90fp//hpxpTq877MixIFw8XSITRyg/\nH+wM\r\n=xbMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/density":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b9984794e.0_1620169384271_0.5705442961391425","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/icon-button","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d920fd0d6c449f492eb04539bd16af43153114","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":37,"integrity":"sha512-n3HLAnnLUrZTXqpBEgdslePItZfu2L0N20+YEdrMs71uA1WPYanIR5uYL/KfDdBH+TWe1C+0C0QhOYc/Xc6v9A==","signatures":[{"sig":"MEYCIQDvB3YQWzubhsmmKzVJFY6Pc6g558HZOvRB0yYIvyTWkgIhAIgFpPLbeJE4VSCHS546XpiJVn4OxvUSthQxiCAOEALR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNxCRA9TVsSAnZWagAA+T4P/2BgpCm1wdsOTjaXN3Ab\n0J9PqLuG+1/zI2BvPVbIQh0BtFj8/qpdWZWvMSSDeNQnsNgDWUgLdEPc+tsh\neK6NN/i2lGzOiWBo6fDrkhxYXyWmwSX3buJwavxi5y9UzFHNG8SCKNDlOSOH\ngcg2FbVCpUm1YO16Jc472K8yFpNTGvtKotUlc0fALqZLMZSjyOSDHmoEMwNp\nwj0GIIt1NB0bTMDcWNL5yaLEE+ZzVJDH3Yg9zsAiFbhIQju2F+mvSdcHII2f\n87vIwryBLXCgKEbfHwi4X3MofQGmzdLtRBNascujZkbD4BgGNCowYH1Qcgqn\nqwg6H9zdBuPtfyjOu3OXqWXj4VhK+Q1lkM3CTxrmjF9zVHgYlO8INRH7409x\nkKDPC4GnzY6sh42DgxM1D3LXbUoMKG+/IDofjJhuva6spmlh5hIHLvUOfrY0\n+sl7/g/8Tq4lN9y3DJJ/OIG2Pkgm84B2EM47QRzHL62sevOmv17mfWYOuy2l\ny6TcMO9COROgsf4z0sx+qea01pszihoO9oGLt3/aKnLRp6TxvgxZZiBOBqsp\nBCd8sKp+SBj27DtBiU7UzGGz5GUWZ0o2vCqA6xSU2cNK1Eb7m4kWi1+5c3It\nenwXliCDkdD2H5OS7FQ2iDvRIxPbYYFg54JEa23TdkmBTNL7WXa5Dfnu05HD\nXRj5\r\n=WwbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/density":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b76f5fc9d.0_1620169585489_0.4157843892795914","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/icon-button","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac12ea14dd1ecf6a023a50755056f0dadce37b47","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.055d4f10a.0.tgz","fileCount":37,"integrity":"sha512-rCfyQqjGIDt7lTXFCt9qHpfh1FfY7t3Qp3psugZZmHQW2Qcgj0LbXMlYNB7SztfEAPvoRgrMth263epVousreA==","signatures":[{"sig":"MEUCIAJBoqEOt76nVXulXxs6sQ371klx4Tbk8Ouscf9vXfdxAiEA//9clreuCx7B6lCmtWD4a0bjy6c0ZYe0ql9wulK1lbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdb9CRA9TVsSAnZWagAAqQUP+wcjcghKBsvKH51J7eFe\nTEh+h1+L6uk4q4xCe6TlQCKQA4wIUvkjGr4c5pS4F3n06nOd5Ip4kM5WaQVf\n6dZMg1kUt9m8IUyRegNyPKGBQBs857RJnSs1kZTlyWS3umBA1eVorRPZIvUX\nh33x4KZ6J3r8iBRoJ4zwGwY6fVelePToMNCPH/G6e5186/vuill8nabnqrFe\nn4NwAgKd6/y9qxye+egXv3iAWcVcAHFxTEvIqxSPo9u/RDhItUqR9o3U4RLj\nRIvL8bdlh7f9qBLtmCXga+OcTEEJYGoYoeqiNgpxIplsq10PMnrXyBV+pMkd\nm6u1zeBd46uR/QPIxwuwVraX+NsP+A1+HWf0AK7x4t5wz1O4lTI6xLILCyWj\n7DAU1TjYO34X44+SdVpA1TDHbp9VbV+diy7q8s4t3V9YqkP6zajoxCtoHY+y\n2OqOqkzNeksbCHTmNZictXYKOy+6pycuf9avSbBiHZ0so4eZMg3Bwu2048p/\n2YdHp6n4UsGM/w767c7PBLccGumh3aCrbACPQlwMPhMDvZSNJQXXf0RriAky\nGvAiFqGZ6ad6JXHKI5WCwYbuoESNc15tRPmatGzakckkQ2P5nTzXfHfzAJ9R\nnVT/oOGK9qX0nRxuKhcvdH2MbNJONlVNEiVTFr7/J6FUj+BgGZWReVtnmBln\n60qE\r\n=NuSj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/density":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.055d4f10a.0_1620170492911_0.7011332519135289","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/icon-button","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61086065c31cd8c8ae53f03574e25928901f4bff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5b6a46016.0.tgz","fileCount":37,"integrity":"sha512-9k4jB3jkOw7HvVXQFAKugCycB6H+7JtiI17JKoIM+Oa40NaRjk273cR9y0cdRYTms0KdcjUYr9MhGq3WJcfLog==","signatures":[{"sig":"MEUCIQD8Lz4t6ejwmApdaNsv2AoI+mNm0rrThYqPuxO83d2iZgIgK1OtPJ7ID4tNHZ2tLaoTrKVGDKkdmSzvxGVj4KivMRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTOCRA9TVsSAnZWagAAt6MP/iXRHE5hCtCsIH5ZrJLb\nEbg4qxbXRMTbkT8T8sXrjrmGfo8qj3z5AESLfzA2KvIAE/bni9xL8uHjhp8+\n6UUJ2qVijztljIAm7DMK4/MNVpz1vIEL8/S3hwCNttuKCeU05cCu7fPDOCwb\nVMO6U6QNf/AcaDfYOy7gcWO6SXU+xxUUSjbFZ9s0D09Foryqf5L23J/wLtQ2\nGwLToaYqBJnHHxTQJvNqDRCH5G2bZmdqK8ZdItAEirggEfcB3YSXoEynKKss\nbEOaS1ye1F5Gm6TdspNqV+8Qwnncq/1K1lKdTN472xcTAZaoUpz324a/oQkA\nrJFBCfqdm71ZZTCbjhKkWW2Jj+qDBAB9/kD9adDwTSlv8tYL3fZ1LUfLEu4t\n5n6XfGgleWnSPbzvJ2px9NEYWSSEhMwsz8Jx0ScZkYlFvJTmdDLtbsS2E5x4\nTmWElYId4xxwv0p24QppayVpKnBiqp8vrQ2/TwH3JLNBDpkAT5ol955/WWJe\n9PC1OZ6fK9ZGdQLWQoWyOTjWpZROwWhdc6cZGDFnY17ihaE99M2qFaq593yr\n65O/GXqmppd7Vza4oKRit9CdkqEbEhsQN7G4WIYS0fUV1cfxhCAnWbmzVCbW\ndWxmD/y8IxwEPFRJ1qcrVCMRVKNkmezejMM10i38YXwVvnSOU9SC4UFZTU5w\nmbe2\r\n=OkFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/density":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5b6a46016.0_1620231373976_0.043433663313843685","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/icon-button","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e996f8c950f322353ef31f5b41ae904fda830b65","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.33c9a737a.0.tgz","fileCount":37,"integrity":"sha512-lTh2gpkSmfH2EknxOaiVHiSGZbx3l/XpJ3zVWctdCd8Utw37XEhGuiK0onjUwt7gmOOA+v9NRHhfnzANWgYpWA==","signatures":[{"sig":"MEQCIBbVFXK7UFAYHBU3VeDto/W5SPoo4wyU2vtltHeh4zBwAiBStvtxfFeIkzlL5yp79OyJveB+61D8XXCl9GHJyHoGFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVoCRA9TVsSAnZWagAAjL8QAI2VYvBRzmJK2cXlxQgH\nxMJ6yRgC2N+NkNIssRrgsnJF0a/vCI6YS0UG+1eBW9MsVrs724HKnRro8k+L\nbi9cbAUwk3KBZUi0J4uOCm6axvgw3B9xeaI3pwdH2qXp+Ca8L+igNX+6vsp3\nh0a3DgjJJ70Uq7Y4ZJuCTUi1I1JxcL3vK5lHbUZL8DzjOuzsa17I417XVX3c\nn1pWQdcSDi/eJw9yeLtpbX2uKJoTr3m46TBMUOwKcaR3uMVD8ir0OMGC9Rca\nVTZk1uGC6sFHe0v2KPEDCbT5zMaQgM+KVGqddtY2j6vWadr+GIwq819dpImA\n6nmw1O51eIu0exXHj5LND3WPejNbml9MCnZLoDvCfd2fv/LCH75Tw0x4oBMj\nOrNiMbxvV8zPMOvibVOMjVoTbuQTeVaU7zIQu4mtomzEIeZNzAMkOFi6YJoB\nl/ASG5kTxEICUdgdEPAZM25MgC0KEtwPu9/ff78+2dQ/nSMi0HeIdhTHvD8Z\n4diZiMGauaJdPc0a4A0RoDZHrY3EWfWjKbn1UA2aw6+EJzWM1LB2IqTFkGOH\nUfD2oAvzzwZhRGuHhvbqzrwUke4f17ZtcevlpQJoW+3J7ArUosZOwh5mw+R5\nAD12gRRthldovB3F8jw/AfHzRE0ZTB3MRZUBsr/O/0uoX7ne8sNv6Hdhra5Z\nF3TL\r\n=qQQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/density":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.33c9a737a.0_1620235623588_0.6373301714222459","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/icon-button","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e674c5278a973b10a8340c899832d6087bcd4157","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.9bc0effaf.0.tgz","fileCount":37,"integrity":"sha512-9QmOGugUwUSW0dMtm7Eb6Gsi+GftRZg0FEJ7KoBSc8mLKxXR6ICgDt0m3r7LbwZ6RcldWIsfsmJBeWtoj/aMBA==","signatures":[{"sig":"MEYCIQDxdf9STtOnSBNBSYdkA9uZIC3W37s53AYQVhvZL/bD/gIhAPOxUfe/N2sFWcEFCkUyVQ2QWkUwUluvezmWPW6a382c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdNCRA9TVsSAnZWagAAFQ0P/1YD/0zHIhNFWYrO0XbG\nTY/RpDTWjFCwVIZGD7Deqw+9olzpjv68TKEoOxpMLLwLSJvbTyl0rqfH2I68\nucuTMDAuENIjKwxEBmRlv2FcTRKBYGOTRQ17cTx/jKPVOawJD0vBb62SdV6V\nIEdIaOy9FzkMqOXzDSzTFSKz+biNCN4hzYtHPQjGIvcdk9+KN20OS+0DITpr\n0OILqbSIJ53XDmLVEcxOFVS0/TyqH3hB0R8y3Yeg9yjZy5r8WMmzIQkQZrJH\nNYrWx2MY+/NWB1qvnqnwMP3xfFkHjTU/xqCCtX40MVbQ+aCpVgd39gaVquB8\nDefgz8aCRUnVtT/LGp+WC1H5Dn2o4mxqm7rImqMRmFZZ93sbxBYTifbArVMc\nisFR1M0Gu1BQ0qSw2bRvfjM8r30WWMPnO+J4MoxnOjh3Cx+6YxnOX2yLflWr\n7Bx2eoqdjU3R0usql/QBZEUAzhh0ajVvtaENmMEZRFt1nYRd1wXd7/MsbXoJ\niNa/nl3Cf08v6zglTnAHCeYjaPx+xYV/ynQsdqosMKCZHblHMbnP8iM9kbw6\nZGUoAocdrPFfHx+/OXKZ2zWKMciPA4YQurOBFJ42qcAWQNkHmG4fg8iWWbOL\n2pd4Xruqe9j4SmDBKzsPTDuM+TUpGWVJo2LDWrBWIJuH7o/CA0oddeilO1Wk\n7ki2\r\n=Cbcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/density":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.9bc0effaf.0_1620248396799_0.01176068279614717","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/icon-button","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bf0a06d941450bb6acdcfc1883ab04cbe18e968","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":37,"integrity":"sha512-CcipPr0CF+hN6UDG0lBat35BZoTOsDEMOpO01O90VxQBppa6zwBSzumfViBtxe/ZTXOUq2DvUZKQFZR0dWIhew==","signatures":[{"sig":"MEQCIEI/Gc7u+K7oLy2hyuwrDPohzkFAVdeZPYbUDvQLpLirAiB9pQplYQNDUbXCgI47yOsumYn5R6fw1qoNf9KzMsAmAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDiCRA9TVsSAnZWagAAUH0P/35S63tO+0yO7/qzfCrE\nt6LqjqRWuxU0eNeX7x0yROrPttRv/+Np6GrKoGE5YYzaCCZyRQpa+hqpUZBE\nbc2CNqHwClyxDTRTf8APKYaKkTddhyrlfEUVpOR4ePVCDYuQISWrBxPHTz03\n4/0SZfYFVhlhppN4sDy18YuWOeBAuvt/TwQwIl1dzN/3pYlFf69tSiUTsy/E\nEs4wQ/WUQohO6VNwE361/FKUwu8PcMhtONZ9uoizqN0F4FYsxUSrHMBFyK9V\nz5O2kfDi6Zo5rlG1pw5MZIy84H9kUNpKOF5NNFYbXT+OdJP6eaV5McmMwBfD\nMli1Wd/Y1GhqauzOtCPd3BTI2XWhfj7Ofj0DRM4T9qXvnSpi1fmLoubJUV3J\nzh+pZj0OHpjf/wBW/kHwutW8gUvwGO1ru8XibmRHsyj/cYrTPBb6md3p0CMM\nNR9pIxGcVmv+Damm49YIyRBA1/PlTdmZA6mKAm5DX0YxjKeojX8WoazeSqfT\nJNbM0yuHYrttLmvTzOS7eFHXh5RuGrR/z87KQ5oN5MDN7SYYQ8Cf5+cYsp6I\nPg3QfJ3drhvQCYZ+CUlyJTO3ATb9I+8gss49dYUMtBHG+MS4FlkCH21+GjPG\nEscpZV3pZAfZQf7ehl9ZPnNiyh6sg0Cu/j+m7LiKNxs1tWVvS/3m/9Kwu8gx\nMF4K\r\n=+pt7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/density":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a1e0f2af5.0_1620250850275_0.035729336213089935","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/icon-button","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba27a6b57ad5b46c25ed998c7e79700683f2dda","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.06930c96b.0.tgz","fileCount":37,"integrity":"sha512-lAI/H+deQRsQ7p5LnK2s1eyZxw2zdwiXoO0tQxTbzOTizwtk6anPqhXMi+EzyLWuNg5Xu/xaUvoTcf7xXdNRRA==","signatures":[{"sig":"MEUCIQC7Uh13kV4WI9wEVK9ROdlFSBtojVLBpgaa6vFJLPJ4awIgDMxk6ST1B5kgkjQ/AXjsv4HlkwuE/5OnVt5wliO8aq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyjCRA9TVsSAnZWagAAuwkP/2x1tR2WX43FFJhlo1Ay\nuUXmFYyaP4MyBEYG/UbBq/2HIVjQHiCVxrsQho0PtLL8Y7aVREuDHig1k9AP\ncTdGPhIhgTD6blwetxktaFDZN/iYM40mjDzvlXhXpapZeV7F0gW+nUSlZ0i1\nz5JWQCvfe21ymWcNWWO26GDfpYC/rs9F6AlBDUCZWJZ6yyHTWl10Kw/1X82c\ng1xMm4L8lgEe9nK8QB4E7Aac61Jb7UfLrPph8TkzPJjZ7wPefTBoU/Nb0puR\n5hhfRBDvEuK2vdDI0U/ISmzhjOLvtmHkI33JEfF+LhOMOmtIMR9h6Q4BvByZ\nzBHx/bcYYiQ5LLZERk4r6FXPfyBosCsJ3SLps5wrpcLvI6PJ17qHwqJXEZZL\ndAKSo3cXaAFT1309kzrmcryT6yUvijJ7VsjerJWtojZRLCdTDxYRK0PcIwil\nzvfcbsO4ksUm40c/45B0T93aV+8kikpow1DEQiSuJnVCh1G9gGj0Es6TXwz5\nAV1XmBEDR5LPsNz+IlKrEU690RBwJwzXbI+53gGZyz9QIQNFZcXycyMoPuG1\n4TcdyO65sZBr9xF+RHWEM88oYXZJn1C/5xOnQoRPUaTiOg2+XfrDPHjRTKjc\nMz9qkV5IT/x7Iy/VsD32S17l58HsqqKXumxVMeA2BusCB3cBI7XOC6yAzOYG\nAfI7\r\n=X8LC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/density":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.06930c96b.0_1620257954553_0.4173415278567163","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/icon-button","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba4e52be0972423662b4aa852f8f0145067056ef","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.03f525f9f.0.tgz","fileCount":37,"integrity":"sha512-nrCfUlRgkfjFtxEeubwLEBoZMJG484UjEKVJxYr0/huAQQTlDJs0n2mn1JKG344zoS8DTIsBgmYvgaWfy5kn/g==","signatures":[{"sig":"MEYCIQCbFfnMQB5vB7jAwfa1iMAlzjV4m+E3UVDmoSD2IIF98wIhAKtwZlwFbEZVqBoWr3ryxBqnLOjCrD/bvz0r678dS7f8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkziBCRA9TVsSAnZWagAAJygP+wWs3Teq7uQj+53aoqCb\nkNZhf9ZLr3AmxlUjeIZdKsEh7rDRFmLQOjsSY840m7Bh3BTbtOLONPSXMhsf\nNEYBugq7H7I+ukaic2V3HfmReuz2GeQAOo4rv8LPSQbzfDALmJKasUyBJl1v\n40IH+80bLKXbVRyv/a6DXBLjcI28f4TTAmggDxfxeDibfNEcG9WxO19nbG1M\n6zL13BHnIU2JFTxrdL8m2qcWw9ZU2LARqazNxonw9E97aQLywDBxhT++y9h/\n6RlgmAU6Un6FWsT0CTRe8fK0nlxQpS4Smz5SJ6ViTbfU+jMIwGmS8nP8pXqI\nypnHtDLz/ehTTvzsnai2AfmpTHMPiQka3YNBctlaVWUv1lY17n6arJFwUNxp\nbBl3x34Zg035GUq9aXuozwR8+fcNCEu5mNJnbQRRwLqCgGjt6A7XsEmVogQM\nTDS8oekPhctFjuSCtbrkYalOlej9PlvJDfkYEWys0uGQ1SY76LQoXMznhcdp\nfD5QTGGwsqRvdnj4ecDg1MDT1PPR1BrNBP5O+hwKkgKco0BZMFMRu4BXhkKA\nLJ2ojWo1maHd1yc4T+6x3hbOcrv0HeekdA4P63j5VGHW1pgmJaKzZA7fpkbp\n2+0jM7c0h2cShhVL8msqc34VrXSGs82+zQYawT7ERulSKVd0MKArlWyTNsvJ\nn7R8\r\n=L8Zm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/density":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.03f525f9f.0_1620260993518_0.9738079318147204","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/icon-button","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bddc9bddb923fe1cea7df56ba100e9a370f225b2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e82ba2a26.0.tgz","fileCount":37,"integrity":"sha512-vnu+I0kQnzHJ7rc0Py0HdY8KOee3nhHjtGWwmmlnBc/+zivbNDUCN6QorDP4M4IXX1K9+SMqHbApK/zEAEwFQw==","signatures":[{"sig":"MEYCIQDSia7Rce2MXbWiywi9GrVUiprxbIEF6gg3im9B5msPOAIhAOSGlvpzO1ScCHd6dMcK7uZpDcMtX/FMte9fJmBPCBqL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGhCRA9TVsSAnZWagAAs4QQAIiYlvw6ZO3e3zPXpqj5\n0tovv7FSCLrBXQvZpGh93JdaWRvxqDQmW5tyPzGCQuZW0SWXiYgFOsWkLqhG\nz9/5RqNgSD97W7lb+Hv9ECwuVpA850ZBByzk0tqjuIHJgWzkRIi2q7TSIdvJ\nDZF/IjbgcKwNoh/t9whlXd+ZMq8hiAJ+2rWumh5mBJ7aJ6qsDAzCB2C0V61E\n6qBJDQrpCEuj8dcJKswvMbdw7XzWjoSpE0Jct9VUZ4hZbqzdG6vggXJXTK8f\nkFMPS/w4V9/Ob4HFOhRuQjfObtXOboHARjDEtW9EDw4G7aAuWNScdQE0P1Vx\nE4I7phkMACpBPD1XaTGtrIFBL7OPQ2gkg7mHSqDKs+MMtGdpeTldvJdn4x9h\ni+Ax+pdD+mnJ2JDcLy9kymlBAgvEkSq1eE39D3HLAyL+sjeUy3SJx7dC5pTb\n4k1X/m+5CP+iDt08SqSmZ2DcD4BghfSjOh/vkfuX96xkbmw0AEES1+EOxMfQ\n3Mm1bfz02DLppQYQLI/dZ9pLL/d6cHsNDN1TwNdhGOuuIdOgA1XHguggdFaf\nMkpinroYm6mxj45UID5t2YreZbhuzA2wy1wqErk5zE6AzLFMchjnlvErZOCH\n1Zw8FgP9bCq75hHFbf9OFyyaLLXwFZheGkwm4P1W2vRj0RUnJfoZgvxsrhWQ\nTVpz\r\n=lUrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/density":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e82ba2a26.0_1620316577391_0.8749359562833492","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/icon-button","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a75ab4e8e20d3434a02039d0382e305eaf762e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":37,"integrity":"sha512-2YOE0R8CS0JmFcVAv1OhKixNqudlL8QqlrR7Yv+JOSmgG5J9psgO5YcMACTyNnYs2Y1ySh7qJBxH0UDPjY9enA==","signatures":[{"sig":"MEQCICg0IPjT5L2FaiTijSoDSLfGdqfa73CJbSmi1jG7FCCxAiBR9aqbDSJalHDjIF70WS6Tm88OwPhnDKw4B3m+5U/mOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdpCRA9TVsSAnZWagAAT4gP/3Sws3mxEWX+CXtMrMxt\npC+OElYVagfyV2XITKrWsNf/YjTUuGWX6PokWSh35/zrgd50vRcixns911v3\nSapTZAL4Z0wKl2n3LpEDf8YmOFz+iGnFjLff2rmygb75DuMVgwvT+fNeOnEt\nzcZ4dPywITnzj9MWUpcCzbmZr1wJ0XCB0ai0EZvpxOlHr1pyOaY1zL7clvVu\nowgCWI4T1Oe1wieBO834BD5gwER06YquoQIoSwJ/igxg6zZwk2hXX7FKKUDz\nxtoEd0K5Roh+JhWYuO3Rta+t6lQFhPGdOI5LFXzReY0yFyPeF5UtmHGLsh2/\nH6U1DZgSA7Jz5HSji8KNJGDVu4uxs1RpG0DDy6QxkFZ9Vz9J74ZcA/P2RiZM\nixWg7RVLC8O2N+0cnaaGXukXUoxjd1oNTvi/0q7nihJZsucmgGRyKVahqyS4\nKM+ZwTXbfQqBeRyX2+nW9yxLEjxhnY/VldPZAOSdaN2HkDT2W3Izm3vlurae\nfrfeKWV+YlgmM9YOaEs5WcNdGXUKoLd0QClbLDXhcxQ5OJzLRxMq/G76/TaC\nS0wBin30dYqcoQ7baKr1WbJHcfDnchLKgmOPUGg2+kg39ZKusyGk+o0IA2pM\nSDOyLGgI5zUPHr1gVaTgT5C1oN2bB9sNoQ0iRIfM7cyduKhkC54F8ewZwlDz\nWknF\r\n=uTVL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/density":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.fc7c4e5ce.0_1620322153052_0.4137757381649749","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/icon-button","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db79e7badd039ec31b12850cb5f8b396e3631563","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.65c04514d.0.tgz","fileCount":37,"integrity":"sha512-oy3E+m32wuL4iazsZ5CsajoRqSNXmOkVlH5r1hg4zRf6XMeK2qHl954n6iG+H9dC+Ual+Jkyo47DiLS61K0TLw==","signatures":[{"sig":"MEYCIQDWSH5PGYDcyWNI/wY0NEfb+E/GuDwnP5sOjq5cgQrjjwIhAMr7wsl+n/jO8iZ43xJC3+QmGE4cYsLUZcq87WtBpgxC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjJCRA9TVsSAnZWagAAOdoP/0CsUh2fLhvqillq7Mdk\nfmq+Fjx6qbrRxfAEeb3uct8GZ/qdlemCvdn/Opn5hs63L8mh4gq66uTsL/DK\nenxZc1XCuRTOVY8W8CAhuyK2XHH21Fp3hzdCLDJR6cHeZ4GThss+jhVHfUAb\nhyjuibXmR007yHQCij95bgykoX9pX8V9PObRSORYwGrAcIPq9y+Nf2JeBBX+\nHXhtHDxQb/MyJSUGQDsFNjT/j3bx5Mjl1c6I667vEZzBUnnBP1jC5CgRQ5H5\nMNJJRs3KBaqkdlbUBJd/xbfLo43P3kjyC0PPj9KtWYCfKTo8PBQ1THX/fSux\n5ZuS44TewkG87xHg5gheinHiONaGhuU8dJtUwj3B4NV+A2CE9mzy0kidC4AN\ny4mdz9QFzkOCQtNDHFMOR/JJQIeCoWpwJM4/DXqeRh8zrQMMClgoj+W8RisB\nqPDr4mVAeVDQHani8voFokljQlVv0rY7x4AXCpTvpJXyAJN07ZPOi09vOtrH\nCWdneOYhxs9tvJjUEhD7ImVyhZWzF7DQr6FeMV8c93gxb7bZJNSIyISnF3uD\nZsDIxpSJMSi74lUdhfQbjVqpmRSUwx7E7TfuEUqrMlQkVY2hRlBv2OUM55i7\n3bRyAdxV2Lx/dWK+UjleT1Nm1ITDoTSHenTFtVXTGYjL6B+ICAUfYu6gU1kJ\n0jqH\r\n=0Owr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/density":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.65c04514d.0_1620326600343_0.7138686763430424","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/icon-button","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec1687e28198cd2d63ceb68f24d499d3b5b1f8c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c97779ca6.0.tgz","fileCount":37,"integrity":"sha512-64bQ65+FsV0zIjeLqNDvoRaKulhu/HaTrsfidzHqQv33gZS6OrOjoCeoM2X985pDvCgDe8K/4v3134nyczZuCA==","signatures":[{"sig":"MEQCIAOMyOCm3Bji1kHPex1uzv8OO0AfGg94MRvbASkwkFEAAiBlLe2k38lWb0pNOM/qAfcG2M5x6X3NwReYq5MOEnF5Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLdCRA9TVsSAnZWagAAoT4P/1Jv42b8G6glU3mBVHwo\nfmHRQfy6p89mso5/IINVdV8iIkIwsx3QKv8MoXlOwG1xoJ0wEEVdzZfd2o8O\nNVEHVH5U09zFiyspO7kK2OsqS/WSX4+1DBPSBWWvWRuOccq+aP4kGki79MMP\neOVDMwpVAUW5H0egREqACDB/9aXj31pFF3Eja9y/ZYfrsnCJB3gVgh8B11R9\nj9I7KZJJeRn9kwk72eFMpaMpsMF0jOmc8IwTYHoIlnVN1rGWvcCrR1grFI/T\nheOqU5H+Wewr+7/OHdtBTQ3hfVtl1kbN3ieFeKtM3ntmoM6J6H9o2y/V5dOS\ngKVNuVi5wd8aSEvNQ01DjsVrLQtj3mqWvCZfBxOCOgl/3MwChWbF36p8T7kw\nesvxzEOsN0jJHRG6ncLBJK9F1Q+iwAth1MMHQqL3ba34RHJaEjrXBPzKA7ok\nu70palpuyq+ltdDGZvoiDZDsJg53oXo6qZRAItFIYWl/VI1GRLRFGJvTmi5F\nOT5s8ypPrRM+34Vs00IYzNaG5RVSnOw0XXJdTbZosjMONH6fIWd7Ku41EEhm\njrZ4gJ6pUzISLt6/8nZFDjmVHqg06sbQ2WWaFdC7cHg9MhQWBG+jQPsgkesH\nIKraEN2PCCufYT91aPbUaC/W5e7EY4R1LnLNAQomXuoi/mX5t25Hbqr6T++K\njpxs\r\n=6Cdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/density":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c97779ca6.0_1620337373461_0.4950458751771154","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/icon-button","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baef607ce684c7c873d96fee923ca3a77fc917c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.869d890d4.0.tgz","fileCount":37,"integrity":"sha512-8WbBNT6qqlaMakUrRtloKB68Aa7pMpCVrwihAwxe4Hi+AYnqmafFqLrYMn2ePqimoqqI9HQ5aDDucLp2/oHAKg==","signatures":[{"sig":"MEQCICV4g2/ZpKfOn5UqlNkrGG/W5vTVAFYH5mu48refmTuTAiA8iRU+HgrMouDkKoqnsniAsjaDbBR2NVPUiY7fK9Z8Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpVCRA9TVsSAnZWagAAocgQAJlRhZgx0tspeSzNVquU\n+VQ1uA1u3PJ3baTHig+XiltoYcEXXtOOStUk3L2lKlHvitKeXpyHS1tbCv7R\nPJ2HPHPKL8/fnqQEDKw0Bej0ks1CV9GY4d52CChLkdZK6o22LSwGM0N3hvZe\ndTO0qjG7BtexmMa6QheijibSHank/As+8WyXbYScy3m2NNDG1rSNMOC7GIdg\nXMGRhowAZzrafC6LI4PJziyDFqlYVJn0quAiucHq0kXXePh0v68G4dtZiwG5\nxdZZtSRetDez8pGG4EXdv1qhQOX9qBvzrpgdWYpsFKVqgPSOgM9PrjE4j92e\njxZNo0U/F9q3dm0tFw3F+udomjAtsCwulFvdu4Yt/ZhBAFQZTsFphmlO7q/q\n979ortBWd3HX13g5PrSoDO3L2z61cXD2gyVqhmahofhoA53SIbx30KvkAwxC\nkbZDL43yvaJhUczaF3J7kObMN1V/kljN1T8+9nJ1ql7yI1a0e9Y/k/v5dAJ0\nfXxK4ZBdSD9HayCuL639nYqHTUGsfqZhMMCfpxaewj4AQtHarSefWF1rmQ9L\ni3AHGp/DotTWZdBKy0uAdA7wsrAztT27DEULmQs2d2f4ujQUPLKl93je0TCC\nU8X4GLcRRFhTEar936gOd+qRg/bIm+2gsagMrIIYpG0vwuqGZxIGV/amvdTW\nDEx9\r\n=zHCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/density":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.869d890d4.0_1620400725013_0.6681828903477707","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/icon-button","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"166dc6c7e7758c9102bfea2c8ea1016203c45ac7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ec22e1da9.0.tgz","fileCount":37,"integrity":"sha512-LVsxUCXkebARoCqCjJwH9xd4+RvMWQk0a6iYQO0wDX6PiPqkxj+ZUIbdDum3l2RIMm96ggZUhufzScNHA92tSg==","signatures":[{"sig":"MEYCIQD2mciZkRQWIrBN2i9pYS5wsHcQ5UmD+bXvLDxTCTjSBgIhAIZW7NGE8bOU4dFygR60sC8Aon4H9AHsUF4MJ0w+x3MG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoeCRA9TVsSAnZWagAAk7AP/2Wl/JxlFnyG8o9IlBtj\nK7+pclDIJNkqz9aOZJJ7nmR3GjuZeCjrhbHL5d805p3o6r7PxyqeHBOHlrRv\nw2YY4VSNhkMv26UaUR2ioBS9kHA43fgkg5+G8w9dE0A8vC+ZLwG48p7ZdpAi\nXOjelyz4vUQhmmNiV3ppA4dtMs0+mGBF+8sMm5YUzYuNygyRCpkJVHjsKSiR\nYuMW9Pmr0XJVKuUAphAUvNLNdMEKKCvRArnWpMuojm0FofKbFvUCcfS1L4VT\n8vtpXAR6QkG2GKkI5xXyrVUJYNAajSbmMNPF8Rfx4OS8vjCh0Uz7LdZMul3D\ncARhf58N0Iv/Ck8ip/EKKkC4JGlptFMTeOKqJvu/E80dGd0Q/qEM/urtCPHK\nORvt1Xjbu/15cYY1xrXNU9BOoqVYc0suOYn278SmL8u1LeAEwSuaD/ugDwXt\nqbNj64RxjerwkcOHNKVIpUbo4iA6kf4W0ZJ6bjkCNz+H2jXUdgsJxNyJPuqI\npH5t64EcWgWJ53uZCMkxynkn6J1MVtNFT//gyng4a9rQPJOQTy5JgPiwAQb3\n/6fOFkzlnDjxvVe5B+cfbetW/The26s8hyzb7JE1jTyGa448+hcnOMnNvylK\nDj+feDCNwFxnoNIpUqCJLtDFzapgDi1Jm2swICloSWtYeS6/m8Lpqo0joADO\nSo0u\r\n=L1Vj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/density":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ec22e1da9.0_1620671006133_0.8638204894358563","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/icon-button","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed5eef882ede2c0b4f9763f536a2241f3d90d8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-nightly.7427449f0.0.tgz","fileCount":37,"integrity":"sha512-18HpD4WyTdDwLsR4nn39q9glnZNee0b6Kd6GaZk+c8bjECYDugxSd6f5bFKMmFEtR31U4yQpBlicznAWcUhAmA==","signatures":[{"sig":"MEUCIQDkeVxBDDx6tWHn7MdkgP4lcYcubY/vQWtmjwyIOOp0awIgN/uKwzZO2XwtG+sKX3QWCAw/1s4Dg3HkfXKc0zLDtMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8xCRA9TVsSAnZWagAAJ88P/jG1TcTzVOb1DEAT7bw7\nne6etH6PgbN5FETB7t1O4qkcAR/Sdwu1GavghI/0w3lwy8zrF+TosvN71xyZ\n4Sg34oHQgm2a3oHoe8cdlzdApnlC/C0+Q71cJF7e0slvGMaRgqXTnX7ObHb8\nIs4kqGumrzYv5hxu939Ptk0VMbvpYEJwTGQkmTXJHm3asjvBdVPjOi028i/I\nMqo9/xPZ9n3pyBcFssrrPQ3SU8P20HT/cLExu++vabDuF3Ai/JhnhOx98xXt\nel7BZC/hQfoVi4Xhr/QXm/VlVZICfqr3NNqhewi96BJut8HTzoHG/wqD0E30\ndHEPSp6b9dt1m+KiW+lX8VJVjgAIvwPVc2OqDLM6iPvzyZq/4kaXf6u3j/TM\n71Owm6LWPMPn8o10PywIaBHxiwD/Bf4UKrAmRq4AFkP6YXTInnqMdiAgjbH9\nXEcLzKfrkjeY/3DQ3J24wc+0y3IzvYTCgPhWw6gjFKn6vpPH+lrmwEnATXAM\nqN/eyIedvXkAj6z72sO0ULXQCS7GnfIjUVSPwl1iNM2xc+cmM0asak9uOdin\nD/e/Nn2+k7M/j0UN/ITbJ3Brsg7XZuAJTyjNw/xw9Sa9hAMrZAqeR4+cBRtY\nnX/5bcHJrcilP1Qh8CQ5DFi843UcgTRlkALS94Npc1fyQnJG1uwW73VcWOfU\nFZOx\r\n=H4qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/density":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-nightly.7427449f0.0_1620672305368_0.7168842736299765","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/icon-button","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cfe9cdfbe54dfe702d15741ea6bebba946982d1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.957cc3bf5.0.tgz","fileCount":37,"integrity":"sha512-tW0wHMmzrWm7E7I9nta/qXh+DFmPVswLZkGsNrsMP+l8cKpo+4qUySilYDRBxAj4/Pi8rQ1ipp8qgOkBZcSfVQ==","signatures":[{"sig":"MEYCIQD8mFIRMxcDoZapRTmNG4LpUvkOXUfy7ynS2wK/CcHneAIhANIZ7X+gwqV0xTUfZglh5TqkAI7C2ZUNUNJ4ycEwkvOi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawaCRA9TVsSAnZWagAAqigP/1H1DTThqWNr8qeADGz4\n4+0Kl65TfQv7DKA+vH094EdiJfqkbXvzgYCEkf1MiN1qRa9kgpwF6S2QOfpx\n714Y0MCwi4bjjJblkZtC239xGEvMtCJAPxeZHbJ7iALhUXG2dl4ibGEblBpA\nEINXSdNnrZOlNSHK9Tw4jj7+5deF+yrMCQBEykrf1Ee6zewCOeVQkzP17h85\nl0PTB+IPvQni6lDVXmaVnq1o4DT4TOJMxra7T0jfvXDwgoSWX3UsW6akHBkV\nBfjXxiHxhmG6t4FuUuii5wByenXZSAk3EJp/8Jv3b8yFTuBE9IbJD39UMM19\ntvg7UhPZ8by692OABETUtHscDyCi3Zcn7Qr4Gg3JlDciEeObvk/Ohc79GoJL\nsbtxQH/wNrKhviwJRj9wzlzm68U+l3OCSJ/I+UZojv13Qf0bGvO1h7BvkokX\nL/V3JRjjx5CsCVLAJaCiW4oiqQJw/P/ZH4o7qUQqKiF9fis6rGRBFWxxCMex\nmiswg2GRHJpIqUKTHWjbhu64S0GbMddw9rur8lHsxOdKtAxzdgmKWUJqF+nU\nA4HAqCdOvFToQ9W5xLjQ53U6GsfCqFL9f3zqniA1NVNPz8wHy8jgfvjPIAyg\nsxrAQQ1+ralZR/+31qB8mZFUrl20r5uOorCKo0CVuWkl6QJkdgoBFr9i2J7U\n2Lad\r\n=/1pn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/density":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.957cc3bf5.0_1620683802219_0.39016330525896126","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/icon-button","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f979d6c731c4d90ea7c5ab4464b317f8da2b481","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.88a33cd70.0.tgz","fileCount":37,"integrity":"sha512-73Tp6hsxP/kGlbFLmlblnAI7FIEMyKym7Js29JTyhe+G/3dsgO1SDxDPGU+oeBXmFnTexnmZniG7Bade7WJeAg==","signatures":[{"sig":"MEUCIE015Er3omY8XBdtvXcL8wJHahCRjTz7x0ly+DCmRPnIAiEAn0vLKoJwQnGcAfT00fQO5a6z8OktniEHt+9GRYAri4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsTCRA9TVsSAnZWagAASRYP/24P9K6Wl5WIXW6mxTBB\nhtjuG45xmnkcUc4OP9BtEO1yjFH07O4LswLTRpk+9dqNnP8mf+pCmw4fQVWf\nJf61uyuxold+jkjuYbpu3Lsvy55PuxCKgTKPSJeNWH5b6/q0/8wsMW+57Wee\nXRmU5gN+Yr0CKRC/PPjXxYbBSyrWx1//ZOEANM5RNnH8zmd95EvpihO5ybpV\niL2BSpcHcSMKFPq1csaSjp6E/uUuUNMzD1Ym9C1u++ZpzegNkAYLMHbKPOwk\n/8aCQv2kVK0QzRrQSgDdPvNmDQTef786T1FYt3oqsDxyrxuTp/+o9M+PCGek\no562UfVEC1K5ZMRA7uB3uYH96jKKAtQb1vvEPtesLMGAWIiuzMKFp9PaLHek\nTLl3pErbL1NkIkBHKj6LM9kncYHVCXUtg7ZjI/htHp6xxAOOx0Xh4VMLIUgO\njTAaWisTkyNSnXMmx1eJRXonFxjbvJb+E15qPqEgVNw+VMIhrRGSR3WnGN6B\nM/C/ODliv0ySAV1adNrMHiZRZ+F4C0KC4PRKPGkVpf5+H5/1yK58BHOw7rUu\ndCtJY+Kb0tmVHGGUg/WZGqsCOJqmXEnp5U4x0/dAUyCqecTghrHzYHapngPH\n1q7t4QFNfC0Gg9U5kRr6xDo36QJqCFjRk8d2hD1MFL8HPbOHxIxDJg4XsyAw\nr1qO\r\n=XjmC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/density":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.88a33cd70.0_1620691731290_0.3000787175897839","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/icon-button","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe193509674dfc0b0708f4a195fb12002569210","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d20dc6dba.0.tgz","fileCount":37,"integrity":"sha512-5urCBckgBqI8AFsPZCSF1cpn32DcB+Dlgkii3c+lcV5+xHgFZMMCLACsRZ5CQxOilS/jArmA4LPdmlUDkCc/8g==","signatures":[{"sig":"MEYCIQDjCJ8xKoX0XVnL0AHGNm8bCTL3AP1rnIeHxCceVU9vbAIhAM6Y6U3H2dnAXJIbkiPxAJ8mIaucc4UQRsv022T2m67+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7LCRA9TVsSAnZWagAApIMQAKNQbDnQ59zXLXb0cvgR\nF1TAf+howypUx9lfLwNwVogeD+w9FPqWOoPl54okue6YamDtrD2eAn1uOlxN\n4dDHFJHoPMS3qp68xabc6l4D2+chvjfVSpvpYZvEB/lD+cjE5walH+S386MT\np/422wQyeqtgeyjkCFvFB9QrNd5xYfLngylaDN6kipKF2l8w+doSehss8R7I\nWrlLr9e2IBloaa/KPOzuv8SOI3btotMTtZRBxtehCWSZPh40t9R8fy/7ygJT\npSXLerzVVptF0K40TgyBrJcrWE1hGaJnmcNOtBE75pt9kRC7Fts/WszKeYOa\nACc8iziLJt9Sb1cNDMrAc/3PjeNbK7gsvYvoOBrJdM8LUmL1DcaZL3449tsK\nnYN+ll4t1NNrt1fYrLA12CiTy6JZcGunwyvZonZDNzS8xKfJUw+121z/g3qF\nNKnuvM18y3c712tj116CcR+GaJctP9luRssH91/yZendUgriWwnF5tcPhaH7\nGA698FamihwY0ARL1+dzA66VrlhF96Jrx9tHbn+gVv1wF/Vin8GcN2eZcyMP\n9kglC/4HB1jLwS0aRAS3vSoGpuk57CUSAKrpGpfNj64bZJfGbG866v4wULRH\nWydWIUr6hlrCyz0A4o31VbRX7MIMeFHdjVgxR5N55PzRI/yLYQs8IauOrDWD\nOHTf\r\n=r845\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/density":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d20dc6dba.0_1620692682735_0.30568865967064096","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/icon-button","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90830cc8a557add7c0b18e02a012b747af477ace","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":37,"integrity":"sha512-EN2mOij+w2NbA+Z7baxGpiTXblwvv8kKy+ZenncnH0Qjr5phyx5yJr5/PMuA7FV8Afb2qOEdhK8W7E2uO81hzQ==","signatures":[{"sig":"MEYCIQDhi4Ze8Ju1EN6Mw6t+3iPBuJgs410/e+gGsxXHtZXPpAIhAKlAImT0EHmzOa5M317/rLLFAtcTkvEudu7OauVoL4G3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmda3CRA9TVsSAnZWagAAqugQAJxpfuGRB6Z9g9i81aha\nSBF7GFttGIc0Zw50u/k66bu2R4YdAc8NJV3NrGpkfhnjVJ3lCLEIsLU+OHgN\n8i6rc5F/thOISpRL9IXj0P00HwZhI7Y3GNzI0zQD4of5ib3Zynh8O88ujSIj\n77b5OGeByiwBAyMIhFSpjFPJAjvTYB1ym9/hUcXb+BU7njybTFVK5FSI0ICO\nGkkjAAuds6vfUSt4EGI2LMu47aVfOb64T5xwisGl+/VCEGrmVX3NETIuWcKG\nKunEOwyV9w3nSSJARucTHc778a0nhKv0B9kMZqrOOPcnXICajsaiY4WayYtP\n4j7XdqhG9ktH0R1pxPqkdndagXA/AHE4A7Ynfn8fC3TekcV+xQIOtBUa0zWF\nGDstnJ9nbvCu8AIQ3DZuMwwrtUvsui72ezKF4cQ9QTlHBcajzx+vdg8gufJE\nierc7YiYH2NYmi9rng0U9M2tKm7Kc+KuwtVAaIIsS1N/9NUDRuy/vQyjWHNJ\nP6hKo6BuLbksTdM4Gh56FO43IJgrP5IJ9sKI/xc7DM+I6giK5CVy+OPZqEB0\n2nX/oxWB8xf4xL1eGmYKi7XDqEov7FVozRHk5V3EssBg3siLSB/XFyp08f1J\nQ8sO2fkf1pFfmsWy8yWjSEiRPoG+zV4cZQVYzmiSnnm8TuINK8ZKIzTr+p08\nXuR+\r\n=GvKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/density":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.0ce2fdb02.0_1620694710586_0.9551626692316844","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/icon-button","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a5142e8da76f2c6dae40c95cb9abe4273db86d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.cb162da37.0.tgz","fileCount":37,"integrity":"sha512-uXnSX9lWxQPFhIwgzLXfV39c9G/VgpKGHc6/i+FaWemEJDHcD3f5Vyq2FiFdy1m8ulM71VN0hX9EH+HCqArbvg==","signatures":[{"sig":"MEUCIFdMDbGBpPUGkE004jrTC4SAH1x90TVHXZ1Ma+7Mh+xcAiEAnNhEd6lUXMvgJXwx4XB6RZIZuhMfh20RXZLvEEJclLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeS+CRA9TVsSAnZWagAAAUgQAIHBgiptJ1eZpOgwZwcd\nwPrTNhQP1q3yGyJIM+93Ja9rj641LlcTjPCqKABeU+S+w1YB1Nqih9DFsbyi\n920K8tnqXPANtzjhkBbG/1I4FzO1+///8q1r6izRtDEBdPiD0lZBsMwdPr5h\nYhSOGNb9cCO937DL94Nn+XGk1lXiI7npS/OGkBtuMFa+/SzcuZV8erHVOq1k\ns/7kiM/uMZgx8i7SHlF7sGQsoPkxmskbya6vnOKVWGfuf8jGPWNB8TwEyYE4\n9INBCfB/65naFwaRq63lAq8syUQgsJXLi7ayMBNoQqO6p9C2XGe1zhgF6jeX\nRMWac9W2UyMxRUHOt8Ry3GQxLy7+urZtU8mkuuMyFQ94GiHMDFx4v472oevP\nZTdvxP5R7xTCy+FTND05WaGAoe6Y/tyWkvbL7AwpWr7zevZBmvG/3Rf/7Q6H\n+6sZsiELEFRErnjfUZPbln68hrXvg4M32uc5eJ311qSSzt5WM5OT0mNGJBBG\nbr4o+ug7ALCmOQKV1iFsEokHUrWUG46KEORKKaOKITDkK6F6woMEp5chJftH\n8zntOcCvHxZ8/2j7sjcdLA+bIXCZF3LjVMYrD8KQsdnf2YtnBZRlo6x2ZU/8\nf0ggi5tuqqxlVb2zFtaZAjdCGHzhfN25lD4XVyAn0YVgmOvfULuqUOdXEv7M\nInxV\r\n=La6B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/density":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.cb162da37.0_1620698301626_0.33752720817934856","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/icon-button","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf5817cc0a327a5eb4fbf98686b901b1aaa1832","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.573dc7ffd.0.tgz","fileCount":37,"integrity":"sha512-vIcfaSnYzDzGwprydHG/0khWCsCChE7LbJBFHMxcUuvekL5grVjYZDEUO5jp30hxC71IRVJlxDsoqNjq/16FEQ==","signatures":[{"sig":"MEUCIC9dPq6rhFfL23hZ/D/qfWMK8k0xjZ63QeL9UUaOIxT7AiEA4gu9JTlYGFbCXQPjKu/lRGy33fnSS+Lg+ngSkZqa9ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekpCRA9TVsSAnZWagAAsNoP/22IECsk9H3yE3AU8NZy\nTBEVJdsb/5eTboBCgsSjsdeMBkV7MTvCK5GDw/i/MTpJNmvLyeNS3kexEbU5\n3vUQp4N0M0z630hTwate17PSDnc6XUYCp48zaCyCN24CuYz2W37ICTYTZkeo\nvwPkroaoTCxw16gSvO9BAhMKqRjrEFPbBNuWnNWgNMc8kxV/k7fXpnOi2OY5\nmv7WL1lWBIiFo+lNEUVuueIq7hKWswVVK6yyxA5zrV++TEKn2ZK3Isui7vMP\nMffWpOiNFgdgLpWpsHB6yCrKhJpVpV4BJUuhSuY9Ow+j3jdKBskC2BCrwRR1\nE0yso9/cry1Fn1MBy/RNDNl8DQnDXo4FrytS0k6gVjM0g7E7y5j+lF8OrW8K\nUKDeHgOYOXy5gHqKMIZS2gMEmONrc5f4rNqhWigDtc0XJIhXM54BSWXhPPBe\nGSxgk+3qqiB6euEJP/WDojfij0LjlCDD6Mk7c/IbzipdjbL9X3stUPTi8eeI\nfbQVwf6aaBG56mNZC6z82Us0BUuO4GzAqTULRnADYq0OqTfXb4vHNUuf9vmw\ntgQz15IHvm1cbuxrGI6I0+2XLfk0LIqpai1kUeZeBxTbAUIDrMKvssDnn0uv\nvCxzfwx0HOFAriG0k2/t9s07amEZaBI7bTIFDJhx+PeoLQp5/n2g8orzwHVD\nbxuR\r\n=6h+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/density":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.573dc7ffd.0_1620699432975_0.7500612160948621","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/icon-button","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26b07d16e5a89360cb9a44e5a07a63f6d8a74de9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":37,"integrity":"sha512-as/kmsGh6mfXq7MOZN1GXbUilIsH/cQf2C0urxC8NK+LrZhODNy9KLWnaGZQ0ufGnRU4ImVIHfDol2MOl2Vj9w==","signatures":[{"sig":"MEUCIQD6eODvN1sjxaYZhMqNaxwp/mT2xr/jGBg2EBxGOkjE7wIgYpaQ8Ss8r3rO2EnIBVv4sjO+7yGecrBb/OJ2IUUWeFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxG3CRA9TVsSAnZWagAAtHAP+wRrvTVP3bOXNwWbVmAN\nkrONLIVEYT9KDLfwb0TCSGHT7lKgZ6q8bxDhCzUb0QzD5MCgYAtoSV2ImahT\n1nMPMVR6VJ3mHW+bL7M8xjm/qLhY247j8palMiGVUxWm6WhjgqZ2gqxIbAxR\nWgjMEWEu/R/u41EPU3ORJlptwP0z9WlYSZZ2uJ9o6TcxPmfkN/WLpxofiPPr\nxrlj5oJY9mcDFX+RB10s4opX4+sG5phN08c+pNLyBcPgXjMANTLSuxkaByDK\nZYK4RllDKc2Uu8+E55z2/b3lMk+1Ub81a8fimgVnpr2j5rcyZGMa4Luoupdc\nBinsHhCB1uX+vA2OjDENClWMWKWy4kT08wYF+lVcoyguDEyAoQmrUwQ2A7qS\nB4n8pq4K7TbwN4bl0m/Y+8fZ4RwiWh+sM+WHy1iOKogh1bHt0ls8ntvn+cb8\nDf335dLb6bG2NxNQRBL5aKZFUOllHf9B3nZ9e7u+xNUnPimM47Vqtrk7zuGs\nQJLo2YpqnEQPpB3uYmi5JkzIUYlgOEVRXfktEZUvNB1QdM2AsdARj6YadlFX\nJQahjCOrhiKF8vM/3omTWzfYXIi6G/zTRmIl13NvfN5k9+bhx15VBdSsi5zd\n4zr/6cVDQl1vadIGZ1FtqeyQoAVqKoEfgQZINA4i+5CsfGVG7ik+G+pxrLHU\njnZ5\r\n=M3kz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/density":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d5f6ad3fe.0_1620775350916_0.2845395949071896","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/icon-button","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9ecd9b39445387c8bac94035069b2a29c358ea9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.25751d2ed.0.tgz","fileCount":37,"integrity":"sha512-ARgKy5tyggm0hNAzzjCnGT2rjYPPp2jAqwf61UOdnzsYApgqZn3+/SbikczMFbl+E5CidAQUuF7tPIaBbVPDkg==","signatures":[{"sig":"MEUCID229r9ATaAuES9wBQFZ+wyC3nFbDGbIwzysWRjh2PtdAiEA3YNPLKAyzgDDv29EXWz7LG/0RowH/J+ewo8ZYy86R3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAgCRA9TVsSAnZWagAAlJsP/jX+pdCzTK4H5klphabN\nZo58Q4r43R8id3A2Nvq+exrazyQEyPhGU7KZmZHOjD3UcNop01Xboyin8anS\nTbqZw0MhCMeoS0QNqNPLMmpJ8J482qXIaJDH6xE//77wMMgISj36TijLQQst\nzb6eBzXiMhmaUJII2TF7d+Dg40cQSb2RFVDWlZ6ecBsdWztO5vCSK2HNcB7K\nPptGHaUau8O5NlutMrATgUGVOJWCIv6c9MOwlceCugCGBRtOVK8cML97fZmn\noA2zp6YNmGuRxW5JgwgHKpHGGA4Mh0tELdPJModIqPNMOD9X8eA2cxjDhPjT\nIhBvhT6Ao7u56UmZEVEzoac5/sW5Bh5pyTDcIHqtsdYq/5ufmqwWOVI3jdoz\ndvO9YNUJn8jtUa3sI/2H1aQcXqF660sc+vCrdVm+V+2Czbb9YmMJ6v7oZvAP\nl1udkNZOZ75LcLup60EX+nYcn2fOXKAoGbssuWhKsMuKFhoIg2Td7jowWOlZ\nExKdSk9sHlYsAf7k6efaXx/KJBSGPxGEO2O1owMkfV/1RYkPDGCwK6r8Ty1G\nauB6wsmKBRXJfC9aZ6/iDcRbTVdtmKz8mBo4WGjORgUbmZRQy9ev/sL0dHqj\ntps1bc7zf1JJi2TE40BVNsBNrMYMqXSchKr8fz8WOdkSReOAxvZ8i31EVZGe\nVfeU\r\n=cZV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/density":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.25751d2ed.0_1620836384050_0.8840606227850623","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/icon-button","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a28fec4a88061ed3c112c72af0dcc6f73b5fbbbf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a23ecb682.0.tgz","fileCount":37,"integrity":"sha512-kGo2Iled+erEppQb48c7X3VxOg3Rd5lqvXSMWeWNbeHh1EygZ/vfWUeMunUCagVYV4YHH2x56jJ1uZVu7I5KPg==","signatures":[{"sig":"MEUCIBUGNJCNXRkJc3nISNdjkdj9mmcHKhk9OldjgBFFcEecAiEAyHZf7aupsMhpK7L02gbPd8EeSkAZexQwrcXeB1GMyB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0NCRA9TVsSAnZWagAAzuIQAIFmwbgY6HTgSPs+Y8tQ\nKYONnSZVJwomCgmVSn8vOfXQ7Li04PwsWyqjNjYi6gm93wOx6GrA4NYxtmqF\nwGA5dXdXPxW+4CNGq2JH4K71glAncoOQLv/dA/7yh87f6CZnCSRAUlKqq+ft\nUKmQib/ceQu0xB68/nNX1ND4zrNDgcuWqZP0QBKxCzS6LlSQvFaz5bVTG2p7\nT940C+HoxcbSEDUiZY6cZsYRVg8ljJtqqiigNiDUjxZuoLVm3alYEAXRa4cu\n9smxak7lFa6NT/m36UsgYiQKeWiNprI38wd5hSvdtXgjRr9dv6ZDhmffVdIY\nkvmNdJ4yqj+Aj9nXhri86hK3YRE5EbrpqZjMeuQAUp3qxsXnj5UGiTUHZ8JN\nBZK/PgRmmJ5nEtfUVhGANDX4GqhGbsCrCzv/rviWBtwwiXn3VMjuiExTHDFO\ncH0tWmlDsqopwS4cTvGvu9YAcBq4zEWpGF6BSWWn/KIfzP+2DtffZL+VqUaa\nbL/CIWcN573AtEHSZYYZpSWTbqltOXTNPlmJePLc2nKhzrlIgfRgIg9VD+Ke\nP/1goqKqOmGHE9SrrJVZxUorHSHdauK82fu+wv/ICYaVgYhn3FsTMwMgNebu\nS1By7DsZsAL3oV4jTjXvuTV12KM8WWYb+0kh6FbYJSSLRl8LT31ez2YzJ+N+\nvcBM\r\n=mnq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/density":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a23ecb682.0_1620843789014_0.21578271954699613","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/icon-button","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f90d312470c1cf57bab498ecbb1ed343bfebfc9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.33a954852.0.tgz","fileCount":37,"integrity":"sha512-t3pndAyjXgWKA8fUNcbrIk9BbaUiqWchYsVkgftr8j+W3J3HwRHRGLvLdiNmHcyaNmLx5SySQKeNdDOdI11yHA==","signatures":[{"sig":"MEUCIAKXHDFMv4g0sQKuW+hbcvmX1vlmPMA/UgMFV8BVJ+5qAiEAtejMTQVH84un72r5ekT87TnAJwaYTqjrrd2Ta09yISo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUC6CRA9TVsSAnZWagAAqtUP+gKL8R8PkPqjCkXAvRvP\nAH63YkauE7n6Kpb0dkecUgM2/MEmOAGcVjc4vH6eCDCiBSmQKlS0YFw4qw8c\nvverjz7Ey0w7ThXXo7SMxJSFF4UNf26cF3EazJiq8qnDuq/A0fjBn4tBzQ89\nDxjvjpw/3pd2r70vyRbMn9vJ4X7YDfW1vOK8KY7XSyxuH8vHDSZ+XIXfbFFn\n902IIES9mUTjFlxipcv98fm3Sh78yqCFkygCqOfgXBin6F7yDCvGfSg0SF58\nMAPlL4rtFS7syoOHMsnPEFkuab0mU7M5Gbthsv2TeG6PrpsTAVeR6k2oYIHn\nyDGmDZnknkoehGUdIumpR9+Q5+EYoqrik+/LNcAIhiWzEswMCYYzz7Kcbw+C\nSCw2U3IYvy46KyPJdb9GCBb/c4mjS00aa5tHmTxEzY5vqvTNcD011OY5B8Sn\nbCLHXR5ysVovH91fD8DHuWNuGKNmqg2WNmzknt4j810SsI7WC2UDl36Mdj5c\nUiSKl7UcLCaZzYT80QuhYKYK3DWCdKB49Co3sT4psOhHTHopD9fDDepN0pr5\nwwNT0gWN0bXqgUyJ903KRjIHY5rVt9RV4+6HdnmOGGvZJSZcPSI9bKVTPU0x\nL+crj4xOr/2RtUoGXzIzakbBPdLw4dOwxbmbUo09VmCZ6dOklZPFwBP81jlN\n9a6p\r\n=Sisp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/density":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.33a954852.0_1620918458220_0.2198827689422509","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/icon-button","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6377943dd4daa533339a821150a6dcbe55d6b2d6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a4484849b.0.tgz","fileCount":37,"integrity":"sha512-aA2hYplIUzTvBC82bUCyJBKBykEzMehvkMRArYIsVgPVfTQj0ZEP3zk2wdSIwGqWBVyD9KAWnImMzFhTX3nuQw==","signatures":[{"sig":"MEYCIQC03xSb1ljlbMRaK9H/NCady9K8M6Um82xUTby2M84M4gIhAMsBm8p9N6zuUQSEVdiGpz5RYiIi5uY/MMHpvp/hfiHA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYvCRA9TVsSAnZWagAAlacP/30ItZZIy3/+CqFXufdq\nb3qkQ4mECgGSQWbUtGKTxXGTA4DH9hk1UjiMClytdc9H1p6StLP+ySSJ8/8u\n5iigb3g44MNnm312kXtlY1G2iGB3Sp2kfbCgoXNL2gA62L+IFb0EbF4ZhV+R\n7vqMFPWB5D3+d16CdA6YEKpDBgbwmQM/ok3f2qdaCoOMG4ipRWgoawd6Fk4M\n+bA+pyZJx1StU8WvXboHT8aCNM9fhibvp7kSnFgt1ptbgaPg34cKLNPFtGPT\n7kRWkGXabzDaKBEoz/F0WgoxIKNay1XM9Cu/W+H5nKA9KuBpkkQMhyrK3u3S\nXoCj27VlBySPRNtjiJVjA4M5nd2ObdXYMvCbh5bQgZyJ1HXTdYBbTpKWz7bg\nVTjaXdB1ggN4HsTktCgqR8t34uCmp3btUQ4EImKqUck62E8t5pKhzQmSJ2gl\nxfsZWGU4z5auOsRfK8Yfibwf2ZSsONJumrXhec12lkynLzE7Qo1ict0RiQmv\n8CcAzSkPOMrpsYj/KbD2jcRq763LZKxh4L6u6l1ZD7C+SH3o0uw99IhFn8iH\nxlcLHuicV0eSD/2S6/EHrcgoQyeLCp0UqD/Hyve1Vkwzc57fcieEDsJHzQ8K\nLSLUW60WItuHW8w1lpq4PvlZMzT1Sp9sQCtNPwoToYcpX6ftdiLU+skds8hA\nDIrr\r\n=oEqL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/density":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a4484849b.0_1620919854590_0.7262168066668575","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/icon-button","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51a3ab7dcf655a5f9f1e972261e058f4444d0ac9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b4c3f513e.0.tgz","fileCount":37,"integrity":"sha512-UJi4J3TWEiG6+Pbmv6GiWUnQ6WjJy+YZfgSLw1tBXpUuOLfMSSy1XzBZpWfOHM/xS0jl769Cpkzjso4eI+5Tdw==","signatures":[{"sig":"MEUCICNz/GpjVIxdk3f106BUwPrgxfN5/4Fcema+JisOhHcFAiEAgu2BERDsche76X93yqiO7+D7sbw2qwF/WGehRuy7NUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7fCRA9TVsSAnZWagAAujkP/iS86mKqWkQKsRwVBA7d\n4+VSmqp9pRWsF6zlnIZ3Z4WqxKKpqwC3gQzVQmwBqX95/EdN/xH+Njr/RVCz\nEYdv2n+dFkRDFNByjb2CDmUXdO/Y9rxFhJJEoyi32SdNtAmiiDPNXWS2TYJa\n/lMdR8yspE4zJrmLe3ixo2zZqf1aDgoDoW9QgIz77ZsCBf0QEa230oGg1ab0\n2XYBs7iZEWn4Ordp4pDgma1uSbVxhOGBDpSvaDIzB2neo1fo1Jxo2z1uryFS\n2c6cQdC5ZUQg/C6p1xN5nZw3roBMxs7zjwaL3GSAWK2rmtrOfKYX+4qhDwcx\nHhuX/EUqBpKsBEgXq0jhEjAowwOKOA7zlsL/9K2uEvVH0rkTQ6VttZtFsSOS\nPTF58kxOTxdj0ZN19hRgvHZkUDr3XYf7gjfwARK7Rh+TfbDypYDGw+KkR/7R\nujUM1O2Sk888YZm9q5J3VL1TuybHt6PobWi5j1PilTqqDN8enomUfIR+/+yh\nYxsrlZnJcCwW0T0KIdCzqek6Fq3s1cs/5/mbKOvbQbF6kMaY4vabEQ7XmLXV\n7aSmRd6yxqdz7LR3KqNQu+v2CVv/K8dgG+6rgKdHNjhdIVgQ3As7rfBG8mUV\neWJ83YHmIJfZVr5D/4ITKB6bsKqqxFO7MIgXlp77aHsttykkVovQmdCpXHC0\nMzwY\r\n=GDiy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/density":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b4c3f513e.0_1620922078775_0.8649116528843757","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/icon-button","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf15f01c994e906bdafb8656c1629b3d71e1c393","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.1a8d06483.0.tgz","fileCount":37,"integrity":"sha512-m7WHl4cZHf/oCoQ+Uwu8rzd/Ni712GN6PXN670SQ/1dOSeoK+1H8/J09bWG/OccsYbBAopGRdWBRcgvf4rkC3Q==","signatures":[{"sig":"MEYCIQC37JVD9d02cShImLj0okEllOUwoCLnIBXWBd5/lOvp/AIhAPonBOaw6zaON80IJIt7iNpu5VVp7hwUDk3cRAcIt9E+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAxCRA9TVsSAnZWagAAjzQP/2Ge2AxZ3uOOQCtJqQFz\nmdxuLamExTV0Ifwo5690dA8jYP7QEQX2tQVl3fyoekJeX7k7hcs7g5BkNy4y\nZ11SyPRLoIkygw2u2qTjK+BZZB86bDEsq1Y/shu1UL62zdld3pJRyL0pnvX/\n9bJsS9Z/C9WUDavoMs8B1HJiUKpDA/Ukbgt9RmIdSnlmjC6ZDMDPGUjjx7BM\nYOV3wLB8nRYUQMW1/svp54tH6tqjQhhyns9DZorORjAriSTtNQtO4k4tdxbs\naYSylJvAPwZG2tDfomHwjr1wXE9pzyZcygVQmoDF3wmJHYJhProjvKnT2eD+\nkIhQSRlo2ahPvcgumaiUIEuCPjiB+7Ao3CdUZQzOhP6txZde0NG+RnwVtzwE\n6cPzAqQMuFKgaMuTv6j4VIjV0L7/bIeXsJ3/o9/wztWbt12xEOSDNx8cHn4b\nBzenpX4GPJugQtlQODSMxCfmzDIePLvZWzS5rC/Ah1AclT3VsUYXP7L0LHKF\ntD5k2LZ47THqoB5lppGdbt/q9kTYCfzGqtpLiDdcCabPhd6UIJH2uOq0cjST\noxQAEazlY0+D5cmjzDzv2WKcWB4cIpXzTi2nAvJAc7I2qkML8IuTpU8xb+K4\n6BmtluHPnLTMbPggT2dBmfXjo8pNZ9snRcNFq8FX9nD6bdrMwjXPTjuZL0sT\nDRtW\r\n=Xns5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/density":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.1a8d06483.0_1620922417253_0.7736967078629686","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/icon-button","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77d7dd1048ea74fdfb83debe4b82e51ce73d23e2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8e6081836.0.tgz","fileCount":37,"integrity":"sha512-zKHQA5qGRsTEjb3gDHp4x0UfQ9bAirlxcTP7ZBc1VaL1uIcNXkrOBn8yLZCSckqXvmdkEl3BraNbHeyPQBuZlQ==","signatures":[{"sig":"MEUCIQChKobQ4v9Ro8IkGZ/931j9YmJsekyI6VOtARqiC+SyCAIgIEx3m8KzPzUKw2krjtMZPyxIQP7CkiPpBZ0jSaXOHNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5UCRA9TVsSAnZWagAA0KsQAICw1UWWbD6mZIUlTUa9\nSgmeJMeFoac+CShywqeh962zKhtxqZw1bruS0XV95ts99gxHn/bltEp/7sKG\nim7FqNTqI++/NBB0VL1pTazCAP7yZVculRYU7Udtq/UPOQgmSXbRFnWVwRNi\nj9Fkt5WsQ23rURwC+tvuKC9FPWH2Kn+C7ujHO/ltyXJXIWc8vD7o9hR56kXF\ncC6h+3PbcEzUeGZSx4VfLcZUyZWrdukzQuuYzhx2eqi0bTmNV2GZ7mzKnkYN\ni7wcE3gL3VJIuonOmZb6LS7bj8lJk3UnGuGAOkoczyjtDRX66fKDuzYAIzYM\nNxSdjJpSykCFs63vftqKezqlDb6MPA6lilXoQ7+nskOvZdQ0lXy9AqKv0E7r\nFBRgYxQfcd+Chj8dgFpCrFnonn82UGoXVKPTWAbGOw3jF3LXR6uz6m9GTuNv\nnNfzTj/0tam45IOhCtgatDfklAuTmwafzGB6dJQbrDi+Dg2+9e3Rs6R1BnG3\nZ22bVcw4hgSxU2E9IiQX1+bMnrk2yXIOgX/qlegM6iCbKD9e37MxdVZ/sFH7\nDSFm+OPzZ3nN1bEU69xPHgTYEE0IKmMJ3WVjeQB9RKtSmHA9o9YWG7DBXoRD\nMMuOSaVVxVkmzDhQC5jx0QecN/XCqYJyPWhq5D7ZClbMjDkMPZU5On9pXXGt\nLPor\r\n=N6VB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/density":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8e6081836.0_1621028435700_0.40283677126808515","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/icon-button","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f84bb2b796d9de6c4e14a45ac35696156f5079b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":37,"integrity":"sha512-JwcLsvLEtc5TafI6HgCU6Be2+5hozu5mXwJnCsKdYImbr/m5e3QhUyRPzzvEsq7GH8QE7TBFu3xDR5E1Vv1VBw==","signatures":[{"sig":"MEUCIC5wwXLaFSh86twbsDe34E6Ws+VCIKFwAylvY8G3/icDAiEAh+PDlvoq48e4XC7Wu5xMv9qcJyeKwD1moSwUDRzFev8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFsCRA9TVsSAnZWagAAU2kP/joSOLEJJ9PlYs7P14dq\nTDmb1uZFydMWfuocjNZJD7CLw5pMyBlJ4J3LQWiPEFkSHhM+bCCQjxQHQyH3\nncTcfQxywmHSOxbtylbHvtqCKsou18Bm43Q9GTQAtHdHo+oYj8sgbM1dIOp3\ndyQ1Dxp4ugpowBN61HKsyu1W3koIjqZqTuC4DkNFKbFxlxBL2hjXx1+tFjE+\nAAzIaHPwYv52CSI8jX1nKDsJRB1hbvyrFCzL1Zjg66pGTBVwoVIu1hbgnKuF\nZXT5i+wA+1e38KGu4RqsjC5XD5C50tq2d5Yl8fc7/sGkHm3PZicNXwSjo/CZ\n4jsnuW5j7ldbPhGOSTWApG0jgKxhDKgPvFdB1sy7jPcuNIpWRL1IxUGzyPv7\nUcs2DhnqZzSNIgpOlPWVp9ZAXVEPJ3OMPW4n/PU5m4fg5k3WVWk6dWvMNTHs\nWgV0pIM/ORIfJKpGVfffR3trXyWiJjuwcPJq8D75E9JRB/iZpIDQhisiqNk3\nBsUTguDBsRKs8CUZfw89CEx0cuZQaXkxyk8ULN1c/97yM2/am0PYSY6eGbd7\nG5XdEx1Zer/LzGUTIBwox26r83tTjgX6JYbGFn6G18k0j4v4FK7mUaYs/8fW\nAuDVELfvtWZlb4bMF6XGUZSdabmgR9GWI6JSnfIsTi/3e8PFeEAltqJk4WAi\nnVjt\r\n=A/v5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/density":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a2b0f4cee.0_1621029228325_0.36316624920065665","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/icon-button","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3aabe0f90e872c1a2bea99b7dba80657cd5883","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e8e39ad19.0.tgz","fileCount":37,"integrity":"sha512-kfCfR/kgDJ6Ta4aoe8mBUfUqXvEvTvHYZXxjJVeXbYbJ7t9L8+6p1dQH2yUYtrVdD6QKTimRyvtozPZKxtgmQg==","signatures":[{"sig":"MEQCIA4WhVdAAVY2p+g+ioMRDh4BJYpNixDH7yyYmMPPfEHuAiBBKvwrdQ9+W0REXVkhexaTlYYwRvFe0J5ehyeZyCJwUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/TCRA9TVsSAnZWagAAxK0P/3/l0SjDboXpyMPtsh6O\nMvaqfNp3p6SvUMg65TE2Wc5bKxzTgPS65o/NNTkKBVVKs+BL79ggXBKuED2U\nw8uukR0Y59KLPK5iXc1vB/BiVTPVNliuaWesnb5Yq87Sxs55G7EUv2Ws0QJs\nx6MFYALBIHQW8YtEkVWWuf/9hVHRcTzwx6CyJwGIoDqzTOo6FaAxfUztzARa\nSexMs5p/Dhd/OPRB8NJIhbfR02ML5JbZbs29YiS0NaYwONsFjQh0zD5WpLk/\nTlEmZ6EajetEEoJyGbasxyywXPlGE0WdEY8r2WaVIPbizjOTjhi5Ifo+FIsX\nV9FG2kcbZJBbT6lhyI61Hz5DBufoZZtNt8AUG1S680h1a6t0DbKE9aeqyYBE\nYcF3kNLL98sPlVWtAHnJgHz/X94EvpQtVkD2knCHyrZHYCl0BAoxYdvYIHYC\n/Wd0CNlccKJLCynGOTcbgmUrph5uJijtRvisl5U+NAn9KXfKLW6QOw+Mon/w\n4QsjSWsX0d5ytsZEL1TV6OFSJABmtqN4uwCrqBWv/0OMX2wn38A01pTOsrwo\n3w6+iqt6Kc+t/eWRZ6oyiM7P6XO5z2DcBLyCC6RrGPyl8xKYg4gGW/G9hOLy\nCd+iNpjkjsxsE+pbKzBtV7Dh2oEkF2W5lPckHVXdxgJvwvx0pXT0yyBwiida\nTZVD\r\n=lQax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/density":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e8e39ad19.0_1621368786750_0.27002990376799363","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/icon-button","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55284a53397d8ce906d8a2f992d1ca8975e706db","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":37,"integrity":"sha512-SMgy0zDH4Zv/MRWXrVroVnJWomvC6FrePkuh6MnpTK0kbdxPyagDHi8sBt3BDeyS7Zbr4Fiwx/YiYqGKW95Wow==","signatures":[{"sig":"MEUCIEnacbxZOeG/NtDSQwCCNf6sdnHXQG4fNw25KvK5q3faAiEAnROM0dMy32qo42g2R7nohra2Tl/fbkbykzBiuLC84wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6OCRA9TVsSAnZWagAAuiAP/0LlB9L5twJQCM/McZol\nY3nxkk3kvfcLRoA/PCOizDYWUN4Wez7oRMWgJUh99owN9RMxo0lnHQF98aVP\nhaB+p1nA9XZzKDl1aN3V08ucAEHYnmJzbN2rv+VQsTLTKk+4urQJKDj8cPPh\n8LKVwupsvLXu8mTk3mxxkMyhNSd5aGv/p8FsZU22nQDPUYWwkW/Vm3Zs1A0J\nRlaW/axp7dfwAGu8wol9cM4Z68ftYQIA4mkq/T3L3pjeNCa+nYnr9PyCY3Q/\nzvcWIkHdiS/MmW3DWo/0JzE0hjmgKzV+UrUqbfVm7xr0lGP+EFVtV3tPdUSK\n/7zOUZ3Mk2bIdFM7dS7f4kQpN5eRCOKa3DQQGA0Itt90sDUWiqLVbSyDeghS\nMvja1+gHrrAyu4G99r/Qt73UP0VYozAS+nJHDrn/lMWDROstFbv55k9yT25/\n0aP/f70gV6ga/1HB2a56dUi7Y+5LTB7yNncStpAPXpAjrwZEHQ5z+16p5DYW\n6v9fSLOcMOnd23bJGLR06588jf+EHeaahtg59KSl6z4dgDa9QBChL2LfiHKM\nNQAFlOX2A2yY+wvlrFBH7UM9SOsGeCcUq6JbVV8AcA3YTbUKmfOSw33AXLFt\nCSYfk/VOEHKEgcVTnvFBn57tg8/V2mJNh6QrcVmPGIxXmSAMopr5ZG0Lqf45\n/NTg\r\n=s3OP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/density":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4bb5eea2b.0_1621438094491_0.6204807254852467","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/icon-button","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87dd29e88a7872a63505b5544fcc0e211cf7bbfa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ccce99cd6.0.tgz","fileCount":37,"integrity":"sha512-1I+C14PsABx/lx+EqbIhz6+0fIGxOQEwQswnL/uM8luEVdwR7XDsjxhavnXSosd4BdWjutzT922g0INpr4944A==","signatures":[{"sig":"MEQCIGVTY5ROxLrY70qGo/VEE6Ord5wjNGcAnnvaJqfWfGtUAiAnFkp+3ovNTxbnZAu0NvsBlmWXCC1MQbLKSE8FzqClXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPPCRA9TVsSAnZWagAAbVcP/AxzRdp0SXdBEj3OBHIO\n0o06IjrQ8wK1+43vKfIXzpZKTSQfpipEE0DTTZo39SbBFw/g5bsU8D6yKsjY\nAvMJ3dr850Go+rxl4X42/ixuqEqAJ5auTyFQeZ9jnnz31xD+23fOnJIiShgU\ngaoTqIS+9Y/SY0UvBOzdHUQw7V6nrXSJCVYPLF7jZD4yIZGEGnroaaF9jes4\ndIp7YkdnJN6cQebXlp3/R8OwzJEZ/fFigj9/PZU9qktVvcLrEPaeR4p8vsmj\n70ZAxNm4QrPsxhOSs65T+S4bwVmbA3Me9hnaVAL7xVK4ARDKhX2xjaVMVWrL\n4UCFumAglOCLZM5m5kOKma6w4LqdFnIL62WYYtLO2kTuD6/e1gvV/3CbnKAp\nCgVemotDaiZo4GOQRPPwsFeHLDHg+jyGz1uphs8JwU/ZLB25C5/uH9AcYylm\nmTsgPJTFs7mGKz3uzKNliHT78uVjvOM08Jyp5OSFvoaegyUyOpBx2wP+A2DS\nPR1197pwJnO2TRVDJoxAuR3IJuAgqSrSWSm0pcmFQMN7VVnba7cPjx6i523t\nWCWbiqaLnsp1K46A6gcvRT6jDSGZd9bkJ6eEEwvjwoo7HZSOqbQxAiJE4W/K\nagNJvwGLi2lSktT0tRE+VHxp6YHDOjKDAtpRCRhMAGLoF2AXTBJsaR6nB/3/\nsINV\r\n=1DjC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/density":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ccce99cd6.0_1621472206594_0.13484834065077966","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/icon-button","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec78e0a30d781ba40016cff97bab065a42fa11a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.14767a8db.0.tgz","fileCount":37,"integrity":"sha512-Hfe3cbRz9ORkEqkjFe6+q9uxyb2UrSjX2VnSlp6MjXNTtzlc3fW/KgD6UGV3Oji6jKgkH4DDzCw0dgPMQ/ASNA==","signatures":[{"sig":"MEUCIGwtH6nJMZeKZV6bNTKXIE7Lf3+dateuTEXKRWV+atQnAiEAhN4LtlnYsn0L2e4uGbhqv8ftHSLKXWQYNebMwYCOin0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsuyCRA9TVsSAnZWagAA+MQP/jjKWHG7NO0bQD0oaCKz\nnyQexu6a0bvrLvVsBXpY0AxQFOJTh0tOi0x2wtp15qQE9NaxXR3/xh3CSsTI\nkGlkIhIEEfwGqMg58UEoNI4jwaQrqyFjfo6xDpUPaq6Wo4WxoWAumpwcCu0o\noWjP1sGeDq9rSRKbypCI7yMSEbvQ/2V7HCAM/e3MErMBWKu+Mi8sLVr0aify\n94mKD+lQ8Y8EQA+HMlfXXmBX893iRX+8/YaPnj4R7/MWdjS7YgXlnkWGMSag\n5LxOg7MP7S8aQAGueSQ3UUvejib7FOt58mrIyZTEtqoETFIr+26pqTL21vP1\nRdYhA57H3+CyhnTX5xRKkq5Zo6S/vRZ6mEocMhFokdtBc/mc2ceMqejE/50N\nJxRIUgJM0aXS5OldlbNSDAXURX9/vBNMJFivusf1w1dT+dHQYsWn7KaLT1Pl\nmVaI5ia7XfHiNpBa2D3dhITJnI3zP9Zjn9mzR9a7nwc61kVQR2KurJ0p+Ozx\nKj7TWMI5ZhxDiojG04JBxzO8z+B0aUzw44nyN2/M9WcS8xiN6K+O1fqxLSRe\nlGL669aI0PzX3hNobyyUQgY/nN4xNsNAkTOr3WrX5QgluFoRekfkeNbRtQV4\n2m9661Ob0kxyGDieOvjebJ1VQCXLVJA+jlJf76cErmVws7hxvPm/6Ymbdw+N\nRty+\r\n=BCbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/density":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.14767a8db.0_1621543858131_0.20432830234095012","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/icon-button","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a131fd689f5d377c634b51c9312ad48e019542a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.22c6dcff9.0.tgz","fileCount":37,"integrity":"sha512-W7c+m+EKY6oLtmNlAXUIUHBkNOICfA/krJJ9R3sPjbuJim0trITyvl6hCPJ7MEDE2kGLgZnleE14Vg1Zr80gqw==","signatures":[{"sig":"MEUCIANkqvpN+BuY+p6L9K0EL88rIWBSOE1Ozg5y5gtAdHD9AiEA9QDPcebKbMvk9rNRAtbPTWZL23FdoT37qZicYfvqbKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PHCRA9TVsSAnZWagAA+3IP/2trX3tBN2vWL9b5TCE6\n/cozLOKZMMWCm19hdW1z10kT84G3KjjsxcweQvb6HUwFXaVsWEbbMfCMOLPd\nBJR1xbUjAx+eybnfTw76XCF4CKs0y50go6XxiZ5NoXW0ItKLNA80aOge0U8/\nuMDtLWgZiUvBuGFEudvsPLOfzU59kl9i6hL+PB0JLMMv7+mJazcfcyBgT0CJ\ns5QI9leFBGQq/gTYlg1FiwSnHuTfxTrRzwn+Dru6p/I7U94uoZpXVy5/xcdL\nbppYsWDzPzhCfOrF8RqMBQMPTOj/tOHIDDqPaSK7AnbiqHD/deeFiP3g2JHr\nRSXBabw+T6r/aC/L8yOVShO4lZ+W9MGTGfoO2EFL0rdnKZbuI/MdbInkqZIi\nf2bDaw9wUHTsQolZCX+sF1L1XTnOAS/JacEnI2rteTW84DqkGO0bvG7azBVL\nl0EBXpMY5T/D9JKUfZ2VC61QQl1iZt6EMxcDdAinzZYGBg8a2kcL4xGKHR9N\n/IWzvI6ybfeIKSgMzwpwpuDYKqHFxoki+2Fq6/DOQ610tH+daeTwToS1NB2G\n4p2HaXtgj2akd6lB/6trKuEZ6j0GtJk0GDYzhkwBs1ApCCNuT78G6SiIDvJN\nuU/lZ34xPvfhqGCMNDC304+cvGJV0mElCnAQf4ghAdQebUjpiqGMrISKbWRd\nrhQQ\r\n=8IkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/density":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.22c6dcff9.0_1621869510737_0.49696217910594354","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/icon-button","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"444116cd83918b5e1946dc964e5efc9a805e39a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.fadab3372.0.tgz","fileCount":37,"integrity":"sha512-RaS4UPr/uZpnHIk5yJIjNsKAreiRi8jciC6PNR8y0aQZzURWl751taTWyfHGg35iAg5D47dU2i0KPMfLPuZUJg==","signatures":[{"sig":"MEQCIGaJpZ3vcfB1x/PPGFFHYkIm18OLwqVKTbMk6TFDVx+uAiAGd8+owHpQmpQxjHd3C5TMffDyI99R+hBprDwxwJcXnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87XCRA9TVsSAnZWagAARSoP/j9y98+zDWbVlknhuxVi\nsWRF9aUFoCxxgnNWzbztzSKWd4JrT6OGkKMZFQ8jqkFaljcmASUgMOkM1Lwq\nCO/ajGx3Fhbrt1PeD/RZ8sj4rROvhZh16/zAM6m6h23r1BHSvP1yohzM4N1i\nfhrDTs9AOrdvkf5qrZaDTIlyzCgkIY/MPmdYBhyMkq59VW5eZG2qR4vrbFpX\nzYTIT45i+eNrcUXq9FGlxBjUVXCuffAWtrTErIJE2UafKQzhcm5mellR/Gao\nD3zTZqzgcNqTT4fpRCTyxzfS13KSXkNjt3piGtXJlMrrOUVGh7oHPcJkiiBv\nZG4dZguDolSau6CfG3RlPjLdDZxWc+ScLKuo90hfxHxhSQQbrjR+f3PF5Ulz\nS/p5m0QuQQrC/Qe0VWSx8JiFSSkeoECdKn/JUidh5VXnBEGuHK91R90JCoot\nrFNVyl7PqLSRcyFT1ae/vIzr15Bj7bvMkRFHK6e1+0W6Xk8RlDn0hdsvxKvw\nJ6eXBDftVoQUW7jvmUW1ouLYOL4SjiT6KnlrEjFGCUkO5nkwUcCMYzapu7DX\njJfpzj8O89J7tkfVoNQsYv++fnVi7g8HdOP+UoKoPEd4teJxABZ6rrQmkFrD\nijEXvDhtxmekB2COJO6y0hODQO1CsbPtNtJOP+OfegDeCiRO8MDjSBWafdWE\nPn8U\r\n=sx1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/density":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.fadab3372.0_1621872343013_0.8264209539010741","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/icon-button","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"254c8d6aa0d209d76d719b222c38d76c47d21c51","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.caa73aeee.0.tgz","fileCount":37,"integrity":"sha512-BbqYQAJ+Lj7EmYyw/zPHen8kGYZV0JllbJmRNXpFgQwDZqFkYrO2ggR3AZsT8nMEHpmVE6QMwwgseQfGUyfhCA==","signatures":[{"sig":"MEYCIQCXjNUQ0eTUCxjB7q5gqgnkbV/s17Z6EqStQwtG2TbwogIhAKQ01DuIQF9wGydW9heNvnE0jDKWp5lNblXshRtmw+Fj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQY/CRA9TVsSAnZWagAAQr0P/0q8LqFtpvnXbCxFnDmn\n6joOIANg8h1hdhouIrGe3Ri/8uTS0zfDhJMshoBcsA17MWNBDKs+e/uhPh28\n/syBhqSHKceyHzfZJ5tWNkVgofq8HefOGItTNv99qI9tNFKTQ7Z25oNrtKCg\nAwCrxYrN8dofYJWq2EeI2ymdH6Ej3ximJLV4PEID5y4FgTicNAShSpHcPM2A\nWWxLMldRN84kUNcGp5DvmmExI7LvtfK6GjDqZMzi5+zAZQlrx2fqodOu0jTK\nmQ4XO1u1xYhrLujeC09C5zR5RQ0j7L/HF2Bvb6JmPtXsGVGufXWjtunILMvn\nh4ZGgLxWyB3+QOJJ6nhJfc2GYXWqnu+nSc7dkicYgyifBiIexabm/e2FlJ6f\nTE0/S0hvUFz1lDZDBYGEbnGk2gU6d5LPDdy6AjOdDaUV4iM/F45/obaU9j9E\n6GIPjSexM/9E139t3BmBAouZHNOEJh0+hPULMS1r4D21sg5OTiT1AGXPxSF9\nWNx1eVEm7AYvIZ0PIbY5IetuBDQkOSZq3hpA2CPAwdvQKdUI04dOcYFxQY1K\nO5czmesaeVvlxlD7qgIAlr98+HlGR3GYh2bcKjDbMN17wXH6GJK4JRJoGoxo\neM2rGf/rzMInCW/37Tq6Gy9RNtU+HZ/jmr7wBlAtETRgOdR6Ow3gbbCeqc06\nZ5+f\r\n=2ad2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/density":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.caa73aeee.0_1621952062775_0.6956651442852515","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/icon-button","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e806a627e00f2038859da8c771a59694e96b3a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":37,"integrity":"sha512-2JXOJN2G6/vINVVFeb+HVdrChPl5pPJI1FVgUW/GOIxvQx1L9Z3taS88JPrcQ0m3qZXJoK8ebqdYIpSxz9rrSA==","signatures":[{"sig":"MEQCIF3GqtdNh1iT+VJrZJmMiLFOZ89O/5mvbFloA39Yugc2AiA+c6AwsvYVlSxIPoTkxqD98/3BwfvK1Xw08p2TS0wafA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+ICRA9TVsSAnZWagAATz0QAJx2P1Zpdr6FmVfU9yp6\nAdZ6ZvzeABjLH5C1PdaiHubNJ9MEHPqrVyWoN9DVmt+D0cQYgcJgMlm5BGEu\nUt5Zn1tlVOutCdy3suGNI8VAHDiHE3mikjMC10hxuwPVDZ4a9lXFiUKUxsVh\nWDJfthW2KSa0EBboW9300t8JpX5IEZnvdMAu+UUJfKg6LmGzbSRgJj1VYpTq\nSqwES8d9TSBCwTmZhZrvmqSglhH+wU5tLIl/fD+NRTyCSxfPxlQraPkVV/TF\nXtgVf+NBiJ9JPLnlKSUpFGdjFszLU8kXZGnHSx0XkiNF6jb2ZNsSsIfhN2rb\nnuHtfSB8Y/q2mb2nwNb+vUuTAfKASuw+WninrB9cGmOGMj9lvmf1GeUkf+Fo\nprGe9sy3EGn+NZHvviYG3oB9kNGcQrfT2b1u9cIWl2HpY2Lp37QE+jKRjnSF\nceuqpPRsLzr1840ihbTh/UvGhSN1LR0yy2vrvPV7MsYgDUVGy2GbW4KK/v/n\ncGcER//qKZsLNo5p5uefwPmsaKcLrcKDr2ldICtpajrRHJx4AylAALOlEQx1\njfRxJhhA6zAFoF7EqHCO8UnngjelvFvARubJ/IpmAuWpzAHSr64mgI1Snv76\nILt47Nbl+C+X1+dOYD/LbJloXaT+uP81tJpAK8QJLNdJgH7bAUxEhiMnA+dn\nzf7x\r\n=eeI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/density":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ec31ae1ed.0_1621974920293_0.04691759754468827","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/icon-button","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e57a30d50d5447c92744e3887b418e7455780deb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8530d3514.0.tgz","fileCount":37,"integrity":"sha512-QWTdVQSOMmbe8duyiYCg7YbcgjO1ping7TmQy39TF8CVuQeOl+mY5zR2iY243nWPjI+J7wjqpUryk1TkhpVNWw==","signatures":[{"sig":"MEYCIQDeZvMIW/CSvfZeL8NLc1dojcX4RmZpXD/l0cY9fKKTMAIhALuLbIeaOlFgec/cPOjGCxtCsou8APdRZAh7FplQNQdB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MiCRA9TVsSAnZWagAAx+QQAKRO8F1PUowHiWj7Wd0y\n7nYkZ0m6OWP0U6lzCOekelQIualdFnUZbcIGH8w4NcWbhXzaZ37wa4uk1y3h\nxX2MdWt67FcKi0ggc0Na/8FgSJy5QT1bLIIP4rR8+ERfj36ojahO3kvZqBwm\nEMLuXr2MAiTKtlEwJ7cwMLNkxGRXOPaVWfi18nAwbx1cYz9XAB4QRrRWbV2X\nwp/zxJXAoEqDROuV3b7mZqwxwtsMDmuQzd4xGacUt7MmDkdZGWdi02/1aLyG\nkpes6BOVbX5D6uBdxy85fgOIEpdsv3itWJewU5mzo8siLIQCUqFVQRGHaLoQ\nChabz4/DAkgG+85cGcz2NIj4qwuH/yR0dDs5JKEJU8NDlDipyWbtYXF5Qs3K\nOWDPPJZZdvNFXirBC2UWTvAJXPejMnJpAcF5jLSLH5hQsGwq9THOPFTtgDuW\n6W0kFpO7ejPagbkY+dWSDk+IZZEkQWJDPSgkO5biWxizeu1kg1BLy3Z2m06b\nZ7IwuVZd9NkXVaBj3f2xLK8frJbyDgzPnVZzNOQHCfjQosTg0/C6rAlkeRC6\nJLDSQw/lt0OB0feuPHQSnIsqE5KZF92smdUT+4iK/NH6r35FAWyljp02+oNs\nCU9hRjNB5elZvxxy3hQptII2TE7kPM+Tfr6WPFA3jAxFCmkAXnpEfZDMsRt1\na85g\r\n=0/y4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/density":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8530d3514.0_1622131489760_0.6068809705719576","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/icon-button","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86211ad8ccc106e6e0a5922179def6794cda3551","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.00b5899dc.0.tgz","fileCount":37,"integrity":"sha512-7VVPKDojOXu1CLxCYskDMeq0yTgRTsID4EsRsho5S7zPwax1g2AeebmSochFVTgn95PxhJzkqNK8CQuJRzldYw==","signatures":[{"sig":"MEUCIQC7CUr4JTPPnF7NPanaEk80mJadf5446sVk3MgI/enkxwIgHUIn/z8IlAphiNGp1fsGTti2zqLdr25pIbuxhSEmSDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriMCRA9TVsSAnZWagAAJi0QAKIvo3hFt0Zi+psrSbj7\nvXFEgvkpDNlqvT0J1WCF26yrFDG8KHPEnhXm5y7mK4SS2EB9WHWFn+Jg6xDA\nH2E/Po0aqZPmSTqBbEm/kgjNhcft6PynLqNSyhwhGDPdpX9orMYGKeoKyWuW\nyoCOsVwFYTIcZ0wKns4cIVCcTO9S/DHdE9I6OOHyKs/+LALhJhB3Bhv2vK45\nX7kFETs5s8MfErls4gobJeY/9xI926KMDpfXX2ZhUOXApKGwLLf5+H22qi42\n5kXLNaO/tv3bZ+kn32RyeWPaLsnWPyf6Roh4ZYpvHKHy2uKWRdST3OX/Yi3H\nPzFNAMFXaHgR9dbz4TM7s/lh2oCl7eX4nY5zAlrZawN6PDpod4J3oEG/PngE\n2gSQwwtZmTDY7rxxME/UHUCE+eMhc/H1ruMFY/leODk71/tCbJKDp0p2rvGk\nvZRzgrRYVpz3RKjQ4UMeZ0DH1LhLPXOa5QIIe5CBHks/2sNh+nu25nNbW9R2\nreQz6IdQGRhEE+1GVZ3OFW+GpUUBiNNjFMqWuUGuctjmUbIiesI2r8d/kESV\nd3KeQossP8U0Nvx9EaHqzMp2bb0NPPe7qaxrsYGOv4+uzfja0swzMescuwE+\npnwkUf2N7pBkZNn7mo/R0NTbpfTsJGl+zISJkLt8WJhV0afgqNW6Y/XyuNLh\ns/hp\r\n=jYSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/density":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.00b5899dc.0_1622587532326_0.6866768665925289","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/icon-button","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0cefd0b499e1a678dcae1864936dd1cac162090","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f1525ea3e.0.tgz","fileCount":37,"integrity":"sha512-qgwkbBnaSwdiQbI7CNCtNWcNBj7pYdjfDMfpGtco4OCKutogcMRFy6eLmmRK4gRnMZcR88HtAR93o2vf8JB6UQ==","signatures":[{"sig":"MEQCIFriP8ZKvz3b4FBT4xVQGQGv/AgPlyuEg0QQkzSEDkZcAiBsDIKE/PMEuDINJncKutb4e7oy9YiE6EgCwgKWhU/s3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8NCRA9TVsSAnZWagAAJ+wP/3iiJXg9u/LYTp/w1b/N\nST9qhuCKnrfPhsW/NPyUlh6PPP+fFuh9ZhLjVQ3bL+zTv648Muc6SBdsG6fN\nmJFv/mTNcHZqHUqawXJlRGDqE38BMaAjNOqhaUDSWJBX0DDZA2MFcaZGTgX3\nAynmZLVXggahF5q8i0kv9wslVohkZdVHuzJYK19O7SGBoXByIA0t2Ud/YwTN\ncMIJ7l+tWnePEfQ5ptwOtJawCWvLQxV4rkjFRCoBZwGWSppE+kUun02j8Vb8\nfSia/xOyJLLMD+JdyDLUCB8OGBUALDc2WJib8Vn3CAmR9IeJ/Zxme0CyUjoP\nTY0xyijuOIhxfS4IwEkGBe7nSDsFSSXQhzoP2RdW4G2+feAm8uNgOZNjBJkQ\no250kFKKiVhxBkaz25c64ZXIwI7CchSMNsrDiY13I4rj7MQIOZnoVoV51j+Q\nR4SSZnoJINarId7h+E+J0Zdt2zASmlr20dCMj2FHQOOo4pZhNQV3qqKKJCKg\nAlAlYj4GlckuHrwamHVjjJF99L4XNZaOniP6E99VyOX8ydnd/JCWigxPrvvQ\ng7SBibEhB55uJ6TTvOit8OSyHZSnry6L4DGNjgWfjgUatGdCkU1gfftKFZWj\nxzFtNycZp4v2mJIruOcqL5+3ATEB+Qe4Iitrs0c0oZnARkN+Gz6KjGUtP8OX\nnEkP\r\n=2SF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/density":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f1525ea3e.0_1622728461788_0.48859241087500416","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/icon-button","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"813c7bb7f3340c106a180a96d9c518d6a009d540","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.464a00286.0.tgz","fileCount":37,"integrity":"sha512-rSUwHv4D6LYAA4SqF+pzBEPRLNZ3UrrlN+9RW72cPWGLZYQyk3w8tNwrQP4zB4ss3N/u1+1k9b9+x58B2Orlsg==","signatures":[{"sig":"MEQCIFbxLbufMn4Ny4yo2RrIA0vPZYGcrCx8A2JOvUxmlEMSAiApenLZEwEcisc5lLWGqq/QiQ8kHXHZlJvnE1mBP1RIfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsjCRA9TVsSAnZWagAA640P/28+82k7x1RTtv+3jx0G\nqWLLZXEUR0MRwmpu34KyGvH3qVGunxF3zcPfmFZbre68lO0CZhf7F1Kc7oIH\nuHpR7dygYY6C8sNdmngmCUbh5ITrrc8QGQKOFyJ0O2QCYdOFgcgIbOCuZsQ5\nvBf08ty6hPD/1VXAzJNniK0SxhSwZdOJwdPa1RNzSp2Iroe+2yppNHYFpDq7\nwTQBCaT+tFk4oyZxPW2OWmJrNhc/Qx1helB2WJ4YLKqafV0sHreMLoPDVNoq\n/SiZHjqng+EjC71xf0U1XAYgMLmls9bg4NxPYDiO0D60XjP+UkcRSbrzJqaK\nUFX7svcA22jxVRfwrdbCpf1y2MoThSeG9Fq6eXw1Bn64jRc3QM4Mum7RNzYN\n2G9FDHAwfXcRBJcvkDt1IfpH6QjQTPCCI6zSlJL8WZ7kTgDBH+4vnW1HGj6w\n/fLwuxb46NnR6lX88Hk46THwu9cTmVjlMiKUHDaktAqTgIvFGOojF4E9Wmnw\nMv+TfIoLHHeQtbPJDPXVcuOCwlmrCm3n6+o6+0YXzXi+WiFRQeuGGZF0KJRH\nzCnfNxzSDpPifC2ybK/Khtl+WQjT6ZsPXxfQPy3RNcwHQBoYwRTydNeQPIrd\nEFCnsyvZ+1tP6oXDDq/mK28hX6L5Uyuh/SaxWi0ZQm8E/MqVyQi/NBqS7b7l\n+orn\r\n=1LJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/density":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.464a00286.0_1622731555773_0.9998667866948663","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/icon-button","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8db92e60a2c501c36736c61cd9c7140ca2bfb9d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.474de7878.0.tgz","fileCount":37,"integrity":"sha512-FuCdOCGt8IBOkjGAmr3C/Ds4kGDzxJkiGUibq44MxMZqS1n1ylYJTLnOEVj5cZs3sMws+fbcXenLu4SIV6PdPQ==","signatures":[{"sig":"MEQCIF23v/6GknRQ9lwr+XHjDZgH29PGoLJxWMI2UQvHV3AvAiBT/yNA2uEh0qG/BLaViK70dIRaDpApPZzRFKp/ytSwlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHDCRA9TVsSAnZWagAA4oQQAKGpl5+FkBod8n8M3PuE\n1SiByTnAgG0wBqWi4axyaNyQLqxu99jR7S/eoXpGOCTphTzgcy8my3x9fVZO\na8lyPDysjNVU4ZpcGSBMMlRW6WbxF19+rcdcKZdlRlb69VzYjBvL2kN4FVW7\n26G6RilWaFAbPq11cqZFDdhB5KE7FEVHDUR9ufI87lA+JFUaW/skhoOp92Yk\nZAmhmQp++lsvOBHD/toQwfAdNo+OYCHLKK0HTQhtu1Qbvxnj5qDO97NZItup\naM3Pj2TwYvvcbe8D7b2YvG06d/z7RxY5Tt7hF5o1o8HHbe76kfvtqgXHiW71\nB9CzyZIOZz67z9CZbwBODY3je0iASSUXXSWTRN4JwgG5EPl/fDcaXzL6S7D8\nSunlwhWNEVoCxoW5Y+UKCk3ljLMXFYLlwmgQJ234lM3S1lJsTEwdTM5wTq2o\nUP04oxdoFHBHdKzJOgFplSiFS7itdIly+uwQP5AcuIZ25qZQkRUzi7K1nJl7\nTFg2k69ha/bu+AG6inIbGh5Nyu8EwRupPXzZV/kSizPFA2kNIIjoKD08+Gz4\no2OglwGdDzwcRuCQGD5mGx06sun7lrwB9ztXu3Vl+KCLxyiRF+ZopSeZYJvA\nkLYvn469JdJEuv7IKkDgm1cHa1N0WnNH+GHY6IJL6xB0WvoTf4V0CCAIC2Or\nlgxQ\r\n=PwXF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/density":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.474de7878.0_1622733251711_0.5193322016444115","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/icon-button","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddc2e1ba20d3b2644fcd65b78495aba1cb0c526c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.b87ebf74d.0.tgz","fileCount":37,"integrity":"sha512-MmTpCmSZZNemcAjrC5vvxLWvI+3hJ2pcJqH5KUKC0xCrSHjHTYBpNWIhgFBsG0FxO6W77wkZ27s4UCxzIL2YoA==","signatures":[{"sig":"MEYCIQDt2aF2iziKSYahS1MRilLoVdTeXukCbILwhL2fXbjuRgIhAIifrzF5sagFclaZirWTQ6eZGgsKlWQgsNXDNmeIS0O4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVnCRA9TVsSAnZWagAAtIsQAIHccx4PNNuymcqVJOve\nEuex1z2tFwNTC76EWXKiRsEGK2lIE2oOmmHzs2K5z+K7mo4Jz5cnh3MOY6wV\nVwv9+QQdvd5jL2AQAB3JGacVTc5FQKOpSBvDl70pkI/JNPjZJrGXYE6gjaay\nfeNlqVjoav6ZayiVG3HHQ8qvePpi/+hCxC3VXGpWyxuamN+wo25TPviKKEhX\nHBTFlTitvUFjB8JBt/tJYRYLTA67iN8QtlOpvZ9tNGhVYDvXN49P+P+tfGgM\ngzJS7dxa+o5qwevGICI6wLzDZswptYkaHbOCBaQHsxe0rnnED//juQr0bqy9\nsljgSYbsqnxmZLquX0tjRrMdvHquCmqpgYtsFxWgRUavnXqfbbjdABJ/REmd\nFXkc01gGxdvxvCELojFPekFsDFmLSI6HhQOVvJfEdxUsX4Mw4EGJj9CZfFRi\nSXdpSqEoigMV8g4m2Zuw9Sj63A/NrFLaNmTm3deGuaTA+mC2y7cb0xz1YnO7\nYNUo4Y5EXmJH5glTWy2owxA2vFa6wmn0pOJmprW7VDVlDQr2WgFK22H/Pga1\nJhiG8du7LJr4IwKkQIbrFNUrqZZ5pNKDQhQHMghDkQOdXjIOpWuC17ibimRy\n+qSkxtV1TrfA7QWi9VYY200MIrIktQjkyt/3AyaKlopb/3lYBUWgB52NhJGB\njG5X\r\n=St2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/density":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.b87ebf74d.0_1622742375615_0.498130749140816","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/icon-button","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"153fe34f1abb8b03d286bc4aa90cf94e41f45f42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.2daa49b35.0.tgz","fileCount":37,"integrity":"sha512-6+a6wJ4Jy5um8CARbHvlFqSG6CqIxhr8VvwnsFAzCCy1RqsM3tvmwZbJAJF5i+otCHRT2d+0pG+I67tOOKJ6AQ==","signatures":[{"sig":"MEUCIFre9ufXPXbC5wYhQDM34WS65C/Xwa12LP6uEMJz23TIAiEA55X3OaFjDFKqV4DmfGOJLFsknCDp/zXZMG2c+mO/EpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFMCRA9TVsSAnZWagAAL7cP+wUKTDERYWBP+4sOlgP2\nYcGNkkqNCfLTkkgIqUFnBww179mmZDSFKHdJdsFiwV9jzyXt6Xptt8PkN+qI\nBmAEiu1Xvg6QblQK3aMPITCSeQYU2qbu7H/g3p45EUu76AmXKGXzZhEcbRdr\no+6UwTxUMORss9Eyf/kRxcRAhNC8dzYYTcrmB2mW/P4CwjQ/I+JJ1PHnd/2D\nMQvYCnhyUdb+mpPTc9qmmDrpT4KemwsJXiLxPgQys0tOnvkDDZeWEIF7Wyfo\njWPJE8bfKyVnD4/CIPlI4mZFqBH1WrWtrkh0R/EMJ+a+KpYVNe1rfO6epG6k\ntFbAO+xNlZaW0Y7uq1hvQvfR23xphIoXllJf9AqqqFb8zpeF8z+c9MA9CU/M\n+OhJNhwQm+F/bekTJl/Ov/B8lcjSdHAMyUoCq1uu+e4wqI+ORumkPQ0//K89\nIzYKRFjEObt5D/b+p2yFh+bMNkzh+ECuHU7l11xMa7QwM7zxaixIITbnH5wE\n+39UgZ79UEJRMSaFhnMEWFUBINi0K5WTJSjwLIengX+ojMGTSKf7TLgQFOHX\nVyvWH0mvSQTfl4TXbcsDSCwifc/trcg5qYDFZ2BjteWe9z4VPGKosmmkzk7b\nF1NGgDlnWuvg7OWn1wrozMO0+BVr6cQ9FccH9Vn2cOga9mFhytvmZYfLfpvL\nGbYJ\r\n=YADb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/density":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.2daa49b35.0_1622823244712_0.3087151150093148","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/icon-button","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2661b8161ab177b7e1b5238428399d4a587e564e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.08db3d737.0.tgz","fileCount":37,"integrity":"sha512-FJCi8bNjHd/SiwR1Sn0ZN2rMp1E0SbZWrdu8NUSs3tsvyxYDzMLKz14Uu8W/1PCStahHTlLOGxk5+/vnYpUZhw==","signatures":[{"sig":"MEYCIQCqnn9hY3AcHWWvoaN6XbejSbk9TD8pqeYio7G88rm+EAIhAJTEypV1NWs3ktCROFKRMoHb4O2hr88U7I82DBY9CpAg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHyCRA9TVsSAnZWagAAAm0QAJP3sRr/OGKgX07fgzEC\njezcltuIdSbKNpgw3hjoK9zKVg5tj3wuBy7t24Ii595txW+v4t8+u/4vag6m\n1raDKSeiHHIL8sHWa64yZlLWFgnlcoPDc934VJlXZBcLJvfBl1SDk7qAc8xJ\ncfhyoQ91SELBPRhsxeVvNK99m249fO9x7ON1yZfmrIvcMNr7AUuaRGeIyeXy\nNf+x/tq9NVUYcjuFz8TXhLIZbBUkpTXSW4gtgHJJzSspJ9PiG1eVciyUu+cX\ngZQOa6/VPU8OZ75ehWMG5NXwuZ/0liKviXukqUUi3qYpB50aBNyarMt8OntY\n6F73FrfowQxEzyhd9KTjc7625hKEWQ+HJiXld8IDDvGO3I08VtmHWfv9nqtY\nJKUDE6emkp8yD/J1kJvrP7UrDmjDv6laVjKhtrp2wVjUQOZOUZg7cYQH4VJz\n5QguMLc6r4XDbNL51EOiZhR/vQLQTB2f/1jk0H+EmTVfUKQBvgaBRXyq3clZ\nrw6VpEedID6F1EGq+K29MPCWM8cbGxRq9jIyONAY+IX7p0yjwvBCmE7W8gFT\nt8SYucLWZA2NYQ+abwJbkr6oBzkPbWidZbiqqwqFRH9YAv4/btpSiIApl1Qn\naGCnt/mx39GXbeFL64JKBJ2VATi2G1eilivsyL0EVvzv/YT9BqzdoMtoRYca\nP3on\r\n=IaHN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/density":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.08db3d737.0_1622835698742_0.7964985008093171","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/icon-button","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73d4de8029579801c005a2f071f3c7317f20ccac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5823407a7.0.tgz","fileCount":37,"integrity":"sha512-VkMYTU5UVHXMWejqoKf9X1/9xDoTBjN6O7dmTFcoBvAVMZvu0knPqlcZchEb9kclK91WQD0AwE9vkp2KhvH0gw==","signatures":[{"sig":"MEYCIQDRJGSStwTA+lDKWIxwnHZo3YXhYJBz8bPIqEVurdPo8QIhAP4JSotmK0eQP01oF+X0LcZNmgMAZznnQ5TegbjeQj6W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5PCRA9TVsSAnZWagAAJmYP/A41PZ1I5uNDmdiWUuIj\nE4WJ4EsdSelTDJ4HXnfN6flVRSRu5Ih+G/4tHS1LLcz30VfKsy7nboHnGb/M\nHqHPQNYdgCp8V2MXga+OJTN4QrRupM2rOGokUStGyRIwl02CzR4dYzRN5qlB\nTTXCrqC4MJIBT7Q56DqyWK96kCERWwJaE6nhvXoIwebDH+mMYseYDpGjQppW\nPtzIb8oy0t+5LZN8G8wHuNcRqeyl3yqy8YzvvYNc4ZFTPkk+q8o6q5M9+Mmc\nAK4c/WGncDyNqweAS0O8BEOBgxr7H6PeVHG7wkH2LTJFEbjoWZbm1BHVdZw6\nuc1V6q34tcmQ6BUMyM2DCMwMFZUdyemT12eVT+KIgN105I5NbXnYfFOAfYzG\ns2AMYaAJ49P8l1BVKmaoISo0jlESvTaoLe2ghvJpF+QXiLCI7gR2HYlrI1BE\n7YcMcI/FyzKLuzJ3/FujdlXHsPIXuHr1pL2wr0VvhM91qZz8+8/Su76rsHP8\nJg780lA7qLCb0EVXEvW8MTFmXueQG0ykScDQmCQCjT6jmmYnxjFQNJq50/nP\n4R703QjcF8Y1v5VIhivYsjxW99Oml4M9hRInlpF/8oUf7HzkcZ5dLUAJCunZ\ntafoImZa6wOcm2+mMNvhtrup94qvS6NXw/aVFxUQOokoa1kPTY0oGLAoD3Ba\nJL+X\r\n=Fh86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/density":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5823407a7.0_1623113295342_0.05073357671238443","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/icon-button","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f58878cff7fd7096a5ca9b95ac2b4ccd79bd1866","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.23b0c5e22.0.tgz","fileCount":37,"integrity":"sha512-bGfuFrLgf4SdKOnGBYTyOplWwvTQak3R5VcbHaYLEDXeamHLLBHAyIU3epWWBlA2Qd4IbPrVd1NABBkrjYWSkQ==","signatures":[{"sig":"MEQCICfydawKPYc+RubMXEqE+vO8tiU2krVjnYVpizLl5ljfAiBfs6BggbEBgDKhHKFVqg+8AEOQhnLBaEbkehjY8Z7iUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5kwCRA9TVsSAnZWagAAZTsP/2SAZz+1WC8Qiebk2pum\nxOsYePkrZ+UcM8fYlWLPAbYJHVf2HzO38J73TIBOZ8ywooYQc9kgLHPdyM5t\nJfKVHp+urXmB0doBu8Pju2SF0AYqLgROCUFMpxJ1Xd6x2tzef/VwwXEeU5RK\n445y28r/11PvvTV3W+f749P0CbNRoGND53yKH76p3aHUuud7svKuzyzaIsCp\nY5C70Io0X+bRx1rp6GUssFGXl2lN+NzayP6KseLwKLbpmV025Vv+e2mKyBrl\ngiDqK+YTcz/Yfxr99WazWrNY8L6yXCUlWnhOX3FYzlo6Vp/u1rbYaObwrfr8\nufKaSY2Al0Q/un8S39P7ouaZ4xMVEXW0UMN7Tj4QkoXcPJ/M9niy5Cgw8EPb\n3fts4HP3LkvUOyI7urscTxUYu6JVB4uc1CP85yEMPczlvjRHOtIcawN+68dx\n/Us+3LXx1N9tTXM/m8CLF7mgtDInSSWNp9Ik0Z/EVWc0m/JVAVQD6/W9/O6M\n4bevLrJRYnEgvxp9ILYxSaNug0IdLY+XBiDg823NFXnwgfVBFYHSFAntHtkd\n/CPXLtKwRf5S6lGd/f0Ezbgs9uVztS0uhBfMe+D5d5Ugn8U8HGsW5fM2G6fV\nmWv+gjSmyAS4fZh9B01ILC12X3bg1yW2Pknn7ocof58v0tMJJK1+mvqNpib1\ntkhK\r\n=2M6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/density":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.23b0c5e22.0_1623169327761_0.22099822601332986","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/icon-button","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5618731c68503a2208d029da860d4b6a085fb19a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.2952c6a76.0.tgz","fileCount":37,"integrity":"sha512-DCo+XNf0S76oZHuqkDEinKNS4cXqC/IQ1cLasaxWHDlunw3IjJ5WZZWjwylLzxZOdECV8jZ0P/JjbEF/ZibSwQ==","signatures":[{"sig":"MEUCICVXTFDNlGswzd39D5WAtP2iwhMJ9QAgoBYqXj+CxeCqAiEAzhIqzDr8H6tcy8WumjuqpDkY0dVihgWnSPanw0NxCrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6udCRA9TVsSAnZWagAA9JkP/1wlQ8lFmzluLYZ3B0Dg\ngt1kRB3ty+fE/CaW4iW5qG5BMTgYmVWR48TOwwBMcF+1lRCWsNDPVERc0B9L\nKFUY21WHRAvUgOQbdi5PDSiRqzetFCpkoEffnhJQFly5TBG3ymRF1xvISsLI\n5EbqQEN090+vSQpDjkoCXq1k7UZ89Hx+gj5zQ3uPTuFN7EqZiHtB3fHAUckU\nq+sTst71CbK1fmagJPZCkjwSPr+gi+Fp/uyOW8Zu0jTZn6H3u2oljytwxaIQ\nWvTR6aMaOqNuNJfCb9omoKw1whkEgI0lV93CTd/Rw5TFIOEp4dMDomv528jg\nhFJ0jy/BkaRFH1ibBPCRrsGkESLMKGxmRqZOCimmscU0H9yVnNxSLryktG1z\nZu7XRmR6elNSg1eNxwa22qXwgJBEJrHlmXPC3g6V30GlE31BDvbjwvOkc6vK\nmiR4dYz+L8lg6NFcIEpIgqpVj8p4lyUN0ZOeTeAGIEhjKTphIBGX6MBJ7KWM\n9ngTtc9HrWrhFdi0s8o4yFgiaYEDoJMDv7qSCRYNY/ELj4C105S/9fy8D0tA\nh7iKO/DHCjZLvUIZiQFEd9Vy4yZanVf/Wy1LHbD8L9ii3WK2ztEDli9rnSjS\nQ/kxHbsxNkeq+hf2H5VXweOfHvDfBacb1Koj2+ATEX4cH1YJNMeBW6ZAK7Ro\nxlmm\r\n=Uns5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/density":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.2952c6a76.0_1623174045362_0.8587292406065212","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/icon-button","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca269f3a55f50637c32431af8bfd8c895d9c22eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f12425f88.0.tgz","fileCount":37,"integrity":"sha512-Ac45/vHS8kl1delGJi6rFaV6RUKKNicrEd3NBvP03O5W1FeRZ+z9rTKGGP57WfnCdU2L7rvBmwqmlrfIVKUKVg==","signatures":[{"sig":"MEYCIQDoxaiw/n9OQJOitiA8IAc14YLop+Of/fcMpxrXY9bxFQIhAIcGq4Zcp96uo8mJem05rXsUVVj9J9ixckWXjA/jvTXp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWV3CRA9TVsSAnZWagAALo8QAJJ6iPEORj8g7wfipYGg\n9CcGXxc96N/rtqku+F7fvXGq5/andcxZQdT5elBedpqMLKoPhvKuy8+0avD/\nt1fT8xiPTdRe1swe71DCqJ6KKzl3wg9J/mQqjUoDiKNMT9GkTdJqxrSh73w2\nC736nhXounBMYDKKGN5vr2gIokWavufqlQyESTxTbapxHMtyZm32mrxC3+zL\nW7eWzJ7v5C2y0wiRJhh83gN5AeSp1CDjEJ4vSqdA6RhEdLn56jv3IahyOSYv\nu/kfDE0Zpz/fNaCRtN4sOrkrVZ62bc8HosP6gOjqDnA/tn9GMbE1EqtGyF4G\njaKPNm5kFCM6UgdEpcwdFPFhuHZUKW2DdE9N4EqW39NsGD0wnJSL3QY7491E\nLher1EJ9gxpWe9JgOUN2VN+yvsRSvfJ97pWMN4goBOAj4mQe3XEiVNWttMnc\nkGe6v/TeQdT5qMcxTingepMy6d2j28Gp3seJDHQk2etZwKu2hV0fHuXmxsMl\n6F3/2DhB7P1QL5pB5qsIZpuElyXPwjcfm2aPEYbO4G3tggLj+8JEa6Wi+D6M\nKe6SagN6EnvDhOfszkTayGPOuCzvlSjm0n/Go8xl0Hjz3xzWNBNsu54/A5uo\nRM35ixy5qeMDIHGJHkaW0uvPjo7zjjKz48YdEN0uuTPlbvXmAg0BmWeGo2zW\nLwQZ\r\n=TWyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/density":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f12425f88.0_1623287159130_0.023696002547075823","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/icon-button","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6588e36cf2310c36a2fc86c25501b4b3cc12b535","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e543628c3.0.tgz","fileCount":37,"integrity":"sha512-0DQ8KXgavvrGYLnc4dwFGmf/9Qm81Hj4TxUgrAFmfK9LTtZ/IPIrHFsLPQ1tjmZQKpBYn4TKidSXP6GkFH62Yw==","signatures":[{"sig":"MEUCIB0UNdnBRnTlOK6iPsTLEKcs3pRgOCjcDVqf8w6mGeLvAiEAsRzA6csjjsPerMipS/KGzJIRSMgDwQY4iYRSiW6AbQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWW2CRA9TVsSAnZWagAAU2cP/3dILLxM4cmz8haH1Wo1\nt2a11cW4BR5AU75e8u5XG+k+hoX0nF+V3FYv5V+xDKGlw3iPj+e3jnUm91A0\nm9rqhCRpgMsl7VdoRdW/vlAO3MVMr9fx0f7q9uQexVnwg+sJRXG5mQenY+Nd\n8q4xgXjm+1nCaJi326i2ILgPeTXRqzqL83Y0JFwOBFDsW0XUlhwPIax1zaZI\nqfe9jOrlZZGSTnmy9qvjeNwH5f/OS6aN5p64uyZokd5Qrsnm9T7KhhkaC04t\nSQ4bEYjvQf7qXEYdC+KKwDkFyGvwPzSqTRrNVRYRcN6plezEnPiEiyXXOTGc\n2M/d1kq0x/BHq7WmsaNVR4It6pcWAbQJHDchbZD3E9EJCqi22CEE92YrOpJ8\nfjwJS9I5ETV8UPxTdgc82e4j/EntshDzBMLo1g6ukDGhEFDNyrdAbZpELQIn\n9iiKNk3pZZpWIgsdjdyd/GcVpCNTmBX+GWZRUNfzBPCIK7PfXDgJMBQnB8GY\nBuL62UFzeyjycNgU5LU+p//UDXrZ3Szri6pUirYF9+5L85b+Ifx5rx5Kt/ue\nNLYfQ3tO9nr7l/YkVY7zsk7UvxJ7yvidFcZJFPjabi/idYYXWpXj3OJDzjCJ\nKnHgW2VJBtB6gyJLP3GRpMsFsWzyRkJTh4k4tHwrNmZwbddzjngDkoEGkQft\n9pU7\r\n=RhfR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/density":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e543628c3.0_1623287222288_0.16249719035105814","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/icon-button","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d4762a42eba5c9136051cb48de67df196ffe395","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e0c346286.0.tgz","fileCount":37,"integrity":"sha512-ziGXrGMgDl8GaS6IZ0Ycm/TNXDBRXZwT3qiZxqhLRtQ/9puxbro0KB4HNMOwAag2JT2FGG6uP+UPvBLucCBtPw==","signatures":[{"sig":"MEYCIQDFVI0dxA4MV/OvUawrgYBL2Sw5bs9t/BvK3o+HQ81J0wIhAJ5KBBUewCEDipVOJaw5f2Kumw//whQOxp+Lse8giaG8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9jCRA9TVsSAnZWagAAkSMP/ik9LExEwbW53qxvjQAQ\nMAjoIkDkpQ20bUCllcMEkeesaiekC/E1BrB8q09TYn/de0uXQ+IamDI1aB4J\n/zeMgJZX/Nr0bRe1RHcQY4M6eH3Hh0SZntkkQcDjFJWCrwL4cjTpNraZZWZ3\n5VFPbN6b+afoVxkBJZbPnAazbKN3xdUCpqUWFxkvx88rB2nwWjYtRpKe0r+V\nhHWDcgXq6icaWMBNuid1HcQJkwiAAUXbig2fo8iVEZFL1E63uJHltCfw/AbB\nhR7XnTEyPZsZXZi46XNSeyAmyJqULnHNipOSBjwPxA9r4N16/6gDgrSIihz+\naH5R9oAch4OH0IGW2z13Uwm/uNr4yhpwKkTOZ3JPo7NvqcIoi+OlHyIlbHBs\nGd+pfs5BAVbcqqDq+/sYMsyY333A1n2BxrkGetk01scqkSdCFn2vlidBtcB9\nLvMf4Ok2shJtsvT7DdcFWtPqi+JBxdNIsgpq9YeRQtb5F9DkMq8OP8mhO595\nvSOHR20/qv+cTVvnYh/r8rFSEzdcQw9sm7/2X67nOPliF3k0pn2IvvmUy8rq\nrQgPFEFugTWCCLLUI9dHIUQMZqZ5ZvfZTaleqRIfXCrnDblOuPMaSN7+Aqni\nqWJWQ51CuasI/eOgDwm0r6n6he38etcEBoZElQxJIcaTJW/QyC4ShBLI5UzO\nD6Va\r\n=1fsJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/density":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e0c346286.0_1623342947303_0.00670839421105196","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/icon-button","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fe8208c2f834177b5e657275c09710439a4e126","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f43af5633.0.tgz","fileCount":37,"integrity":"sha512-IImTkjNJMU6A0B6pUgw+ohWA6BjyhwByf74KLQcc55/Ui+oLY/I7Cu4e2p44jLR1Jw3eWsnNIabRRzS1zxTx+A==","signatures":[{"sig":"MEUCIEOhorED996bBDgEeSC/lS+RRhrVoHItwp1zcUDkc/7KAiEAlNd1QZlO9B+y1vpD69OFXnqCkt+cY7zB+yAgK4vKxnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnegCRA9TVsSAnZWagAA6mgP+gPsbliW5bTchRh6WNJP\n1C248d4yd7zpea/orXJNvDkIdqQazxdsfjtZpU51gvoGbLHB/k/G6eJrNm57\noL9qfr59fvR+pgi2qJ6N6JuGJnRKVCUVWld4iLSaoNf+kkiw8TDRr5IyG5ir\nPC7tc2I5nr0DEMFZAKvgf8Ejfu8n7nqdFXC/UN4kGvThSWlfyvsOXgymnlF7\n5E2t2ohCbJ9L4cssZAdWRzPz69ufdEgU5MUSoncu74+iFBYVVQpnRNUDkqOq\n3gQXgwsywNr2ynxUwwVlJG5ARffogn4GobJLyur0dPURAMb9RyHeW61tuiTk\ng49Fki/uAX+Ynwb9xkaaWz1nQrr+b21A8BRAm8rigs2RL/tj4tV5mm6v7TAo\n/LxLGMkwo0DnxtmCDrpE7e5T9X29gvHDvJIOYJvY2sisrstBSjIcy/Nu5Y6l\ntLFAb9m9kNVzaK7jC1rT5Sb8GsPtBSRDy5SRiw+LEyHfwg+omgJ18/eBSXak\ngOY584+QcIrqnhGGXO4dBXinCk4XGA+jo89JBkXQwadfK9MfdpPKCR8JhhTY\nYzNnZxm9FGpeEl2T3ipcP+Pirs9YsgjB8tWvkimHFOGMNVRxI8WFqe9nq9Vj\n/yYk75KUxTkpQMeRfDwl7qxFxa2V04kR8ktMNAU+RgWgwCmNX/wM9nxx26Ap\nljGU\r\n=f7CV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/density":"12.0.0-canary.f43af5633.0","@material/touch-target":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f43af5633.0_1623357344617_0.817558509730878","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/icon-button","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b41f5ba6d2932c0a0692b25a2c410b75c0b98625","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8415ae585.0.tgz","fileCount":37,"integrity":"sha512-A/gqjDg2tOLZFpXIhJDW4+DOaRcVNJ2ZNDzUAfxRSY6LUDai+gdZoUe5tLauKGuGiGXoNdD5xD2lqx17xs1pKQ==","signatures":[{"sig":"MEYCIQDBg9ukHsuQOwtqbVajj8jIyDp09971Y1Cjz47AtnX/NQIhAK6bFmFsmvvNVtPkK0jQBMvO8xE2kAPBy8kNffCDiLZC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nZCRA9TVsSAnZWagAACokP/3mvxltzCuGkUOBcw08m\nkrPwvxRz6rwbrxOlig+QpBXaTYq2vkGyHIQlgNRP2LumG4gLPZnpnw0FXk1T\nZJtty4grPoZkKHy/f9EtZ6KwZtsoNBvTNwMLElAEzgEqMbnUZt21AAAMkZLB\n/pcvTAmEhPRG4ONAaHlqIJXQCUJkX4GmJVKPtf5PwezCmXlkqNoVPJCLqhhn\ncwBC4bYtaO3dnhkTvJ4elGkkeDHmHq/P+ujFFM7gamAnSX58VQ2MfNGc1AHK\nENdrL3zly/npNnmdQ/U9ZAV0E4ZnNc0KM+pgwlVclV+R5/Zr0tpd+DxP9fA6\neQvYpnbcnVNgwpG3mpE1M5wC53eLWvQhrQVZosLwwzv/gkTaBcavW+qsssOx\ndjaFxIMx2iUzIJq+5ypw1Z6NJkM4VOrEcFfMUl2gG+/8R5DXk6eG34SRFZfZ\nJRXqcQrK9dERfNrkmafC/yuf5DQDHh8XW+v5U3gL6Kpf8JwYE/b9Pq/JhX5E\n3oytHA5NORBpLBLA9XxgW1ceAj/cDffxVV3X8WPap7XEYv/k5rnq27l5EDeP\ny0eM3K4PNIEOx9wQYGLAUM29PGQ98re0r8TO3d0EUM4PFNcVu128MyKKOyfg\nPV98P+jp/u0BzQf4k3xMsUkXuXzblGwizlyg3SGsYqgb7RX9nqV2Udb0RlTf\n924K\r\n=R6If\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/density":"12.0.0-canary.8415ae585.0","@material/touch-target":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8415ae585.0_1623427545373_0.2593688664873124","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/icon-button","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6dfdd31a18a6c013867139b9678d9b3fd97e612","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.598fcccc8.0.tgz","fileCount":37,"integrity":"sha512-TfGd/GpNMIhH8qJfNYSM9moyN7U9KWsYXpxeSkDhC9WIQ1A3WZ2iE7pulsEHlswu6Y8Xs5k7hnRs+Y6RHgACtA==","signatures":[{"sig":"MEYCIQDXJ4ita/PhA9VDr/1B2msZk+jfd+01nEHBDja+IvRakwIhAJV15gna8vpJL46Q/F5FEP5dR/udTCxwIfFkZydHeg4j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mtCRA9TVsSAnZWagAA05IP/17NOhdGau+DHCrRrBeM\nnY9EGFXe6UxZn8jgn56WvYu6kq+gmnyZB+JWoQPCFn5ZqheZGhiWTcy07JSy\nGf6PZ0d3PMc3ytCFqMgsHAPLMDB4rPRAUpsWiIE7EGz3YqriCWj8buwZlnhZ\n4GAHYU9JKlHt7/k/gIVOwOqAMhnX+oL1QFI/iWiqUf7oeU9nqxxmYWK9l1Qj\nzcPvCnK2W5Unxx6BhdOllvg3rYzQPC5J9opRNSGZSdn/mkd27C8ibaBU9D4/\nmhWZOhljCupKrgjjpwpcagSlqgqWDJ7kludk4w+gNEDNlDyvinrFuZhfbdls\n3S4nwUyBj+hYdcrYrQVZYGnJYNTfcuQJRAzQJnt85qKeoeI772kaajdrNwhS\nwWzxe1IRIiwWHfIcCHMs/PpWEH53lfri9NfVORndx0dn0k9LISmRVAK3HVQj\nhNKXQHRL9eeSRk1aB9a19IH8WA3gIB2pCaZDn9ESM1rBPiJVkyVKb+PCEt6F\n6PoS8hYFCvKCuMIq2b3PMVKqV5tFDWLSoBe6Cg9yOw01wUN4PN1Bk15LT/CO\naFh8jKyJpM2fe3tbdDFuziwbJn/kEMSdMfL8XP119m7WHvzUyoJz2Ji4zuWf\nPADflpfdlY3zFUhgswKkQCLUMq91xfa3Re4JjVthXxzzmBX8YFJAQY7LWF2a\n7doP\r\n=uSuL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/density":"12.0.0-canary.598fcccc8.0","@material/touch-target":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.598fcccc8.0_1623447981494_0.3959487559827086","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/icon-button","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"942dcb94fc5816f96e71e279cd7a53b616aa002c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5d0605188.0.tgz","fileCount":37,"integrity":"sha512-g2ELTzXGd8Tjg4LhnlBXIqs+uO1a9gtjsLX2q6cVRRzLiDbLyJHMRhUM7RksE/Ou/DhAqARnSKJwq7gFnDoowg==","signatures":[{"sig":"MEUCIAt//9EHVuWoewpZV1r125W0Zz2PbHrSH/lKlxh1Hl9sAiEAnC/47a7D9X67DAqv3OUUsdooPoIaFUxW3yGD6hIFWCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5Q4CRA9TVsSAnZWagAAD2MQAJK8sPCgDOGTvdE50hxF\nAzdegsDg9FRqT8SOO+rDzqZrslwF4ZKD1DJwtk+NYEPm0m+4u1ujPLdLyWIA\nmmlElVJqiGz0sVhBPgpNTHpQ/DoCrSdDDjRtCedsbJHqadjJaif+00qdOMJg\niVDFhwSKHgQ8tTcu8khBsUHN4oo1eTnQDFgAfcp2LmGZ04eOkOkhj0XEIFN3\nW2OsBHheAHs1CTeTuCu0jr75W4eZoUffF8c5bZbKXsEDIPwT7h/w3YlzULAe\n6pc6RS66RXVmfxQqj5N/3Yr7warPNBolONMcnXg0EDWq6Wg6d/kEKtDSFzz0\nBuH0uYmBPAto2MZq9AQ97Nfdy0oEbTEAaXgcGKoITmY23PgdtfO9/ZmeJ0Jp\nrzlz0ruNJc4PbxW9XhPd9vJ/HSzlQwqzgDJ927F3DdulVrLwNvMwZdP9h9Bu\nnAEA38OqkTSk+Ku4h2xNHCYbgG2c8gewlN9jioFUIL/Jt45psgzFrmMmVT6R\n2ceNJYL9NVYT1E2ImdqG3ueaf311/b6ujHig+EeBzQphfgWp2O4Jq8yYlO51\nVpxKeBs2G2JNPiypwp311ciye5Cd/VS50L3Plk4drWcbNRObWsi7W3o3uYJa\njqCYRm+0lpHfNriSnMWhDz3NdqmJQNqUgRSVWFdrVX/pN4LErW9apP7trRr0\ntmOv\r\n=Mqz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/density":"12.0.0-canary.5d0605188.0","@material/touch-target":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5d0605188.0_1623692344343_0.3908089579954155","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/icon-button","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"266e51b3461ceffdc5a4239c93862d1b5d40a79f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f147a2271.0.tgz","fileCount":37,"integrity":"sha512-E9A1M4QdNPoZA2jaSIOSDDXX5ffPFTspJDLmTB5PXiC264TLSnTjJMDcCfmlMkapr1XumT2c+grllxwRClDkmw==","signatures":[{"sig":"MEYCIQCMBVatGYYwpT91J8yw4IoiwgW7B4o6DDwRQC7nqfnlXAIhAJW7yETv8OXHoSXuuS8JmOIDyWQOr8bcexD8sR+OZonH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6tpCRA9TVsSAnZWagAAFt4P/2Xb8w23gaan93jzDYaB\n/SA8GWVvsw/ubGqtqsEFcc5y1heg0785rmiC+R6jbGD184TpcaTmlGBr76qK\nETUEC9Oj6qoQGaVRGxMjawFTuLWU6WtqW/lhpkf3Fd0i0zJGyapRUCJ8jRyt\n8ANyND1hEsWcQNwS0ByB9ZubCLg00C4sqCFv4UfsDzHr4Z2URWF69FJnZEHf\nveGNYnUdaBOdtlutRvSBG5IHibVHuky67TLO96dXrzAtGV7YZCJlXMxPYsPq\nAgVmc2gzxdQd3FiuYApBFbscSFJq4EDzCUGEAV+CX8duTcVmB9JZlsB1nnPi\nw0PNh30HppHC+Sw9GunWMheAR/Dt+EYvIY0GO4GcgbfXAzaRLz+1nKVUaW1N\n3JQMtYZDCoekoQ2wtGxxZT4JFxHv5Wy4v6Q7uoxquGbjP3kgiDZz7Opl6AJd\n+m9Hh2b9/K3WJxBpy7nu9lCUj9VhHF+Ipes2LaLdbnAtmLdiH/OhF22SrGZK\nouGy8YGMxO54VIFjHObpRIK5uDCaNc3sA+iVmrM5AyzFy5BH8OJtYBVb1T8K\nAH+hP6gbDrHNv8h5HiDZcKKF16xiXfHU++fgVlHnk6wl4M5pcitG34Ea80qk\nTPZov4q4yMfhFfE895snKBIbAJpO6Rt1axuQ0E9jaK9Pe3QbMT5KTvDUk45x\nSLh1\r\n=ydyp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/density":"12.0.0-canary.f147a2271.0","@material/touch-target":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f147a2271.0_1623698281639_0.42231230706929046","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/icon-button","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfbfe4f11d6548baf8527e02f6d23a590f8f3215","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.33579e00b.0.tgz","fileCount":37,"integrity":"sha512-KA1PKD3+DmRIVYkXIEdJV6S0TEVsDaoVPMMFeF+b56gktsgxGzBd/z33iFhKJ041uNeH4H6Oqucq83x8lhalWA==","signatures":[{"sig":"MEYCIQCqeEFG0bIF8uD26+TmxykSDrrTkHg+vINLBOfVa8NJiQIhAKppFAh6eIeEXita7isUk2+w+HHW1so3TKwlP+87N8bf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KhCRA9TVsSAnZWagAAzQMP/A5tFJ3Ay67dyXjWwkeV\nYFsrHI7PeYx7SPKcUGnadk5eaYcI5RVlbKzLJiYy54P2nF53R5ScJf9LynAW\nw5k+taAfnSEylL6HiCWo3Q8fUTgSSWQdY1PUCY5DOLkyz0gxaGhuplLkLNfN\neD8NswkBE+4LZaNq3GHAfL6FUgNoM+FqWQl3uhc3lsYyoW//IHPMHeF42WqT\nWyR4UBN/ZQERRryc/dFSvz8kMaXghhS+ZQAtAUxJiTCk/BJus269QS7qEtOX\nelUgSQYpAWT5XzCQw6Vgq1g9oL+wr7OllO0OjamUZGVaAfOE4jmyeU/mogau\nztAFwbDc4v7BCGZJLbx8zaaWCb+qILVDpc7cmBJbYKGhoTwp9CR9HwZNPPXx\nrBm3ZDYeSugaPY3Gfu0c47pSCEjPBcAh8GOcy43jL+9tgRBrX9R8PZwpYvgN\nkgWWivMy7YUEgWUiN5pa3srLhxnY7sBa2kHMizH/MPLSJYpXcBo4fCxEdiVH\nWYqyDROOD++EpXvA/5hLvGOPqj+WJbig9LGRs4zZO64P3E6IxWIkjH2obSXd\nKOBdYZXfQm4MrEow5+6b9ve2kxdBcp3d0LGJCq5TfxXpviiveN2PL8PUUnV0\nqo0j8L8IB6gPwz/fZtg+1ge+oEIfbku/L2u9WkV/OgTA8Oci7kVa0aHrjVyl\nK+ZK\r\n=3n9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/density":"12.0.0-canary.33579e00b.0","@material/touch-target":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.33579e00b.0_1623716512922_0.8319494722018779","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/icon-button","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b665403971d674bc4d85f87747c1ab175585d71","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a6909c0e6.0.tgz","fileCount":37,"integrity":"sha512-/cIr2znxQm81SLbbu1EttmsXMeISGYCJ7f5g6T7/RN3TCPiH5UG1puoSRESrhAtSCLa/k3Fid78Ecf0ZwYYH2A==","signatures":[{"sig":"MEUCIHi5pWSkG0vbfY8+YDPWzVQH+RNKS+DxwzvReB+DJY6PAiEA5hqsgozfBaxPQWbzK15KlCc6h/4LqNkKFqG5GbUUPyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGsCRA9TVsSAnZWagAATHYP/1OwPJHW8LuJwduNopWd\nEaMokOZrXhpi6aFV8NzCk2ukhDrkqqHMo2aQh0BqR+3Tlc47BOIfN2IsrY04\nTqic12deWup6ESypUT2NVE7CkpX3A7m4G38QmQ9hyA8yNVnHA//IB0AIfZKL\nfBuaUPi7h+y1HkxeZD5+GXQ+zx+cxF9qb2s0ylWS0E+ZJKdyqvp2b1WjPtPh\nui1EhHi3BwBCW1aQ7Rcbnib4+D4v1bO64paBoD7OkRAytYLD5z+PYYzPomi0\nqZgVICP2LC1C9urAvvHKKbJ4Kafy7dWsC0ganVSrGJqFY3kjHqZSqsYDQCMU\noah9yo3dQXSjtroMCMbUkWory3VF+FViEEWVGVSCgTSjEScJ/qUEwv3t0oIw\noRjpWWLMCe8HnC+o1Gksi1sYyeZD1irSo62+TeCxW/XLmzpDGDa1C8M35s3s\nHkpEEh19NMhDby6V1g2k5HNkrgf06ubt/TTaqKai4AJw6Wt6z4y0gRb62afc\nR5iJaD22/OpQYTzGOTQbwwoajEPKoizpknExAHOZpty0RrS8q5/EH7DLiCEw\nI2tEFmZoZ5RmpdMf/okOAV6yZdIKGPkbVKK8NHmxb4RveuPcM8XaKkRYHE/l\n+c/9ckc2FLPaNhixNxMS5ZfF3OHNNeSLU+znzbjPx7tSG6VLl28cD3vsFytY\n3l1a\r\n=Ub5f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/density":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a6909c0e6.0_1623781804151_0.4859296969925817","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/icon-button","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d822655b8df1cca527e9ae51308ed4255ac49e22","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c18b5925b.0.tgz","fileCount":37,"integrity":"sha512-5GwomuPbCC90UG6WkQcr3yXczPrV037qVUmzbUyCmQ9vA8SW4dsqR/XuclmyfquVQxry9np8hPoZc00S2o23mA==","signatures":[{"sig":"MEUCICkfmTxTmIJw0KorDESPFSsZdcMbCfwDbEZwj27zZb3cAiEAraMgX/PB0DTnxghkfXH6XKXiuWQ0BMWjNwWm9HI+HKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWiCRA9TVsSAnZWagAAMFYQAIP0mIRCawV4RDYfxDFL\nYaB5uWRmWY/cZ/rpw7nHeWKp8j+Pt32bBY7VdNqdoOtfZH53ZthL1Or7W5M7\n2d7rRy5mOcVcWEVm/2nuAkyTm9HORK0SGxQD6JaPlsQS1kaGB5di0rQYivx3\nwVVwv3FKOwJ+15/o7lTubxgobHMEjjn+9nPB4JD/gY0oIy8JMHjoKBY/N21p\nVbwbf385eNi1jmuZw4p3Y9ymYNTQODa3VnMG/klYNzkWeybyhhevXUHBKGoe\nYwE8YQmgaj1tL+4aHq79weRWuaUVoq3SgjTLUg6sn814GyiuHXcHo7Y4udXW\njmZhSZXtUGopYbg9DrOKsJ6TDqd1O6P5biIy8AoIm3vLAYitJpXa399huap9\n8Mrrqiv00N0bzHThw+by+5ubrJf2B/RudRKKq5nFsd1QkExNu8Yav7yVA50J\nYw2rMco3DDr1vOCGKJKqop/f7fVhtaR7DU6/p+eJNPHEKSLYmDVZGj/mGCDt\nmyGFJo011VUqUANUECIrdwXzr5UoMGB1Vu86rUg1x8j12xfARfMQmN39K4jg\nKsksSGlIJtaHorCr1HHPSnNNyZNFw95s62GVUVjkr+/FiUbVc+8U8D4WxFcv\nDWVpwA4N2J2S5vd0jFcWwFUtnOCBfXJYJwVoTN73IBUiH/stQUB6ZdbvNijD\n74f2\r\n=icSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/density":"12.0.0-canary.c18b5925b.0","@material/touch-target":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c18b5925b.0_1623791010881_0.6874709844963405","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/icon-button","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f41ec5033b04c809d6d76c435116e7f3d8dd4a77","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.7ea2e830d.0.tgz","fileCount":37,"integrity":"sha512-MOsKCrE5gbdAYW6dRCI3rQOj4B19Q7Ev810mE6QdU/IQufKOE86rL1nAKEfzDBtMchUeApOuquzyCQUcPpx/fg==","signatures":[{"sig":"MEYCIQC4fpV++motDDOI76zwG9Q2ewlFcopa4ir2I/wJYvBewQIhANafLf2mhf24M56eI+kq+VuA0+vC6S+ucBMVgQAAI+AV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7GCRA9TVsSAnZWagAAmGEP/ivarPMaNJNWZ+Nqm2dj\nSepqljKIelLyL/yi5ujhCL4MS9m+ar8Er6xKjubpk8IusN58sIdCh991dhtn\nC5MKoVuZIWl6ecMJqTFgEw5BTb3ypiL4cLAKuqF0Q1WHLsWXxwGAUMzO0Wmt\nCfp+cVnl3vMW5sAjNu38KWQ9gRijgUYk8tO0MTbfceOLb3ut97f7D6vzIPOH\nnU640R/OesE2Kk5rw2upRSBenzmerneblJZKELbJWWERMmm4qVJgVd+FEE30\nUED6vvneu20HHypRYF+xmnAVcspi1V9nFu6jYEl2MOc+utMZQZzEwVcTrem6\nBd/UimrBMO1ZTTNQnTvJv4SS3qG0BbDp6AeafZG59sgaP/Cvy3C7GMU7H/1u\nzBneDeOTPXnTiuk5b/okRoP5sfdVVDMLELqI8CTVj4urRQTVsHU32S/ZQ/O0\nYpxkuZ7kvrQeLLhAzuTNLIKKxaMYNUi5E8FracWcMDcFDhwNModHMA+9l3MN\nsY3NA5G3R8KaCdEjTYHkqSrCT14Zvx0kBw2N626vDEsv0wyDJW9rTmQO92cb\nvTAKgs+0p3DZ5AZprrw6ckTNIOr2IyWtGa469CYW6KjvgEEGh0FTuD05jbdH\nJV4ywIhBTarJSxL2I/wlQgW4lB/sRB+O12k5ITBTWQCtGf9i4/X2H4Vmyc//\nR3Wk\r\n=51Bj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/density":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.7ea2e830d.0_1623797446010_0.8058556060796367","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/icon-button","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbad108a9d65eb20a6f0320750fe1b3d057d5652","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.271fff902.0.tgz","fileCount":37,"integrity":"sha512-A66FVdmLcP3ue9yGVi/mkpvHlblb+OBsOMqTYjrHFFj+/QQpu1ol/Vj4MC1ckmGPYg7qmY/0MZ/STL3qJpTTVw==","signatures":[{"sig":"MEUCIQCyTbOmtltGrgkQIsdkQmWfIS7rEW9hjUxNO4rFjnvsIAIgZu5UEVG2FGWtOq8lepamCDzg7C0ceB95QnQFB8oqIwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7VCRA9TVsSAnZWagAAIZsQAJq+c+sQUlwuSDZMua0V\nAXQc5mtj3K8WPyloCZfNXnZCdBC3M4o/526gD7lTWPA61LkvTZGYXQ4BSnxL\n08WHXuOWRsUsWVkfqHypfo7VWkaZOwGcZWXKi+VT7r13eL3+rJlLXm/IrU2d\nBU6436H2CJAPWkiyaipX2cJa48Opa8N/GGYop2HnoLUzidMZYr5rP2xZeWOW\nt1dfjE5Hv4ulqxjN1W3UZLm1u06Q8K/cWV0n1xjlHmQel3tRRps4R79h4M4X\naM+/U7AzuurYlNra+3xZA6XhBQw3lNJGuXR0JhnaZdmz1bH7G7NuBSeQ77oe\nbhIOT+I1k97dUFqV5QkArNs5q8/Wp2jgH0W0aAQHzYb3kRzP3ACPlJlDCq4/\nIw8Wk03DQ8yqRsozZLx/d+3YLtuIHScB0JWGAW6BRXg3e3L9k/fR0UGBbLe2\nU0IU3HL4Le+w86VWB0UppNvlSS7k+4u7fU/rIpJZdjaYeSXwl/Za/MABc3K8\n0vzSXwh6ed3XceaH1vhblY0WNoktbKGz7S3sgHjw+qrzEOoBXjqDP9e2p/Uu\nystiiI8fxlCB+bh2J55zMD2kjwy4GHlyFEbTDdtWHvjZJYwC0iiCzqjKxT1o\nEUCsKYkDqa2roC0m99PwyLKS2LNOHG1wmnRQPYb/CFUUqLodwKUJvz+T6+Zw\n8gdz\r\n=eH2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/density":"12.0.0-canary.271fff902.0","@material/touch-target":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.271fff902.0_1623797461277_0.1863517505832617","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/icon-button","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7fb11f78023f6e139555f4e0c0b49c8b61dbd5a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":37,"integrity":"sha512-fQRNbDRnupbhN8xCUkIUKX7ZjSEwWRIznmTCmRlgBFIqVxNjY7QoAJjMrn2dftYmucn/KYx+lOrp5Hlo2lNooQ==","signatures":[{"sig":"MEUCIGInm31o1HoLyn2ps+I93YL78iXHxI8+Si4Lb+kaaSVhAiEA3WrbzLOFABSqZJngPjPxqeNGZlKcGZ61Ggy61iIWAXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfCCRA9TVsSAnZWagAAvdQP/jI3A4jYBCxidhU+YdAG\nSc6ys7p+2yoPei5+H6p8GT83oZezUEI6/WOUgTej3vZlC1Q/Km9xZ7c092O9\nlnVpR9rScHEufGZ8VvXl3aH7Lhjp3mi//vX723sd5jO/DHOopUANZ+GlcO17\nAGpf3qOnorJI/rkOAuNFkyvlxgFuHAzuqVHc8Bd6hLuijpCPQXYHLmZKYS/W\niFNiDLsrz/HFYObynwqGfQShy/obB+8afWdwa7ogm2HENVG8RCu+TpgEo3vI\nICDSw18EX3LA8PMAE+Z65J5ezM7uWYxThMZZOXDLOfNUArEB/lOsKkiIqYfs\nFYibfSuGlkngpmZ6j7ksSJRyn2X/5C5nKYv+TPT67fLwZYDugpLeR7B4Yn7E\nCGqx2MgUWMHyLcb4OTtsbuJigVmXBrk32Ho6OduxmbYXYhAQ2uWvRzpLVqvO\nAd9uuMMPaYlTm7E4Gn2IYWzbcmRP9kyx4qtg0TL2xtfNpIoIob4R5/mGDDQn\nWYwN4kN6bJ4Dlv7jFmkp/bHDs8sK/WGaQXMgaBd1nnZ8Tcxfvw6o/g+UGQDB\n8PuQNRBcweeoyBM5TVnaZuQ7kvkKsGstw4oOkSumXiCXNjPn1/LjWSYlYuH9\nOSXqQ2MYmpidObAUf4J7WfXlTAcdAWeH7xbWxIcYYpkO003cVXZSxuQDuWHj\n5hiJ\r\n=Zqo8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/density":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d96f0a1e0.0_1623877570026_0.5905126801506451","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/icon-button","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfba7cf1a74a2b61d4eb536d9a1cb7a4bb906d08","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.a6183801a.0.tgz","fileCount":37,"integrity":"sha512-XAQDH6vPbdAsIBLEM79yLOQtbbs8E2i1fqVhTe4+pMywOt77vMv1PqXp/RF1GUDQboRm3YQjYW3X5U7iVwFtJA==","signatures":[{"sig":"MEYCIQCFt855pRnc3kS84rEn0OdsiyYW07knyJeqoKAu7wt//gIhAM0s2pw9BuC/CXxsqQ/kxKgqzrmWNPF/v0pnZF/Tbl6U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWgCRA9TVsSAnZWagAAP+wP/R0UdBTbP9WOPrW3ZmDm\nQ6KdsNeR4lI+4gqJaqDcFM4t/KoeYCyfeoXpTpg5eSWRuCR+SFEm2ckCkThp\nT+xbjE5YziJidD88KzzDLSlAlYEB2jCjVcP+41oDmN2ZVMsdbpLpDBxJXMn6\nUjT0P6bI/J4ZBVJE1l3CexhkyBr0LGepvmIHjKfbROUFKNtobX9q0h0rhZIp\nfPrRwOw4UzXrK3u2FstxjAcUNLAmQjQh/NLnKvntJCahQkY5FS7xjpFUs6WF\nvnwGy7PVpJhGrye3fn5MEUu+8xRklDIhFjSSrtZ9TAekgW4gP5PDbM/C3DQY\nJD1ivOICMqPbUYOSVadBVjBEEyDUIQ8vE82p7IE686LANBQfrwX0PQFTfaZ8\nZJ8b/S12Y6wpasOF74dcVYudvvABnYevsv8tNuGHFEbY/OBDta5vZ60D5wp9\nRV2CutjW/15MaZLJH9psaQSbTusnTpvjqNJm/Wtn0zBkU3Uouz6jAdsHTVMe\nNQKelRy/X2zW3QPLO+v4urKrhJQ9H95bzGC6X32LeyVlKKe6wDr4LHj1shVG\n7jIx7A15QaNPP1YW8fTElD5bAvWKPUfB38rshVPlXmBeRmmQf2nvVwQPtRkr\n4HItux+VURIrw1lWDp2xwQdkzTes0NnKHRSc6uUzoju0HES8a72XiAPq7Fk0\n2Kf5\r\n=UwMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/density":"12.0.0-canary.a6183801a.0","@material/touch-target":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.a6183801a.0_1623881120414_0.7001217682352356","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/icon-button","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2853b3891fd1c43fb620f082e7027da3ea7b76","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.940550232.0.tgz","fileCount":37,"integrity":"sha512-dzL5GXzEckVXI+J8lJZu9IqGbdxQN4NcAKWZ52f/LOodPOVLxXmoa3ATDEo0YhOBQM6WXnt/RpzG5JiHWpCXkA==","signatures":[{"sig":"MEUCIHSP48H/I58HKhrupitPJCRcfCukbkkYzrUfrGu/EJvEAiEAnsdbNVrPjnbAc0YGYeDmUoVa2oNxbEWKTN8mCXOCQPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UYCRA9TVsSAnZWagAASWQP+gOT0geEHMLjGvvmE1m9\nfGz5pAoJ6qjTMMg2p3nxh6IQIQ97gxiIo5uEWLgRzNADvrbpHOohQbSAE5Ob\ntDTR4248ZrOdrFJHIPVzW46lJZDafcVZ8sMi/7WMMzz4197D58ZPKXeh1Os3\ngMo28EVv5K1UaNyyrOIE2fdPYAC+kPw1FxHZWfu08IGUx6bbsCl3BD9k0djI\nZo2k62mlfKa8Okb5ueRqx7nVQJLuR44P+K+7kEfZBdPAdo0Emo2v/tQptXmR\nlxAzx8xzuOWtfhnwuUETrXs9cACQQbrdNXrm+3EbeLpuzDFy+YhDRnmhJUSZ\nRIYrVLwc3V2ZvfyqTRIsKbs/hzRgz7pgwH19vt2SGipRxLTCtu7oEpvjo1QF\nzzFOIC864Yt/39zFYBe8usb+ZorXikjiVqhCuR+sIOJwMCjIgxstrKRwzP1+\niQYnv1yW7YbEpeXdMFfIlabuYk5DZryS7zGm1XTOw3VpZE3gDlqRvzmXwrGL\n2b6Kwj5aG1R3SIzGLHbJFTS7aNtmCZk7+lCIbpZD6WLysyKbP1Z5O+JNyrIU\nkenARxGzwTeL40wN5KdD5kfn8BoC87KqBRxNQycUd7vPIKBWHOWKgXhQATlF\nY37Ce71t7EpESs0RyxDDblE9OJbCZRHYjkNZbOh7yTvtoor+Nc91Lm/k1YPt\nWHQi\r\n=8k3/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/density":"12.0.0-canary.940550232.0","@material/touch-target":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.940550232.0_1623958807370_0.8584220696341938","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/icon-button","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55127c036f07ed20d577c9b9b2263b3c1cc1b3a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.f705e8048.0.tgz","fileCount":37,"integrity":"sha512-MG33kslY6y1kapiXE9ixoJliNApNYQzvz54pW4HbdQWju9p6fHRjDPTn/SMeMdAX+NMJE+DaPJXBqW69JjTQYw==","signatures":[{"sig":"MEQCIAd+3DKYo/5itpr6qOUHVP3YVUyVQjeI+n5GOIisyA4gAiA549eJNK6JCXtnt4Yyx4F3gbs7F/Pdr5cC8KZItY871A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqoCRA9TVsSAnZWagAA46wQAKCi5/H7h7qCtRC2dush\n27JYh1CfQdBzsivyx/+/FbPQqs93lDYzjrRq17e4q/qOmsTE2k2Ds9B8ZYsv\nBqiU9DYEBG67JlD8trfzPz8f9EwIdj6DNfrTi9VlceiCmvx5HgZX8ibJcQee\nvIGSBP2AHMaoo+X0J/plZJVnDpk/6EvtjXolZyZedJDHRQMeP4LN9CsC7m92\nOJwFko081AyunuXZl2Y0BDE+KrXX+rOVZXTnAMLMOGRr4YrxUAkHHXRJ0vZl\n652U6N+2/7u9DKKc2oc4XCB5ucb6UfNMiY/UqYKOWaMOiLJXNUNCQ6b7GEkd\n9Wpgv25IFU1Cd49JgEkPGLMxmRikqh7lSouBFHS4fGCZL69uoioZe3L7Ywin\nL2dXK2IJyYx9c6Nt+6dR/P/9OHzXZEV4xTD3fKMhg3JNpQKNS6kDXC9EWrTr\najcEwkVLtOEGnuBekZDuxcOCLfL3U+lnlVKCdv25Ri9hEksbZGou5ljrha4T\ngcidJl6VhYXfXEbBIEQbkbthYXuz6h19u17Bu4Fj1m3u/JAN24TIerjt+kLM\nmtIjlUNFqfdgvkTnSuhR5bmgefk68T3f/lHZKUeeOwfxvyREbEBjTCiNGDbq\n/pbKi0PirRnXeeflv5Iee7wFSQmgsPLHSZmqXFXbrl6DcjUOPKEUZ00cIQ9d\na1hB\r\n=+hQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/density":"12.0.0-canary.f705e8048.0","@material/touch-target":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.f705e8048.0_1624029863881_0.56954409409231","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/icon-button","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321e63e502424b36d4cc09b30776d28549ce8727","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.08d791f37.0.tgz","fileCount":37,"integrity":"sha512-UaZNdNW4GCqxXxUThfnRNkYTE4sNJIk+iicHxjm1NWoO5y8bV6loBZvkgNdgTBAIJQBOtcXLOKVtGiPlCWiiLg==","signatures":[{"sig":"MEUCIQCl1OUngOo0JlH7TaafYo2Qbl89JpWLBV6c5xK3n9Y7NwIgZncp4FPlUHyIt7AC8OD1DtZGDiHlPvcTZMc1PCdwWmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwKCRA9TVsSAnZWagAAxcoP/2zotzd7Pv7CJy+YM1Iz\nq/xJSTHAyEt8N50JumC04WAppXqUqC7CUASQ+qb3SsER8H49HI4i98nIjeUp\nwd23yd6R/4uI+L1mhTpTlsvk4vEPLqo7MaNbm+ZtIYWTg+d6ImB3+LeoHayC\nIf5k5CxMGDzBi7aQPujlFkrIQ5UDhDZXIm4Xeo37c9fxF1eC4z0IxxnWXoON\nWvQzDCfD6glij/HWmykniAFRqGoqd41UR/8NOhhjF9/IPlJKjni0yZwy+CQR\nwMqmSJZiZ3Pydw9j2jUGZUPgeATzj/mR6K21nWXi0P0jRFtkeVH/6fa2G+1z\nzzBE1JTDCWor72l/pbMK+dWeS5pkUjVNcXv2L3pNA4xmYg9wOOj/oaOi9dyY\ncPBs/UwotUnzlvizOOI0yg93IlTmmkX/LwxPLrirAU/yoUiHDzsKhThM2tlX\n2iniYEbPiU2CD65paJfxY87bJlM6Sdb9SO+rTiNRnzfVbuslnzUNWtmpoQtT\n59P2BRLJ4S89BUPTJrK3/ciJFVbqZeXRvV9wN2QSHuOcGS2gGK6MBfSD3Ado\n5y4irjWFlF2FtV4LwkdT2fDQ5Qh/jobbt24VdWfYGQEa+Xj3YL8h5+s9F1fy\nxnUahHJk3b8CnPbSOOJvAkWIF8uHqVIqEIjZpu9GrHFXgiUGsOIkTsUyK3UY\n2jvA\r\n=k69n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/density":"12.0.0-canary.08d791f37.0","@material/touch-target":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.08d791f37.0_1624050698093_0.5410185221688555","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/icon-button","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dba868341ab397a43284cae22caec34540289a3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e38d7440f.0.tgz","fileCount":37,"integrity":"sha512-i559mXUlX7+N7Sdpsiv8f7J9kkvyV7Twl4mbTwURfgPXqxMp3tbdgljHrcw/1rvxRSs5PEaaS5DUN5JZJzkL8g==","signatures":[{"sig":"MEUCIQDMgG138WJO3DBqEkwK9Ery/VrnJ+KgGI+oEmscO7IF7QIgfdhcc0ZCUSzvgVNz3TgHg1Ife8x8DAMSYVmf+hQcl+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8HCRA9TVsSAnZWagAAs8YP/0GRCGePiN1+XfRfjP6d\nhhiF65BFhKp2E3/byydMJK3yZKn/B74Fk1IxO7ba5KmW8pC60wSiiQNDkqDV\nCiuJL2x3zYTD+fTzhME7tQeh77HlA5NK+jNbi5fzs4aDtbUHl9xnMN2WCKLo\n3Rgt9hQtR4Ly4EPyYzMsFg3ZXaYVp2H46cyN5xS8qFMlTeExgFiODvueevrn\nGo0kzWSWOdgc+jc1+Gm9E8ctVQ8FQGNFA+HmxUQ2R72LQ9M6/4Od7c6ZBuec\nHW6I81BURNPv8xVFI58jWDGw/YWgSFA+9HeTzCiqOt/yCa84jOCo/8Zghmjp\nD+zgucEUxNc6gL4Ywxy5WMHri1JbsWjQVX4wyXKpDFCf/FLUB0EJsCEacVYZ\nqNstsaBXyFCsRAghJo0uBEcXYfNrOD3ZmRj2ycGQvbNv88xgG4x3YHdTBMHH\n8szpDe86A905Gy9/ntApfrvcYVEqxffLbPmIvAXEY1/rGgv7TIFjaxSo9cf4\nZoe3CCbNTl1Ko/w+69riPzUs3gm6MkZFa7LqvIk+WH9q1OYZVvsRipxDOP2W\n45evnHbHVUQXe5GOZy22WUKjEYvJwrrwGhKdocOKksLm8arD92icLpNdXzHf\nBu4sNe0jn7EG6TdEOQ0rBcPfFdWF670qXr5y1LTga0p1KVLSZxvBeCr6gk3O\n0gs/\r\n=sker\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/density":"12.0.0-canary.e38d7440f.0","@material/touch-target":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e38d7440f.0_1624297222735_0.995261884652493","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/icon-button","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbe1e84b035bc087c583edf59789c6c91d84a9c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.75900a5a9.0.tgz","fileCount":37,"integrity":"sha512-6fhYPXqb0259UOGasGhGi2fkxIr34GdkGoUk0gpLK2l4NPNvnA+3QRMYHBoy4J1Yh55/vIvyKXrrEFpplXGHAg==","signatures":[{"sig":"MEUCIENZfccjaoDnTrNaDYT8PrLh6Z36TAJ1EwSJ3rqIGJUEAiEA5MIgfimRd+zphVf5WtvE+5Iq98oRrkLYZ73kUo1NHoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxDCRA9TVsSAnZWagAAOuIP/1QEl/FBFScJ+jVDpEZU\njmyAzL3ObbHQ4PTaOv/sGNHCw+aB6KbXQ2/FbHnfl6GKuiMY7tTPKGbxEPvF\n+9ZOp1eceAVLpVIAHzzl2sxV4GBy8aQVskL+TSr/jKEOtVcjEhKnILkLdGGi\n2cqi9fmGy5AMJXfnH8mImcWvhLJ0vGwGgObOF3itMeHAUYPSXsI5BnzyiZzf\nQHNjcgaifL1W1C2eqGicpYtkowPw3ZLS+e7WSjMc+em7JrT0OYko9piqBFII\ngwK1a3OumpgHzO4AIBiguWMgITkc/VIkRiQrGbx6FUKwoIZPON0kJEb/AaVt\nwnRljvWv7nhgswbcOgk+yiq+WwwC85q17PCgztAohTxA2FHumQPCXs3HXzQY\nh0a6BdEeM6GXcLCLTGSxC2/Tx9uV7nqmAAASvsEsli0iuDIupHJEI8alNNBQ\n4qqXL+WfYRg10oloOVJlfndxn2Tv7AUB1kl17Hrkmxy4YtQ+loYJWjIIzf9p\neiz4DBeNLDv767YwOrUox0kv99agL+O6tEGoW2UFw0bJNEREbkDXRGKBDrwF\ncAaePkZK2Jkw7IOFiI9rXcncLFjQUo2g2UWm5ludjA6yZ3DE/pzK2mXRaCMD\nJSHPe1XkUFrl2NERLGX99PjahAnqGO3Mo45ejZ4bUAHhr/bu0SWBMFUB1p5Z\nB8zD\r\n=oD9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/density":"12.0.0-canary.75900a5a9.0","@material/touch-target":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.75900a5a9.0_1624300611231_0.8779652451898601","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/icon-button","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a9af1070b3e1783bc103efd5c8888b503cf12ab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.33e6f50e9.0.tgz","fileCount":37,"integrity":"sha512-+pvzhC4AzbXfWjyrObTQ5elq5NzJP4EVdizNz5/FQkQh6L6Iw+L0lC3QqrwU7FN+Q9bJJW1kGDRk+kP06XaTpQ==","signatures":[{"sig":"MEYCIQCP3sYuxmKNIPFAGn1X1u/OiY6E5pEKzOBujBOoAwaKLAIhAM/PUfF2QddF85MbWLUZZYC3oNAq/ZQIlQBbhDkA+9VD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxQCRA9TVsSAnZWagAAxMYP/ifCNeHUpg4UTUq0NvKP\nIDtVx7VUXDUrINMxP7BmXYfZ2cSc67EQKGAdY5mJA7OhsyoA14b54OVXwfLr\nMEJrV8YugbjENyOT2VrwgYtOxeyW6h2xqTg0qSXxkeBUtQFtT0Bilw7Etz/v\nM2+WlhSN6dKPsDGDLGWLWhc0m3lM9kdKR6OAH+obVxOthpq2LSqHj/wFTYMU\nq74fzW6cuUcg0IPbjg3BEUlmP+pKfzVvkln6Fmjm0PbyMzMwwW5DlHLl3wZ1\nlFCkIZQ2CiwHWqY2+xYTBjRToYE6k50a1mIFAvGCZPIGJqfaQHVClI6rYdCC\nrmDzC71f4F1RsEPpihXgoPVvXQGnYQpB9L2C4Zsgg6z7/PmsMji6i1Yl9CIG\nS8E2tSp30nXZ/VB7q8MnjQT4ggr19uQE/S/hk5rln6wOeaVFqSocVJlqLiMq\nb9XWOx2cahErO7N9s0UnIW0LTFZW+9mOHvVj6eTVPknijMseQGz9Z5fkB+ie\nEZSvpIGsAE5UZZTtztZUmEXEd8tdzzWmb3c5UCcGEdLUdrvyJyUcbMBon8KR\nfz/P7s4RglWGeKSeYXOQ0FX5Mni/SjQunjJCnUn9AQi3vSr05kOZaQ3xRG0O\nqHf0QhpObKLOjGdX3IoTrAExH3yfSbutdz2aN/5IWMrAIMXH5bsUjADkr+6y\nfl1T\r\n=BVJ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/density":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.33e6f50e9.0_1624407119909_0.7238539260013255","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/icon-button","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"676409eaf92922cff3b537480b90c7d7108b2f4a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8c685301d.0.tgz","fileCount":37,"integrity":"sha512-KC4L2BIRSJgSI12+vkVS5hbkO7jX6Nf/pNVzLHW34MNX5OTGIJz1TI8b5bA3b8lI5K0VgKeOlVQbUHZGr+ph7w==","signatures":[{"sig":"MEYCIQDTw07kLHLgznnwoktfo7HfdAhkhh0bWtJOrdB3SGGgHgIhAJ6NmJDh+jNcVwONZweds5D2aPiXfsFftmDG/ZXzhLN4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xiCRA9TVsSAnZWagAAgJgP/jNCoMRDyEJOM8EtmmOZ\noZdP9Hwrbb9xCYowFwWat2p/POPf9xkGYPMgsEL+Wh1J7Q4QB5XkTp5VH2CV\nfFomSpy9Cbh3e4dNHQQH+DT83h3Dw2x1aT+zKrJjSXkL5FmA5z1HrEcppGrb\nZ/8nAd+7YLaJuokTo8ay5NE8cu8nQtV48OSzeFzsim7XkAh0N2XwiTSZtnEX\nbKqfRWjun27uHqg7PbVrzfsCvBQJ2lwkFfohDhBiAqGKdwNX9B8pu3RA/Y7W\n6DbfzqPcDsYSFxYCxkBLD7nC/CUc9X9G9rIghfcE89G7kk4etjpB47eZo9a9\nOYT8WZyMv6Uu7y/y78GfMrELomjzBd6QZHCjAY5WHhwhslIOZVVar5Aifbi2\nlCzlqSsOArD1unMIRC2ORMRJPZM6br4+NhAFHeOzyZoQah1bBjblsZz+Is14\naVtcbot6nZpeeqtDeGqX0fvSw27qrX+SuiOuZ9LZmqAHcmpqahjpOFQiZtFE\nBkjYxzyU04DumfdOHIM3MxW3pxN1tn7sig/ed18AGIjY/AxI0ERaAITtS7BU\nqgvmCyO1YDuZ1KndiEO6ItygdS0DpN7Q820FH+M22DjocAVbdkKEWzpJ3HG1\nMKYKW3evZiS+pPwhriyr3hByFKzvZd3YraPm0wHdoY0MwfWx2vJ//CiHqudH\n5WjA\r\n=TE11\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/density":"12.0.0-canary.8c685301d.0","@material/touch-target":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8c685301d.0_1624472673586_0.08570549017559448","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/icon-button","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1efc2f25229ea356e421738c9757f2fc2e9bebfa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.8c7d994ae.0.tgz","fileCount":37,"integrity":"sha512-MA5nYXIyDXaeCv5h5TxcurGdA7nHtLKjdsXBjebP5iOLMe1xsIDu1OQwjZ7lyZCDXQG3vZr19ZzVVdMiTE2tDw==","signatures":[{"sig":"MEUCIQCnyjMmb5fn0Ik8aauIAtNCZlIQOkvP+bRCIdvBs/QmtQIgOlDgll1/VImwPMR7ptro/rDckQM6glM7IsV8gzRam4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sZCRA9TVsSAnZWagAA6KYQAJIIuldRL0+3SiXDKGoD\nIW3TsmS9V8EDZGzxTi4Cn64/K3Amgd5ndyvMJK2dcw20yhVnMSZRsJ7i9I0T\nS7JYOJ92SpxrQtiK+oHh7Q05pZ6qIjqgPuCFNL7UW7uYJ7tMB7530FXjfyjl\nCFySX2/5g2nYoEG+82Xk6DUhySdfdxY07TzzNuSpm1BdhsKaE2gpvoKflf1O\nUP/s4h5JeCTh79BeYrLJUIedjtz1gtxPi+3M1IHIB0T5jflKeR2dA4IyyyG7\nucusWD+270uJk37Qy5LQsPjsB0KSkBg5/LMjxLn7vxqk8XYuVD5+Dl9d+/Dt\nIE78dDpmaECQd/yQtavPnufrYnJXMr60IDh9ziCKBrjcd3Xc4L3n0tUV7bOb\nCQD9mi1UdFD2W0bKsPe3purceZ25ZudzdnS4ReuwMNlj0H8I1WudqzAmSdh4\ndfSsapSzSmlAjnpW6TTAKPKhttk8r8YSZM8g90mwpsaplX0LT767kHikaHvZ\n7ZOrYg3srphRVHikytASmchVUViQE6FguV5FYR0F99/+rD3Libs6aQjfMZXI\nO97L6cuZIdC4jeRWXoUq8xQAMG68ELXOjlnnA/yJapKOys31HDeYpSqRXgo7\nc2jtlZoxaHqtmxikGWlu5btc0mdc1I1Q0C3mV3vvia3inkDJb0i6uGmzg01d\nXMJO\r\n=NMJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/density":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.8c7d994ae.0_1624476440629_0.8716739273020848","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/icon-button","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc6486d466694f97669b9b3cc81a63fa6330628","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":37,"integrity":"sha512-urzK89UMrcWKKpcv9KxQrRtAv0zHZS5b25Z8l45r/q+nHaHm0CLYmHwQUNKSyYbNM9/JAdUtTkAe1ih3gUpHoA==","signatures":[{"sig":"MEUCIFPDOtMsQpLL/WEYeDACkvtDWwB9F+kxpU7DYIuuYJzWAiEAq8yiMF6yYFmx0D7iptgO+D8HuzZzoG031rulVOyBLjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K97CRA9TVsSAnZWagAAjGMP/iOBvScLeUXT8dmRB1Z8\nFKolbAUDcgbt7cNkkgZcK0kJoIsbCd3/x+OfY/BFozvzpWAmLdv3xY1h7v2d\nX27aZfmXqKciyIrsKBKtSOkDCLcVrz9t6YrAQobLBpgDrz2bNekqxll10BgU\nPp0XC+75PP4ruNCCpu7MdFLjwOYGvbku4X/KaAy0U8rmanYsWCe7uSTTROh3\nGRSKjbBvw4pVPzokufSlQjXBE4nywHRM5qMquLSZPd7ScJybkZxQ7WCSwQ7l\nzF4ooyYZkvvkIMKaF6clWaTSqN9lBNaYSp2t6IHpC2HwkHgWlv8YrLfDxo8x\n6LUHtvTsrAQdjwS30fxBRYcN3Q6Rk0aS299Mma9pu5wZ0sVicEHHCaNTG+gW\n6wZjfDvM2/pz9qj9xYTOIcLzvwcuXDcW8KGYwaA9UZf5Uy+jks+DeoMgrKKU\nC1Zw8EurcZadZHUhbc1gKujn4w9fGB8jyppqkqCuSKPHlkbQaBQRh4jLiU7n\n+Vgy+yZEYR/70bpPKk9focPaLDdZAwOXwqQS0qaHrcZWgwaHDgXnpyJmkiv2\nhuWhxVSifyA99iIk5KhlhM0ClOJmoSd4Btu+0a0HifrnMlyXG/5FF0pOV4Co\n5yyu8WFoSLahkgaXmfG4fJAbSQzDMUiZ/AorUxe4ESRno41h4QX/I5vlVF2G\nSHeF\r\n=Auec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/density":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4ccd39bdd.0_1624551290489_0.6926470424356883","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/icon-button","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"728f3e4b7750a0773928575e64a382c585111a66","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.17553e9f8.0.tgz","fileCount":37,"integrity":"sha512-+ee57uth7TuarTZsneQAbAFqco8QQR+dm0XpMFHOZLmyDeeZCcWpgPgarFxMUU5N45cPdCs/otK7skAIm0Yjig==","signatures":[{"sig":"MEUCIQCfQq4IWW8fT3tc27/WBRJyk1ghJ2dZz/MCjeK5h10ZtgIgdjBZ1Zj3SDA8RGf3IXhjQ3XEPbdF6EBdsR76ayRFIOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKsCRA9TVsSAnZWagAAcAMP/13m7tr6YHjT5UejvNks\nXbK9g/wCzDWWMphNcoWM+d93hLgyJ3TrIvh+RpFpI1NTKCKIS1TR/Fhe+Fvy\nUVcBPRjwYMla+ObArX5IE/XD4g4jSzOpsje8+6h8qbrtVKF69ENDFZSJrluX\nKm2xg4148xtPFhOGY9B6DyGAXDJ75pK8u28YbilLMuIXUPUX0kOVWSrTaZ+G\nv5Ze4fIOb6GOISBjjMoYsT4r7qTfPtyZymLJKeEZAyLg9obNmw+KlDr/xV7y\n13iB8icvcpJ8uUoSHOUoDEdbSiLNqhaNfgdyKkRnVWIy5uECcqastP/sX7JL\ngYH2MTigGqaJHxH6TAJU1aS62TbWZf/Z1tRoYVAlpP+s9K05yvwUg1BbkZRF\nCZl7RHT2cDxAc3noK64avRCwEtsPz8VnUqsHvxbmiFsDGNPCd1PJX8yHHGnN\nIQBFRHsqhAe4hH8Ligz64FPmwpaW5I9pmHqAujyBVfzfVkm9MbvozLAovCTd\nUukA3gOxMC4YeN36NDCsNQB27rvCrH+m6oFU/+BpUAqE80rQ/aaHPD0TFJ4B\nwoctOOc1q3r5DCfDSJe6ibcGd2Ea4jMS/KMKnHNrpmoXwXw6qxemL6XccBDB\nAmWG2Krh/oXJN60o/fAi1s8KFmSfJRJMczjt1ZnwiWyq+ztUQDvrnxi5o4PL\nm76S\r\n=/2YI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/density":"12.0.0-canary.17553e9f8.0","@material/touch-target":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.17553e9f8.0_1624920747750_0.026464853351677142","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/icon-button","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dacc4140e6af5e19c2684e699b8406e3c3c54861","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4c80072fd.0.tgz","fileCount":37,"integrity":"sha512-lnwh1RN7CyLK/KU8GkVJOvB0kFiYBDCAuHuCTB74JPiXXYwYO17ZaBF4a2LtSchtdi1uHXmuTHznYn4iIqe57g==","signatures":[{"sig":"MEYCIQC8MrwF4VZHyzAZzABKD1NAO7+rkXf2fozFaSkm9Jp81QIhAJhz4smPgTe6GYoOawzxxQin7d5eiCFUxDkcZTBWcX1l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22kxCRA9TVsSAnZWagAAGl0QAIeLM2ECWya6TwynAxt6\nKLtDBVu6xKB0KBe6j+ZVN/DxUXvCwrB/POtevA5Xg+1rOdU3jx1D9Epra61m\nZ0vHbhchzWhfbaxO0KNvXk7N93eviAWbstEltF70h1N/XupMOcgQU5iZ5DEQ\n6xC910nvdB6BHV0AkRkul9V3SPGVmLUyK/vkHEwGvJS/82NIaNhKNioq6Gbl\n/lmTBpy7+6/psqslFJGsfMnfLuvpRirJX8IN/UPEHsuQlfwqZzbAS10MYHMp\nFvoLMhynUtOvkXAeUnVrsbd6VVpg6DRDffz5QFPm2iJjokc2bXeRZgb/xCuD\nm5cbjc2oJxYyJQXXe0KA1FOsuBVe2e/GtSyD0YLj/F8LN6HHFbi1dxLfXtWk\nVf+vL6etk/TkPFjZawzJih+2Q3ArBoB4IusCiHPjPwiYv92dvRBzpZhDv7nr\n1hZwRGKweafcpLbiOt1STUOUzOt+ejSobfgWC0kbTlamyqSyWY253r5fA1iH\n2iD5Ciol+iG4jVIcs2T89Tptr49xkP3pxj+yKiiI7G6ClqfQ664GP+1BXCTt\nNB8N47gs6qPS07MLpnQnUxWPO+RxkLFgizKS/+irOKuDTAa8RYNHtAkz3ouG\n1vFKMgrBWyQrccYJR38ZEG4f3XaV1pNwDqzi3uZIy/JysRyqcEUj9zhK12n4\neauO\r\n=lqwS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/density":"12.0.0-canary.4c80072fd.0","@material/touch-target":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4c80072fd.0_1624992049241_0.6174637925161672","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/icon-button","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80398bf3519c63bc3cf90dd96f6a9a4500eb66d9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.796811db7.0.tgz","fileCount":37,"integrity":"sha512-hUbnRUK7I72+7tLonwsPfN8jFCKI4juOFxwh5SymbWR1CPT2Ze5RdjU04C/OsX/4dGHFUwXEnqIPzQ0xGjiDtg==","signatures":[{"sig":"MEUCIQDn+F+csieKQ9FVgI+cRl+CCjXIoiN2Wku7QBvReLdg2AIga8QuOUNL7ox3sqxV9R5eUdmD+XklSyZyrQBFGKkpCLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZKCRA9TVsSAnZWagAAk28QAJYfFdCLcFn11bRnHCsb\nDgm/69g9mLUTzstmtVnu6HuE0RgKyIRWRxAN5cfEs/BS1xMSw5qJjCTDAs9h\nfViyz50NnHU6I+ibykH0tsMSyFViwju0hM+6KZjCGHRK/y2hd1m5yfoSTdUY\nsDmo6OCgOrdpd0AnprKQTi2IgfoVOSka9x9TL+3lrCfoOrJq518e4Ldk4N22\nodTb1//dyHJOEiA1nS/kFzKCc2pOCnaPAqzUeGo49H1Gtu2ObVVIUWB09Ra5\n44kjqLarJtVwreErhgUqi+LOoOioi7UZj0R4n9L6Sjz5/lyQqrNkni4XHl+J\nJrx6m8SpBXpSUAVOsw/3NtQhOmVKhZTz5gvjyhspE256lVwiSRAyR1PWrgYj\n+Z479E79bP0++sPp2u4zrX0zfK+u2y8Ohcwi1IUCXZCOphcBL4TWolrymzDR\naww40XyP5i6tUBWoko7fYBASp41l5uOPkFUOq9PyMpFquLDF4VpxejXxBL+Z\ntBBIEkOW+6lVcufn2RykeenlaBkvt4i/FxI++EhGrqQEb9DzU0sA+zLTHkAk\nPsgQnUVCt0QEoksh3I0GqjAQsr8o5UfT74ONcLvR1OUSrj4mKtkT2vW7dyAT\n0LDonHRUp3LPGnZxcJutrwXTI++lGDkT11kUz+s5OM3yARLakWc+caPPztTh\nGvG5\r\n=wFGk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/density":"12.0.0-canary.796811db7.0","@material/touch-target":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.796811db7.0_1625097801506_0.6255323942759892","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/icon-button","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa01deeced380712ab4424ad778a5733743e988","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.70e1efdca.0.tgz","fileCount":37,"integrity":"sha512-RSfkbMCkb3LkbiVkd/9PmYbvt2pifxOy7Sc+kvMzqRQgV0pz825mFMgAcgYdnAZaHZ/BIw/tq2BPARtQ5vUlKA==","signatures":[{"sig":"MEUCIQDnRiervwn7E8NrZCozFBKRgcuYHfn3V1v/AXcZ/zEzZAIgQ/KPM7SlYA9o2IU6ifof6TdFAZlnfmWxbSaoonJ3NJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYUCRA9TVsSAnZWagAA63QP/jbXU2YGZxedQl3FRgpn\noHkjzr6wVVltvr3YpY8RVznaLzm45UvSXFCFNeVNHKbvLVcDHhiAsgNBWzj4\nu1RLpXzdjHjhWl33nznoeZTQkmTRijlA+FjYdFOTXI5y9jQvfB3Y70GJlbv3\nE+8KHECzhucP8A3sIOFnMm0qdv4IL0C4220rzvFjt25YVYhLzsaB+1NpFEm+\nbA1k7e2jauKP96PaFVGPdlv4jvC+4kNhd1CwlVYsT32kLDTzbFOV9s/VQPI2\nBccvG+2RxXUyNDWDtVX8aSlEQw85E6FbP9k1SRKnS1Zr9yLWP9Ajl32CGTt8\nbVjYf3oFs7aRiGRzm/tALGS7hgWx8rN2TUcd8ijFRTniygqwZH9ZgmuDwxEi\nzDSWfFLYT6oLLkDxV6BKWAUsa1GnFCKYz1Cu6VLd4Rn3i9SKY/jp8TiC8yCL\n9Idqk7bhOk49ilRYtvUKLuy6Dcqx7Ws+Aglh65RM7Nl5ubZdRHdykKkt7D0x\nZRBFGVRFCB239F3RAYsv8iY17wF12jeu99jQFxQlKf3cjqE/iLLyVKayRJgb\nXHH8zKkdska0zFeWFuu9VLCBivTfOj7tLr91SBXt2nS9zmoywhqAp6PvFlTh\nonhY9RJBa+fzb262o9OFXlTzA9CDDKFpQpDMc36BqlqX81Byz71RzqpojPaI\npCPX\r\n=ai07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/density":"12.0.0-canary.70e1efdca.0","@material/touch-target":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.70e1efdca.0_1625159187967_0.34010099165464114","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/icon-button","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce7a4ebbceb8935e800c22c3ca2f7ae4f2ed5b07","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.435866d32.0.tgz","fileCount":37,"integrity":"sha512-2bjSDLPwxps5y7vkt146GcNDfl81ShhupuVmMMj3ggQrEUv92PYmoG6DnbKjmQmbwSsBk2spbkGOHWEyICHgWg==","signatures":[{"sig":"MEUCIQDZ7Q3Tj9JJC6sDXDcrmTMQmoNgxot6z1Pm2d17YeMJnAIgJ/n2ynbhOCBk+e72GOkeC7tXO3nZOI+uRF/jcsln0WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kWCRA9TVsSAnZWagAA5jsP/j/G1WW/OL3PWJQWW/wF\nNHVXKnoZZ4/w43kTzMbHaWEp7mabpGUjybsWO4fNDzvpMdxrO6Sx3T8fSCb+\nFdJnKScxugTorrUqtYu3CFqSKpB/tW+eQoJ8kZbonMJXsaLpKrSffvFpleLR\nXxe3Ix1krp6AklS4HO1oARJHU9EHoPlDPV89x+CZSA0XaDPQ6QDiWSpAsh1L\nmtOtPw0XZYN+1PYnXeabR3LYgfU6GyOYv8KvBkIOu42F8GAGSUvnj5nbLZ9b\nj1HEn9V72O/b5U1ug0pZ02GTZ48oljiJprac4dWv4AINiDToeCX85TnPFPff\nwKbjmQrCYbwuEdgLaF3k9zz+cCPVonuOLKMbd9gTQRqePodnCbDE/+Z0bBK0\nnoLP/xb9NT2tA86QScZ5DnSej9rO/2ZfPByRQ7+ScmwpZ+JkNnRMEyjih1iR\nf8fCd2gpN/NNt/vOX9K0a7p8TOQIKh0S80r3XII7cGYMnE+E1m6QzK83H0JP\nfthekp6i9/eKyLiEsi6YHSwob8H9vNWxw8Hch3gAKEYU+iyM5wG1N+A595c2\n+yNMYZNQdv40N5ICNRM72mFZWBVYyWO5UnZesKRpDQf5zATEvhg7EEmIhIO9\nxELu/HZ9gBiwnaoWC3tsITKPbBM9y1DR4ov9O8iiaYqlx0JvZGt1r1duswsq\nA8lL\r\n=UyRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/density":"12.0.0-canary.435866d32.0","@material/touch-target":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.435866d32.0_1625250070393_0.34790710885628884","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/icon-button","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a34dc266ff8be2d4c9d74888b682ca3066a9e5d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":37,"integrity":"sha512-W2DuuAP0sOZPIWllteWvj1HbGsmu35xLtDnucbFgJXKykBZLEbtEViaFDexyH4BJ2J5fXhYC3y9FUcyk/mytTw==","signatures":[{"sig":"MEQCIB1jJ6Wzkyx8hywlQB/9cFSoSzjXFtEJFQ2Kazjeh7W3AiBsXw4Ru8DP5FCQEx7W09GPvcBsz+AJaTpDG2K0awKhfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36h+CRA9TVsSAnZWagAAv/8P/1g4Kpmc9JJRH/0tZBuz\noaD1ii3Z8s1ajq+MfRTisBcviWwzl530n3gRTYA7Y6RiZ3KDpmQMr792nDVv\npQqZMBvaQgfJUQ/S887JecgcH+lLZbtK9IqmivtmDqooesVnDd1I7opRay7l\nM5UJQKOONiNo9vZUFti2kc8d5JDS0VNclYy+EooChKeBB5Fju41G8ofeqyCZ\niX5M+BsKj2PlG6EiRCuNv+ScunTPYh/RP0wSG8XcIf1o2WSzhCKEWrG/88Sy\nuyF5CjUYqfQgpQ8HaZZMcz5XrZenlgzzo0zeQY49Rfm0yfHtDm03gEIbeM+Y\npzLkPbt9u6ai96daUHqagvlY955wMw62/TMfyh3cwOEVTVsjr459YABhRGvC\nw7aDrc8dqHExogd/e3wUL4dLy5tof6Lg+LHmWeEDd4JW2VMSy7Q6eaXAtqKp\niQsyuM3HmTfKtTqpxLJ5Ldzqcy/JQdIdFPbcJa5xsS2qSMZD9EJgSsS+d5uQ\nbtYPC3zFVMCVagSR678lZJCwTp+HnQt6ZhbT96uhDlRNlQZ8Uj9pHYGE5XGS\nm5D6TaZksupO+lWKl9L3Lw+DVB7ooe9Vkn0MXS0GhqPAKvLgPorir9tQAYLt\nBrKkOUfMpK3YqppwxexzmA5+vanz1LgiIcwN8+kCEDTiTIK0Ej6fIlgXQ3AB\nMnTu\r\n=B4P/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/density":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d0f9f3f2e.0_1625270397939_0.7730139815474126","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/icon-button","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4047dab61f94777a6604b23494a5d94062838ffb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.adeac0549.0.tgz","fileCount":37,"integrity":"sha512-fEcWyLNnHAugb3diTHJjX86TavSuJAARU9GnIuw8G/eRFbkQoam+fYjnpihbyobNtMLtzi6AaNlMfoEmkwhAZA==","signatures":[{"sig":"MEUCIGQxNtQNnr9yqv4AWEWyDm/KFvT+MItW3LHS7z3wx33hAiEAkzdcGQCTqoR0ycuFsUkStuNl6DePokVXkXUoSv/GN2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUYCRA9TVsSAnZWagAAraUP/jyYWsn9yAyvm3Y1cZO6\n420j5AAOrv5a/xsLRf46QE1zdN1fMEz4Qis4qDTD1Osg3vjck20wfMVdSpqC\nECiV+W/PUgNCDdGlV5Pi77tQRAcqJIE+oAMb1yB4KPDUbQGKjCbgmfcOK0YD\n4EbVu9Z8xb1unWKbZkI6hbmxHHHJiaO36gLK65gRH4lV+uqT6MZWmnwArOjq\nPFMafxKEcTdi26OAVmilLK9+c/kdxgbr+zKQGwfRk+zyfqS7Wvw7e2IgPAnx\nshmYPkjH9IlfYIO2i78qliHO6B23O4wqiAF+H50KPOvKQCgpvqY7zy/RP6VH\ndlKt04RT9BDJuBiBMFKK8eO87W0abSis5iJgJxeI/h8t0BCRxaK6UQf4xUEe\nYfCQ8cwMd6vRA4C7fFNqEL4G2wJw5JlL6fN8VqWIgnFYC9f1eQjAOmXdM3de\ns2py3RS9smPul8qmwkYPzSKlz6Z55iKyYLkV85CPa213i5OBwIwp6Pq4w1eF\nMyiR+GO5PALzrHsaCtFyz2wqCMco2ebuIDajgke9MfMFZs1dFKBcEqqUHjIt\nsqrOg02NSWT4JPZJbvxigptPyvsmPcz1Vp1y1SPAVOCyB9cVqkK6UdtsQUxr\nzmL3BclK6E4nbN+29qTaEvR4FJlTJ0khKPwSPREnKSqDRzj9nknTMCJyd2Nv\nVnc/\r\n=Vs5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/density":"12.0.0-canary.adeac0549.0","@material/touch-target":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.adeac0549.0_1625756951530_0.4920563587969611","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/icon-button","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eccd2bc14fd984817ae090e9c09433b1e94e1f46","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.068fd5028.0.tgz","fileCount":37,"integrity":"sha512-0Cb2OUZ7tIbCIVDpT28BBbxrNEtr8zbu3ulSrbCR40btIhyBvPh+Q6l4VGumILIVBQaAjeqgMrRG6tGoyXfkUA==","signatures":[{"sig":"MEQCIBh8OTAZ3GbYXWjuzrqQT0tp7kwHHBg17rkL+ZsZer6OAiB4siYD5CFXLCG6TAq+3v+8C393evSVZW7G+AIWRmbt8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wGCRA9TVsSAnZWagAArjQP/3UE480jq3QEmV0OywZ+\nXofnnzXdaUCCTPP1ZYWXNP7pYuWNTQxsVVXzUOli4BQ9RB32I7EuTqhChCA5\nKgpsBb19HBqr/mntJbttsbj/Fp2OIxS2UyVR3hKOYp+T99N9eZm23aAfg4Uu\n+jYYfg4LAed0euPfSLO66vsbH/63o6K3Rp2sF8VXyyhw9wuZ8RttY/onJakl\nFCcJ0N1D0fcCIWD1PhoJTfR6JhCROOHgF6ze+8p0u7sl9WDjCkZbSgImnYAW\nRt+/ooqGRyNiiN8kMKJDuCa57fuHeDSwNBgYGxnpRJqQJVvX3Z0a4IU817Ae\nnBcIJ5Jq6yTZxqrl699gAb2bbbZIL5ZT0ws6gZPsjjEK+zeL8yp32Ht1gwS4\n011D/w8Vzi5m7Vi1/1TIFbWveYrHqgGRK3aFwe2B2bVsrk00/3S3uOWeugyI\non3q+/qpZldWowssAOx5gUgncqU1U6Q0pgF9PnD8743u2tAM53GpJUIeuOpj\nQa6yD+ectobFJBJ5DPduBabc8yAiLllnxgfGs10dl8H7WFggWWyTxToM5IWf\nEOMaur2gXnBiKawWU/1+dxym0Omtlm9NDVqIIQtafbOvGqjCfcYKvT8m7TBV\noMik5lkKQb/QCOjfHPbkOuwgeOxWx7DFYw4kFTHjguwQ9bZbCV78ODpgZKq0\nZJku\r\n=yiKJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/density":"12.0.0-canary.068fd5028.0","@material/touch-target":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.068fd5028.0_1625771014219_0.6153494363946843","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/icon-button","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f25bb23be545f117defa1419739e282a3bc944a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5dfec7a14.0.tgz","fileCount":37,"integrity":"sha512-spuuY0MZqn3dfiRwTYthj9zXNJbLX1KXWSevvQVmHR0SjbJyuDnwtEMB7f5RXryB0VCs6/zWz8ZF2zbWfjllfA==","signatures":[{"sig":"MEUCIAelyj2ypqDNU6qosV+sBen7GRgY9Z4HHNeKhNEtlP/BAiEA9SB23FL65fDkKuP61YCqu/e/VGNSvyz/pay1BuKsR3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KA6CRA9TVsSAnZWagAApHIP/0fUsMp2mNGlSF6GYEDz\ne/04fmysasQY8CPv0epO9J4of4WMvcqVNogV/hBXUeLa7ihEHegzwuPO4gVn\neBm5p3sYzDMt7PkVMcvH1gW5cmgyy0DE81hUCGqovpHPqi9EiHuBAURPrGmM\ndO1w6TJTdNo5ScThvOrwfV9fnvpgThZP+mk/kRqZxrVTT6TUP9gzAjcz5WGm\nZFCw0trNsO1XqzT2z6wFLRDL2CwRejXIiYAtOcXs8HG9auQSsyuDphN5Xnag\nCm44GI9oD7EOKHEu3Ra66w5sXZnn82c2z+DVwh9Hf76QYM6S5aEt2ETe+cMU\nuCgX0u1jXPHX0ZZW09+eROvU3RirEn9d4JtxjoFd7Io1wagIZECIZEp0LMK9\nsa70IJ2IAHzpxlo4BunSdkwmfB24rtUIsqWxbKsK2au70hQNVEwSjNuFKklA\noXnYcDzqT68lUnN2FxNd/b6ZY+cd5wDvnwA/qXpUWXwvfD7ZxN8fTI/0EpRk\n/Kgr9Lzydcs3Tc2RDkNa091I374Yln7l/bG8jP9u75gORcNO3NRDAMtiZiDt\nZYk46FrDvLUm6Jvj0XgHaByEVHfM5DS6GcVrEJMZ8P1KHeTignX0re0ofQoZ\nxSYP7lIIC9U1J8Cr0soV2bVgRVZh6vD8H5dWkur20Lr6tpEiNu9JCyHHLgDH\nFfWt\r\n=HiDo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/density":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5dfec7a14.0_1626120250311_0.7761357661053743","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/icon-button","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"373f95c00b17c1c36d5b5e79b351e0500e29b6f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.07a73750c.0.tgz","fileCount":37,"integrity":"sha512-BY1Py7ki3bV3uFdLiknB7o7JBExQPmr0vTEnp12qXtZby8fufV2yHeDwuHBAdjiW2xquIg8CgrQsVMGf4hbMvw==","signatures":[{"sig":"MEUCIAfC1kfxjruKVVM/+0vfBi2Cxcasm0Vw7EHqfQ4Sn1nDAiEAwe5u92ubDxGXHwQLE58PJx6gulSA4Ipik6/sbrunUyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KU2CRA9TVsSAnZWagAAQQkP/RDBL/L1TxPROlGzWCTE\nyQWX40N+bBMY2lWALFqjLBvj7hmyMSvXpFQUiq6H+5CZSaOrlJANs9Hdc9w1\njK2f3w8nuX4ubo+R7CgpRmi4OtgWQEi23R1OCvCC0V84OLp4uPHKpcBrtxVt\nj0bd2+z0McBWTKq5m3a8oAuZMRdIjIub3MTPyS9P5/dwNfOFaotD3jZ5XsJd\nAh0mT44XprwqNvz/f6Z3xkkffZxrx1qmkTr46SgacYZKojbt0mLPNlOG6OwM\n5yAogWQFSn8cWXbull8lUizQYwZP1fzWCtXcFyOTAwFXLlyb0cU+GR5txFrK\nSdmk+hNsiSZmD/N+ChkhKvkhjc8an00rkyVUQ7ojRZdApPpLz3K2LcIUIFic\nNPuXSDxHx4pagnXXVgGwDWHelO25Guhf/oUZ3Cvw8tFOf29/yqH7/3D22p+X\nGjOudp+RSHFwezcrFSx8U8Tu2SRRHyAaaGBM0BthwFZaVp/un2HX0Rp7nN/G\nw4RSMeBqPURanccyfIlZ5Tsm1TALWkfO851wgv11fQfO7+6KEueGvR0F/hgl\n8iUE9rJE73YIoUSvmF7ik2w6fQkGyjQ7nhQvxbpEKHKijHM6EItRFc/PyiVI\n0jR326dtOnK0imITM2AiBi3J31JFDcH2IPTYGPE5C3rS7D9Vpd7jnOHl9LZY\nRudy\r\n=MhT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/density":"12.0.0-canary.07a73750c.0","@material/touch-target":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.07a73750c.0_1626121525729_0.009401368298928459","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/icon-button","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108a1549700279fc8be3cd26603ecee948b99ebd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":37,"integrity":"sha512-5oBOeYWoaz8EG2UrrY7i9EbZDVJI9g6BVLWEdnI6HkHmN/ZfDEeh+blaaQXy5ZFj6GHfz+9dUr2krHiLSO5IyA==","signatures":[{"sig":"MEUCIQCYmNTiks3tduHIWcuMMPQ3EsLCpgFjS1xwlTCUnycMUwIgdADEmHS5j+PN+YNxJwYvPC/7EsD8OcnbgGw4l3Dm17o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGSCRA9TVsSAnZWagAA8UoP/3nL0OC+8hFIiGzOm6xv\nkfbSkdXxEJncv4qCeAb6UvIynMGLvHOdCXOt4r5ocm/0WPcwdOy7r4rBZTih\nDus12df/susAo4AiHuggqCU93CqJByf9oxmvYQpjsQV920WIMcavdGQUme34\nfF8bw32kctRUyLD05ZFQNemyTnKbpFk6hTyJEjqgBuH3PgTOet4u7znpOQXg\nk76S/iNSGnKEKLcbukDmd9YHFlC3uudEuBBxZkqULX9YLk3RHIhQbD1Hr5As\nBZjoeqwUjsO45JHZcwF/3RPVi6KbQK7JxA968hiM/XOHgcTB3aVA3TEUAZ2m\nGcBUQ/F6ouPIcJ2FE7bLL+XpHHpmMcKHWxx0q5Yrjbzmifx9aKXHP8kl0UXE\nEy+XVgiYX8BKqBOLo+NuIdGB2Hwf71FNUK/iM+RzWRIb2Ta4IM3HsgH+wuKS\nkRraLQtndWnv4B2fQJKLnPQ5ATa5JOvyQhajua9ImsTMyp38zX9J/YK428AP\nwa2/vJevotMiY4oCPKNSzsBCYYADs6wojFs075jjxkdHKFWadJTPAKlhMv1u\nPmG2JcXFv0ZgXLe6iGFXWhPb8bNBxMjTjBoyMHGDwhTRvyGJsmc4KZyx/Q92\n4qH4UL6UlBast1ud4AZU+m1guufTX5dwjcHCpH/BM/0t/Lj9YjLEfJVkrlF/\n0Jl7\r\n=cJ4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/density":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.3e4c6dca1.0_1626141074189_0.39087596171785877","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/icon-button","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ea5c3b775631de101d45c2b9bca517c74c846eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ea77795b1.0.tgz","fileCount":37,"integrity":"sha512-xufr0/hLCAHOFK1V/MzBlt5ETtuGI/CMJZS6JnHzMpSF0w9+Z29Ne+/pQvGe0ULkE/YD5PwR9zv3VlixzkEGow==","signatures":[{"sig":"MEUCIQCOWnGbU4xeIb/aOD9jkhL/2+pidrH/JGwgwjliQQl5vgIgePyURXpBFOOJV55naomUizuz08Ab7ubMNCA+l31BrIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bX/CRA9TVsSAnZWagAAIP8P/RWnIFulxeJFEAAbRqFa\nMotUuiwUk4X1fAMJM6COhINS3yaICbXq8Q4OOfLueINgvP+J684lLjhzmHqQ\nvAO1GaC4OIIdI0EJGjZZnXyE8E/SV4POZ+X0rrkAcszPWpI2A/W5MaDeVT2w\nAq+fXWKHWg8P9GI6hu0YYxK02TKqwgnYUjtuO8rTfIiECC+nRfj3e3QOYSaI\nhHvAC48GPAshnSp75pQtMXLeVoRjdLfKaIHueWjpEsYTjJJsMu9FtRc9YbI1\nEGUVxU2lvfcodH7d6rBqZsQAwNO8MOGK8p2ZcwxrzHuaqzTgS8UrW3QgcUeC\nb8MXn3LfO5PJJplpqjkkIN09HD3BhB+MCv1TS69Qy2IrQsjIZzlts8AfY51N\nKiMtVtOzMx97d/9Pv6yDZpANAXMiEZ+oiNnzAmJDEKLa8scZMn9VSEBGpmcS\nZ8ML6k6ytj5q1i4niEJLB4+i7m0nUiIZjWzbnYhPHgP5FB0Bs9/fdy2Tvrvm\nJJVD+xW2+qLzeoxfFMDV/hgM/Edzi/AdInc+Tu1NroAaufM7v9mt3np0ngo7\nfwEObWSsRacgyOVcDSkIrg5lUdKOh0f9lqUrL4X+tS3f26I5L2Wf3pFeTxS4\noeUgJO8c5IQnrLbBJ9OWesQncQJP/Q3i8R95EMNAVLGSTClwC/CXbFylKv9R\n9pd4\r\n=qh3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/density":"12.0.0-canary.ea77795b1.0","@material/touch-target":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ea77795b1.0_1626191359483_0.7739394959385593","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/icon-button","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100d5d8d8ed5b9e0b8a7b11e04f47cae6d5a0074","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.15a179fad.0.tgz","fileCount":37,"integrity":"sha512-IouKRoZ7hRIfdqyGMXP6S2qyR6Y48n7bYvdDqsPimDGaSYRqoq0yIP2zgTj307wvRqjSTGTOOKzC43NFg3uotg==","signatures":[{"sig":"MEUCIQCXtSNGFve2C5gduChrRELQQnbGHWEizzV6ERhJhp3QAwIgYpqYo4k6Fu88c/rpumYAoRhAKMvWn594AQEjtDu6+cY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbKCRA9TVsSAnZWagAAutsP/A+uFVd2D6+kMqgmlnk1\n1ZVc8OlFHxRq5YdgnXPdbHwrT/Yj5KsNwwgUHqyXT4fMBn2MFzMA8jTS6aZd\ncUR4OD2jJzk4S5ysdcoYUwk3oOCLyfG/+Ux87Q7j6vACq41mo1iNR6t0r9GQ\nHP9uuZpXUej03hYZ9RhdqC5eNYgFA9Th7VIHfGZoz+m4NafYQNDLZ78XtOF1\nC4pneMpIyB5dK7larLTgCtRTmNR1/u+bom3VMJQp86d0WTygf8ZhMV7K0RGJ\nN5oyY4C4VhXvJz6cxGxHMD/9HcE1r/NIMuOpveJL/SE29KNXJdbNRPCgbr+z\nhcsxrJc086rzwBBRNdJxjFb8LJVifHkte0gEVHSU2WEeb1VlypZtNMr/bwHC\nDEgyQcNXSwXgF2c+2qNIzBVZ5HdZSIqps1+nb/6d0Ar5lBBDKz6yiQ3UHIJa\n0S+I3sFIy8IRh8FdNCAvI7onROExcHYCRkm3MMF/cMLi+CO8iuZXVRPuK5Xu\nTW+/7v3pM6KJF21D1smLQ5rw15i2imbOt8TF4iDRdFVzDxMu52SZiR2dl3+n\nBJM31vGkGWvSB7xorxNdUCdXn5HBYLRG5qShuj9cWRnx95IeMTxerlLaC3CS\nBJJITVPFvasT0Dl6eTedya1Wuspq3XBJDJ3soL9rJN+DmIbzHZ3iOxc+SLb3\n6lQG\r\n=yLC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/density":"12.0.0-canary.15a179fad.0","@material/touch-target":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.15a179fad.0_1626199753863_0.9416543617909499","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/icon-button","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90f4917803e4827f818b8e596f0df8384d149015","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.c73142a1b.0.tgz","fileCount":37,"integrity":"sha512-tON28eHyp8BGTxfOBpy8GQjidOY0b0411oDu/T1gRwR/mKKBqDwqOlAg3oxN0aVDd9wozXljqRbprZ7c2WaeNw==","signatures":[{"sig":"MEUCIQDO3V3s3apuWmIX+cSaJXBBIs6C0evyIRc6LBOJkU+7cwIgTMaqTLfWhctJD8O+MD1fgcOXyrzmi6t/Asxqq/N6NJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d76CRA9TVsSAnZWagAA42cQAJiPElfucqY3xRV5tPlK\nozpu5GQJx14pr7W94gBZbKAJjhygXy1lgmy1CwxS7BvGrKxRlOhzJR0poJQJ\n3eIKA5427l0WKgoEIdYhGf1N/kXE2dv5oBX5UA70GY2Vvkg7TC8F6MBP6AsK\nQmcvpbc31he2151ctcGRST/4hT5eRKiXJPe9H0xGhqdPvHBnf6Jr1Kgn8eNi\nJH8rtld34VkeGjjQ5t8w0ikeHvXzsXVRqa1+rLNsf4OtR0l0bpdZAjlH3PAE\nWIUWjbMJXjkKQ2mMNWjccoKQuNDoinJy9gAOLb9WDUHxeTiMtPVEsCBLyxwe\nCqcQ7p/nYKKdruueGYZ/0+wl2wDCVf9STb3i0tvZ+ksaej1ANu04hVgT17H8\nPcx2H9mUf+wotshOlGHHXO0bLmKkrw4ZXCZhlkYnRDfGptJHeb1WWvYpuc1c\nWTyABnGEG14iho3KCXBZHJ8dMagSSvObrZLsDUOWntG1rnpioo6iKChcWu6r\nMOB3KcfsG4cuhIHx5ZMXFmDFSYc9IcKB6YyuXlcyj7GU9XodMegevL2y0m4c\ncdIh4pOQlRVMgTmVHpfLJMinhi2Xs9gBXAoNM2/HvfL85rynPuAnBEo9n3Mn\nuSIFXUvnapsIkG3U+hSS0HsozuI+ctcskJyewA1gKceww+DyMLc5U7t9ZfdP\ns7De\r\n=Ejgh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/density":"12.0.0-canary.c73142a1b.0","@material/touch-target":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.c73142a1b.0_1626201850335_0.6696262536133477","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/icon-button","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba82dd935ab44c6babbb5a73579d4df52110b858","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d923db73a.0.tgz","fileCount":37,"integrity":"sha512-NUaqJ4cPHlFgD+QtEAXkGVHeZWu8Putej1q0kXsWzDeubGi0krF9pghrZu3ht31hdrWPZhMxWPYLBtQZ+hZ9oA==","signatures":[{"sig":"MEUCIQCZjoWz+DVBYryo7mRihpB4wqzdUeoHuqY+Db21cbDJDwIgXXMtWe0xuHj9bqdTLftbDOTNVmVKqkDvp3aLpcjAspk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1iCRA9TVsSAnZWagAAx3YP+wQX5+Qw/+gvRGNxMn+q\n3fvbifS5l7jNJb7nlGV2y4kT53MxqipxGFoQU5+aFVw7nvog/sdCZODBg5yN\ntcqFe1MLX60d50JAaE+1jGLmLPXIS80kuXj0jD4KB6dfgtO20178tf3muab7\nQMawO9/Ftmiqk+aqiSIRO3hHzESZBE61LqmKuacIHMauzdl5juKVHns0Oq79\nns08TEmNALAa+/gsmMhvZRjc+BKlfCKeg+0WNa3nxDfT+WRWMfMxLUeQqOuL\nBmYvHFGm+Z3tVR2tRmbGdBwNg7k7gwIBl3B5IXYW0TzkAFE3UsTKGTPuJSG5\nvJtywUljTp/dvqHVqFTZOZ97rzGdT4ihgYxxRXdnQ0p4/PnGRV7fIZPSJqgA\nn+alWVRVIQRWnX8JxeRE7CxCqUuw8xvW+BvXyRAHRV9rM73jiKGk6T5vW/Rf\nheRB/iLMzTiyFUjU+sQ5N2ORyaabSvwonMMDM5nTSZTNKgu43qKfq/Ob9JpD\nt+gx5rwd3MlCx4MjsqQYUR1Ph4ky+9IG3+mnGE3MrlDvGD8RRaRzJukvpzEW\nbpBSamEzbFvx+dGfTWyPMRoscdqDHFWYRi+I9p3J2x4HzF4z2X/B9tIiM52T\nGh5MqLAJGkAuDk4H5BXSqX4EXClPI4yK9UHhsVQrKpAS7Pg9Sf2meRBcnFLb\n2ZD5\r\n=VH5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/density":"12.0.0-canary.d923db73a.0","@material/touch-target":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d923db73a.0_1626209633942_0.9174454895901047","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/icon-button","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3697ef049e4f24cf44214c40f3d728c94264eae2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.22d29cbb4.0.tgz","fileCount":37,"integrity":"sha512-2cKO9FIEYwQqd6qlvuC2IbZQ3m8xvw690sx+H/+1UFs17TY/STDfJRj1p5qf+MnIqaiz5jsoxQemuUkcej+uBw==","signatures":[{"sig":"MEQCIEEMcFoELymdJfuqCjhllzh+ifSNbOAurEoNykuIOI7hAiAYRRrKWzqLy/2tmgmF8p8Gx/fOZsPv0diDRFYnngXr4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiyCRA9TVsSAnZWagAATr0P/2yo7DeuUkCu8Ex3Bs5f\nUaI33ClRFbLH6E6edTFQkKLREHW7Ebt2TtH3h9XOfOUDzSs3RFOcNtxTgOZ2\nujMrkX4xFt6uIRnJdLw846x9GSARdQaTCvH6SfdWalV5saJwmvnfr7zbNciv\nMCcG9+6470JjpgaxFH1MdKdmcNwPNmEkpnWJ/XWg9jEs56/h2yLVE/i5FG8W\n1ptcfrL40isl47S2+0czZ0IzpQ8DYqJVBr4BhrGjsaeJHeBKszVYjcPx9l7b\n9qqC7EQFlZFs+7HfuTDpFh5afW1J2a9T3zCvo5BO2XOHWUbI2qPHhsL77u4r\n8Byb9EwWRnrMQk8PIONqBn80k3Q/0cyIsaY5tMRFbja40FhWWf+vB7oulP4F\nmUhY9s86UDkWfr5/rbdvCaK1Gj926AudkOd4K/rLAT4A9+jVfPb5ok9qrZ+k\niKxcr7EtrNyXlrkuvBt6N29gZfdbufhVoEvX5itAJE7oZ1bAyuuAEZyun5GB\nO3nFfc5w77618iS8WtyC1oIzOz/ckm/mU+Yo2oJMAxaPB+wt8mMJSMOLmatT\nlWkOBXaxoOY2M9PsJH9u6ofFJTNX+Ot4QYZvCdLjTgggfLkVYTVza63Bt4wA\nL5JlQQXODGtpb7Eo48mYq7L/+9o555uTP/ldpGK6TY/eXPuRP5NUGkVq8zMq\naS/0\r\n=2Nub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/density":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.22d29cbb4.0_1626216625630_0.1734360845867926","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/icon-button","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d0262c9df15d4827f402c23ddebfbcbca16450d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.2749604bc.0.tgz","fileCount":37,"integrity":"sha512-HHGrimdzrlNaqDVbyDLAx8YH9RxLB12YBQvL+GDBCjS1ke69cJTu8zHDC//b1wyyiXHBdyh5Wf/X6LD5DNlcyA==","signatures":[{"sig":"MEQCIH7Uy/3c1TZAaFFcvuo1o/E9xqNZhygqxR8Ig1ti1wRZAiBB7Mpv4A1RrTZ4+/lLCaffj0s+BljHUwMzO5kNc9FdDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w8+CRA9TVsSAnZWagAAeX4P/AqIb8o4e8+gCbij2wo/\n1Tuu15tAO5/Ad4PxT19LGBnP9ow3/zhjfb/yCdXioBNuY4KEu3+276OHNmlj\nKWhlYlLuGN0IfQh4DOUAEat1VCfvpm0GLYMugluTwH6NNvP81pptVuipECVf\nidW1kW9bt0vjuJ6M7rfvugSKLHyFzUAWNfY9mH0x+EdrAdlBIk//MSYu6Ux6\n8mNvZ5n9DH/BBW4WeNojUHRfgcEX+Omjm6W812Yd75uIVHPg/g+wu9oZOV15\nl7zmoSd0NXomWx6x6cfsB8Zk2/AzkQjhCE1WBO2PEune4m2wQCRb26CzFcFT\nN842oWenGWjgt+inUEP9LnQUR7uHsmeZeXuvOR18dGw1lgA4PLmIxA1ru8Lh\nF6RnlhzWYQP7M/IrxA2Bh9+FodCmaoYEDGr+wr+5+SzRzpC672je6/bH1ubT\nCVtsCGt+p0tJSJ1O4LmdEYAVSIyo5MBBuHNTzJ03fqsnOPUiXPy2jIOTG1Rj\ns8Y2xMwvAcwYOIhcFOsIe7GcZ70rGZMpaxAYJ9Pe3AEQ1VVKSF7A1R4qkPeU\nq1FZyUKaB6FTplNYMj9d59f0O/1wq0lAyBlDBnj1z5EJEmcKjWQMJUSg/Bcq\nMkh+NG1d4M5Ez/5uf+E1PldhUCcKzRxvjHhFhttXETVvuo8D66N8mcRgMBhm\n2BKR\r\n=Q+uh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/density":"12.0.0-canary.2749604bc.0","@material/touch-target":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.2749604bc.0_1626279742131_0.732759504445899","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/icon-button","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"038769f53bde413618fc9dd2da1db5a61da0c345","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.e1703bed9.0.tgz","fileCount":37,"integrity":"sha512-HILblhy2Db1RktbxEQbH6X4zuJSDtgI5frZkrt+9ik8NDWykKIp6IIB1MKraHjpiQT3BKiT6Lxrc0Ypg7DOg4g==","signatures":[{"sig":"MEYCIQD3UNAblsSP4dEioE7TH8QrslYul0M9v5EmyBS7s4ZBwAIhAI7aTVOigNFuMh0Ic/0NHF1RfIshBMrVlVuP1plB+UNX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uSCRA9TVsSAnZWagAAt6oP/i5suVrLwvm4SSlxP7+k\nN/WUEcbyud/v/ebi2yh/aOeOXn0Xighnuyl/LNC3rValIdXsVpcTujBrCQga\n09vlKlD4VsBSubKbsPI0YbAR05Lv+r4mL71J8PcnmGxLu0sMA/thDh/fPsEE\n5WsBPu5aaomHb15N02j05HpaJF4qWxr/KW1hxVP9lSuSpg+O0sL/Op1eWNRL\nIlums7mFzdhPgHBTNZXfWXT6mjDXhkHgX9z0bS/kx4r6iM9sZ4FYaO67hyi5\nmkhRA+fM8FvyJR83sC+oZrwHDyhohNxzwaHMR4aqzC1kFdLrti+RPyUbdqoY\nINVg5zyzWR5r/ECT0Ha3XRkvd317HOqCeJpM6ih+u7mrKdMHTmZuWYED33oc\nOeYtmnPLMwbluFKMH7djZW7fi1QdRf4mbuyN0Hcoy/bWyG7HBgHl7BVGcJtE\nRxtz6POosipj1Eu7ffi3jJhqDpFBsZVaaY5weS5NhfnrytI43B7kEwy6lpJC\n/aIkZjZ3XNtrPY/dXIVIDvQDCRIZCfJBCZrQU5quA5QpEA6eZ2PHUH1qNSsw\nvWppAhJ+M4xei4ISVNKPEJ+4vtkRCuES26AUhpF8CmOBIwukwwncUBsckSNs\nxel1uUNzEoRbwHnDkRBOp2UIoGV2hzUQOXfZsCmw+kD/QmtbUtLKZOTKHkb4\nQ9ho\r\n=UCp2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/density":"12.0.0-canary.e1703bed9.0","@material/touch-target":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.e1703bed9.0_1626299282407_0.0459555194292669","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/icon-button","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c107e6350fb6c1e552bc641deb3639e1cfd5481","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.de48eff0d.0.tgz","fileCount":37,"integrity":"sha512-/ILoJGtcEZEzP6rAUcvRBlu7H6jBV5POGjs4nlsy+AyXygcIFvnFzyiUPWKfh93sRt/b7Dhf2kCn6ElF9jrIhA==","signatures":[{"sig":"MEUCIQC76XjIrAgXgk1PFbRRJk7hWeV5I4rAr0DaW+a4S84R2AIgYl0uodeDdCDtfk7rKzwalUo1tXJNUoFF9kmGwmQP3lQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Gt2CRA9TVsSAnZWagAAfOoP/RDSX57pVotPp9nehmSc\nJ9uAeSLAgg/cjCjCiYPecTJ93+Ak7XFG45JalFMxNCU/XxkOBYoRRrv4xd8r\n81+XfXW41mwzIG9EmfjYgyEpeMzHDSvMn+o8pJArXi3dYn6wbpwPkLH2+c1S\nfpeXLvgK9Y89she9BvRtVhF2SYNZl4xkL7xm0S0KlPmBV0YUhCKiOlwF1IIa\nF4Vt0bgvPtg+jvfLlfAytfU7uTHafOa0oHZnKNB2+EUZIajn04mtBHRaefyl\nay0dCG03tCEzhZLFQqLdQFZ04B1gral2TG0fXEMMWBRypE5niem0YEBbgkHY\noD9ONjFveBocQuPcbLdGoSO9W77kQJxhIvHPOgK2jkF8qZF7ugwPB3PnxOfs\nfv+2KeQTGUDq0ayTWhQbSZAiK+GLLdrvThH+6VcRqi0etUBLnGD3+7L5jLSK\nRDMacRfVtZxT/O01RCmgTGvLNwQ8O6hpuG9VvLpx5R6SDLq4y0epdRL2ZUdk\nDXU7dRlUnNSxEUUYuU3D8Wxcb2yKdNinnes2vBvc+4iKJ57V1c1nx0j11kie\naLQzODk8zb/leMT49DP30VC4WpwoYJbR4JyQLlD/ERpboLaaV8mVDhUR74DL\nnNrxuUNHfYcxhZvT/4aLnkKS/Vv2xhoxu/8f46Z/iZGNAE//RzPEsSKJUnhD\n4sH4\r\n=sZ9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/density":"12.0.0-canary.de48eff0d.0","@material/touch-target":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.de48eff0d.0_1626368886205_0.9860169386013922","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/icon-button","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee1db99819c27582ec8faa1be201e2232fd08538","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4f060adc5.0.tgz","fileCount":37,"integrity":"sha512-G8ghazaXGudXrjK9TGJYcxv8shTkO8JvXS0RsZ9qawdthISdjtYNQtOca+izozrxmYH5blbvgBpA9xeqGZabeQ==","signatures":[{"sig":"MEYCIQDBvZte3ZKkaZGjG8ENb/83R1yRBt4mT7p23SrbA3vM3QIhAKNCBo0CbOHKtePOi3k8h4WBbv7ShUafVS9fiv8VcD2G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrQCRA9TVsSAnZWagAA8g8P/jUsmvWicjlegH4FIMo4\nnFj1oMJAcw+dN+ic1mEbWPLXYIRzogU6v7LRlpuwedE4WMOx5vtf8JI4Kl2/\nWb/2jGRSjvtzQmx4+FbCdhKiJ1uKwsTUkyqV9neJuNwqlABUaHhTiSkvXgSx\nzes+gl3UWEhzZ56sLFDg0773LFV4+jjVVKReVVXKuzrDcGfHHSmkIVo0WYCe\nEgNQKsiTP64g7yUFU4XLblWXJlgVnsG3xVsVLca+RFJHfQSqtoVERwBlbh3Z\nN6KNGw647+93C+V/i3WkxeSwlMbFejb2c7vj2KA2rL8RQuBOfxAhAW26d4RO\n4DeA/Pe182R4/2QkPO9ZN+jdh27rq6EWhSI+Ckr1OfrVYLvMA69QGQURxYFk\nyT6ZNcDd+yIu+h6lSqYfw4xDd13yLiNwg2eh+VEZdx34LJ+vKtv/AIE164Aw\nwZ1nUuxejxtx5GXDOc4rDrB3U+GelxC3AFwhiZzfiZVt2D/1L88Ny/npt9AG\ntxia+Ww7hZofywEcJ53l7duJxq5cP7w7Z7cSEGuW3d8w0qbFLT1IJED/7UTj\nYPXTL3D4Hx1+PO3WGCcBGueCSQ4oLkYeP1pfqDaNMeC69r0dJP3Qc+twV3ra\nDZyciwwK6K0ECA5ZGmngiy+1Js2D2AGJHOkq/YaXPjL3BNUMgfVYM5wm0qAI\nIjH3\r\n=PFiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/density":"12.0.0-canary.4f060adc5.0","@material/touch-target":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4f060adc5.0_1626376912713_0.6506600851538258","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/icon-button","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27f96678a875c3d782753d69ff0f774d1256c43b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.bd25779b2.0.tgz","fileCount":37,"integrity":"sha512-jWUcSNmJtDNvbfnvvMnymjoGK98Qf2PrO36+OkS+MDR0dZpDaWCtE44E0SvRTwHkMBCjHXA1fPLo9b9toSqdZg==","signatures":[{"sig":"MEYCIQDWag8X1eAQX/tAUiK/K05UA6IUf4shp+FlKuGl3R5UxwIhAP5r8d5qkM74IvEJn3A8tTPpPCH2Q0W08UsGAoi0w5N3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2pCRA9TVsSAnZWagAAv2wQAKLMTSRNzBjSgrCnWQ7j\nKbZWO2DZ+LsFla3aBbohzubHWZY9BL72G5LAEfTh1Lw63WQZmQcBXtwpwMo8\nS/+20KaLNDWJ2lMh+NqTwtLuUSjTWPKUOZ/hyZQovY52C+ogeQIA+yMFO10X\nkDl1YXZ/KNIIxYLDZ2eNzyiuMYNKUoDNnfQvxAXm30uoyC4cXr7BresHhvWl\nzT/hc0N0jDTAJxb9JRncpRV5iQhCbtI1ydEaLhIRfE9vGkm3Gduj+XkFnvo0\nUtImgIMH4kMLtp5kfnade3YspXshcitrLemvLPs/el/V4T7b9uIRwf9imZs3\n9TjyX1ICIPXLj48Vfw5pH3tLPy9+uBE/3TwHpCWLGgQELGXqCNCilwYgA3VN\nGD/pnxZ5pVCtJQIHL4MtHZHoT9pPrNn/p6rQAbbZ8YK/t9QW19sCYodQQfng\nf8wig7el68NdtbWD8sLYMbgc2sMf8ADyeX+U3vLlYCBQw/fSpSVl3AvqwrlN\nkh11LLwZ97LaLgTNZISuXNL6DnvRAdbwsf2LgufbqYxblaU1v1fBi0zeIlXy\nGGvKXjxlMRAoRndh9yLjrF52SDE9yVhOGAxSK3uu1EttYfDGsd9cGPvpKkRk\n06VSKWqy2+y7izRRVVFl/ls5OuCfriKdn/Af2PH1rCQKcP29ad22cKaGWMCQ\ntXcY\r\n=g70x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/density":"12.0.0-canary.bd25779b2.0","@material/touch-target":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.bd25779b2.0_1626381737032_0.3395234039460393","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/icon-button","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71e670d481cab083aeda9243cbfdb4d626532e04","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.9f68a932e.0.tgz","fileCount":37,"integrity":"sha512-QseEYO8uN+k+uYjgKNPDRuf/sf0EZ4OMz8zaxKB1UH/W5vtGV792JatDxVYwnAcUgAfdWwBFWtpkPNIV8XDqRg==","signatures":[{"sig":"MEUCIFIVGciMTEg/EynTXlh+XRKMC65LTEUj7LQ0gGMYUerNAiEAwPo5itMiqfcUWQIDnr5TGKkOP5wTvaKok9KBcuff91I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGMCRA9TVsSAnZWagAAfX0P/0msskYdofMO3U7boWM7\nHkf6OB3mjIh8wHXlDr0DHIW7b6RE+GJMtNQIsVcWv0fN81ADypIcr8QcDowc\n5GIZi+T37x1pFFSChbwzPDeJzIYcd3p1h2XJHw5FZNs2wr2gKhK5oDmT69P0\nlKtGBK9afEYRmnCCW1+9mvLUodZBTzIN2jeyq9E/lmIyrEfFlt1Qkwl2TibA\nQnafMhLUMoi/lHFh0CEV2F7S/BihKqK48iIEcakPax800LyKEo/zsnLe8ruK\n9X65pZeAnobkFBRkZ7CfWkIv3eAEpb5YXgY4Jf/vVkN7t5Ros2Q2eO71LzdL\nEZ8KBlxSgGj1YHVZhvNUCD+8/IRu/IkjD195sJzKK2tIesRrgcApKO0ziQzW\n8dhxtFTM9QUTaGlp/lb/O54EvximY1xd2N0mc8Qg/drdKQrMPeOVDriEaGjh\nLFAk88XMV2aB+WBGkDsWVGDgABVfJdOmECMeJkHAEg5ZB/qoyCmFjGJWpCHT\nAzL1q/pQSvF6yWzAZfv6AzVDuoi6psoq9Q2FiT5oNCqI87NcNoNsEjR81WSP\ny9YqJqceOgxZsVbyfBYAlO/dED5ZStKinL0dsouQXYyLrSa1MU/fYDoqN5g3\nGHGNjhYQ53swmJ7S6teCC4HKRoZRIIdRZAjFEwZiSbw9AGyl92f6Do7ssvv9\n0kMG\r\n=/aMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/density":"12.0.0-canary.9f68a932e.0","@material/touch-target":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.9f68a932e.0_1626386828177_0.22993941695075693","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/icon-button","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"590154f2724d832acb6eac6cdff93187d15f833e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":37,"integrity":"sha512-ho89YwZ7CMg6ZeV6/FAM0xJHAplrBfR7geoEaYcCjs/GU47iVL14mNFyG/Cp9Ykqfi9HGtVsCHESe78GBtb7eg==","signatures":[{"sig":"MEUCIBQOwUFHsBLFoby2zuRF6TvHXpKpYoirrI8+B5GU+fwGAiEAumTTfkT98uTI3k8fVSDulkpX2kBawOi5EN3PCRrErtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5zCRA9TVsSAnZWagAAIXcP/Ao8G56DVXffvxsSn8IM\ncGorQ/8es8UY8j7Fz9TlUat1QVKWZRo/9S4H99REVLbtlXW0XERk3bdMmOIH\ngdonbBdy2DGOYUGoXRtIbsjBR60IpaxA1GwxMiFg7TL2Pz30Be+xRJOrnX0i\no2stMFafNG84/ugftqahufdxijbb0ool27y9tjplaOHW8ZdCMiYMtf2gtVyk\nmswz4WmnGUPVirvlPiS2z9X7yFR9djSSAc4cMSSKtrvFNGMqFy6adas1XEfs\nlz1PiN/mHFNdJX0FCsGRVqbSL5ArtIakt3g5ZdMZn8YycjcmOH1erayW+Klq\n/w61/dhzuiUX+77eG/qgNWwwd/CA4qyK2JK4wx58+f4uOsJJYPVR/wJc1Nfw\nA9g6ea/nVvJkFwgQMNSpqfGAMs7B8q6gep2ADNzQbkBi5VY1JnoRiCrlA5ee\nxpvLXkpEl468cdema6ME/wTG+fUtlEtfMuc57BWMcjTgYKuNNT1BK7Gn0e68\nPaErXGX7SgSeNTvnuy05iXS5FnhTPJ/xReCSVq9Hj0+CUCPwvoCJecu08v1Y\noiOFk7+TQpsdhKuKQJyIpadiaTqivYc4Xrl18kAv9hCgDzVp1CZRllSTP2dd\nj0WtHAIox3tMQ3w+0W9aVZc9FJfbATs/EGJhNIImsKWRLRMvMzXaMwYjdgnP\nLhyk\r\n=8MvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/density":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4eecdeaf0.0_1626447474992_0.1534213363422352","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/icon-button","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0f851a3ca68e504ad274ee3dc8934c57a0c7887","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.7239684d4.0.tgz","fileCount":37,"integrity":"sha512-zSp+xCvdC1yW07pIEC+EdW8FpgTwyPqkayeMPDv6FBwS0G6AN3TrqDagqVzVOAh9OlKHOZi5bx9ISM2yMdkEwQ==","signatures":[{"sig":"MEUCIG95ZUqpeYIqNZqt4tcns8IJx1VSYFJmWsHonKKAhYkXAiEAhAaSxH9ju3ACKmOSFxJOBqwptvmKWWAmZrbJx+ee/8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azKCRA9TVsSAnZWagAAbQ4QAJRrpl9MCXlfhvRi3bw6\nEHFpWUtP2r+aedBT/gDYrVnmw5a4yaDoc7/5VrMmopcs2ljljADKlZWF8p36\nCzucUo6jhTBgSXP+vXmAkUFRW85NPuojdLJE++H7AqDjhAmbblw5IiLKCUIr\nboBC4bfeUnaV9BXEFPm70oKBBtJMo4eKPjwfHl/YWXC3qsHjevKqBJ0FnveT\nxg2EKX1m++AGbHWv6l1v9L5unnyKUeuUK0Q6jF2WOeFGSypYMNBDeGKdCF3q\nXlf7NYRTMf9Nt1KV4Aa5YK9aZXIKU9xJXIp9FjAwh0belxzaLrvaOjMzJ5kZ\nMJu/Wbkh5Ghh8XwyStyMND3wiBMfNeqFkkwdqapl6SASISGEp/kzfN3C0IF4\nv3dVkkJ1AV/CR4OUvbNk+Z36Rb1p2aUuwnglW+Fi9L/c4t5FiRXA90CxszCJ\nbOJRPDooV5aMFH+KZL4tx4WvyxRtgPYANOsPQbsbzwwSQYiTi3rlMBiGszpk\nfPFaJd80jB02SLQ3BsbbsQ6VhGG8LYhENLJKmq+uBx8mekR54Iy7SxveAqZq\nk0TIuX7W2UCFLjG1hm8dVI45njhl9BsWK3K18e+A/PqiAouqW4dZwVjuqZYZ\ncW0ssox/wUqmGnI2vaZpfEEgqcTJKBeA9iMRzP0qIy6aQeP5rO5MSm/pNShW\nMdZ9\r\n=pYLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/density":"12.0.0-canary.7239684d4.0","@material/touch-target":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.7239684d4.0_1626451146038_0.2387061482929198","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/icon-button","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8733c361f6e5bd109e6416e7de91c63db89d336c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":37,"integrity":"sha512-Lde5JTRpIDNLti3vDk1J5FzrP8YGO5yon/ffnG32oYXy+KJv6xP2h9+lFYduMvF9jvcdlmUPRXGYewdObNmPjQ==","signatures":[{"sig":"MEYCIQCC1u0hO+sbVYUKzDSCXARoye0q9g7twG10Rv8eWvgB2gIhAMivf/aArcwywf4+gDy6FHArj/JBBBQGNRqo9sVzp0Tv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBHCRA9TVsSAnZWagAA/YwP/Athb9WGIWhTCvCNZumO\n9tZd68+zB01fQBQN81REMPSeUD7h61Fwt52jCjiB6UMRuOEEM/1vdLl8uxHh\nSB0M3vq2VRsSf2MKFgQHEAkNaE/n5LYpE9Nu9wzfDj5JTfFUYS13Mw9BW/SQ\nD9TATuzXsCiA7I+lcTtWuZunanBV2trUjxO0SLM26+l67aE7ZaxjZoc5AQFz\nsKA7keZSrGb4MGCz49C66W5DhCyB4NfQ6Dx7w3PKgzp2QQUv8SL21R4BUk+r\n5EgKAqJWWYEhwUpPe8bsTKQpusGmoJ3z44s1DXp8dbbUftY43/mxzkh8kD3/\ngF7Q+N/bGjkw5d6JYP1cRxFAAq8yFZJbtjuw7bO0rHqxOJi+gluyt14qlIRa\nmCyTQf4fQ7fOGq+FI4YljSlpp5F/MrlHXDcD6tCod9cBJsuYSQ7J80tnsmEA\njL2JZ+1qMc0jnpnQctL5SNnO4s9pXJByyoNE8oxcK6tuENdsWHn1Zocac4E9\nq5NpeBIm/oNsgVzIV2kEuQ7ozV2M2QxTB4MWrkO15kX/SPBBBOlrmrZbE9zY\nvvLvEV5847dAwjPfGIDXt45ijmKF0fnXZ2snOLQMfd3bBH7kd3xGx+OgVtzX\nTi0icawh/pbN9QxZyy509XRb6DlZqfCRh1xb/0OxXHOqQI/TmkFx9sa51jwX\nwNH4\r\n=v1vS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/density":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.d5f1f7c72.0_1626452039245_0.4452519909410475","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/icon-button","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"434a5d8c1add46ea6f58bd6bce9d999c6984b9f0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.4d95812f9.0.tgz","fileCount":37,"integrity":"sha512-ORQSLDM5lIsXWAHKSuLOSnxEerof7atKYZIn1xwLeXzK8902ovBDEgRVfBjM7UT6h7Vv4nnu8nnHm5fF/l0lHA==","signatures":[{"sig":"MEQCIA4gDHefx7OkfzHOiLs9xEfW7muKt5BgJ0IdDGyUnBneAiBFy29AXT3Ci9KXlQeDWI0eI/BzJZmx495C9R1bepBJxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFNCRA9TVsSAnZWagAAZ8kP/jmKP36kQh16tO8OT7SO\ngGUvXuTG5FNwhY84O9XHFqKIo7VqafwrLh3s2TA+7kwOx2oJxbLDwRkyg5qo\nb4Kg+qO8+RZbR1VMdiYdVmBvfAUK+T8ZVatJnrsCLK986PfRm1imtoJ2KWdo\nzC5rgAmnfOYBrCLVH18GxN5zmilhhW9edcDTamGEDDHrhFa44qmjREgJoo/i\nkR7SyHY0uuVauG42k8IGEGICAC7gXC24gE8Gy5crY7bjVfMJ90lLvJRn2yV7\niTgRJ9V2VS4NJpHvF0iJr8XVOlybHEIqdKTtfvGF3ryGKBdhYDNMxm9+Zrp/\n2KJas37VBe0AsgGpQjH2y2Ru5O5GfOsq/mV5YhywEn/lNdmdBFhRiImwr4vK\nO6EpYnIQUxiHfWckBHvHGUHsIZGumVOYbXPIvDL+e+jIhPgfMJ/FNUKtS+XZ\nr2aX2TkWbYi22WzdgvD6LaxsK45EAJ92CIMl42Y+o27XLz/KVEeQq7Rv42IU\nqw1coE3cLfrHswYkqhZuIvPUVFx+MytqwyMKsOdCBfJClDkF9eqbgQUEAByw\nIjox7sfSSEIvcQB+jq2ZAc4yxuNeWQoIR9fEdxaig7G99B1d0BH/xJX2SAnZ\nxKqhzKCsWHGOSyk9l8HX+BXMfA8YcjkLOGKQK6VI7tygFp9n/qFC6/WzYyu2\n7Hpu\r\n=y1Zl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/density":"12.0.0-canary.4d95812f9.0","@material/touch-target":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.4d95812f9.0_1626464589157_0.7922856192510974","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/icon-button","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d74b5b63657839e312bda8ca8c81f996d8b08a0d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.38d1846cc.0.tgz","fileCount":37,"integrity":"sha512-ERFT+C603KdxM574/z1rwzmFwnoYrx7Jba9aWQsr7Pd2CmzX3GDudcGHZP1XS6JysGp4hmRIkDX7neDtk0ihxw==","signatures":[{"sig":"MEUCIQCsGOMzIKcDoe6e1uBzQOfhvsPPe/FPYpXCszTnSDT3ewIgXEPatx81KEVEFhIeOikAFcC2Iu8XUKm6SPUAJ5uQ+1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cd2CRA9TVsSAnZWagAABsAQAITfv/uNjBiZhnHfbPWg\n36rY8C1D+oXVulzlnoYn1fCIrKH7hlLI/IPGGqAaDmH4QxtSiUhCeg68N3yr\nE+HLUQiuM4VE2RgsQomFYDOaw4VYd6XF81tNay+0kiuWzuv/+5kJjJThuGzn\n6cEfBluVg0vACFBvqXr0L8Q3BbZEFWrJETANIVagyFOY//hfF9i3y60ZuVKF\nvVZqxtPxGy30hHN3Hb9jPSwqbZ0aLu8jU8TuXc5QqgUt6vyzfQ48e4MEqdV/\nkeOzCM7tG4pclRzlJNEGwd6/r+f5p6MDITUBJkq6Sc478nRyYU2w2QtTb8uw\nrGi4W4y+JlU4ookk9442qpzkV6WamCpmkgajaawm91d4tf4OFusdWO0oki5K\nxC4ddtkpBU5Slkb/7TFbYXOMGsG95lLl/SU995NrJB5dvoyXFztKML+W9WFf\nCt57Q2g/9dYZ6bj3BPM8t170a9cWso1798YOFhNr/9CX8RBwE8Cz31hhTtlB\n389F7uwjA/OKsTNifOAUPTTudUgwC1dr8wNZmTqpgQIuqvaGrf0JAhIAlYQR\nTPE0OGPwTlZAG/KO1Y6XMcaVG8xPWJgnAynsyREY1yudpwqD2IT5y9HFSeH1\nL59zx1tGignTZwwkD4XHp5mpedwVDVvuuHs8XUaJsvEPzDqKM4wZcCjQ0QeX\nDvAf\r\n=FivW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/density":"12.0.0-canary.38d1846cc.0","@material/touch-target":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.38d1846cc.0_1626720118664_0.4752642070227069","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/icon-button","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0cfd223932148082b5f15556515c03168677b20","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.3f691eccf.0.tgz","fileCount":37,"integrity":"sha512-QqoHJ9glg/oXkvr/+YQQ6qWHF5xOHNJiIqdmmDJfrErHoNMJvHuXm/mHFmmUXKGnt0YBebcU0pGt1hejCd1+0A==","signatures":[{"sig":"MEUCICpRv2Dtq8H7kSLqZk+IZHRUhEmBvw00f+s4sGOL8/y5AiEA5t87x683ZgH1N+MTIPBRTPqFUx5P1wW9co+54AV3ICI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUMCRA9TVsSAnZWagAA1NUP/iKtwujzeaZkFto1aeOB\nJj+utT/dbEk6ZETKuK59UL+02AW3emBsrnMAK5S0zlCFo87Q5RRs+iXsMd1R\nVD9Hv7oIEBsfnIBmnxMOcG9e3bxq7nJsSSxofV637+3Jjn2i4X2scUKTxnrH\nNNlOpmkN14v34lunX4MFFAazHGdKqJA4WpdMhHP/w2TnlXY3PMatOpvGkqu8\nlBKNcwfWpDo6Fvpvgk5FmY5v6JU6OncnuynSP2MQtFUdpqiWeMt1h3xyGQGN\npELH6gFhZ93mwCTFY8JCXONHsfNxMzwxlPgAt7iv4jZMEjp/gqwHk5vFnLNv\ncMhuRiuot09yBqpdfDJrDXq+A1+hNYITTDnzSDA0rtfJn+HSm+yxBzlvRU5G\nAMdleTw9xs6CAgPACb58gcD8J5ibAoiP/xqStbrwkRR/J90YxWx2H5B4/X7S\nMqyY86X1AEMlLP+kA88svKlDzky6X7UAphlUhTkOFWkJMsH7cpTmkjJr8iX6\nlrGPjf/xInCn3bTDvEoyw3g/+CgJ0yYuKhPBGM6AiCb8m8RqA6JwqWNwbs+N\nrieU1k2NGZD5/82aEa6E2agudEfyW61cb4twW+yg0HKCTGa380Y5SBH7Eheq\nHlo2BkBBh2YltTA5dmUEIQd/s0bSqGhUQZvNPWQERfvq//Y02jHLLgi+XAwf\nqU6r\r\n=vItY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/density":"12.0.0-canary.3f691eccf.0","@material/touch-target":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.3f691eccf.0_1626797324479_0.03542647548679834","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/icon-button","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d006cdcd8e7500a7f11d5e35dd96d2d36de4bb99","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":37,"integrity":"sha512-LgLqLtSYRgd2hBv65kp4/1mbkmY8aJ9qajaGbnhfMp+hzQtc28CcSxJzpmyoLDKLibGW4/8FgwyFFyaMS6cyiQ==","signatures":[{"sig":"MEUCIQCj3L3PZ1CTuSqE5jt/+DMGeVL5NdPlpBDCOXgygi/+fgIgX0tsKYWTHY2G/X4YtTQc6BfUclPAtuNkJjtBceVothA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBRCRA9TVsSAnZWagAAx+cQAJGZ65MvQDy7AXPOgA7H\nMoM9CrtLs2pi5A1LIDN1oopCiVHHmCdlAYOMgEiw5laB4/p69KedpVVbWud+\nMjVH7mnpFwgliCQVNXP7HbYthGi6hl9ML6D/6A+QwLNdvw71eWgv30tf/29W\n/ZFCevzAPAi2HUBGoe3i30OmhpbWlQsXvwZsKD1XJhqqKHQhFQHiTA1reJKd\ntmZCmCeVqmP/ObqUU9NPQyGukA9c/UQbWNbAVtoKN/TQ/lWGzNyjQcPlCHXY\n5FIHCOZJtGf9r/2aG0FUTn5ML1EaLX3jrTGg6HFNgrArSC98OU5VDeJGe6OJ\nw3VgVILCGQjSG0Qd8KE/ChSEjtbjyJfZDg4wpOluOulMsqbxuojBc3Nwl7xQ\nhYisdQkqGqozhg1NMxZU8Ci6gmJ3n62jPUYtueyxGtMbYK0vk84PxVI4Xj5X\nnKDCaCCIKNBA76dg0yIdL64IhR7tuKfzIxdmXquWGlSfRkYutxf4dbMKUicW\nxe8MHZ0oHzSxCxxPJcrYMB5oR1eJL/G3IcWtvNGiXL2i4hyTYm2F9oBh1yRN\nAhSGGaiKoSRvxj3jn5Lin2G67KAnPbrzkrs3tIYZggqOaphhcw5Ss5SYVFEa\nRsDpRjnH5I3jStz7xJ9xyAvuJe4yqMP3HLgmRDhFiLA/80MU731TBaJPo2F+\ni10L\r\n=wjkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/density":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ebb5c73bb.0_1626800208846_0.9865715912901889","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/icon-button","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a74aae5303d092ba79adfa4bd679955bc7be334","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-nightly.778a0e8a.0.tgz","fileCount":37,"integrity":"sha512-eDi05YLqgkeDleMvSAfHgWTHslVoH11zKXL3+fwoY00KMm73xZVwWkBO+HhD4mJuUDK+SProYVq0w3cFzaMi2g==","signatures":[{"sig":"MEUCIAMoWs0WulQPpXzccqfiENSbWZMlxm+qHgkrt1bvg4dSAiEA6L4c4C3q4/+mbqLmVC/exEmqQm81W7f0Dbi12W3re7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqXCRA9TVsSAnZWagAAZaUP/0XTBHxuuQZjO3to8xg3\navBy6+hacHwoOh7GyC+i3yuGBrrknv3dNRIUlX8KXwsCC58srMq8zcKsIlvg\nopbEPTlAbgnwLOSwDU60tLDKHeNqTRJJJ9GwChtOlkcVDf8LHmtoZY4GxgvE\nRuWFNKlHoK+8DGe8ivaPnGBhBgJQWPzFN/dG6Al8KAOjUimUhZsPRHE56qze\nl6I3H5ezSnYBUbxwaw0UteWKh/4Bf4CeNNP7GFmxjMhAB6BtmlieKqcLwTvN\nTgdpKCMcG6Ub55rC3ydCLHRTvOZNZ/CwRY+IEXyHFS8vDitbCgh7fWk4bWJW\nXuuGiejYuccbZAtZrlZcczPmeco2M20qP7YjCMxIheaXsWm+X3nzB8z590K9\nbWDFM8N6Z33431Md2q7c6kDOk6oBSYhTqTg+tz/TQOGazK/VPQEsmaY4XvlE\n+5blY9n4hVphFB2TrOlXUCzWZZ5h11kxsPehLjWNaETKfiI5ExORXAYkQEIg\nOI/aIHb0MMsXeJxtJnoystGfQN4Cg+9sWAQeTMaFJV+qcEPbinqEmZIQLM8I\nDa6P4/MWcnhJlwSSJHHjHxal0AGtQzrNrMrqP00kUts7ZxQPN3gh4UFq9XbT\nNO8sB+K1pjy+jCxkLJBlr25IA8cbRLqEOtyiXxRDC4ehQP7uC5qD0QaqcwnB\nx8oE\r\n=wjUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/density":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-nightly.778a0e8a.0_1626815127226_0.3166198782839693","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/icon-button","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f200e4dabfe40910e1088efd8dfba160c218f4c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.791311bba.0.tgz","fileCount":37,"integrity":"sha512-QhCZnnpnzrN2VsZzFp4Di7A1DuBRUCVykEXKeQW55uLFsPTz8C5Q3tBxfwN+/i0LlmsdaWaDJzwxg3XAC7FtPg==","signatures":[{"sig":"MEUCICbEVLDEqWmPrugvrS5vDNSbgxYC/0BarJkFBi2uvJASAiEAvefo5Fkjl9qYjh5HscND0C9qWgEA4z/hzTasYLCp0q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kkCRA9TVsSAnZWagAA/uYQAIddphScQMTD0xL2iS3D\nb532iJavVb7L7ut0ASiFlxOuk5Scx4qKIiLlcv648FPZ6REe/kPoswDL/C5r\nhWnZSZEEhWhxuzH464g7rZ7eaFaqb6vtbSvI+JYLsROhrNDB3XmAMyKqo1rQ\nC5x6KFPD0Hpx3ovBqzI4ppU/fYmlpMjyL77Mphxv09489xnjgX33ZuTjMGuS\nhq4KSy0w3Jmvbs4RCgmbAiXV/ohxb9PFg0aWknIf3fiXPlpsCm0xz+cfVgUn\nnN5zVSSvW4J+xw+BaM7N4Q0yHfcOQ7AwIyOKSeRuhUNuWtcLg9PJPI/N5yIh\nzGEwCN3Vl4oVyILUx7Ja8g2C/QbzY7/fksjze+m3YGfRtGNJgw92DMEoJ3U9\ncnJcZ+NucUm8TCkikD6n08MjTASPJW9wt97hSEMRq0BzpbL/bODNsvPT6Rwm\nhNkM8USWIt5qcjU6Wx3ieDDEOqnUxXl/aPskXgQVbxGVo2/VTqFpPLR66fuP\nq0e+qDs8E5z/ZyEmHkokAGYTgUxt0dSn+EvaEfR8n6dWBh28EfaL3C/Y9OCI\nONaly6Sc/dmo5MeNzRo6BAy36Pxdc4RuhLo8Vaq5WJl3b0iL/pA1vzF1Q7Yd\ntO+2q4bwo91UkxiflB3cx3VnwyKfNTY+24q5Uv1wwuwpCo4qBaS9s3BD6Ej+\nblrM\r\n=0wJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/density":"12.0.0-canary.791311bba.0","@material/touch-target":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.791311bba.0_1626818852092_0.3853993179259758","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/icon-button","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42c13272e6283fc2d5790d93c538706c22d0037","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":37,"integrity":"sha512-YYu05KuCoMk68lFLc/xwERJtXGURdxOyTVJlDXXDmjJ0Qx0OdYyB51BJ/+Y285uma+ZLgHXMk1V0BnvVihyLag==","signatures":[{"sig":"MEUCIQD3+zMr/Gi+b7ilUsIsK0jvkEeXvoA/xZNGEAtJ7BYNRwIgH+7xOYJ1jFb34G9bP8CWrJS+dEt/3nG3MW7neqjWsls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7bCRA9TVsSAnZWagAAwrMP/jVKLIE6tkmT25J/Kaw1\nBJo+0y2gHVdU0NNfTC8NymIvSFH+N8nY9GXMiys9scUVIV0h3hGP8hWhmaHV\n6JZK3O9W2/PCj4v5jbVTmnT3R8MUbwAKJ7sUFJzX7+i/WH4k2MvlL16OpkOQ\njO6pzw55byKuvVPx6s7HZ9v01i28q+2Mr5IYJAl/TqeNOADD7jlIDJEz6zN/\n2d12jweO87b78/aXIW33XIlzQ/3mrDGslxAw06B2EY9ZrE24K0h7jZanUtz6\n7qwV5tCEfpbMiSJ+Dsz5ZVFKvCYj3g+J0XpuAxdW+0vzIQXn1Hdsj4LxTu1D\natlXbgvQg6eYL3fhcDEpc4PQF3mRs3PgSYDAwccftAvw+k+BUyyyD1iZU8Pz\nyVzMSMzIWSWRUZuqmDYEgZnVOKYafCAlRhPqWPJGcnnKUi8GXYnrVUHmZg0Z\nQ/VRWdCwfLwRfnJRAqdVyK2/gQEZc5wMQ7kRTX6+dBSYuK3mHhvHz7vAZ3OV\nwuLEzppx7v3Gomiq+y5UYgbGH2qFCpbPaFTgpTW/Vw1J0dqJ2HjnT/sNM6U0\nx0+OlKfQdyGqqziKXept5T8O6urjmCACALB5ATPJlw6mbyuc6W+Ev8IZL1iC\nBLAOSItWfRKL+uHTqIqca49EA68H7B2wqOYpeB+bP2lC2k576Hm3enXgx9aT\nHjrr\r\n=eQDu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/density":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.85e9a6ac3.0_1626881755551_0.8819809794772495","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/icon-button","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb805a85e4bdcb5acfbc54946b79bf5797cbe1f1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.6b0442278.0.tgz","fileCount":37,"integrity":"sha512-wHrLyQ8ftOzzg0oQ2fhhA19CxcaKEFbpeY4MBjhbnv7V6AV66EfIEpV/VWW8IJ8CJf0B8jbdJMkgTJuTt/FiWA==","signatures":[{"sig":"MEQCIHKXVT+WvbG3xCXNExtxuEhR52HqbA/mE73ebOLVjznQAiB6fLL+DFuTeW2s/KR813Za2GkcSa6P2F+TVy5BReVIHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxNCRA9TVsSAnZWagAAf/wP/3x/xJfr1RqNxQaak5Sy\n0pOEEvzPO52Qd0umVsjcVPGa+BJcEhqTGHj/F+5LO3eH9ZwiPEtU0PqgWfte\nN9/L6Qv8k8pzl4nW2Xxfb2U0SgmvMhCc879PBw+88H4A7rOMfgaxtVfrAG9F\n6Y8HQWEodViFD0wIwQb79wGR6+Cj/L5YYvVZqVmYEY7Euvo0KiqR9G7MUt1N\noGioip7pQI01zhE0Zz/6YcSNeB2bltU8ZBE/f/LZtOFjgH2Bn8sbTzfJta3q\nDVvHUNj+XMYLWpQ2TvvozokWf1o/28REAfWuoNK5t8XU4ih5od9ftpKp7S4k\n497FwNXKaq/PSZz/2MLx7g8aoWtB0UxWPUWgtxKeLRfyiJ/sk0kid/dCDlG1\nptBogpJwoYC3ozUrtvZ/Ei0bfPVvApMBPkTr6PReU/Gkf/0JYXD4WKK0UZYj\n2FKGoH33YzQJLfSkgVxYmRY8NdN7LU9duyEyPcUnlxpFiLMIlx3+y2BGgnXr\nyWNPDCkIYBYgEWLjFr41YdRtfGO5Z7Fnag8liuVggobkXUwasPITah5wne2j\ne3zfGrXe/gMGUdA4e6F5gh2kU5JHUtxFNlsv4oKGYo/zkutN9hzGgquDiyA8\nREURPzjtJPc/qwwPKqT0SvTIh/BoeG1sGcB3GC7LImByj/TJghtdppHRYC6S\n7o77\r\n=Yk55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/density":"12.0.0-canary.6b0442278.0","@material/touch-target":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.6b0442278.0_1626893388955_0.07675821790272574","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/icon-button","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5818917d40721d8f8ebf0953437cfd79b0a2a7e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.5f00e454a.0.tgz","fileCount":37,"integrity":"sha512-HoQ7a/fPP3sxPB2GNyD2QAW8hw/267nDhcegoPVSkmKsuhhDbKjMnk2eCT2DAYkqcP+BDWmITxBVLV5vtpRL9g==","signatures":[{"sig":"MEQCIHbjPg9AZjx3KP0DEJfqEWui5E4uSHJVkz0WRwIPMekRAiBwkAWlDkLKi1gEvWjbL78Xw1PGhk8oZ6MBkwW0ughtLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWPCRA9TVsSAnZWagAAEZ0QAI1GVOo0J/hFJmzRN/bM\nOhputPA93F+xFk3wTQQ6Xdg5cQlXXbItnT0ZR6h5zM8D+XMUx9Gf7Yk5Wj0k\nnEzHZC0Wu2gWswUNdSY9uGyE/2FlKo0PMVW7cvDgO5PpkVBbHZFbSJ15G9/o\n5WIWq0LE9sGKaKaQLRKWPv6hczJ8hgvd+g3OePIY+76chwSHw+XtVGNYYqIX\n8nwjCOGjvLsA3GE/At+ZPYfvvTabAMjNc0G3+DetGQiFpp3g224Cl5HusSzv\nwQmL6sDmQKBaTEt4CMrkxRnZedvmYZ3wtDKQN5sI+ClFeH6hkS1kJFPnA+Rh\n/FvJpZFI6JmYQi4/ooIQb/1vN9wqkvdnCT9fzwiEsWZYaEwXNJF5/A0XeyxK\n+c3ch4E5tRXBFuERbic5/g5gFTQOKLDtnIrcdXmWA9DIY2loclDtvkzgEX8h\ndoSWj92AZ2paYmHGI0IQda+4Q6Q6JXdALOgnbIx61wCYHOeITzNB65vjvTvr\n2qE1s1VAPThs7EzuRYw2vDSY4xWinCzg2PZuqejOhHyldedz4k+A9GOGWwRo\n5RqFVYqDaC4U/hO+WMIA2x6kp1IIdljEgPlGeqEIJmwaHsL4Cpn+yxwvzdCB\na0GRg9fQJvCSMGQ5B/14B+JzGfsdLbMVu3kSlg9wouDs8/QfQksXDZR/GA+1\nV735\r\n=knlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/density":"12.0.0-canary.5f00e454a.0","@material/touch-target":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.5f00e454a.0_1626973583149_0.3389085641064562","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/icon-button","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64397d296925c279a2ef8ed96058af0d58983a66","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.90e08fc6b.0.tgz","fileCount":37,"integrity":"sha512-Wd0EMJKG0R1kgVnEFb6cTQ6QGqGP0GJyQUP3SxdTzBtRvZXg8meWxPh2njfrHqFg9fAvW7bqRNAV7OIH6mgPzQ==","signatures":[{"sig":"MEUCIDgT0UmlxXd1sUaJsrk3tAv5AmCr6O5b5qvE9SvUWVqvAiEA0p4NH8MB497K84aP/BWgYxpuydFfXs6f6uAowQekS9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFrCRA9TVsSAnZWagAAcUUQAJtiD4kJl9l8YVTv0/i1\nnSpmvtPGQuQvdGH0Q1xkr+jLMb0wIoCGbgAH7BLSwoV0jZez8zCkUPQvsNsY\nKQgGu8OPiMv+qx8h1iIpS/re3EhMdYc2zoPCOK9LahEq9es0czytUAb4B49U\nymAw6y8c6RxdrsdI5r0kIC/PMUIaHfBV4PLmJ1VuHn36YNvQWQQ6wqWyBsQh\nlnQARAm70JWTXxAMYaSqrP/WnyD+QMb2fQCOXZskBh8RDWk+5dWLAa0U7KZx\njPedczhMcWqLgNUCPStksqKc/XZ7WO4BWVnNDFY0+C0+12TCDEIcc8Gu+wZk\nyo3ux/wUQ9ybkAlDIKyckV4WOhjMzoB+viw5IEU3QWz8eS7aLwwmycDsmfBu\nKmayDOhfgWSoeNGEGVaS8Rp6psEGfaxZ3ru6A2bqVUbzlfYZtzQrSsv1wdcY\n4sURpQvoNOvho4HebgpnE9LKfxM4Orwnl7DZW77z0Giv+nDWKeZ0BwkU4Oag\nG+MjkI8C48v6Sw18Ncl4KM8AT9LbI0W1F03icAGF067MkluyiT9EcJHpYJ8K\nWV9kXWqo8GfKu4joCntR2Z0wD2cy29JLSnUWbhYOaFnmm4fXp+0sRVLA8KzJ\nEKnYCb26mi/yQ7aMHPEunEaTYU/mo6j8yrx0T9PI6reBhwQqiAhPeuLteH3Z\njGmD\r\n=sM7n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/density":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.90e08fc6b.0_1626997099227_0.35110372978110505","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/icon-button","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee90d3c9b1a5bf6b9b9348826a1ecb7cd78d9c24","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":37,"integrity":"sha512-zf6GJUlftsFpq6HynibXOl17z4BCgt29xyB+IXqAwwFx1iJoQVPrVyoXzhsPLVPKXrAhw3sWIdE8E9aeSf2OKg==","signatures":[{"sig":"MEYCIQC/aZltW3pO6Seaa76eJZm/HW5ESAz0ToauGDab0Be7cAIhAK18IFc6LXsSKxXC/sbcdLLdjtVLlZh/0idIjzz21zWJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZ+CRA9TVsSAnZWagAAUx8P/jPAUzKxIrnjKgzHyFiC\n4LN4Xb2Xx+bYQCZLU0y2FE+glBEHeRqV12sH+j6uNDWLtU3bM498VZ3Vz331\nHo93GozNucSj8iUN1RZDa0FFi+FYjcU9Nkru2ltQHIxAYoUhaLFhx8Jnniw2\nustpsGWrS5eDoc42FTuu0YnExiQ4hH1Sg7LgCZYxHXTST3TO3QxJ5SYB9m9q\n9hYa7PkZvbiEQhGmBII9q9mZgZrRs9I20A/UNZWK0KD7cBlIhz2qVyyFZ0ul\ntU0F5PUpfaW3TZF3k0uYTGJiLaEeYAoLwCM6YLmx+eYnhKF3nuVPYAk5izmH\nrtvYG4ESx2x98JlovVg/QfRA0AFrrUYloo3QQ5s/U7QRTALJ6vlR0xVkndWG\nKQ64wZzO7fk+0NdbdpAXDsyam5YP56xg1SCbgC5URXre8XF+WvjnHoMTJ2eK\ntubj/ABx5hst3qizM+NFyezUaHVIxDHnhZope3YL3rHJ3CULPU4WWd3Gd0Vw\nd/9oSmpI9XPx5e4D8Jp2xHknXJ3REvYVwTpAx2ZrC/SIEXR+U2ASkmg4KllJ\nRkFf6B+ZCWYcH1x/PBANKKrVIM218eHhW39mqp1W30RI1vJHYKp2/JrNTVUI\nAS/lssRpiJHAkd9TV+ctGzJjLFdIZQHMAFNFLmLnG4e0gHLpD4d8x/rNzPP2\nBpB8\r\n=vfBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/density":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.cf5b9eb86.0_1627063934512_0.79092047375461","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/icon-button","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c388b69a01995cddb70163883d971136de816f59","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.3f36ac75c.0.tgz","fileCount":37,"integrity":"sha512-QXP1P7zSARid+UKynCATzsljU62gPR0OxIGUcoASocEgwehYLGeqPEKh8Ld9sq7tvxkPORpE1+Br9LpVYZqjzw==","signatures":[{"sig":"MEYCIQDlF4ZQY15NL9rv2vB4/TD+EiugTLDamT8qTTtrXPPXpgIhAKsJJFy+WxxcsnJtafrJvaPZ9/X4igRW+QczmAtTmJdi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wstCRA9TVsSAnZWagAA0SYP+wetUxj5X86pLIo1F21E\nFqRHRDCTozac83iSSYu9VJXN95xy+333u3bRhBD04uNZQ0qDTRyNLHxBt4pb\nPxVmrBvDAwM8a0i7ea4ePlnzABFjfEcGArRh3THPUJUAU6QOZeK5RlRXJyyI\nFiMioO4scRA0aeOlvrFSi0q6jrmKcxmxm68f3TyYHfFlZ72OlYNh9zXoaQxW\n/9boxjFFIuDMvwsyxN5nsxRNoDumIh/uI89aCrHEwCWbfbYvas6f/B63kixx\n7BGpL6iren05LCQiGUUK6ocuwhciYjCYV+OrY/fGrhpKRndIFsHWThQ5zJAP\n1xvG0EuPkYy3IOFjyE4BbYc4PkKs1yLPTrT5qrysszDbY0sFIv7/AcoZ9YvK\nIUWfJLuhLDl9dvMjMSHDJ7XVA87ABnmuE0w6S6tUP/UdhLMqGMh/cKW00I+y\n9pADJFeZGddD+xL02fXpH6hr0u/7RvS0Wrp5N80LS0u7GrJIvwPPnL9j5G6+\no6CkJ/iCesf51Q0bWpBFqEHcbgPbvQ9c10PmpPddVyKpRWZ5dAhGLIcW52Hd\nF9FoKS7M1prcVrCf4cQlBsUYHpQXg0D8Tui1s7V5x2bh+o4vKQhKiDS6SF6q\n6++eetA7oGjV/xX6TbkyU/ZVHvcwbSIMBBI7X8WRUNAv8qw65SGdCX0kiwXs\n8I4E\r\n=uDYh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/density":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.3f36ac75c.0_1627065133236_0.06079445548858109","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/icon-button","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded2877034425266983cc2c044f41806bee9fac3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.ea1e1b850.0.tgz","fileCount":37,"integrity":"sha512-clW6OnFDFlXRAXbXQATH1yTNqFqHd05hHdikCQCNLCDx+/eprn65ujo8x5C4U7sOb/qdLvpeDztSsJZD+I5elw==","signatures":[{"sig":"MEQCIH0hMGnoN5ZuNNGHHdvjTfv8ZMDfX/yoKOIPya0OHHujAiAYAS8bk+1gUc62VcKaWPtdj8YLXU0xfrLqN4d1gvFLRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5RCRA9TVsSAnZWagAARFgQAI+R15nocqbDJFEHWbCW\n4xOsdq5WBCAQWiFt5GMZolDDujFRZoD1D+kKo7afoHIvJMX2+dLeGz+j7SSP\nkScT3WZ/xLxy/zR3yc2jWLXuRZfHCRL/9wVHFrfgiRDxlsF3UoNLIX+3ANpo\n0wW2vYlV156yzEv5fZLBatFcnQD3s50Ztnr+HIv/5G6AfhfKa0crRkv2zT8b\nC3WZIUxmdvKLRSkt582zt+xJoeP0S8lWPT+MJe+jD719wACEuUT0GbITl+l3\nVgqEUEfSo7MnjF8sz6ZFpe+bGd4EsvA02EmizG4aTxH8KVQhVsfZXAU1okPS\ncYl33kgGrJg+AsFIOD+6kdyBLjTar8HPOx3VdJqoO+Ft0Vosdi9MQxQ/b9+s\nowc37TfUjZqJ54BEe8YcqiEpVzH6Kuo+xS25sVi5BCxDH39lB4gF5EqPU8Yq\nLcXt6iYxhoHF3jLv0XqjN29mdWBuTF+qINU+6cpc6ugjwxBoo4xH3iN72qze\nudOG+x94WMCB48S2zKFYI0+/QEpbIUa3/4bO6uoyjSoGAfGwJbQS3xgJ9Go+\nyxYBxwQzg3tA9Qr2BhUSXo7h8/GyDx/2rA3X7aiN8hKXMZMz2efI2C4QU6N2\nXlRX6XyYCE/JOXwtKZGqej/vNwB87WawKbyodzm7XyQIXuUqkCmOAzAbxF7L\nce/y\r\n=BV2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/density":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.ea1e1b850.0_1627160145830_0.6268264245937198","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/icon-button","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02317645f4344340e26aa63b753445e7e40449a3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.22f390c43.0.tgz","fileCount":37,"integrity":"sha512-B0S2VAeGPvEhngGcbm+4KOYFcSAiLbFjHeZiGiDy0QY3NMeLFaWfYLKjrFt5ReW6S2lK6QmD8OfbzGZiIZ5NRQ==","signatures":[{"sig":"MEUCIQDujmpCwVSINvx43ifp/F8/J3gA50pZ4YRH4ACOrnx8owIgYzy8yWFOX39oO4sJtzfgYzCpHQRlm3uoyuQ1Q3SKTCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFepCRA9TVsSAnZWagAA/aUP/09ZiW8assIf7fDkfi8Q\nTXZrkazKx4RLNXz/zU6TFWP/Oz8y6PYx1xaUEhz3gQYsb/AjhSlXOC/CJOe2\ntx261b3PY7d7wxk2KptG1SB62SRogf+Hn/X62yW4NGf2MJDttQB6LTm+/yI3\n1waPRkBRt1fnG0bhGKdOkvPu85jkLpQf/zlafgZAgtLcJFB2UW9x+bcoV/AJ\nedWVdnkII36/Yy/KjtSNn/or8N8hhHRX+aihoni6LGdE0XFwvvCRBjL/TTDs\nP5zymEEeQDN8B719jZce6xC3yw4DwOTvJ1U5rTAlAF/GN0v8MPp+o6qV8K1s\nby0Pzvsrq+6ekuhzjgUQeNg8Bbw0+tdePIcT33Y6BgpMfyImFuN+63G/gNN7\nIpHeP1z5BAzP8KVCU9asQ2SDKtU4zlv3GsedEXmHBgQLwJ6a/OMrAIQq4dk3\nkobM5momSo+7nYCOrbdoym+rM5ifjgmG4/h/LIG3ckwa2r9PXrBBoWZLmUEC\nUcXqRI6R9WE1uuBof8ncK0KCHBc6F3675lIyuXXoomQksGra3h6j88/MeA/K\nR1IytDvJIF01kAmYV1q4fKI0+KlXdODXbqJi6nIDU3zpuUw2vjQ2yolqpA5n\nH0Bn6+oNjEy3V5s1+pXtlu9PX8poyJUxG5T6PInz670SrXBKwgKk/zC04fIe\n3iHG\r\n=1dvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/density":"12.0.0-canary.22f390c43.0","@material/touch-target":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0-canary.22f390c43.0_1627412393242_0.36343056446782196","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/icon-button","version":"12.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed03ab2cd3b654b69c47d25d8b14b8d7d55acbf3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0.tgz","fileCount":36,"integrity":"sha512-W4lhJWbrT1FGzgBtwqz9MAFyAnx+wQztV0m5XXncDzfjVgfGaXsW/AYEuVijJEFOvIMGbkcszSkjGIOc1T3tXA==","signatures":[{"sig":"MEYCIQDnvu1V+Kp4+6x2HWBf1fh9dZGIKjuzBU881Uu6w8f8EQIhAKYMLEPyxc5kYgrjKnfS1lkNMWZZdutIWBNHpR4q53hM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNdCRA9TVsSAnZWagAA8xsQAIPHFYF/aFHYkvyAfpZ9\nfpdYqkcZzJPj1msgAPsSzrBH1LdWAUM6J5KioseUF4plOSvqe83aeFs+TeyX\nDbILbW3tyGtug8YSqJf8V3hWLh06ZsC1N+AiBxDTO6I96Z9OBDlA7HWpuEHY\nsy9f/p6GG2jL9/l2bQQZbKu3X3A2TFc9dDVVqzg6amkFR0LY73JkXRhsGh/E\nJp11STCdw/WY89cJMH5RrxMYh9exonR6v1AHpgZwHGFNmUeOfd83GX/2mius\n7tYTojYsBPZ5C6Na053AB7Z9w1YjF0EJrj+eh/T1jSjV7r+8WYCt/ti7ahk3\n/bTn3CexpPaxgbkE+qJMHW7TN9EXS0OoIIwzKqWWeHFiPnaj54br+Sx8hTbI\nF5zbQOfCj28byI5PR4tip1+I9P/w0LWMV/KL1zRRrqCC+UuByof+obr8uM2H\nagmvUhj3KRPEm4SHmxwJLpWsFIVelkSaeah9d2npXDnIDnmWKtBBrt5N4ggs\n3RBKmkbV/fxVbOocW+zKQVXsRrMiqwdJFFR6VPyTu5RS3yNqZFA4+1CagUcl\nDELLEvWsAtBrqLuWzlrTQ8dt9YHezKcHQ9YvVKSobbABnHJIyBr2Zq/TgE8y\n6ZKCwSCq8n9+z/caUEDqtypLmdb0hMTe3FreyxxQpb6S0GXYlg9ABQ3uTKas\nGLyi\r\n=PI2N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/density":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_12.0.0_1627415389707_0.08912613958675664","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/icon-button","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"626b8312d9150139ffa608ef69d99ea423250847","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.ae85f7eba.0.tgz","fileCount":37,"integrity":"sha512-ZKW+3h3QLENDmqb8H4CjvH7zKbq3Da8lp08cRFlPaAjYNd3LMMU0gjB7DUJBAdG+E7mQUHkGVpEhdJTTn4J6fA==","signatures":[{"sig":"MEYCIQDD738B0WSEsszLlw2wpFhjkTd8dy89Am/SrvWPQAU1pgIhAL+inA42pB8LATrfh69imsZ9FszYgAF7MBo3XOwwf1Mz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGO/CRA9TVsSAnZWagAAWS8P/Ap316GLVJgWGhzGEKvJ\noTQUcFOaFlmsLr52cKx5WnVluyFklB2fp24+08TUxZ31nxe8qkV2L27HvzZG\nqJt300EHBCctZic2/XwKzNvVoFfLl+Ee/Cuy2WZ4xo3obia+suRnMRH1ysB1\n3kHZrWJi2JERfDgz8cziSwCffq1Nek+JlJJc6/DcziCXHZ27jPl0eU2ApONi\nHBz8x+yrA1QzfVlnLOFzmXlbrxkwfmQgVZ/MoN3h043yp5Lnrql6ngnIoCsb\nggDIVqYF1x6IwOrxFz1ThAo/FFKtiwgo5wTj3eMfnvopSqPmiMERNEVW0nFZ\n/Q7Lz2+SI300tGHDZXJgkfVm15tOOzK4hR82PaMbwaR0ymLzSVhB0rd0bJ92\neNcvD2jtJGXE7lKWA1Qcd2UrTsYQm6NfRb2W7nlKz4O6cGLn0cFR1w/55OEs\nazmvpfsE8QeRo65IpzcPpk9KVxloVejp19unlmM62WUtb9rcTDXEEvejkP+y\nmQ9+l9YfJcMVVfCBYVwb7qsTY9Bhj7F4Ykd90ACfK38XRFAY4mtrb/0raqDU\nJj0rmxmrz5q5llDUrZmUZThtWCn9i6hGbD+VW1Dw9Togkh+NgD7040xdnsNr\nyJ/THvNt1AYsQXpK2UZhQ1bAdHZDdW1RnrKGgFmQYgXbx3yCaAcaMsGt5yOm\no7qC\r\n=5fK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/density":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.ae85f7eba.0_1627415487264_0.5138240369123508","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/icon-button","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e92c81419c74f26955f3e435758223313d2cabc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.5981207f7.0.tgz","fileCount":37,"integrity":"sha512-hiTdA/GSEyNV8McdsOfzBV49k8aKw5sqr/4D1QuA4NgQobNlueo9/VZM9Nzav2R8Ta3GS0bayhFCWooRXAgBSQ==","signatures":[{"sig":"MEYCIQDx09pOFg+EGZsZ8OAvaU0eqF2NZvN3j8F1EfWDzh6PwAIhAKtWcVGvB1ISzQ6ozYoatj4qI5i+KDZjoW9OWwdoGpib","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQyCRA9TVsSAnZWagAAhcoQAJTjBXjhpHceJyP15MAd\n/hGu+vLLktUAsYuWVGhFySphJESpC7vuUkhaqWiU6yjCmGgcbbwQiD+oeESm\nxsrKRt3OGR0iBYuRd0dPL4x6oYvyD5VuH2z/LPougNHsHyIsfPlagC142bA7\nBrGLwBDoVnHtYuJZEvAX8HTpJ80fawGERm3WbCvjNti2FcQS5m85f4kzgJ2C\ngiN5oJKaGgTrbAHaDG9cx6V53+aGUBReLY3hzxmZkaC08+HaFNeCeTMvVjyz\nUcmo8yzD1NX3E0d+LxDk8EGmIDKVX0ZGt8YWOqJQbFPMpbqgpXiUg5qUeU3I\nhYx6osmtMPsUNK3aJ/hvqLHDotJ1k53ttduBF+sPkZuulkUojnhl42n1L8uO\nCN1qkRbNjTPqvNC0pz24R/pXsA3dI3mZboriB5G5V+NBgNz9HnJaRbu1vp/J\nTiYtNQTjN22oshcj0a0BrGi5BocOWGF+qIPhAFSu6Dxsu/SXvnKCfUO2Rfy7\nJtC2mUs+V4fzh8dWyTHzP8ZZGTt64vYmta+Ku3mcR1FcBsqvO3h4yhMlzvFa\nTLiO02PvN0qU9qROM1UkzOt2zpyDMY65lybl5g1ieoGSkAkeNwPUpq3WyuFn\nfCIU0r6A84RawzqGRx+eMudFWc6tEW8n+D0cDHRdM9I2L4QGsR+IHME9OpGK\n+cF0\r\n=Gy7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/density":"13.0.0-canary.5981207f7.0","@material/touch-target":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.5981207f7.0_1627427890735_0.7102967200270645","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/icon-button","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"567da10bd97389c4e29de723467988f8bb5809da","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.83bdd0222.0.tgz","fileCount":37,"integrity":"sha512-SWPxX7gBXhGKWjzS7Qb7ZK7mdY2nWY9usyudfejpy8lQKC30Jjm9z1wivbBB0e7TgAh60HRk+ZMs1XMBEjXRwQ==","signatures":[{"sig":"MEUCIQClpC5YVNPDLjv8MT+Z3eOde704+7U0qsuGquDGtIkLrwIgH61Pcuq8Yg1hwDG6FHoRBEUBOUgd1hxemQNyoHnKYeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMdCRA9TVsSAnZWagAAJDIP/A6LEOZwklkzJ/cx8TCq\njxkbDYVd36dbUdrPNWncgM56wKGnVS5NYEc/+uGGNkX1HJvuTJQjFHMwYaBg\n1yUMSJLYpZ9iwlD/HkBPaOEm2X8bTzTsGfzTfxmWq7n5hGP47rj5pNglHhVy\nt+4UT4rB0yWiHnI0zP30vsZSFEwScXDnrwbbYMaA0f71iu+aZwZW0mAErsof\nk8zaM0IwOGoC2XAEFojZ7U/pdNAGdMhbDUOp4jE7tdF32hAO8VXX4ZGBrIVV\nj7vaT1LSBMa4ZIVxZ6/hNAXTTcK3C/6KPDilSe426KAURLRa2eGZPzrP/0tu\nvJ+LmM2RtvmdbAJ0VpH/8qQc0Ej7KWDVm5IjHuZ/c3Cdyh6WqZcoLNN65sW3\nk1smxYLfi0+i6nrpkR2AA7jxOdnkh+5/TnyD5m1Ft20tndgwUtMfvmlaWm55\nrx6TyOvcjlQs1gs+m/AUiQkcq1kDsXWGciT5tbTa/UwXx/iPILqu5k+h6q9f\nSjkX/7ejEwQvHKa4HpbmuiShg1fmgh/4ylXOaCgJYyN28rLT4OWCvXeUADWp\nMJhZTGRoDw5RICjHpBVfkt6u0mLSzdRwWQcbJhUkiiboTK0dwNaWMXds4KNi\na7bZH2ndU1ZhsmF3RK4xZcX7GuWhy67blyb8DBC2CX3HrbJfudUKmK+vdolJ\nUfg9\r\n=i8C1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/density":"13.0.0-canary.83bdd0222.0","@material/touch-target":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.83bdd0222.0_1627493149587_0.3277595437740439","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/icon-button","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcda104e50e7e48fa90f0bc40ae07e8231ab0d42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.28656298a.0.tgz","fileCount":37,"integrity":"sha512-gxuZR92Mnjubg+mW9+PJuiCj2g+7Ju0OjHUPwa/Bpn54yfEDrXiwSgtesc86dWV7sYvo7AM3s6zCAm/Pc1apVg==","signatures":[{"sig":"MEYCIQCy7erXw/K2IDqKx5vc3iZUO/B/hDZvt0dG3uQmqAhFZwIhALrxkAWGBXr3mLrJsQPe+daS1ktOVGUknVOx0qdTxD5r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+xCRA9TVsSAnZWagAAO28P+QC0T3f70jTvjtyLb2jF\nnlkvnkA4CE+qOHyuzVBpFUm+OC5/r8nCTjsHmiAV2lBquuJAkx09aBpvCnWR\nvp9U0eprfhBUiZkwqK3CHho5Jia70e+onKguR7maH8HmpbqFJiAeYmS22CXu\nZ6Iof+W5Iwaku++NnYSU+ZcxT9m5ZKejVaH6vgh76k6F4I62/+n9H6382pHR\nk2LnZecWyIQkuym/9BkDdYhVC6lq5DeBSiI6PD5UsC4rqkvWXaE7IwX3EENj\n6EFR7SkbCFs2zlF7jJ3zueUsE+3ZiKUj9p3X9VyV5Rl8z3KM8uLNy9zO67Qb\nJgO612m0lraXz8nbRySsjJLIpsRFaNYjvPJ45ekWSLJIjtbND3iwSaGRMsLY\nlV8RZDoPLFdYESyRk5L4JLmS+3gk2iad1pyaGFiX/n/EQk9MMDUj9f0Yd4kf\nHOCYpQWyY+m7IYfaFrJ4jk2PK9b9Sk5n6hTP4mmZyKMpu3WOEGDbdn/RvvD6\nlTkuRSoEsPoHhdXqu2qJf2nrARrZ629NOXYQD8zojjLQYTL0EUifMvwpY4Ea\n+SEHIswp1fI1Li90x0hIN8W7sBSGPiq62MRbrANLBPeoQFLYkTiXyoK93I9s\nOXKep/OQAtaQagLvp/sfbQNAxWVOTqWDzURMeniXvY6QjoV75Zw1G3FlLniK\nXzNL\r\n=gZir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/density":"13.0.0-canary.28656298a.0","@material/touch-target":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.28656298a.0_1627582385021_0.43861022580726194","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/icon-button","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac1c49761ad48daa4d8d622077a555e9166f0db5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.9e797daaf.0.tgz","fileCount":37,"integrity":"sha512-cikHiCFHk2F94uD3QWS4PFzG+q/Tg0L3f/z/yxvsK2F6CYRLIwZT096GFtYoG1lHIfSw1FB5axiEu5/417xTRQ==","signatures":[{"sig":"MEUCICOeTPvthHqJrm9tb/DjICbMrioO5hYAD2bb62xSW9yFAiEA/9SuzBUCgK1Zu+xT8gtt1ScTHTZK4qrO8MDdMjzCyFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvToCRA9TVsSAnZWagAALh8P/1GaglyIoYsQ1ir+oADi\nimqREv5NK1LDaBptq/cQz/noYeYN9PrkKy+jsHxiWbb3lhF+UM+86D8Nxmnv\nEe3as3gbzKEJD8N46gMHPYYeBXLKoq3wdruGlBLbdGOnkcXaCR42ZBqRJBRS\n4nbTOkhY+Bk8MbG4OVS5YyaP9EV1wJSTCpIxVseNpjcqtmYiFVXx7qAOv0i/\nesnBkYQJCeklm2Jy2Sh1ww01208mec+wFLysywFaL1y6jeuWoQAb0a/7rhxm\n25ZD9AZF4l6Eu+tf6Ect3rBwefh9xncJuDZfMKS7POu7ahiCQg/qqXFXvdZI\nTOZD7ZXM1dQx8XeLXitL8Q7oZs7UoHXUcERPJShMnN3RU0dfeJ8VIBwHUTaE\nvvWCAcSCx44ze0HJyTi6uXeRnUJD0wjqU2TJXa8xNqNJ9qU/fmhcMbO1ynhG\nhJ1jJstS7tvUzNtY6T0cauxf7Q7t/ztgHCrqyjpONB9zgJKuFZNdIgoZHzqU\n6Sv6toC/RU8emoX5BCSwsO0J6KsMM48QettD4Kgi3ua1JaHViMhoZzQxUxdT\n5DE36mefpAEhNIJXRG0/EIh4l+/EiB+bpIzBEbnSn1YtQpinURS6O74kD5Tu\njzUnB2x6fjlAYIWl3q1ZLUzlL54tE/3FS6+N8gbqx9y1EZqak3wRlMi9Dw1x\ngIHk\r\n=F8vn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/density":"13.0.0-canary.9e797daaf.0","@material/touch-target":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.9e797daaf.0_1627583720203_0.9109464372608502","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/icon-button","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb02c1a11535f533f2703e5db7f8723a8ff9eb76","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":37,"integrity":"sha512-Sod9NW444D/JSaXxX+6t9LgrlGCLTQSS9G6I2FuYgp8X9Ommu1AL6duT5ZkDgJYaDFslCugaXF/cuN922vfZVA==","signatures":[{"sig":"MEYCIQCl/U0xgjlJYUNgzSeGph/dzR/guokeGQjFN7OuVFSlOwIhAJxqdT/JTxUmpBHF9WVOCHlmC/xnGtPs/IQOwI0JRP8F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1bCRA9TVsSAnZWagAA0JgP/16ppyLXQm0bj+K0zfcu\n57l/1whrKyjIdT7DHdGY6VxRAhtD5PcK6yTV4Ffpk8+rsRTjZZnIm+VcPrlI\nEW9IpZr+OYatOSgKEVkPKV9b5aFhvNUhh0H1CQsFRuQRbdeWf0YfawXEnkk0\njUa6k/zI1AfSOY0Fe2wVkt31/QiSGG5+bwuf97jPtmLcJy6pPnu2T9icCH6n\n8FLDtUhJKh+eS6yLLA9k50QxZTXwFu+2Zvh6mkGdQGeCGEEBbKXq+PLxrgik\nzkRItCO3p9Pj4IKi6uhyOUVfoZO5XsHCgfFjTbEK3u0xjeKit1ThT59LCI1Q\nrdWQTA6bniFr4LFEkCw54bCToXpU6rBgONjUbl8t7vgoEe1riuHkJ1xZL+bC\n+dtf35Nmu3oBwXBUN5SkCfLod/zjfhpJ2hIhGUwCxjtWwh4lqwYfsWWp6rBZ\nJUpCBGhJXCegv6yuHZ6Pg7cwn/ObAIjUfLuAOE4c2nvcFSp6QEiOgq0+mrXp\n8N2e6gl0nJFFLjf/KdWAK6wg1rGzbJOuqMShxhwDTcGbMYU/fNBkDoHZ/4vm\n6c6kvlcqKZsMulzZc0uPUEbUOq+1UJ59VAr8NKficb1j3V23QQSAXAYti/A7\ndxplKjcWwyKtdKQEEVv/XvvcOu29scfbfS59ge1dq0YX4chClmyJM0U2rvgE\nN7OC\r\n=ip+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/density":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.adb9f1ad8.0_1627671899065_0.9800461788892312","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/icon-button","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4df5ffb98c9d81dd692542d2df2430a125ab09","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.cc5377458.0.tgz","fileCount":37,"integrity":"sha512-5zhIZj8HkIToffp+SVuntaqF0sI2l5hKJd8LXIqBG8MVFmP9T9GBsfS8SPr3OUTtqkzy55csLojzbJNjFIlL0g==","signatures":[{"sig":"MEUCIAuZ0NL2k7tf70ol3RL8js4KsN15tNL96nwD5EmVSwkeAiEAr7RDx78h0Cavd/uIv7f7a7gAescSoBHG8hht800yCM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAjCRA9TVsSAnZWagAA7FsP/2ifz+1c2o24tL+J+rOq\nW2lIum4EDEAppph91WuZTthnuf9+zP0OuUHAYWKggnMWThrb+m2Gu9GPIzyN\nSng+PSKHhw16YEevY11KKmuod2UIb+gSoeVAyUKQPQN/SS/I8J3swOaROUGT\nTrGCbCpwRd3OaZLxcAmrCJ1K+93SHNdudnY3itXHlrfWJKzwjb1euw9825V1\nkSE6TEWPRu5gl+XEfGtR2EHWfVl0ibISWnmBbAPd+6ozTyMJEn1th2h0/Ck+\nbR9nhgYi/a/xaia0ZoNZnTRWYJt6DFk1GpTP5IDHHEV44tQbkM6rJu5ZL/WO\nW+3hRkVFdyXt7nyAc5Gesb9MhyEZlTzTmjzyX9ThANAwr1CBHYRdL2KimqxE\nuTs9NGWZG6h7IVIEzp07/WZDrsJ0GfIOm6xf8RUAECEbSKhTqQ5M1xBHPVeX\nuhWdbsT0HuvnYtvYK0OjVVtWAH8u5/zZmiRtFQAGiIYggpbpl+IV0VyvwyO6\ndve1zYaEu1B71v3IOIxISkbgY2XE5oNhIR/K9+lvZ3znqnCPM3wZbdOsPzX9\nJDWrSvCdz/ObiBc6LXTZNe1vLYwD37iUJ+1xJMIcam7oc7lSj3M0eFLc9wRq\nvZ3PktqQexcDPX2MrZUDAX2p5ab0aQgcwEYFT8kWaaSQSTQRn5Mb2PnznM5v\nnqir\r\n=H3V+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/density":"13.0.0-canary.cc5377458.0","@material/touch-target":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.cc5377458.0_1627680803364_0.8339599539481881","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/icon-button","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e2dd9428bde6fd186b598e3f2caa6c8779fb433","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.a395972cf.0.tgz","fileCount":37,"integrity":"sha512-tQuuikiNmTBNrBpPyULHXZe5zUUyuvG9hz0GBoKo2Pn5vheTso0aAUuFwojJXD+LdvDjNXNjSVOEgE9gxK3Usw==","signatures":[{"sig":"MEUCIQDzgUwkILtluGYHz+66qH+iDKEHQ2SjNvqTXJjnSnjWCwIgRmrMWqpTufHNpqKe0iptPvhCIdgdPnRdnNY0sDBk038=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPJCRA9TVsSAnZWagAAkoYP/jxvgEybMYQiStygxHF4\nFUtD4OQEWtx/4PHkh7mrykRg9EIUughSU+JSu4hO0Cewr/VhtwjYj6hLX7Bx\npiHQ2qC7+mXmxi1isG01yan2mRjlY+GYxRR+Q7/SkD0hrJ5z7x5tY6INCc7g\nSxD1QX1IBPj6qYxEmwxKDCDgYGGONx4FciFVMO2/froyLUVg47RLdSgdqrBR\nUmogL3K4IBtLHuAfbfBZR79b+u7/1nExABoyf2BKykYpYCooY6y3NCCPF2ho\n3nb6Q7fNWKD/awY4dP2W9Z8FVBfcZMjd9LdCfwOGjj84erh4IVB/b0heNcqq\nIXJvaHyEFy/ufCU73lK+U4Kw6lLkPSFXilxtnLw6261W3zxhM0Ak0RrPbGxT\nG9Frc4JF8dJbPcwPgMk5oQlc9ppZVctxiGlociagvF/8OBx6Qs3C8uLjx6cF\nBZV987VALHMcK3Xpf5XbVxfkuMVYPgysmnC/u/3rB0XMOaaM0HmWM6/CLj7L\nY4lkVYbHSYxKbLeOGzMM/WRI2oyI2TTs5OT80me9zqIu9OgJYgxuVNxW0j1o\noRLYo8eLTeEdov2rbeVEWf2DydOVfl30x5baLvCQOGLiJRnU/67JtJftnlLg\nQv+H7ej6WjmojJRxhbn9ZY5EkIuwIRQuCZLpxC4+VqdIcL17w21infydrFjX\nOfX6\r\n=SHyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/density":"13.0.0-canary.a395972cf.0","@material/touch-target":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.a395972cf.0_1628025800888_0.17699234611877723","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/icon-button","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd23a75591c93b0f06059121aa0c2364b3755bbc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.7c96e6b98.0.tgz","fileCount":37,"integrity":"sha512-3UOxWOiGJWt+SW8j9CeMOTNFMDRDtGW3yAVFjWx7CFGvYxoFD2qCTAd5LjGs8M9ALqhohTrWlq6QJ5/mKss3tA==","signatures":[{"sig":"MEUCIQDoRJ3Jh5c4ERRISdryQdbOnG3+Oc6OiyEjjCdIyzSnUQIgH6sFLK9zyDwVHGYh4TBhwDVx6DXYqQWk0GnvPiH9D94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+hCRA9TVsSAnZWagAABHoP/A+OjE0vnTnDt+n7uuC8\nkiSsuD89gDqjY+Agajh8QXceliLSRBr/FhsxyLnIEGGfSMAn6EoSwIDfWgpi\nSlAwVgdhfcOG1BLYyGLpwf5TeMg4DOD4A8nGLt6H4x/g6/aoryvlJduPAJ08\nfJR19s7+jBlj+/PI8UkkWQZRq7CRnBivj8JYaROCmA74eBUsP8J0489FIkpD\nHNhwpncxDFvp7rdSKc1W2O0NyTvskKjDlVISwBczG3/L8fLdxY7cQlxysp9n\nYuNJKr7Y7PK/VQ+kB9WvJYOfgFnP6kijlTfnoy96J+VHoMLAwBiqBe7/Hesh\nRPvCw4Z/3a5CaXUfVFPTN494SnYohhqrZNAPzDl4lxWnVzAwFiuinpl4qS1c\nXPrKWLr6YFu+1RgE8L5rI8JJzrZ70kmNQNKSfsgj2mmjpRnqjXk00CFVu+6R\nrP4yISWmEMmdiRtSe8xkVyvdSSbyFkOAMjSRs4gm8hkMCudiIN94u4066WSs\n7otq8zHpQdMVEXkmhHFz9NldwUy26E6+l0q1jEmz/UI3ssjYmSQSpP72vvRI\nIu8Js0wCQ47JsOChU+QM1XnMJFHq6L++/9brTNl8/6fejNkJo/lQc+Vb4qN+\n9hExRl/324uOhQNW+XYuM9l9UhFxKBrmteeTiknNveLJQzFI3AN902TG9AIZ\no/le\r\n=cRTe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/density":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.7c96e6b98.0_1628028833067_0.38970443982406633","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/icon-button","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52f2205991fe5647a8e6eef61797e402da718aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":37,"integrity":"sha512-ljAZPJCVveq/ik8BsIDC0Q9tck3HJMyFUupEcXfiOs9V8xn0x+9/tzmbgsLClVCGurDZdISeXwPRxZZyFXyPTQ==","signatures":[{"sig":"MEUCIQC90WwELPxISwHKMNEzV07dKLQf4PXbcT1jvrrqNcx7xgIgYlF4aKO45fnm96N4nBpNvjrb1l1dmg1MmWdtpHr4LqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynyCRA9TVsSAnZWagAANRMP/3zvhnvSPM1EXTy2jh1i\njj1aJj14TY2UuFEChsRPsjQn8cqmXurz3HuDGH9aTZnUPdsR6tlvVBEhDwxh\nmwho/facfkTSyWSnEmQ+ZXO6lF0L38tOy33Blkq5CEyZoCZp+V9li5k0pzpd\nwxoZEJM2MCcmbroOvVnJMaM26U8HAMfQs39rbDqap+Hvx+xivo4Ud667Fvrf\nURfn/7sYNPj/lmrslBkXYdy5TLdeE4Uzeafc0AmziNjg9lr786icS29vZYi/\njuc1VGXQS9PBsBgUoWKeLyCJQkGPDQybw61IwCS0zsfayAmKnXqUN5jvoz4o\nUcNUmqwDxp+G+9YLbarLMln3YzmrKbwwBlSySaTpoEnon6MFQPNt/1zjr+KB\nO2AXdIUNAIJF5nPSWM5ztOENE6aoGk0QiSuSXH9Rz+uGvagxwgP2vAFi/gG0\nH9AqPxi69t35wRXzwWN8Xelx85F7c2DKA5qeet8nd6lL/3U9u20KJ4QkHz1V\ntEh9AT2v0LwtEwYJe8jecd+VBN3Opq50LCnHamkVELQaUtD7dLapxzwhaI5n\nmES0SfLEK6NJeQypqRK6GqgRt5UE4LE2ANDwRg9ow/NH/R0oV/1ss3QiKjUN\nHei9U6Z29CwrYpXXXZUVaa1PDN90HPBEdmhHIlHupj+F5TjFlOqpLzk84FxB\nRAFZ\r\n=4OOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/density":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.a80c8b2c2.0_1628121586309_0.05085190488084845","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/icon-button","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2939c5d7c6d392a6524dbf9d4d3aa4777935a45","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.3dd611091.0.tgz","fileCount":37,"integrity":"sha512-NJ3zYuu+xTPWJOdlYXReOsAoFcangDebS+wtYcYpiznw3bWdZe09eJ5E8A6DeBM9uk/fy/Ybb9nsqJmUkRLkgA==","signatures":[{"sig":"MEUCIEtgCNHdI6OyNlpv6oYuS2pTL5fDtMzxWlU/ngoFuQuOAiEAgCEZOYLyRlCV5hKCu0CykebFLTJ3LTVEu900QnftY2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FlCRA9TVsSAnZWagAArVkP/iicJjo3r5M8/xS05Jbq\n1Xo5zkyyhXkk5c5jBOIzDs8hFWRbpMIKVVb12IJMTbQwuc94fdeLKlr9NJNZ\ncb5o/au2LD9fVXPzrowQN0IIc6hqTXfDkp7XRMRSnX0oBJzap7/uotM+r7Bi\n+mXbNEv7nP+vvZw0v8zXrQQZQU/94xGSj2gM85tuL+wq2e5OqnZ1onl+YzUO\n8XySNMisS4A1XNxw43Ead2B54Ogii1JdlW7fJ0X0ILlOlI6XtF1azhg3wbct\nWnS2+XWQowU5Jyr7MypxQj9B/lyNFlTs3C4fFd+jSKRA3FW5jd08CY78mHKh\nqihZMh/+4BBKfaJ/BVtoANFaLeBrtmLjI6UZSDVA49Nb2bQLMKtjNYZ2R3mc\n/pEu7TLLA/6V6GQBjirQ3tqAcRuMt8CvUQv/fl0g0YmQJswWGb3R9TBbKfJO\nrJqqx+1+FrFEkJ7J4yb5tGDAYhjEOGtppL3sVEQf4vo46/WfPsV0MktXbLHK\nu1fa6AobVlCZyFEyElnLbJLeK7q8sKiyic9fVLknWF9nsxUbKlA0yt7zMoUl\nKBMj31+jtka1KyXudklMr/+Pitm+RpXMZWeers/6fxT6MMNSVurPiGgptqQi\nUw0PZkuxKDEfjQ/rmjWD22KoVMBbFmn70f7QXW+nIGCrIULGnmqWB/wEYeE1\nNZpu\r\n=hYcL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/density":"13.0.0-canary.3dd611091.0","@material/touch-target":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.3dd611091.0_1628135781112_0.3331592864300301","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/icon-button","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79b0a11514a97cfc07ded3e06cf8a0431fb6ba6a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.5dee37ff6.0.tgz","fileCount":37,"integrity":"sha512-BHbImNWg9wU2QZAUiJrtrkkjOGRg8R9N7C4MkSYs0wH3VrgN1qZqTc4N6j8+xQjxsiymYe30yVaZg2KPn2OONg==","signatures":[{"sig":"MEYCIQCJUSRKGu6h7xEXbVzpp6+WunqDy4ag1rqGnURWp+NGqgIhAKE0fqspALKfqap3970nOFst9yrYAsA6e8H1tOAWbnn2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCL5CRA9TVsSAnZWagAALnUP/i1lxryTuOS6YCCh7aGu\nP23OW70jwuCTJx2Whux+IACIjWyYEAzorWpRWRiBKUqyD6VOd5PiSpWybeX0\nJEgAA8hXJ0++8fzMgDYsfG6Ex2RXqjjM3ihazt6qqzFY38W0Bpcnp7RBqlU8\nIxki8Y2hn0KYg4e+2oG+ZT1G/qMu53xqE9e06eNLO6Tu+e05f5ThIoSfTaGl\n55H8znIORG0MuhK5JpNga9U0QgvFPQXF45NzGGkPHHH4xxN3PbzB0XAX1E0P\nTsOv1LyLMi1EROfpZ8g449xTWtWAjxOOdgIDLNflf1NoF3fxt/FkKd3ywy+w\nhUiMe/Xvd1ApYJwXt1GL7f3Bw94rYPPdtteMEiYKB/itY69sDtlEfGiMGdzY\n+CGWrqGXodq9ixZerP2ZalrODNCWjD9XqSp2qY5UjOOhY2W14NT2c4fSOXm6\n9Ytpou7sVe1roSxcW4SDQiBVXehS5GrhVQ/H34WOOs4/0yvoOuivValx4Yaq\nc2iTkiMYgD9XluHlBLRTyjLVMZuVl7Z4DC3KrAtnhGmrh4NvKBJ+oXNAVcUg\nef9zfVC8uQnGciwFZCXL8SnaEogt5ZTe6uBYnNiiIbKXrLT1PhjUQkZD1Xtc\niMtuezlaC3G5WYdrFrPYVWJOSY0Q/AllyeNYCDBrdjH9VruDfrZkxlQDaGav\n40GC\r\n=nEer\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/density":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.5dee37ff6.0_1628185337341_0.05407176446681561","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/icon-button","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed05956727423a449a60ee6dd6363f5a5677ce68","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.bf405d22a.0.tgz","fileCount":37,"integrity":"sha512-PhdM9RV6w8v1kk9/IcILQzUhu/wC////m0Eer+fZjUVcf0Kdsy9fE0PxXFXeajnRWyElYuEveKen+1gjFc7LCw==","signatures":[{"sig":"MEUCIQCBUir9g1YbNR1PzNqgvE/awzUSSEq2OlIVgKy3MP6OQgIgB+XTL2EGvxsZPY/1+Yq1wSynOPOwwu5Y2nNn3ru5D9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEd+CRA9TVsSAnZWagAAPCwP/1bjbt6ueFBvmWY2+5eQ\n02dQ1LZzaLvIglNz0RWwyfjNUZsGJGvnxFEY862odB8MX35+PXNFKldHQOlK\nOukffOdNzJvodNhElSv6vkWD2BLORwj0dKG+laRQqJqquNvjl4MTYJxNUFxG\nSQ5Kigu+W9yLykJgWmgVS5qhye+500SSn1WagVYdsn/rhoa8FrNIItF+R1+3\nOYW2qv3MfnQU24GOpihG1csYTBQHM53CjiCDJAMXZaljvYTPSTcjJf2HUsQW\nY42P5vk9GEznKEQXNfMbUzjwcjR8flwTZN43ga/miQ8PsBxkUnliEsLVQon0\nKT1XoGPFaGGlqHvMWJQmLJUwhasC7Gp8v4aLszmd+iNLEsxW1fpF6pNDXGMP\nO74KctNOUUXVFSneMNWU5f32AnD+2JBc/vHFkk366JduEC0XGFKX05eVnt78\n9FGIpbvJcoobzzqDlINanpgAdOkg6HuwcMSog4nHsGExH87zK6I6kz3/Q+P7\nXhGaxvZU/eNTHQNw+jXhCDbBufv4Rlnqs4wa/zKle2Y7G7NJemSms3hY4gI+\nTjH/RKom8B+IHfbTzHpp8Z0bgl6qNfXpK6bjwj2+epU4SdHZVw6nupTXrDtX\nirqn/H4qirA8CTj1YLD325Ym8yorgOTPa40WmWbw1mta5oO5LLTjnnZQUJfF\nUmph\r\n=Nkkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","types":"dist/mdc.iconButton.d.ts","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/density":"13.0.0-canary.bf405d22a.0","@material/touch-target":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.bf405d22a.0_1628194686160_0.0866620631944095","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/icon-button","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43f708598547d909a6a856ffa1fa8c0b92a765dc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.b47dd37a6.0.tgz","fileCount":36,"integrity":"sha512-uxwET/sk6ZgKXJ2lrxa/7609hfvE4rBh2u15JZBHdH8qmRHfqCJjKnEXekb2NBgRyXnUTgO3Xj3iFV2V6j8fww==","signatures":[{"sig":"MEUCIFIzhN6mwaTmrzJxQQ1LIsYPQFZi9J4/u89qdb6Ni9ufAiEA6ow5t6VvqyJ4MCtfedO3QZxqUXL2Ij4j9O+3rC2H+iM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":374311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7yCRA9TVsSAnZWagAA/JAP/ArshDcaEIpIc+A1kHb5\nKgh6nVzvqsFX4J84QmCHjA6zSVPQLhlthcBd4gCQRS4yzs6gmGrRfDXMQOLc\nrtAqVEg0umIP6Gss3AKZu5DH/ZnmcpHnGoTvW6OHH2yoEqDDgvoMIELvTKMd\nzc5plYwWYNiPHIzwj3A9KVZk5zQe9ZN/vSEP6CutA0DPMwXCFBQR0yekwtL0\n7M1rsCjMzncVfTBdE0sUi0luCbK7HExfLPhYrYw23W0Ie96ja3pwyuvqPpEN\nYu0EWS9FzldJjeDMnqF/32yU7FTVil3k8SIUUwAdKJKQiLAGdgOHQDHf4Yvm\n98YoHoTKz4fWV8D8Xq/10t7nqWg4R3+Af2A2TgYEoRXhBS+AjC8SX8UM0eR9\nZdtcwAmMWh2g434gOUc9/9KB6Sh+DKahPa229GaRhm/Y9yo5cEKsPttAmyCZ\ntCWdbaBpUaBUvSdkYal0l8xRGnvxyA8Tbd6xl07fxgm4jf64oUuVMiOpUGW6\nElt3l3VpCu5E9+Lwk9mGNdexhMVvj/EtFRnn60mAYYvmllkoTVLqIVDrmNI9\nLX8Q6qbRvcYeipveMw+PoARxOrSRS6RgzTR0YacNVWchg8LhnL+InBsF4Ri0\n3gV2o+h0y9+5aZtE7Sh2vvhX24FUQwBIqKXNqUOgbMXGABrzmVpM7i15JJ5r\nbnEz\r\n=onx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/density":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.b47dd37a6.0_1628196594468_0.6798205893297367","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/icon-button","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e930623be0307773986f038b07392b7c623716f4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.6c82b965b.0.tgz","fileCount":36,"integrity":"sha512-UjTwUkuefBnzY5OyvqgqWLgL6wVyjPqmK6Tn3c6hduukTqCUtJXVBCXc7WhsGyB+x3Ic78HVYq1W/KOu9IXwUQ==","signatures":[{"sig":"MEQCIGjos2JmvheCMEhDiRzyi3dkKA2M1kwCA6bQfDjUjUqkAiBGlQZWXmJQZSgAcfGtkiV2FkvyuMYguZGPcCHFersTTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":374311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/9CRA9TVsSAnZWagAAck4P/jw4DZHEw6G+esQSCij/\nAGwaJ0RbmcbVq5xbfeGOFYotFVByzmUhdrer70ES7+9BnFL+u1uaou7a8lf+\nJdOIpg8ygrGiUHzPU3v7GZiNBf/2ciGZfqj5xjM1sj2kFr0u/qwF9bj+wL31\n5uEM1MxSzzN052vyXDxrOorXiDHu/qK67nHWJjXA36upgKjz7JWNsZrtsvBf\nZruCAHDRJiIX6Ata3T9UjKWZQYayiyprIWkWIY4xMBkd5PSIuo2QSyciBqH6\nNjW6motmh9TLX4AUKWjA3abZjRQX0REYzToffPm7OYgMXTQpESe1KDseNsnm\np8f8bwq6oN1Oo1hU3OXnnVRD9IRbSTmv9vWu21Qk3zgkERp438yzEQRpuFVN\nHBu+DupWgxGneeOY3SwDqgf6Ivf4GWFxNAkW/FL3ZuBKA8AGvPY43/D6tb+y\nlbgl7kJ6cwMlZcxEY0AP1b1oh2FCfrNrq93U2wusYAxTfSOQK2aiQYOXZUce\n2eFEyZbPOVU7HylXGNYZsCAYHa88+4hRil6pMUDcw57tyE8Jks5nIfH+er4b\nXsPHLNEAnxer9hNvrwFfGyQtA+jLL8+2C/WgDIqMbEfwU2pi3AtgMwNMO4r3\nxQT3x/ZwdW47GolccT/DQ0rlbremAveOhxiiuMcKZ4oiCuzJAqzsTJVKjJml\n+0NA\r\n=7ISt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/density":"13.0.0-canary.6c82b965b.0","@material/touch-target":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.6c82b965b.0_1628266493171_0.2860482061446685","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/icon-button","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c29d1cd5acdbcaa3adee389deec76d2dcf811237","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.4ca11fe76.0.tgz","fileCount":36,"integrity":"sha512-Hna96VeTDZlHJzojhNgqypsh36EHMr2MZObKqM8kjaDsTzsEVDEojHbqyq7Tjk+Fdbwz9OtNGjnkM4Okn84ZTg==","signatures":[{"sig":"MEUCIQDWha7Hd3yIiV2n0+W3fGD7Q7mQfSGnKI65SmBrl/OBVAIgOjUAMpCaArvyV+fQeKcV25WVAM50jvVLoV3n3+F0ehg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":374311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxNCRA9TVsSAnZWagAAGjYP/Av5u4/jXGEimwYDJsAw\nKIDeXp6Kl76vF5C/iN0Q35DGcVhqvn7Fc5ffR84MVGfEf9DRSrujZE7tuk7l\nbzqaSCcbRoEueSLtGP0hZl5uLXLD7R8Mnf4DUZ8aIDWeI7oaHwxGG9l4lhMB\nbwO2WhplWb2mPopzvz1hwT1rgBVJCeUm17kcjyxpeF2p8pxbw3vRLUEaf4l3\n5tl1vClpQZRg3NEDQ/rB794K/JFgu2/cgjIkxYeFRQ8YG4kne5KocfInWvYB\n0YoeUGTe6z4qt6ECk/wzndZEM9ctmcFHVa07nPsn9ObVDI+S5HGDxcbmrbd/\npyxeAE/ehofpN9yfnu/l673SAz1grEOW+dySPE+T6/MYrH8/0ty5JdYetqYi\nB++g9d4GrKtPxjlCIpY92sB36FbPRXO/P/jYHo11d5uizRjS401F8WZMWZUq\n70pp/gglUpY67mqfDIBr/aUVTcXFR90YF+VWkCctC8vf9V9UpMDhD/sPazPc\nwxrib8NhIBhIvxnbHSbA5WvgNw0J8bLt0rdBzxCIEjJbf9IFPTBQEA7iKWZL\nZGxBsRmfexwJoWSMUOcDRDqBPuyn3syv1dL/2aUEY68gYuCW1iNVdvP50wEz\n3FOvr3kLfeD3tpC8eRilSAYHZbGVZSlNUcOq8L7r6TLU82gS016cGQqMOAmU\nqoKE\r\n=aChs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/density":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.4ca11fe76.0_1628269645692_0.4617451198289644","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/icon-button","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fdd978c854fc1a7b5fe442710015b1da78f986d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.510cf90f2.0.tgz","fileCount":36,"integrity":"sha512-bOMJQ18EpCts/UoytcDCy8ye1CDtI9lwbw3JJRcMwZvAgmroHxNDntCm1ofwf41f5kwJRWuIeSRjn96tvTK43A==","signatures":[{"sig":"MEUCIB86X5EVo4yrEDxI2suG/MD0fdpb9PRVHBxXHQ7ho0vQAiEAoYEW1jcAyzj74l9sJYgUA41V53gu7QwolelCFJJD62c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":374311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMeCRA9TVsSAnZWagAAzfMQAKRQIYsiWjiLmQ3xpBa9\nMJoTbYoFfLw46CiN0xQ5RMZaRopkfbETys8aZa5GQfFFuIu3zbuZtzoSb2rc\n9SpHBLodelGrBRZ09mZIyd3o/K1DnJnfm+sbVdgFgp8Rqb7Yul7DELnEiXDp\no/E06gEDAk8K6Hz2EHz7ztTUUlX3/R/JYdpqhHBEIX1YQtgTxlaDzRk5xhx1\nlrMNHNn38f2EUDimpQwVsj0SC6oiKLK5dbGlZB9LJDaY531ngt/+dFi10UrU\n+uPFx6yXS8TZUHEfuzjXhWPt9z5PLFohGdZ7RgIr3TPomk1m9zOb1EFTp/S/\nvegyObjyITJNOFeHhWqWjwDqLTDI+vMue8dJNZO90DFZnL0xOJHQY3fhbe0l\njUstJUbVdXQSdZhv4+GiFbVuz7midiL/6ZyMe+kSELtjKN0ridqXW/fThpvs\nhtqWDzrJv95Y1Wyxm+7KDXiwzW0Fm/lXVe5nj+pIn2UFZkM+sxXNRBzBgjK7\nDlWFdiqoMXPBdepp0iHnzIgED6aB9mSLCQucM+3Nv0VN9ZxUlUEzanCWUY8V\nY1ya9s7AAZtArIlzuaN9L91i5v+WdZcpmtOoi51Lx0cY2SjSm5wfAUT8UYbP\nfO11PSO8toufgsFcHq2/Ujf82kHCc82JPc5MdBXtUAkYrIuVGei3rMSVBN69\nQkW5\r\n=dfXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/density":"13.0.0-canary.510cf90f2.0","@material/touch-target":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.510cf90f2.0_1628529438143_0.6640879177949848","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/icon-button","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8acab83c66237777878568a7e977056fc3471718","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.17580ebf7.0.tgz","fileCount":39,"integrity":"sha512-drTXTCbrXSbuOUHqeuhaKhfc6Vcq4LGx+nCgqBuzklN9zRuFjCKqjouZEVPTv3bv1yzECO2TUG2oJR4r6qCZKA==","signatures":[{"sig":"MEYCIQC7ZjirxZ+fzbS+UiPdgJsuux7rQ5QHPZlSgUjwIXYqJAIhAJi/dfzZH9h3PADVy+u1yaXWQeMwflwWXiQh2wmzzbi9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXE3CRA9TVsSAnZWagAAR+AP/1H/UX7iCfvYFtz9TkgK\nARWKfluuV10hKY/vEiFd8Oh99ESr1qKEEmKCesGgq4nA+0pmq6V99I+Cfrbn\nAsxD7aTnTTxfLo2G5xmMw/mwVKj+92mTJDFcy/ludwy3B7yYdB13akFIWlLJ\nMlRvR/aDEklKrIShz5mm6JGWUTLOED2jUQ90wC6wJo1/lil/auAQsAZifYpX\nK6Wq+Mx5jK4QXN310xHNAbg6RTpod6yAwdw0T1miNOArBzzsvIcp3iebbcd1\nfsGfwmW2Zo576utAKtRzOSKW6Byg2jYxWKKsu2WBirUEl1k7g7FraRFPAzIs\njKuC5hImTlQ//kmxeyHbid4vvXdhJ1upG1DOAHr3MhLjHkEAdbNT8/VoOGCR\nOqJd42RvOVBX2zEgjvRJaT/keXz8Z66avIyTVuWaFWMwjfz7HET2B/YKaRc+\nng2j5ew674sukRqGv+Y0XhDeLNeQhG0NZy/TNIJvYJwCDhvJMTv6MMUk9EaT\nMJuEKzh6+rn8mBjkFqcLCs/hyRvllJYH+m3/nuAra/qrvqzMF3Fci3PuMFLP\n87ya6U+NWBOzc11qgMx3OelEf3VXjOBppUAMAJOZ+qOjIY0k2vUQZuCta1TM\ntkRysX4/vZZnY+xyGSFwbEcEwZF51wKH75uJA/jTxeJ7EgTDtHumeU+6ISBt\niECg\r\n=8H+t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/density":"13.0.0-canary.17580ebf7.0","@material/touch-target":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.17580ebf7.0_1628533047120_0.3871887189301597","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/icon-button","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"270aee1cdafd190b8799a1c3f326da44ed63faaf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.7249a3060.0.tgz","fileCount":39,"integrity":"sha512-BjOgYtCqTuH3KdFH6Pzf7rPerU7EsLEwd4L8rZeVec44VTelxgUaTOD2fg6wCy3F0BjXM5FXgBf5MJk0I6K94w==","signatures":[{"sig":"MEUCIQCnfS8bi56BO4VSQuklPgQHV3h5xAA3UFf+wpbY9CtJ3wIgA67phsHFO8eEZuys+vZkalErImz9ofT0bc5MEBnvl1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIsCRA9TVsSAnZWagAAkW0P/jPXM88Go3OEOYd49Abv\nbOwlwLSU8SYlFLsdpdH/gjZDhC4h8llf1fCZdgW3ckBUJEup3A9BKkuZrA4I\n6OpR0aj0ZjkUJEele2BKcNcDHOqojNbTsnQiXYcub4YhxYQWzJi7V4xI40gj\n7gb628o3iGzztoNCw9/BhZWh0uW2dSeHK7HKW6PSHRC4B2V9KOOcMQA3ldnE\nzb6nCkiHbG/ahf0JxpVq3OTtBz8zevbJD/Z1FMHpHU2AMcy9twLCpZEkStNb\n0a/bFSrk2lv5QCEOvNoWWWuQZ0S8Bu4hejzA9xunPhLb5wFUqRdaS/GHy9aD\nLRqqPc3SnYKPoMMtmincAqEbIvy93aKBCPurh7vY0CmW2GpkTTEmfFo7WaxH\nqpg7iqWVDZqJR5ymmbPX9YpNdZd8P1xHovs3xjQvTmU1E+EBJAKj7E4hvFxA\nn2O5OxOoRXa3qH7rwqxgBE21uP+muoECXrGZtaDjuYr9Rcj/d79H0v1iyxe8\ntQYiSr/aAoT/+jnD4dnYm15FP1y5/Vmv867fV3HZmD0ibRSzsGpm2aNv+z9C\nUqIP7Lrj8znoI4ONpoh9eKZBty+OQ/kMYAyrBJmu/SvOvGDQ5HlDRyRL1RMY\nmXD5sGg+W+/W1otO9tY/mKEWk9r9padMPx7E9Thd5+LSclbOGdwoNPVejBGr\negUE\r\n=MX//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/density":"13.0.0-canary.7249a3060.0","@material/touch-target":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.7249a3060.0_1628533292600_0.52501941541591","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/icon-button","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd6c99482964267f27dcf10037f5a9b256f2c73","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.4c405863b.0.tgz","fileCount":39,"integrity":"sha512-SHa1BB75JuVTqeaAdS2U5FMgaTkPA5gHe9u16M8ncQXkoH6fU4yundwBFDWqc1fgUA4wAolxmyG/7BShJet4Aw==","signatures":[{"sig":"MEUCIQCyRo3aYn+i2+BFBgq2pz/QfKtlfZURTqrSwRhwZPsG+QIgEFEAfgu16ZZ24aS0ULVWwJ9NUfYwxc7Q0Y202nyRdSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErokCRA9TVsSAnZWagAA4bgP/j/rRAbrZOCj4VZU2D41\n0k6ukMkLkrvk+e3GaGQU1B6o6b/37mnYR8/XB0uC33WFYOP51wKXQwcdYIDM\n1/3X2fAD9QHX2HXExA2SVlSoHlqlDFhxW8ippTtGZLLzKLMjGJf7AI+uFFJx\nqLRxcpS9UYl9HlVAohgcuoNvCiSztBDNPUZVohcNGYs6ho5aAeJ95H/ak9cW\navZPibbSb8HGBZkubx5EwhYXCy3r6d4aTBgUzgr5dGmACO9qhLyTwnH3ePCK\nNxs9CW1VRVcHB2sAB1eg0G6OZMnfAvUBL6URkdpIB51GV0nNaOanFs2mrZAp\nu0VxKdyQxY5q7nhb1zeLNPMpbLoA32EeO+XJ9KPSHtp/s++rTI8UVK5Vv4zF\nAGRPY0PjxpH5eitziX83AOL7WmBTylTZNcseJRTWPRwnAHI6Key6oryAUcFw\ndrOhbfTGGbk/1znbT3bwa0RnmaAAPfwTiWwtGQCu1PMaHIwNSI63llWSTV3N\nLp8gQwuevcAh4MehCPfyiRQa0QulWuL4sZQlYJWZqBYfR4NALW/zVrJjHM9q\nffokbXSKGbfKs/5GqqNwLRZ4IrZYPr+MmOwE5bwoQ0SCKkPWjb5lA1lgk4zK\numVwM877LC0alqLOK5/Aaxbny85KNMBxMXGeKNp2npsinL9lk/MQo+Nr1wGM\n3q/5\r\n=2uXE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/density":"13.0.0-canary.4c405863b.0","@material/touch-target":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.4c405863b.0_1628617251811_0.6829585075214422","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/icon-button","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"186f974574e5cc37227e6e008ebb4631ecbc72f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.f4241a42a.0.tgz","fileCount":39,"integrity":"sha512-yS96rLpqkKQoWQIOp+y0tYxjgD/wmIpuXWJgHaGKgzXgrHnSvRkX+hkvSkIeK8sXz/k5giX3q3P0iFVc5pHPmg==","signatures":[{"sig":"MEUCIDtQX/vTm1UwcYAn4Xl7Us7fevryI6Jo5WQG+Q0NW1UqAiEAjCUDDQwpB/skZ3xXyCZb6U/TqaCIOmVO+mmlzzgBCMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAH1CRA9TVsSAnZWagAA1KYQAIkfk/UTVjU6aYm8jxE5\n50QqWkfLxL/4v9LQcGKFLoH6sbsBiMkgQZAa8P57ULCFb66c941BYSoS9Y9z\nml+2fzK5UydLjp/p52Yq0zC032rNteq96eoE2G3uy45w8boJbLjTDTaPv8ln\ntvE1NhlgYXevcMTBTLgZA6f2DyYeQF+rZnxtwl5em72m/jmt9DRssQ9DKF+e\nUc4D0QVdkTB/sQGZ4fEPd/nEJlbV6Vx54BIL6H6jRhhdbzDIzPV5KgYctTey\nE1P+D7HMGXSHPVay9RJ1YnW20F56RmCJGpPnCw7qLW43+WPj3+d6REcU7InX\nchADXxomrErK1+KM3/TuUvLot9nub6Hu5G+und3QzGre7IjHmezf3In/Jb5L\nq1pERkCMPbAHgVpLz5PPnU/QaeHXXURFG3iwOk51HmqWR/vbdKtpZdYR+yiU\nECDJMJRUkAWFZsumZK5ZA/OrYTovwiR4D6ef+TD0HYrbxigKVZR2keSOixMv\nd6A62a+Sh9S9zDKWXzUIf9F4zoVb500BiAydAXsDfOOyRFNKDwwEttxoljaQ\nX/b+0g0zTE87ow38veq8TkIodEY8BVmFsfH8TsLNYtWqTqgm5YgmnspBFlcH\nY5n4GAf9kQL8YfAUsiklXjRpRbSiWzDy2JZ+0SQAvejy2wuOXw7vXCvhMosK\ngvh4\r\n=SW2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/density":"13.0.0-canary.f4241a42a.0","@material/touch-target":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.f4241a42a.0_1628701173054_0.13340717588813833","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/icon-button","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e81e620ddc67b24bc488c29ea0ff9842bbad87d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":39,"integrity":"sha512-UfifBZOjV3CbvhooY+/gy6JC6UTRum4mY6GRlDHdY1Vrj3HeP9bD+OJtxrIxlrVM370OVDHrLjqsbMF3zRnt0A==","signatures":[{"sig":"MEQCIDPrTV5h9FksJdatK1Bkoh+61WvIielpLqFuSBM+4c9kAiAXF2xFo6e+ottcof2o2Po0fN11mMUjePCNaGVFRj09Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEPCRA9TVsSAnZWagAA9hgP/3NU558oQ+MWI5Hgynnk\nc5Sc9mF4TH0rEdL/h06wpmkQCBJiGw8OOnwMDhQQHE7/tMXNd9/L8Ui5CANN\ntC6r5Cd06GGGaWdaIlo59lunypNhtCfJ53FlV6/EzQ7eb15xPbwsYD5A2yPg\nSBgrieFqgFNf3NdvvTDDQzuZVS0ES7x8FUYnsHZfxyguh+tMJfLRrIgVb3fc\nRFABfo1+JC618mrdlyl+UFzbfAAR5WRANlzQS/qSA6JKJzBYemkDu+HEfVi/\nllNLE9LxEqzHUuvtctyf554VpCKXORFWZQaEVxo21kCCu74f/VTt0mqWBlc7\naQ7gNmyzUPw/91PftwS1DWwlLYfasfIOqYEG20BXvlyiGODaS3eMTir9z66N\noDZrB/CAct2DVgexYYV/g0wPZiwBkH3fVnTleBY+BAqoG34ovApLZz+s5CTk\nTQJAEjB6bsZLpzwAxUIPZOHcKCYOzDBrX8YEBIzHujVZ2YybeM/vaksHXC9l\nzNpjAF4lijyfjbV4wsmCyYUJBE35X3fRl/Z9PuDFipzKfHJpPphD3ioAwE0h\nS6dYFJMP2ZttPeyhXTCKZFOY5BL0Q/P00SEwB74Kl7PcZBszPOxl587IMVy9\nURaiadfLPyM7toLEgO9B3mHnXkErB0fL5S521UVjLCf7tNDf7JQgdjk54AJK\n4ugo\r\n=X/L1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/density":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.0ad12ed3c.0_1628717327573_0.033801229148407774","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/icon-button","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c69a509c64d7e6d73abc31339dacba0fe802001","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.077dcfcfe.0.tgz","fileCount":39,"integrity":"sha512-eMmvrvVndhqp3PYm9ZF1bxY1b1yN9LTJbT+LqrbKBDO5PjMkLVavxDjrN/pmM8F4cC/qOd44Y86MwKVi/nvOVA==","signatures":[{"sig":"MEYCIQDCZzuLrwNQj1fl9RX2E46BsSUzPduw5OxvGsdE7EW2WQIhAMPNW4i1UWqS/vXj1wWnzxO1OTrG2RC0Qc3D9Y21sbhm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCJCRA9TVsSAnZWagAAVZgP/3MvgZnQBX98P0TnrW6c\nUQiOX05+ZzB/aBnKjMQkP1mi9BWkWAGbV+n01AfS51Vm4clQGif6rLgURbcL\nK6nqyX/IYM3ZXk7PhFaoM3nbUYnyWarEVGqR42S1JoSTw1gbzNqfmDCd8DHZ\n3daR0qty0oM+XoE1tmvM1euRGHJE2H5PIpQqEy8uomSS58GqdQjpDTAa3mFS\nrCSWDzq0wvLLTHkafCId9/AtgQbFN8ZVwdPe3Z1kswLW5ntnLNDZlnXxXWVA\nYC0SJbVMl/JLnXeYiEvsIl+ih8U9haar+KczanlSUZzd3kI9bEk/p8swgITi\nKrZPL9/9nLpR8QPCAmP6xlAtzn5QnPKlylPoeCbfsETzRZaPDmWv2AZzE/Xa\n/909d2IUHWt4ZS0rDTOTpJ2VzJxAo++M0CL6k6ArRFoMJfTwWfbsrImSvurS\nYWNql4iNqKKj91fw2eKVCFALTdx5s5nSY1boDx5/Mp6Qd8ZSTFQ+oxLzemFJ\n9zjDIxfuunsrp+CFaWzhrFnmNE78JwLeSczJMEueqYIHE3K2S8Y8kiHLe0xR\nj1zxumjgzIqijFIbcb5yRtgWTXf/adU46RK0QavM7Pry9JqEnh5/8hBrHv6b\no+Rc6zjQv1F3Og/xXQHqO3NkBr4r4CiJbE+CUqBGycp5ewvzQNYeyBLmpaQ5\nXkuY\r\n=Q1nx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/density":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.077dcfcfe.0_1628790921682_0.033395683669192655","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/icon-button","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f933fd983b3f996c3de162e83e885bdd2ff85f2e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e3346766f.0.tgz","fileCount":39,"integrity":"sha512-oxIefeps5BD9J5W7nb+srp7rvoecNgITmng8SzEKCpOsHoNuTB/EJuVJWt4+ihvM1tq39wApfrDQ4yKvmnDosw==","signatures":[{"sig":"MEYCIQCmifoKBju8QQK4HPxsIsjdu+OAzFwkhB2vko+iZ72xVQIhAK4I6G1cqinu0FttQxBguwxrLJOad7aCSLh37lBZIsqf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvPCRA9TVsSAnZWagAA6c4P/3kf6UFBGwR6kl2Deajt\nK6//L3Ns6+PR5UPJhqvSDv1qnl+oTkHh2FKqT0EI9V5Lu04gy7LxzCUAjR/6\nXYI0C8ltdsRYiIXHSVsMmcVce0Dn8HS8xXnZ8W52kHcObH4eZCFWmbv96hnV\nD+/PHOyjeb9XyOHh2InDhcdfJeTKZPSB7mINizeoHxF4JNW65qf1M94YsLO9\n8BQbPhPTwRrBaIkEL3zK0pxAnRm6CIWhVH+N2OixCOhkBXAJ3ZdHuDP2+y9g\nNLuZEZOYtBy6fItywAusNNk5fJjkV211b7affal8601J9XgGqokTYBk6AKst\nOG8ulNDs0bTJ98N9awAyb1oB88do7w7+EewK4xkTNPkMY4wFNidFzKL4wAKi\nOYhZs/XwdL7DdXXNB1oGe3ngPz0Q3YYkgy0DIbl48ZrLp8/NM78lz4TT7Q7h\na2lIzxr+5DHiRCW138kZBge6AocUqqerxAdHC7NaRu6BC5pe8vJpRh/VEyEB\n5AnKfeAi9tPHRHAIUM2CsdipQE9qN977xPg6zHIY1L88bA2pjrM2wKId8imc\ngOqbZmylEThBA8rc2LuiwRLm8FNA+BvxHmmOriw89Gkm65KqZyogeKMyk1JG\nrdTZ09TzN1FE0NqoQu+UwZ8sZiYT+hYRwYVwsnlswA4960OpAHEUxUEWH5yC\njvw5\r\n=JDHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/density":"13.0.0-canary.e3346766f.0","@material/touch-target":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e3346766f.0_1628883919195_0.4683613766879102","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/icon-button","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3435017fd67457c39bd52e0e05bc9fe434ccc0b8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.2fb068fb0.0.tgz","fileCount":39,"integrity":"sha512-23GAa/u8rp0YGDNJPSvpBHBqfkp7Dfh4AmexjBxbygfumF7peswHQCMhrVCJTgmwrzYbAqDFYclLyFopOmoG+Q==","signatures":[{"sig":"MEQCIDmxCFYUyMVsKX7IcWfweIQkokBOl5T8R+3Q14EB/XbRAiBrZhLu0AqJnjtJPEPf4KABzhmTBnoY17yId6h8b3nyiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsyOCRA9TVsSAnZWagAAG/MP+QAhoylUePLRT5TMPl1F\ns9gPT9NU0sj41ENKkBlWasUfV49y3LBxZHqGY4OPt6Q4qZyM2tuENlVDq79F\nqTD/WlHhTZqyFP6ra1fG/ND1iN70PY3Emm1w9QdoKGkHjtJYjwlMszbwOPec\n4arbaYFklZIK4leidXyQhw+GZrRAmrvUTBcHDG+1CLyBYLvQQEsxJRadPOA6\naQfRDpcmfpoVY48YEGdsAMSRGd5qjL0jtDRea6jWvJb3CuBzO/SWX8pB0P8f\n39JE08+TqCzp27FPQsuX8mi9wO6qEC9yb485pJPivqITTKJeGEJ/PH+Apbi+\nZi4LLc3s4x8ns/LR5snRl5oZuZRgyoEv39x96Fh7wp1kucmlPU4Xi5w1YFt7\n9N097EBoaD448l6/abj8QLfyvX9c4+9KinlWirFmG5G7skzTnQLOn8rCgPB5\nQdi1z14O+alUJ+xluIuOgBAjcUGVo7lly9Zjz5Rz7JzCVjLyKomwVeGq1it1\noBJIwzLVoeCvcDGt5fSEu/PiMm60Vbydss1PnqpRUvQony3OisSj9rTtZaPa\nTbdjJcRfDhDiWYlxJybE3toBBCVDyx/aSnUK+XEHWpDF6QTEehpKCGhNOb3D\nuidmPn8+B8XeBWg/6YoOJYWfJZgRbv30NMs0ZS+om8hMoBSfkQ5hrsgxOgee\nriJ9\r\n=dhMq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/density":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.2fb068fb0.0_1628884110362_0.23005959586346525","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/icon-button","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48fb16ed963eded19f469a0cfd92971eb8f588c8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.fb76c5069.0.tgz","fileCount":39,"integrity":"sha512-wl/JbFWillgnw27iY009pm9ilEx4GE/FaDtOB+/HDQmqWh3R1hDiV5R73uXdfQw3IZouzgt3WJDVKKyrCqParA==","signatures":[{"sig":"MEYCIQDzRMje8fEZ4yXflVplAPT+zzmi8HQvZjqVeAaYHyrzPQIhAJiLbTKVO8OBFU1dm4NX7ApikgMmPGs/ucMZKRXW3G3S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWoCRA9TVsSAnZWagAAfPAP/joCa63C5e1yjKt5LYps\nb/LxGYG7On6STOiYGbZfQOYWtHdT3Yli77H5uBT6kgAbpkgxqLQopIkpSTKG\ncPIRd3hmGCySyJuxDG91XejEzmQ8B4mOGOjqOn5HA2lVQ9jiJwzeND+ucXp4\nW9d0Tfrgo2GVjZrUjIMnX1TKir++KesmQh9Tp/VTLYOg3Aj3iJVZn/frwZi2\ne3+SGeOQhNQwgdpqd1ujqFymqhLmWKevC7ghMs2Rsne/Q9CoO0QvdevbfF1X\nfTyGNFh6nA4OAMEu5bAOVymeMBVFCHxLFdfmXu9r0QsK0B1RuLufDaH1Duaw\ndogPSBv1vzTNvPCe2mekCuW7I2RPNw3IlhIpRbDwuma6GMp6vMXkv0cfKSzM\nofzHeWcGGlcQGHNLCnWwd5+zuSvSAWluEiSts+RYG6j/5+pyTVS/oSfsgUgb\niGqjitZrtqLJVE2uVYdNukx4Rwpl/EnHyDGG97ilxbA2II2uMbAIBGPRS29h\nXvOnF+0Pweoz6R84Hz8Ecqan23zxcS8QIU5sqdiS8zDRyC0hhEMcButZV39z\n0jB3DOvlKuH18uJQXU19Vo9T5pTBq/8JwEcas04kXVsv6/5OxRNRh7dVI2Rn\noWjoaDvA2KgSf4MiBLwRU29qRwzAfH6JTjmKOJAUq2urnX/DkegumK/jHinC\nc2Zr\r\n=I2iR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/density":"13.0.0-canary.fb76c5069.0","@material/touch-target":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.fb76c5069.0_1629144487953_0.6026537169053798","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/icon-button","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3c77621ca397db09e1f7508862e48b5480b5a67","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.457d89aad.0.tgz","fileCount":39,"integrity":"sha512-DfKkrzkDYI8iXrNjT1QDkYfrJMungGhaN4BFrZ3n5mWMZtEqCtpTPt+UgscC7b7mnHm1wylPRIjcL3PIMXMYJQ==","signatures":[{"sig":"MEUCIGQ6inJ0RbksOj5eMqHkIPIqVzunmb7Eu3xbp8Qqw9MUAiEAvH1l35wcwz4OnCtnHU+E/CTqMqTzQnTkOSVuCLBxiEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QPCRA9TVsSAnZWagAAu18P/RfHMC01TpWZoyzlk9pq\ndTiykUvvIU+fUb0kOmSXJAc9G5trFIVzUIjNxy2AEbh4gwppKYZsOrt/TlgO\nzh95OMluVg+66HLeE7Ce96Q1R4h1WaraAai5oi8NsUMaK5vV35E+jj6kqYD2\n8iNZlVSr+FIvt6fBMRE0wiOr91KCDs9aneCkEg5BiKk+tWHZXGJ2RO0UDlnI\nOwNy50SJYNvxeQFkGgeKkLePQ2RcnTk+w8U969tPl4lteGJN3Q0tvhFZtHsI\nCPbaTZ6UoJJUZ9tOKrtVHEV4zf+TjRHwmrubYR0yJ5flCpUd6VMaZV5zo/2p\noNJ5BXj+NVLCUdyIHq/wneZNjEQz67KIRGwYfvJRsoeghPUM3jUx8dSHOaOU\nLXFzS2zRUCBg8ZGkGfeZmG0RuiyGC8Nq4JKHcV6YacNyI6nkqFkUuBcqUEp3\nlIP3wTgHuBQBkKrU5MEbti/4J5P697EmOdlKz/2nBRDTHF4s9aS9K5lrRgJ8\nP3I4vxHI6bf+yy0UOLIyodVN9XCGaOVGo4BQpO3LELg1SnTqJxkKcImU11JT\nEAEkjVcsmnNpBLtoC/5l8nOlSU5gadzWe9rZXVYEaOqibIa+qSQbOeGS27uJ\nA/lxI1GY5S/zpaf/oZF8T86ZUKoCY0qii+4VM3xCoShLmhvBwg14C7achDCh\nPnNg\r\n=3cnX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/density":"13.0.0-canary.457d89aad.0","@material/touch-target":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.457d89aad.0_1629213711367_0.805657270842598","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/icon-button","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1b72acfeda1a8be75900f74a3cdca16c4e0e436","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.0de2f2edc.0.tgz","fileCount":39,"integrity":"sha512-zi7DLEFy9802EJw711RhxMD5Tojsbqh5po2VUcRom0Pz7PfY05ffDa6Ifi3ml5+/hOlrmDDPCK0ICtRHpjPx5w==","signatures":[{"sig":"MEUCIHsLX2dvxMOAqMkr/GRmtU0X5w1aLDNbWQeThM5M7lGQAiEAoi7Udfl0sQyWizZgSxHpS46krUXbN/lLDMQwggIFNOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCH3CRA9TVsSAnZWagAATgMP+wY4uvRXFkaK1GMdWxe6\n9eWYGKEhxWzqb1cFDAOJaMD9lBCHzSNuwpcBHcsfSMmq2+tvB3JRiawFptMQ\nfZvR5Uze59j4wNtlyN0oYP9TNLi9hJO+owYS72I+06+MUylTAEuGvDMearHn\nqS3IFGrKj7QP0vkjBJZIpUY5CshuHMd3qnwMEEVJU7xmI2LIq20PVxkLz6HF\nI7IcAFuaKileD/uGftZkI9o0qEaLFB7aBCAkunPiedaUpoX5i4urXKvMsGk+\nt5bhnUdu+96OsFVXiQ5ThBeasD8DlSC2YAcoU959W0dv9Wkfm8Swx3p9pCJO\n/E/1KUHOjsspyxxDAUD2FRjR+fSZX19Dcvl+cUl/BO6Nm0xBYGeZtVCpE7Uv\njXgaESQctH6FVhlYfo+MEAevBHYr27FOEq73e+GVDaJA+F7HJ+27ObBw0Rcq\nNaC/Dn28yzYnSIDV1/iau8uenSQHZpnFi5ojHGELWqJwkULvbS8qMYm/PsP2\nkwSQxQKQWwPApe00WvcoiyqqV+GzZDkd8WE68cISbxMBU+KKNuLe0LiSFa6w\ntf5RXVNpSAbZ/B7RIvs6L4JOwrUvvIlt+WHKeagFpQGz2EdSvkBEmvczn25o\nKsKlcy101EpI0pgYWqpaRghre3CJSINNANDTHZFoUDz0SnRnV0qBAYEuoU4e\n3NMo\r\n=x3nK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/density":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.0de2f2edc.0_1629233655690_0.7102349985341827","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/icon-button","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d647b3ef298c48677412955eb95bfe77261b54f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.1f9259b9d.0.tgz","fileCount":39,"integrity":"sha512-MVMVeeTFsTfK7iCN/eHpRbcugsuXh0WkDw5UOfrsRc4bWgKk5u7g5SuMi3QMRjL26TNJ6fys9gz56HgKF7T3Vw==","signatures":[{"sig":"MEQCIFnnXO5O57zOgGW9hOUqTmDhXp/KHhFs2M4f7328kJi6AiBybUC5fF/9XD3T6byOaHgBP9ci6JXbobPVM9zM2Vt0nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSyCRA9TVsSAnZWagAAHBEP/A5iXkAMiImf5BP7RFpa\n52N9+xNIhCPBdjJXM+1JAZycBV4h5fRf58QcgKTDXQ6p0eKwukl+IxzKByAO\n97UXgf5rbB1nHCTIQejakVhoN7YMW7t1epYVEaWF0RM+A431tH2fatsoiwqX\nTjZcyNU4F4nNrY5L4r2K+34Y6TSy6LXIjbSRUc9K8dEffMrbtxEs1JjnnZRd\nEcfqQprbFme+uXwn3cGe5Pjgl88cO6POxO/bXTJIQZ8WU8FdLB4ayepSiw2b\nnP0v5MLWuMW07oLWzHO7DaqJezEQY3HcQLcfw7IYuIn3eDT52ksPj7O3/YxD\nOqQgCqrJoxtjeffkOfUU34gimahKPs0wyBxa27m6xCG28/wzfElDye8Q9Em4\nitSUS9maverrtq0QJqG/nYU1RYyIDswpSmxSySoJ6ioRYLFp54Hm1gtFb+9A\nsew5Pt9atkSja1Q9uqltd45VxVOOWb6+erC6j+itLLVnZH5rbcVWAI/vqlML\nEGhlfSM/ITjZVDlq2GxhNHQmIm97u4nutYIZv9wRROqD2e80KOC6g/1vFfQe\nMyOaiC/q8zj+8R54OnK+OI3AzHvgufQhXz47Q/USzXOXsvlkNdnbea0OQkfH\nF8niVDgyqlNhZ5zPpmG9pXaUXyGd5ktwOznoynZIps0fGOT/HfR8lsqJA7Mk\nKFbo\r\n=1eHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/density":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.1f9259b9d.0_1629238450706_0.028814812871419626","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/icon-button","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8bece6f40939ca1b7533bee70f7d52ac8561c20","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.3b9290351.0.tgz","fileCount":39,"integrity":"sha512-F6yK1oqtKK3lRnkaSh8JHjXFu5mMLY8WE3BlQOEmI36kwU5P+ulUQhIFQZMMiU/7Hb+FS+shIU3GdqQuKxWMLw==","signatures":[{"sig":"MEQCIG0XRJjKYVLyJ3MnlFsbr4K6/q+HlxnuMLMUvsBvUTXQAiBf+06bUlWZXtf+W7AQuGfQ6y+dGnNN6aArfw3QpUVx/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlZCRA9TVsSAnZWagAA1I4P/1Tu7OdAvRTzFpHTSo6R\nd2aOrln73lydC06EanLGvfBjppbhFxeWJ3DSKyFWS9V+H8mZY/uJ99MmljX1\nbyOS9tJfG1zczTdbpXVHb8+Eay1UPLjwZwUxyVfURckqrHUHuMavzep76FIf\nMZOdhiupgS3zRsLNkEcY338jV16BEjkS8xUrwVrWyDJhqhQP3xqkuxeaYr1Q\nZxM1mjQcP8Io9ShRa5zLz2KvFvvoojCbx8284owVgI4i6YBuNpDflYtTHjPw\nlZjUDkYsN7m1F5wO+el2WM8CIMavO6fmiPfknc+birbQbCEYHk6BHCg68/+6\ncPvpazQME1F1u/ioCeZ7vnFGRfh0t0/sFTtXGEFhXxYVrO2d0QZ1F4tRFMyh\nRPQq2OWxMBnHqV0jI95sy5R5kFIKTUvuABsRaRKH5TUoQ7ubobVtCn25+Z/T\n9w+cB7b+2ioRaVZdMcDjqEYZb8XR2wxxkwC/83cAfB+A/m4PiUpSynQlZTLw\nc4yMjqPclK1TrIA4ScM6dD46Hd9/8bHXd5sqeXhtlz3aNtcC0peUhvxnvJqb\nf7pSl16cl/d5CzONAp2De9XMkMMn1icicFahR+1cfQLialV7AXIGJY0TNYB3\naMncgBT+8j0qdDZNsELAGg8H4APNhj2w9sodW/JWMeRIlcHoKXRhX2Cd4BYg\nvLNV\r\n=5jRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/density":"13.0.0-canary.3b9290351.0","@material/touch-target":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.3b9290351.0_1629264217265_0.9944608361076672","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/icon-button","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a58cb15f60e681ea781c02e631e38323a70659","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.43d2eed2a.0.tgz","fileCount":39,"integrity":"sha512-GXKVUUO7q5olWxbrkDkTEkXYdqJU5ODCXS5pTr/4SVqV/l1S0v9OnvCdeRgLWXF4UlOm8Jzypbk1tZSUrqXXbQ==","signatures":[{"sig":"MEYCIQCDL3t2P1IFLHSxOrBRHnFOw2cGUeIHcLjc1ElBZxbf4QIhAMH8O/eOhtfR4gsTL6N8XicUXhFBY2ypwr3mS+DF6p1u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8HCRA9TVsSAnZWagAA8W0P/iACtlWxoZQBoyGAQPgv\nM90AZOIXZrowF5wH+1x2zb481pat0wylV0OGR2ubj2MW3zytCkCMjQJM/8Lb\njJTKGtEAkNIO9yE+U6SigbiDRZrB9Cwy4Pj+NMdHp0v1QQymcXwGMyNn3hED\ny+Xlm6KZPlXxAlIL4zfe0bZn0udfwuqdZc6hZcdQHIjPJ+nsPYKQnNP00968\nMLNH5fS1k2qM6k7IKkl4+zVo2iHIIBXDZH2eF9KZCaHxu47kOmpt8e0yP02q\nQyt/DFhGDT/cegt9TBRK8gxzP2O2ag77fUJ5oqGAQKXzWz1EOV/U7ww4KSYG\nYb+3qLlpyivlROvvzQQ0P0flobfjRwDQI+oCXgetn4UNuGP6UfK+Dqlw9nmy\nNxLsjHaSABWQt06/aHk6DHu7lEcqgVz35+rUPjeR8uagit9qq9Bcth8LYKLy\niJ1NLAo/9GAUXG/HXLHtOCI3mbk2ijHlpFktpLWK024240oeFb75TXhnIUlB\nYGs7ui6B3nbRedFH1hg9dL4HybefTcp4ZHYlKjA2Y/kfncN+4Dhvfl+QKsfm\nKVYPBf/Mz+9zeEhVFlvrZL9IlIIAvkdr+gm+ky26D3iuyWKQk1MB4MIAM2oX\nTgEvlsJJOTDRbckZf6GppTH2TEEUpdV1IyiChcqu1UxqBuJBIiMZwjYSRV06\nSw4F\r\n=o1vy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/density":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.43d2eed2a.0_1629302535367_0.37534154675595066","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/icon-button","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a60e0b71af1f381319610a2f20a3b9897426bf3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.0a9069300.0.tgz","fileCount":40,"integrity":"sha512-oAuo02NJL6pDbnuUrLB6lx2dJt1zjRi3URcCLxE/mpTZDlKNSiSzbZV5LZp2uQHe3YmW1S98AMDp71LFZ0ysBw==","signatures":[{"sig":"MEQCIBbmiBdpEPOqPV9FQL+ZRVgOLz+ATADzhwPezPHATw80AiBa99V0QPT7eyMNxtLAS0tb2Sx6gVZ6P33hm+iLSc3R0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQjCRA9TVsSAnZWagAA76UQAI+0MN2k3iK8AkUJCvFW\nwfCJVYp3h7utTU1vAgYD/6J1S1HnyBLL4x+ndwaqdpV4/uMIreOaJGVv4D10\nefdpIGDANo6Z90GSCyZCuvDEtSZNoQo50JbFRC1gyJfn3ppuM8U3fcrVxaWL\n+tzPtsNZYu0b8qkkeCdIntiycbLk1M5V9X3m6cnImwqztZRvnAFiVFJCHZ+r\nbGAKGA6BgvB0fZ2i6P775Wzu2k+hgt8zza9uNhWmBitif1KKaBq4Asf4ReqV\nduAet2nblB1M/hddPeX1plFeG774y36Sk8ay1rISLXMbP6wsLhA1ckh4VOou\nrkZlhRu1PU/JYgAuSTyNByXM/kN8GQTAbXwOpSw99w3C7K6QrRhjot9QKPrV\nfZ+MuYmg+xzBHnZ78yOIYMv8Inhjd0y0uE31GJ+C6e6c+Qbx2f7T5DZ8AokT\nNYYq2lTN2UfWw4CuWMNAw25G8vV12QABAbdtPvEFbTiyQoyiDXbN6JCwYgKq\njrYxuxNaUJg9S1B7ixeMd7xd72PMmld/zr8Yx9N4yWavX+qwdviDOKej5WEj\nu6/NZZcqnvoyHTX+YoLlcMTjXMSVkYlAC6V+A2KVEXDjlKb95wMY+UhM4vR2\nm4fS9fQzkLlzReasR+0iPkwDRgnmXqjpqLC9nH0ui0xI/gQROHALDlqvEP3y\nhLU1\r\n=b/8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/density":"13.0.0-canary.0a9069300.0","@material/touch-target":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.0a9069300.0_1629389859006_0.570061586420312","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/icon-button","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6faa4307b3e8b6e4e0f689274dfbe62651da133c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.7da413ed8.0.tgz","fileCount":40,"integrity":"sha512-bE8d5FwTtG1mQ/Q9f8jCOfiEYod+Jyr2TxQGxjyDqh1vgW2eDGAQn0rhkyYIak7HwsZU60xgwgMLua2jov/Pfw==","signatures":[{"sig":"MEUCIHyyHKBLeimiUbBgCL9pHxyeQqmue3mrk5SzPx0xNbbWAiEAneuR5SyzxGLQJRxGch1sAUr+NB4ohPnp5IhCA7Eu9MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87XCRA9TVsSAnZWagAAoFsQAJpKReG2m55i9GrmB0FF\nLKgx/BYuKccqqnP9kh38g3KvQwFmjcT8JDUvJ6GWV59c3dLdhTLmyljJ1Xq2\nyuX8b115nspNlbZ40Egj1FbJmvS30aBF0/FIqRsTrV9GhLELrs8Io3F0LwGf\nj+44vhPOdLjdBTyqPQqHl8vWnFsHhXnfCjvCh7beWNrrbSJybkcNjQEBX5rq\n2P7IYJODGXT/2zozlsiOdkSgtJQYJhxYXdFoE4YSjI6n6DvitdBkR3LH10St\nAsB/lOypgo5NfBhsGhty+iMI89GoTnY0JpVbgsYkaNpOZYLOz7uri5fzbvpg\nhA7r2aLJehrQcmIKCMD489qQs+84jeFHZUUKjMfMmuaT3aPobLvQNLtCL3CV\nWE5AKRooRQkd2AaYj+2eXBUGH/JKmEavlusTmrwELFca5WCIboFDrEnIMv3Q\nSadzJXp+UfJ4zn9MitsTx+U6Vg4R1WmHSa2oZn5HB2Sb7l9vYP+eHkzwaSxs\nj+V7ZleONxAed1rpFVK4kovcbPD9GU9AEPgQEdd92GJuD3SwZV+BitvIL5MV\n2YdVt8dP+D102ujFW2I/2Fy6phqfwsEelSE24Bv82jmIo+m9SixSGFaFJt+8\nfC/TXlaHK8kK2o1n+GcV6IDkjvcKPN0NGOu9lp7Frcj1MycHwClOh0LCTOF5\ndYV9\r\n=wVVh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/density":"13.0.0-canary.7da413ed8.0","@material/touch-target":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.7da413ed8.0_1629474519428_0.6453425038957883","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/icon-button","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"553d121c56bf70014cb9247598428b516995f0f2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":40,"integrity":"sha512-IhxgiNx35GSt6XfHBMnld6a9S+qbj642Dhv2Yom7t/p37trahXwvkCOO/kdZpErg3ZYEzQGgNFOJJSKHH0BqRg==","signatures":[{"sig":"MEUCIQCy+MdX1PTrzbHggi1gC9SPpV9K6J/aVJSe5gz2eSQnWwIgNyBpwUMJznQwfZ1pyQfRfr1CzWdae0U3qFxoECMT3AI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANDCRA9TVsSAnZWagAAUy0P/AvM75wv+KeRHVqFm5nD\nXiUOuOyj2xXRewBIIeV5QEKqezNIhEZ9irkj3yf1ZVCSVND9xn/OHPW3RClE\nmuqcRjNBGYmuu7muXeOP2K8MH1Wi5kb3zsgT1UFlWzvFuYIG9rpl37wKVHr4\nwL9+vhAAcj7+1ud0m/AFatXFidTXMW4M+4vSs8e8SRpuOc/B+VtJFbfa/UKk\nrkhh3iHa5TsrEQHNt7wqSDnSPj7UkaDKoWZbVy9s4LaI7JRPblNu0t4nwd7u\ngXYTj1Q+lb4knTOto6c1/eakffCMFAS+uysm7zfeYudJKFQgzjTE0a3YEV8O\nJuIujA/j7gR9imlpSpec3pTe8fSu5L7JxoKO8qLxEwVGg7IEjyhuvCL60uLp\ncms9VifIBptdxWWkgLnNtAyv8FZwYd7+W+as2rt+8nknu7XKoTcNYXXWbtsg\njtxCSwxKiLs5GneALnf3T9ctnLKdO2mCYyNgDmwj0jKdeBnFShuTS3I+0ejq\nMNK7SqV6iDXTrOmPQntj3545HTpMDHHY7ais3t2LWES6PFEhRihXedT2N582\niNxSkPrKrUyqAxan5zAbhfSpscPj5MI9J21jeluFeNIsLiN1a7G4jGDqXQma\nUw4FfKXuV2SQwh+femt8GU0HJU/I80w3fb+ZLzlFjgbPkj7ATBDV9Y7QRTwC\nUTs9\r\n=oKWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/density":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e1e69fd8e.0_1629487938899_0.9698040430182031","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/icon-button","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"767a6ec172f2522e565720c6de811eb303857587","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.f5afc16df.0.tgz","fileCount":40,"integrity":"sha512-15YFGnJtJhJXulrpHceLRVfTZO7yb3eNl+escWGKsE5KRyo+rMk3VYbVW3mBS+I03baLc03HHNF9EZroxmDjqg==","signatures":[{"sig":"MEYCIQD0omz/X9XSrdo6agSnnIfsTKPUydjHHwzrpKquunHYAgIhAKZsdtHxljV7Im5iPrPajiRv3HUdjVV3NDWVAZeZGwYs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAACRA9TVsSAnZWagAAp24P/RO5RTIC6+G06bTJLmyX\nglMGP3lJ1uEVofbN+xYzwrx1h/F/HLaa0k41P8EiLZqGiyFvWzDJYYnHOZ0E\nqwZIWY2KQMQepdV+iHdJ/Cktq1C6IZbwXlo5j0iWG75XykY40DQ0farrBELb\nXlGKlvUGBRs5AnQjhaypRsPr22LxaU3UrMLfbOUq7Q0SYjWLyAfs1822n82i\n24reCcn5fKWUDwEqzkMIgfhTifghTAHEMqoISn04k7L70XNaDU33JHmz5xe0\nl7dWnFM9KRoRgMdBKw8rFe7cPsW9f+KNrpczZSpyHQ2yZRI9r7z0LJPoueEm\nDWjHKmb2vYpJnk6vRml9NPMLZ9wwSUpPiU0562rfO7TzHiDSyUa0xClo2XFT\nYy8AL1621vJt8ewooqUq0lpjGRpB6IaJRPVGk7TuXxTwNZnKCtT7iAwS1RFw\nNKxx0bUIiiOUpX3N1T+BMmGMXfmuJcpfVZBwV68hK6Cg2xIundcEFx277N2q\nJ+JogJPjXr3gRNjYj18MW1t7IFI7dIvzVh0nVR3B+rL1Fki7RxII/MqapgW1\nh/mX36FwMkUiFJPrcKBKpfrzNV6KhmH6dUpE5xLdIcQOQUyXM801YKAMfNdo\nUVWTuoAqHuItPl7A0a6VeLfOrPXBn45Zf4kSBCiaIyVRgjvUhZ3FnhDGEQTN\n+qCj\r\n=7grf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/density":"13.0.0-canary.f5afc16df.0","@material/touch-target":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.f5afc16df.0_1629491200038_0.5415874241858314","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/icon-button","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b638783115d525b2690f523d8e4d050905b219d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.28d0d75bb.0.tgz","fileCount":40,"integrity":"sha512-QA5QWGu9jdcYHoUNmWg30bWvVUWLAfapDRZN51LU5sfP8Bx2QkiAxW60C1n49/QcpvGjJBt7fGowUCRsKFZZGQ==","signatures":[{"sig":"MEYCIQCX2VQL5KLd5UR/F9P1nLD97EP+dUAJk+oTQZpgv0flaQIhAO+EwSV/Lz38y8dbjgmeDOQe7X7wUCM7XGjg8Gpx5Aap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqoCRA9TVsSAnZWagAA3jQP/2QjUsJwN4kow2VHKsWO\nRJNL/Gd1LBoi9e10K8s2XlkfnFvUKTqWzIhqBQixVSC/NpzdaGEjJeOMjD6a\namXbrSVwuI1c4sLrhpDCqGWBsd8+wxqhPXunTn4G17HPGHNObjF9HeY4P8As\nCvtysvHLb9LAfjA9Q0B/88Ix2J2BELLl7v/koV05NkWl8S/VEjJBqfnvn4FH\nH+B0MGOKx+dRF7lbfzocAUK0DE8Xg4p0CbGKwg3LQKzKpn+gAresZlPYWdg7\ndoFX2FNixvbsSKKXL0KmAWkBST6shM0WvZdr5lDBW9ZnA40LWriZjjwlEare\nlCKL8n4FGzOxhKyL0stdJnOCsFv9WG/lbSnUWyXK09J5EBmsIIxRDUMNxXwm\nZzQD1FKwS+fFmREWuIeeXKxTAbWIcydiUgsZUCspkjVWM9Psuh5H7fIYzTaN\n6DLOveQ4FzO5TXG+0slgkxVHzfCJKu2kxP1sWFIsA6pnvPhcB0YOWVK0tMFk\n32N3sq5j0Ua69nYzB5FPmWvBato2XewvCwGn3DUDPFYQ6n2/f+XMD6Kj7ieN\n9aCj+q6a/eS9DDlCEIDVGw6bOdxlreBj2rJLk2sR/RdEy46b91rx0J9ciNgh\n6IC5iBKbAkb2OpqSdUXOTDvwrQMkfvZCtsuMe2FnxkVhPxG9xTgesOHAsrNr\nSKqO\r\n=B76Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/density":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.28d0d75bb.0_1629498024004_0.9131476019109155","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/icon-button","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6158e5f5ab093a9c2f37d546999b558bfc8307e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.21ece5360.0.tgz","fileCount":40,"integrity":"sha512-g8c2njW2Z9UTl/parE304aWLYmWXmHH8shtCE/YVBO55sRTZESvNNdXlmrGKvzciNPCfrgD/xUFiNZzupZWWrw==","signatures":[{"sig":"MEUCIQCfcRuQ6rlDVtXE/uDxglbGOy38PkN2Z7pGA3gIBfe0fgIgNjQjm1ko9g8WicJsRLLm6kwzV7HZyDrPxq10RgqO7PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5RCRA9TVsSAnZWagAA0AsP/0fHPrQtG3fk3h0AOl6A\ns94KjlFAi5vT5IZ4iE1+Vj9JPDaw02FZmyIfOkfYgplfdytAzV3HFOOsEwfa\nbME5KkCkUqwwGPPaL8GkGiWbwLDrB7G0sUeyfT0l/71LEE8UcdtBKA0j5PdW\nK5ibSv3hl/j+J/8w96X0OGiyE9jorDfFfLK12u+EgkM9Y33WTsSt9c2etJWY\nSaRnnY+Zef1MfhKSPHSQMwoECTuEtL/Dbs7/LJ0B8IJK9frk30nr6xHjdZXr\nzSk2fRCFC6axWUXcgFUMPnHidY+SlLXfwpvkBCohn8ktgHPx2bT4mxDfQ8kU\npd1BsRKJpls5HYLVZTS5DgEmmoN1MOyCMxoT+ZK3e+PeNhB5R89hPtX0zN11\nIHByYQpc1ZXbMS66H5NO7v6hvBvyhzCdPSWpSddFzjgpiVd1W5U2DKaeiZI8\nuwSMgNbfj/7fzdBGYeNflnfsAIIMh6IUDQDOOMeAMRgsAkEkxZQ6tsMKnF//\nlcT6aSbuL3bOvvLabBQ5VBjqvTAOHZ5p4ejGBJxUx6Nb/xisR6CV5ctlnoF0\nXg5ztqQovEH3Z+Y0sL1y0WnYPW2zOBNMJj/+Nd0FYPKXkV0Itd7tPTf/tdEv\nH+jDU0C/kG63UESDdvCbJSA6hIrdcAGqTeX00L9twSUzKJnDuZesRVvcvJmk\no3/U\r\n=juoI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/density":"13.0.0-canary.21ece5360.0","@material/touch-target":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.21ece5360.0_1629503057541_0.2983283374800414","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/icon-button","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10f6ed1231461bd03feb76a7f885b13b752342a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.8de07c02a.0.tgz","fileCount":40,"integrity":"sha512-oxClVBKMarjbdoyDzoluYVXZ84ncMlaSfgRp5pbTVvRP39z0Bx1pvabCsBOk/u+LZWL77bRBPmXct7ASbDqs5Q==","signatures":[{"sig":"MEUCICIDmZ+g7ZGCEwP2BEZ5e7e7Vyt4BIZR1thyrnLp2gxVAiEAgfbdkGkiHJPTTcw9yvLmhs9KYkWUNwn8C5zh4cXGNAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74zCRA9TVsSAnZWagAAAzUP/jnd/w1NCV8aSK1Hckd7\nfUgI5+/K78gMGIozxN/suXWVdtLemc4eXP0xV77Sr+5aY1JLkNog5vnSPjB3\nZz0kcCkym59/5MPEhFOCRvjEyB+16UKX79xku6Zew81GXFsIQ+1OoNutHCa+\nrO8mPU9TMcjIzp530fKgqCW8efmVdwltO5+dJL+dC3rE1xeDTNLiAXYNJr6B\nTZpQ01UhFyqOR60MK5R/tzwyqWQj1ks3x9zuS4wblzmNI94LDCpnLOgs2Zze\nE2oR1HysIYovH8fbAkGGI2Yin7j1hvlzc7cEaoi6SiZbgsh/G4ipr7h71gXS\nrXBdpHkTeRTP0d3/zsJFvPMRPg2CQgrIG+Qvlqm8Z5w2sH5Aq8ZYi/zble2D\nFf3UaCwJu4WZ3oZRk8bLXGlomfJ4/xauN2CEceQ+SgbmV4bge75t38dbr4wF\n+/er5FP8g+Fr1qqBT9I1ybKhcGoHh6UxaBJdH5RqP/T0HAx/wR6xYo5BdSPt\nLFIfimMfzPsiy2XUeaz7mQv0tOEMIiwje852XFdlLUpM/DtIpxE2KJMvuzlA\nnE+4M1GQpKOwL5yf49Q5hhLkzZv/3Hx3bJCcGm+tv3MOVujFG1EHxo3EAg1Z\nsjJBSCs5Ir7s2IlZ0Eq7n1vlmVIdR4xoRoFSY94biS0jN7i0QIjlqnziRK4B\nl7ok\r\n=pjl0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/density":"13.0.0-canary.8de07c02a.0","@material/touch-target":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.8de07c02a.0_1629732403220_0.5396228524797477","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/icon-button","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a788da3abb14f8b06a7aed2fbcb4c54f67e85604","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.65aa63b0c.0.tgz","fileCount":40,"integrity":"sha512-U++fWDFyoHuHBeVJ4yF/8P5OHjGT2An1BXvByMwlgMtr1OhAT+KQW7GItGaBxZztokC4xj/or1dvuuCyG8bLYw==","signatures":[{"sig":"MEUCIG0P6B194DsOUdMN2KN8EHVcJ0BfHSNNmDAP2VVcCiv7AiEA5BQ1zkJtyh1yBzv0PMYW015+0gpJaGUzbk79rkVlOug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBDCRA9TVsSAnZWagAAxWcP/iycOIQ3wvD6Q0isIc7W\nVQeHV0cSpbaFk2jWQzquM7+liaBBMeAlTaNcDj7wNGMlco/lnolw8YIH2ZdO\npXa97pFAmqzl9rSMG6y56oRqvrVY/6CzKBEYJAmeDVk2H/Klfac9rKaMmopQ\nYAyDeiVIHwdOVOCD9Y9hKsng0sGZZB5QSQl243xCc+tN+ILWtdtiO0SDpSeW\nrxoLACYcmOqEcthoOCc2oM83BTU6IuoC88JOy13prXGQqy4XiEDE75XYaBmu\n/ZtlePQWMjMTTXGLqNwWmwvC2Zm5cUn1fS6MV/bdrPCy2/Gq1nVjWaMrIsyR\nrQXcc8rj/LBxdcRUpjuMFcty7JyE0UPfMYCg9OJtXswzqNKajFztdoQ2V3nf\n84INcBZ8qO51ai0Pdwg677EqZlIqZ2z3Q7pLMK2ibwauIffMa+MVQzu06S8n\nzY0vZ7OKPCtFw/RO5deQIXR95M2GXFeL2Zye4CsNaI0J/0+bT//ppMAnjyEa\nqnBVStmfQ6IRZfOuz7KemCeLuDgns2tv9HdVwQWe9/4LTp/0jwRFwP5XQgkV\n/Sd1UM6oDRENzw1+21l6F0cCgow4+mrMP7rxRpuczVJFnf9wGTqryNB7lo97\nVAPGa88RSmqTW9qUCBDCHs0gJTCuNGQ1C5F2Vg+sfsIE61BVeB6ftIBk43kO\nlq6n\r\n=7DAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/tokens":"13.0.0-canary.65aa63b0c.0","@material/density":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.65aa63b0c.0_1629818947648_0.22359640637492495","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/icon-button","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"778bd3344c1c306c64cacec85302fc827027798b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.15981e9d9.0.tgz","fileCount":40,"integrity":"sha512-Qdrfu2ddTlOAyHaw+x9YeslDvWvKAKGoH+gj2NhOu6NcrPwm1BQ/XHML777wTCbAplJO8hsgsy0Y84odjGBW8Q==","signatures":[{"sig":"MEUCIBoupjEYfRK7JRLi5bJducTwaVk/bFn/Fx5MkyB7HCubAiEAyJ3PSv0ul19cbzfvenFhv5KhawQT9q2dWCgJ4p+AbD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRueCRA9TVsSAnZWagAA8yMP/1qJxl1/aJ2r/c9wBfv1\n8Bn8yNcXcQS9Hc0m5tCbBwRWiWKVsWnhnkyEJG6G6+y3UdcLsI2kJkkcWWf/\nz2dgyzIYr1YJ742K953iJSMs1K/5POjesBnR7ZyoUEjVHxyQugliFHlo4uzS\n+DFFLRhERRBeBTFAqbFr9jQEx3bnWaqS9eP+pYgr11sp9jCKpzxfwquyFpCg\nyy5zLWqfK29E+0S5NRGqccuEyNRaGxJdZIhr55KEqqPQ9zjG9DcGALhAnuRJ\nsadMcsJEG7gNAIS6PlovOfVIiV+OCe5d5AxbedzgpdUmJSbavH5jj2dKj+ce\ncT/HEs4o0hVZFF90eSDXQauRXAJE1Nq0dmM6l91HzDVqUS+IaOKU7bAdZCfS\n1Xl7agsSs/SPZIITzlHOEkZM2GPhF1dRZw9SIeXZItd67cUcd1FqNWJKg3HX\nqG+nLwT15tWrIBA7ROQFuckUbeoqb/1i0PyuR+uBBEYQNZT8L1lZELv/kISH\ntFkupmymycqq8wL/qA9EQJYzOERf4+JaPKNLqvvjF4JBJ5DmEFMNiGB+ulx+\nyz8xdTFMV34mL62CBsj5SLfnJ2Ko675D84yNnA2/+LkaI528LIAgx8A425h+\nDFJLWbeRXedgsK08IGMnYvRBYZopyt1kjL11j3OAZnSK6tQ6wGDbi45SsCu8\nvB0V\r\n=k5ih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/tokens":"13.0.0-canary.15981e9d9.0","@material/density":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/touch-target":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.15981e9d9.0_1629821854116_0.8148747358570927","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/icon-button","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ada8a53ab65cef107e738dec44662c5eb23672e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.fa7520f62.0.tgz","fileCount":40,"integrity":"sha512-inV/nLv3Mt0z1HPEHrisyHYk20lDeA+E5+mKd/haTULs7/arAW58ZkU1lEGTOt8EKDezRI/BA7jaX7B0rDTXeg==","signatures":[{"sig":"MEYCIQCQGGEicXYAMxfmi9bfpwL5n0wgH4CwQSKMOEFp46MrlgIhAIIgBWUziuVsjhZ0I4tk3WNJDvCBdR86iXHobFdBAxHm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKDCRA9TVsSAnZWagAA0V8P/iWh/xiepV9zcXr1BVmC\nHMG7NtHHlmyeIjy928d33laMhtIYf16LO+FQPV65eirh7bhsccQOncJpe8hR\nqwN5fcBCP/g/fsGbA4tMBUIezt6SC6CrGkeo5385AxTsQNhni0OCg4wNOlt1\nf1+632SHK5dK8OL2Fz5D6inlHgVupEi61MX2qMIxCKJqTk8OUH+7XFOjvm6t\nmXbS+nnPEgMmFjyNPD9HI6jpHVVTZkTdAM3UvySCXZ/g0yTH8tGW9eBX+0d5\nlwH6jyUxmcKG7tyvKB57LmO1IbeLp2hkqeDwU5yXmJGs/8xAWnOrk0jlQMPX\nb2TvxiOpLMZLhUmUt7XtcdjwBSicAbP2feCnrWDPKp2YavAqJ5yHh/6Roi8k\ndp9onIBOWDeedLveXzABbYpSiTNFwRlX8iSB0n91a2CUIB4J/SshywRFyoH8\nwEywGevb8RnmXUDSE3AvCOYIGIDkjnEXJysElEolpZa+A417j6PHGsk9bA/p\nse3+sxj7v8QECR+89R0LyvYAHsjIefxCCkl1nBcUIsbUR7GQEurtsKisogAv\nc+Jn2tQ0E9ACQElRiKClgHbf8EJhTmygNHgHPA612SaFeRCslg6fejiDGpV6\n4wUcTDdOP+EncVVdZj10hYuSxBLUCBsPA7uIbA2lC8jIP9ZRnkOKr259B3J/\nzWiP\r\n=15po\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/tokens":"13.0.0-canary.fa7520f62.0","@material/density":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/touch-target":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.fa7520f62.0_1629844099606_0.09943720387201882","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/icon-button","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb927a87a7e2c89a4c4cb6cd7e0151c2d8caa9a3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":40,"integrity":"sha512-YltjQLb1LN/rluoTe0nSfvnzPQNbURpiEHkhnylkfVIpm/3oqjwYR3/HbPCzP8u5x4+arMDBJNg6sG+g6umgBw==","signatures":[{"sig":"MEYCIQCGEQtNySSATvDtiyIUcuG6wL6ccyYaVhXNwqPw9XVvNgIhAKJsmo8ICh3yq9oc4XDNzttDJ+m+up7pVjRTpQ7GpIZI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdbCRA9TVsSAnZWagAABTsQAI+/OdPONa13BiBl4Gy1\n7vC39OuMnLKUIBMLXt+P9mIugG0knHGUQhAdTQmREQ3Qv/nW+L7aQV0Y4yWZ\nTuoCl9tCplSG9Y8/HyUiU1Og0gyxlBQgT5D4wWfK+PlogjNmoA4bEAP2zd3j\n1bKCmFBBFo7JI/4S76VVCNLZ3j0GVp2dGOY9Q/wC9FquZenBmd5NlsqtVRqJ\nyJ1yNAGQdy5xkXcXog/JPRSD60B0enoqUORRGuT5/U07db4q0Z6QS1uEPD+m\n8hRCULeq2wO3cN2HU1eLF0tNUjrcc+HEZxD/xU5fIfbzVR2FYckuXfOrl0hq\nHWx0/SwQno2xFqCxkSUBXPRi1e4Db8hGZbzLBIP9UqTov+HOZG9n7pnLK8v6\n9iqa2zYGANm+a2GnIMn4uh/Fns6+bc/9+CYLaQnkUlzto5FWKtySFux8QxtO\nRo8etSk0Q0hKAU1UdAxfaJ2et3lLmQLN9NLFtlZ8T2jWhYXBMp14lGoYemBn\nEB+lECH9JMYC0ZRDuQZR/VYk7sswo6klTC2CJ+B9ICTSqs3WAqT+9JdGfsrP\n6cCDeBO+/tAJrZeALqxZyfDeSIgKpJ6RKEJXjEYFDHC5BbXv6NOMKww2B4Ck\n/XFSu3s83bXrvRslhEsSTSQBPufPiwIJh0S9zYnM2OLGbo++kpuQFYS+rIJn\naHPZ\r\n=hEQX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/tokens":"13.0.0-canary.ce25bc3ec.0","@material/density":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.ce25bc3ec.0_1629845339290_0.7501684732067835","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/icon-button","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e24c48d8cd2097443c48cd66a88b245323f94a87","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.12f5622e1.0.tgz","fileCount":40,"integrity":"sha512-Wi+2kGHd78GUMUhq5cy1hgeZo/YdJJPrPWzwejEVVm4vzQvU2b+ARMeJjKpNAEX4u4wjtxxPbQvenD61aGv9Kg==","signatures":[{"sig":"MEUCID28I7GzHZyfmsvd6p30IhgWUPpIszfwK38TM4Ik/HbnAiEApXwf5duxGsZ39wsuZBXJd1kJf/703AM1Etbr+n8id1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5MCRA9TVsSAnZWagAAv5cP/A9GcLcqUc7OU8rpkPmV\nvhyPUOnyiL50tIxjJaWuFfCNjEJxPcMUEBgMwTq7ld0zykT+jSv2S6Hic1v7\nfwkcA8KjFZ/AXCx0p4+vtRQ/7b9mrGmBvAxNUC+Z0lTsEipF0UeWl7bXjG7a\nYlWfgkuwKmiOI52OOV5wKbQpBCVXolmgkVkOVCb80gZwTdBfDFp2cnR2o4X8\noLq5KtDf19ePY1uYXiJZNYpSveAq5UNMdEhV2qQ1A8oeTyEq/o4oTBJSuBOn\nyLLoHq8//48NGTDVx4PovqhMt0SlAi52sR8384ScEDj/e5l1Em85eenumDDa\nuTJbr1GYGc1n4iuNPo2JEyzaYLP98K+8eJNoY3P39uTTCNzeykUhich5jMFs\n5v+GzhFU/wf9NcP2Wy0f5RljOP88OKbVnn246CFHWFFPr+vhWqx8JChc+dx0\nsJB/o4Wt+laoAsHkAjtatLz14vZVbVXZR0G5agHoxPCjzC4q8M7FXXdAnR6A\nsZGZ6I3BTogQBIBxjkNJB29R/XyzflGQgxpBnoSwERf7UQUvUOeTKMaoRe/g\nocZUJ+LvypXUsVj7FXO/th7oF2vlD9r4zNY5FzfH93W7qXapdoP4aUjkHxcy\n8EcKhJmMNSyuyFzynquQeeiW1Neitq6/jk/zYPo1DW1m2PPMOmmV+GusAEqa\n86yU\r\n=b6VU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/tokens":"13.0.0-canary.12f5622e1.0","@material/density":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/touch-target":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.12f5622e1.0_1629847116226_0.2006523909055642","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/icon-button","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8dffd84617c2c6b513ff2e5cbebe23e052f17b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d97f8f133.0.tgz","fileCount":40,"integrity":"sha512-Cyl7wiG1hu30nKKrfQPtMmSrQjHydJmRHXssqIVDERkFlHNETHE2RyytYHnRjMWJCyxxn8BN1KOc/gjjudav1Q==","signatures":[{"sig":"MEUCIQCPznQSUytZgBBWU1RMCg4FOqQr17UrFtWnVId/u33t1QIgElN1MVfAauN/tKg9+KUd03VSIaR8T8vwTDXoufIUcIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0HCRA9TVsSAnZWagAA750QAJwTF3R05JbjA+hmcSzQ\nL+kx01rRz/z9BreGVMwD5zG1xFU1qGCP0XXtvlRJz4yuvYE9JldljuPH2pJW\niuGi4nKIHv0X0Y1BV4L5cr/Lg94foloNv4UoZFA9tiAhtsROowYc0qhQ/UGD\n/t3OpGI0ztfgJF2PsiX7qbKORcRTZgiaqoi3fgjBQIfggr8DnE5w2CXcV3xf\nVeymhDu1RQ8vBBeg6yURvBoFKUBzJ4An3DVtCLp9w3cf/QBYVxOPOgW4rmL/\nMoBWYccuzxVLjQAdCC2vZmv+Tt0OwzF5tP87PtkuMFsLZhbKTqhok7xBowqE\nyXLGSzI5MbqgsZJlJ4C/EYaJZqY10Ec7gnR5dLlGGVFArhTXzeAoaYSOhvLB\nZuvItW5wAzMuw8XERue1i57bqpIvRTg/k01dsx9+WSx3+GCNU6a82hsGgzIf\nZAiW7H43JpyuWV5rxRNYoZCzrI6Y7waDzfha5feROzjinfjtxvljRKCZZ606\nmKRUjy/5t2q42lL4uiKhSw29b3TAcKBs+Cmn8434cDlcZNP79nyHsugySArm\nUhEc9sVmopliaIzzg7krlmEBI6z5egO78ZyA1NYz0bmtg2Xa5SrsgGnEVtaR\ng97EQ/zQnQmLuLQwbtyrux0ypTXQRfcmNRaJ1xJ4g1GcPDcvqv4OvvOF91Qh\n8y9y\r\n=tFPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/tokens":"13.0.0-canary.d97f8f133.0","@material/density":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/touch-target":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d97f8f133.0_1629916423584_0.5501969321960838","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/icon-button","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9096d54cf3f2d862c5946a746170d13528c2eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d86fb6fac.0.tgz","fileCount":40,"integrity":"sha512-wexyTIpdmAEm3Ro/fVcBw1Aj66dXVxvM3Em2gAfV2YS7LzxEbuC8eaOYsBl6lWGBBThgkrsf/8YHu6os8eq5zg==","signatures":[{"sig":"MEUCIQCNLzZ9tmJZQs2cL5CDXbGBbmHLfuovcXotGnb+8yyoygIgKodM5ro0EtEI/UlJDhmbqr+bngCou4Tct+4iUP2csuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHWCRA9TVsSAnZWagAAi9IP/jhkaP6EHr6wMuU6g/kL\nJ/2x9eqhvRvbK2HRYdM71K7ozE8RKBowGsvtAc4+/jMBUhSweYMItiiOaaZp\n9niS6YhRo7q3hK6KH5E1mEVDzebYG2QfJcLxCV25IcjsAx8TFISzHwZpgGYb\nv7PbhB/FJlrRLqko1fepIOH/HT+6bN077rErfBkKuHaC45voRro+1G1Moijc\nRiHZpCXZG7PZtUws3YnzBd1J4EiVOOE2ozFLhbvo+GrPc0gPYGAff2mx4olb\n3uIVtTxdpyKsKoiYUygZsvDOenRSz6DCUX5CZZBHF26SVLuTv/MIkYNpnlWT\nyNfPRc/+dK1Z/DxGSBUriAVjr0Co7Jlh6zsXrIq9N+07qX6sYlAeZ8/Dd/BC\nA0OEGmkzjhUZrZLoDZjl3s0k29GW7IPXKMOCwXo7o84qB7Eg99XXbROQ1kkf\nmylDqq7+qTVcZ+XtuPvNCFyqDjBNZYe6Qcb3JZqASUoi509ZZmhnO2OBaauv\nGympHDi9rba4Cm8Ox4OhVYD5O6geTHpHva7bpng26LrwGh/5KVg8w6D4aql9\nXoc+kA5desGej7XC5cvAOCi6wZrylgOW3DLHBF3GPzzKbvTrnIEkLbJQWehS\nwoFVGP9wjYH3psvr6yq8vPKxIXBHTOkNM1dJ0GntHcHqZnLp6RQ/AZSfKaON\nufh9\r\n=Oakj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/tokens":"13.0.0-canary.d86fb6fac.0","@material/density":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d86fb6fac.0_1629917654101_0.2070694205009196","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/icon-button","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138895b6af3a97f64e23e8643c7faa9a7e4dfad3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e8554dbbf.0.tgz","fileCount":40,"integrity":"sha512-/6FVX6WJN9y/Kk9kGDioXOZf5Vh02t3CVeS9PmXh6bKDvUZXPSJs0x82i/NpQTj4Osf9LZu3ts/pMFN/pfRvaQ==","signatures":[{"sig":"MEYCIQCGo8Jzwz3GyHG7rJ6gqKvtM9jgUbkbSFYtfLuGmBrOqwIhAIvORSTbVgVMKZm1kvRoth/lzG6YgQRTi5FR+lPOuoI0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1ZCRA9TVsSAnZWagAA6hIP/RaTSWALDEp+fz50ziXD\nZzqSoBNo5PB2XlJGG2rEaVGWZe/AGpTpXPCxhkNRN1xAT2pb4W9XgZC0Gyna\nmvVBDwTa9N0VFD9o/cwGmVvftqCZ4mBumN0f2zakaEp8x8S5uMMaBJydCmdz\nZFxYgFqv+FHQ002xivY25D2EqRCXyAVLsmLfl9LM/rLovqurJnFQrJABPn1/\n+DgeQWpKn06+M2OZloWb8vY3IxlgRiXpKKgzQXvQ7TJun5GLTpXo0Mt8Bg4J\ntklNua4tYJLZ8IuTCy236IqETKhNzC0woS5IA6R0x1tfTnwW2X9CgGyHo46Y\npzX+4KDoU5NoaHhVQjgREeSk9KOAiwZyVmkAAXIqdiBsZaWTAceI/LN6r+sM\nVoB4DR3tNSAF2y5mC7jlFRHB3qSuWY26ip0rCHHeuvUj7dF2ZucsA5i8I9ax\nOtRMBE6Z3vL7/23pRKsaewterJ4S38IYiDpDWQeo5dG6HsML/9OO8oVdAKbE\nOEGdXXPLdz2YmBipDLyzG5FblwRYpmrGoiFRU23VD8nDssVVwFFZ3xGh5EUi\n8iPY+jJzEFqBFPGxCGUu3HHZmVdqlovxgIAEby5gWnTRD2dUbnl/1ffS5hsV\nl3osQ4weFWyXC0XIZ+qciEjlAGz/QHq/90qX73pNWJdPHZhB5WX3dToSdily\nkqtT\r\n=P65d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/tokens":"13.0.0-canary.e8554dbbf.0","@material/density":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e8554dbbf.0_1629928793272_0.6426384808324999","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/icon-button","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c037179bfcb127a4587f3d2b57b86456b4712f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.877e3fb0d.0.tgz","fileCount":40,"integrity":"sha512-ZO/fTOLWrqOlKItLv2Oh5+Ln8Y2g5K1hOsuh6muPO+o8p1r6jT7/nqiSBvfCIY68v/7p9wrnvOInHO+zpiZgaA==","signatures":[{"sig":"MEUCIB9soiUDq7kBMZrkaGBUviIcvs5exa2xgMpFkfo41I6HAiEApRokgjajCfLDM0IJ1TUfIA1eXh/fV0AooznG16Oh32A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WACRA9TVsSAnZWagAAxPgP/iaWZ4dSku4yYzdNh+OW\n9w4sms2sppRZRbcluWIuFt+uq8S5fh6iR4mrZ7hnwobFJ/dxYOvniAr7O+zg\nFHgBT4i234KU56zjxGSxZR7TznNnVlIu3Eh6lthLMR1y/pOqIoR95z5ZMA2X\nL+zdeoGecrL2f+CKDeGwkMtxNR1gNOuJ0/mMv1z/MTBWgxJ8PT4DoqY9taWP\nxI//M7SuoQ4J4KpDebNMRc0rtHVX99Zx67WixtpE1ru0FhMrDmSuVKN1W7l2\nfRd3VarXAwd3anyb3eWKhir+rCslZvLln0zo9HnxWKokPY2OH+nRlTeK+uhu\nW1AJDpUvE1H4aE9SqRR9C4oUAlpmr3Ir520F8LhJ32qg+pIHDJwpHcsqMGqQ\n2Q2jgDTyBnIY+sJr6q6mE5+Y7R0CxkMFY7iHF04sFiwrdwi5EdrWnqkV9XQu\nCGhPV55bvN6BKC2mdj/SvAqeU5A0H+OBE9PsPnl76PvqTb9mLbv1nMqF0QbQ\nYvOjiFiX0ZAKYk8gRYUSArqcnL8G1EDaWsiqvpHSH2eGeew+3+eYhENO/4rs\na1/xIDiEU80FnfnQ2Rnb/x6YoN7/sy6nws61Y3gnh8sLXZAPpEBhTI3F8tcf\n6iuzPp9FgQpq+5ftMAdKZ7YT5P0f4MowQsati7m9nnWKBEOd0j/6E0oCf0uE\ncj4D\r\n=Lpwv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/tokens":"13.0.0-canary.877e3fb0d.0","@material/density":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.877e3fb0d.0_1629992320225_0.486696148025906","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/icon-button","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86f166b295d10d49785cd3b0c5bd1a44bbc5ef3e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.6236f3576.0.tgz","fileCount":40,"integrity":"sha512-EYdPdBwF17aUBvfbOEuXweOsDgS5qYQAggt8sESFUhuhgyH6ST10M3HDcRwJIa46cnaUdTeveKv4awAAV+Fe5Q==","signatures":[{"sig":"MEUCIQDbQSPzZOqUZjeVZc0jF9vJl+XQUkcZY3TTdEUg1bGrGwIgcdITmxk1x8G4O2dlKC8aEulOn8S1bNBAhcn92DWhuls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7v+CRA9TVsSAnZWagAAalYQAJdm+uuxcRvPCAZqtzge\nVqziZljzbdLETfLnDqrbmhfBKdaTZjT7gkExrMa+w9CbRDk02D8R3k79ZNJi\n5S4h+NjY9B8VqGRQM1yUOYbW9XOd4mgjvcAxuwOBOFMuCD5h/lExU7LF7ikz\n165cG20zqs5Wc+7uO6f+xBjKY59zK9VdbvcRS/W+XqeElwEEZuZ2OnJ4PEWN\nq4UxY3j5WSX/mWyTlrsKIU6IMIvV/NA3ThMtBCJtU2mYYI25XwuISfCZHBCI\n4J8/cBIE0TvzGr1/tcPbc644qkwuydO5iFZkM/cUHUww4t2xHB2u5i3GnF7i\ne1nTNpwaei2Oys67L1EaMitxr7N7ESzNLtUi3PAu18lEg6lRJl42a5rC2tVQ\np/5rrpjCpSI3kb+OsW/rIvKGH4HXiP1bQyeZIGCQqspgCs41lDI3I1mUKS4Z\nQP74JrILIXvLKmfuBVsoDRTegD3oAbZ+AtvlHJVz7SpOM1/gaVDJsoyJ0Tye\nKUkIi/7ZlepLYvLXwts/DKn/2eeYz9eb3G4lyWnpKIu3gUbxMcpW0lJPCjr8\nDVhbKp7jC2slOf7PHjzbptsZD2hC6E75SgmvzZkHEyodEqK2XFEpeqPCtUVT\nSzZPehhxtOiz9nhXtQ2iRnlKwyq8aE/XyiYexEzv7MX/ClUCE1NDw2j2SNjB\n6zNG\r\n=mKGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/tokens":"13.0.0-canary.6236f3576.0","@material/density":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/touch-target":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.6236f3576.0_1629993982550_0.7768465430765994","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/icon-button","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b03a55ee29abb0a78d647976a4381ba39a03cd12","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.1d19158a1.0.tgz","fileCount":40,"integrity":"sha512-6KI5BuOnuDIlhh9/jyhYcAxTfrOO2o9YyTK0ax2XlN1crbaQZeRWaJFaMiJpTuuLoyHR+xolorFF+S1pT4UM3g==","signatures":[{"sig":"MEUCIDJJmGzMOWIdLWw1+mtYLXXUNzh3Fb8mWLPMqK3OMcGjAiEAzVLxCsylmskz5LIcdqkyKVixreJQu4mphhJaEq7aqdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rKCRA9TVsSAnZWagAAYdgP+gOK4EFruoWqSWk5Tq3Y\nVPjn3bmSkgUriKiq9e3up/Mznnv8MXDfPDaB54ILtw0ItSo1HD/3nwC4TmTw\nGaO/nOH0BKA0i/t8Tw26fHsCqkIbJppm23dJycZv/StnUF6eksD/k671WjV6\nGFM44dIeg009TLkomCdiT5G1DWCzFVRexxLkvx3ycbBpeqViUXrYNRQcUnIz\nwlqA1fCpt6SJ8NinYJnMDF+EBsWAzv4yZdzRWEMdaiH5yTPfDHEdGz82+m+d\nzb0B75s/PBv4zS/FkOX8+QQQnZYN3xw1U1QLw+9icspPr9x9vqBoSVHxpSFr\nY2hQqUAA2n32CA3RUyMUFI+vCRj1hn4gjKqUJHdLvk2xlaFo0ha8xIpXKxdp\ner3hWP4gerT/816gXA/UNeT86OU9NTwHL5VGX+MEiN1h/NynmvLpRYiRA67R\npzV1R4t34AVhpUDY5TEr4ovhTjnm58ius9UUwem0o/4SzMESoJSulzvwjy0m\nvb8lOTl7M642qcB/nXeFesloLrjkh4sbtN/eeM5INbmGh5wgdiw2FKaizWeh\nB3ZC6DCp6Pv4j7vYRz/KvS6ZW9xnO6AfwHgXxUElh4RbC1F40XsF01QI4ct1\n++MP/u70be8yj9OSa6G9G8Y8LG1zHkRSeGct4M59he0NYURAaa9uzllf0Ngz\n/kYR\r\n=YEvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/tokens":"13.0.0-canary.1d19158a1.0","@material/density":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/touch-target":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.1d19158a1.0_1629997770701_0.19752745264706295","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/icon-button","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c308a3c004d6f8dbc8bbb1d055480911c389042","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.6adc9e83f.0.tgz","fileCount":40,"integrity":"sha512-Ux7IUXTbdJckwzcnPARJHvdbBwA5/J/QfoOoQ9FJn91cYp1nZiHrJ9Ev60s2OXeYhed+G2HxP2Smvt7eAbGpnQ==","signatures":[{"sig":"MEQCIGr6+3sADh8aGfdB9W54w/bdrdGIN0Iq9tWuaVtb9PZiAiBZnj/jeGNt7VSRlybZgqag2m5BjEm1KsepeVE+wCXBcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9fCRA9TVsSAnZWagAAVbwP/0SJO9QCixny1TYUq50Y\n4jeUtlsAu9h35Lgdv7lqvk9fUS5slfwgTVBr57aSAYv7+mbLNO9ZiYoL37PR\nOBmq2M4hYkV6yQx2dpBPHVpKWaCNPt0K0UPddWJ64E1E15RllVcr+DdCchIr\nt4NR6hitHIwyhdW1qPuakN7Vm/cXvTxBls7gL5JVromHOZp8c+wgByOvnPrK\ntCUJYBk+nI61lfi/yO0yGPD6M8YVHzunQINn511XrWKnLoAhWpSE8LAyusVS\n3nx8XcSzLYOmsHU6HZn/sNoMH6yvXFBZ0zysjlgPeSJG5WZBxa8m7Td4dyz2\n8UNQIItJzo+df6GbpoY10sjHA8+sS3uOUo88nqmHkpbtdmHZsbhzTIbmdmG8\n3DB3qS8hZTtOoYkrAIUaGwb5q8BYapGZqsDxHNusNsOG0uPzA0wCNkr1NXC8\njRfZJwDAu98lNs8BumlYV2GrfBLl66ToiRZtnqdwSlzPqxVuCh6AwLAnrUDK\nr4p/heqnNpZxtlXAUkcq+nHQx2ibJw72Lby0E1qWyLFHH4sV+OS9y3vZE73V\ncKnS3BmBtZr5NL6887C2llXMGSeyfpp/gQclrChoA6ZaW57knEco6QDsh2mL\nPWxreR54lrv+I3taN/VU6ln8AiOIYSMftI7D1BAxVyDAhma4FaSpjNVViT37\n1Hz9\r\n=WG9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/tokens":"13.0.0-canary.6adc9e83f.0","@material/density":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.6adc9e83f.0_1630363486981_0.8223350559708744","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/icon-button","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52b03c9ec443507fa16e95f98c53d0a27a55455a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d082790f0.0.tgz","fileCount":40,"integrity":"sha512-WG7KDz2zpATji/qAhG//RuQkvGmz6grp0795deKx4zdhszyfOf7P724m3+2zBY41L4NpcB7ASLU7BBOnQ6SlzA==","signatures":[{"sig":"MEYCIQC7a7Sd0ybkHnzXNyDp49uyEvgU+uWYISv6F5+ItBCwqwIhAJOmQpEIn3hbTXfarieeE+Hzx5Zqm8H56xnmw82cjjyw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aoCRA9TVsSAnZWagAAJeMP/2RXLnfuGSI52qOaLOoL\nKzhJvUfs70nmG/0ANbBpfhX+SrSVVehhgXfZVFcgJwGBehBWo7AFsXu4Aztv\nI9MTzaTjZ8sY64KYZDiaI1KdPGLnqZ9EKzJUtA3exhbN8LHrZg+sPM97ATzJ\nBRHBADfJwmco3CfwiZqPBa4f6oHkr8CW/T8eiGwKF7skMvArltVsIJr5/zfd\nUP7HUC7uZabGCS1fvoTk8i/fj5Js/aux1drICkxfAS/BMsFcLIBrLgvuOkrc\nOxNdgrtOf2I6Uh+Vb9qDfMf1/qe97wN7jBeJgdgKApstRCt5Oh9Pm4jUNPkI\n38NRmN/GRmoLOsQ1vOL81eGWB+nBFE6GbgzB2Gwijorj1hlV62oCrcHnjuGu\nY8tT7nVigBNcyd9IlmzgWV5l7Jt2O2ssTMhjcgN1ZaKoM2Z6boThzdV0SHlV\noh/Om4XNNc++XLujyyYe3mQwCqMan1/uHSH5ZJ3qLn1+Wzj8S/lDLYOgL6xT\nRU2nEqHES0ZXLw0IvflA2mlNZmeNKSyg69kAkjo1MG3F4S3e0qlavbkBlCNB\nLNvpDQR8rNuwmYHqW/UEsQ1oerovHzFFSkN5Ccfsj+rBHIlO6DJsyD0I5umH\n1gxiy7BQnKa2C5QUiaxSkqWG/iI+DBgzf+D5ijM+dm/bq33jvPUe9JpBOhRd\nkoHj\r\n=wPCO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/tokens":"13.0.0-canary.d082790f0.0","@material/density":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/touch-target":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d082790f0.0_1630533288767_0.5941932765998388","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/icon-button","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d6a462b6fc95918650adc7b7902133a477012b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e2c4f0196.0.tgz","fileCount":40,"integrity":"sha512-bzkDoh0RbjadFO+zHNLLmGG/dfkCs6ahH1qr68gUJ/Xb2hVgANRIkWOeXDU7w9HDEm22OP2fAguQL36suZc1HA==","signatures":[{"sig":"MEUCIEuXqWc10dxCd3qgMrtC2e4eVutzT5lI2Gai0AwKOl5dAiEAlMs0UYKwUVRBA1F3Uw3b9TorRXy40fxvN5Kk3yW3Aw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLqCRA9TVsSAnZWagAABMsP/2rS9ab0t7mk2cIBPBUP\nx/iSfwONG4po+1c9efT3WWu3tEmc91Q5aCa68mqWDHnzMG3GVafI+OHm9qTW\nG0ybgDK+cilAGYyDBU0L8N/bOTCDVpAuqytDH0jhSKAlZLMtE/vA8YkW4KLD\nT+qPb8cbT24TtTwnjsvGOm5mlOIGZyNg934WNm6brIZv5NwwqvtIPnMoz9NH\nJ6o7MAWCbbWekg1AxT7DbwK6S3gmtyvURjbj3bAiDalt2HnMvUHYxVFNvQ2K\ni4OQkdO1rKLhLJ/VKIhAatKoxq38Dyow6KRmFSm8kYgIMMgNN0m0T1DpoZ0M\nCU/twWDmspqmerx2X2CvfUe6EXpaXOPdp2zpmnN0E/1BYu30RVOHN4kqhg3u\nh9IOrDZW7p7MLVtfBXeufzjPYQGlWhWu83FftRs3V8ovu0Do2ojs9V/DriYP\nsg7PH5qQOAnYQwxtBqEW9gEN+its7drAWJoe9DbxY4FDFmTfloIrbbzNQT6l\nLeF/UzDrXFMksKOBR7OtR9D1/X5HtrSH6Tge8DFWgBpqFxt1X/Xzz45rmPqw\n3gxLcy4iXY1+6SevsbqcClgfHS+eYlPvL8XhaHM7gFgxjgZN88PehhTo8oVK\nTUn/9EkhpCEfgParzHYK8bdiMArY91r9kjiw783gGDXKIWNbUPth/++kj39t\npPW5\r\n=LAly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/tokens":"13.0.0-canary.e2c4f0196.0","@material/density":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e2c4f0196.0_1630548713918_0.14392910579120843","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/icon-button","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d1f787787ce42319f562edb35867133f12a6a55","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.611db508e.0.tgz","fileCount":40,"integrity":"sha512-/5Gw4jus343bFspgq3aUIgGvjcpCMPvBhIY4XGX5f2TRqYilRGEqbziJzb9v2NgF74T4MOlO3pxKpg2Enwid5w==","signatures":[{"sig":"MEQCICHiuihVZU3f9RCcia149pjHTOuddDOYT1XPLKTxlTBVAiACrXJURUdQrJqhC7PHY+ODJmYf85kZTGfx7JIiE0rnwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHVCRA9TVsSAnZWagAAjQAP/0QxaigziXBrtelPGAGO\nVQtaARDapDyr24xw6h7BPzlkr0ynXqAY0zwoiN+SUnbP+1hViv7kTIm8wVOv\nNWw2z2dVtwCNNaAJGDsgETvr4JRyXQXkmkRa3ZuYP8YyyHnfSLBxeJ/QKWGi\n/XT9vI0FMnXla/plHhUKKnX9Vjj4sip5TjKdNptdT2JvXPg7tV59bOML9dB2\nUOUmbQLQkMBgdfhk/M0cEaGxZw4tN0v1f80dktjmC5LoHLF7vWlBDmUPbZOU\nY1EqXlHRG8XS+NoPL7piRTbamTfunWOOiXHHmukP7C/jYnoV82Ecm4MqwYow\nEqFCh6Le4WyyqoruKPyLX53aP+v7/Ud5hWh+ccwbHLEOO8Qq7HAuB7rEdPjB\nN1LDiRlU2T1CqkFERZFLlHqPO68V5e3lKrtMBs0+GJI3QjmOLpYXPztdpIP2\na/yiCHrAvZm0ul1QOIl0fozdrCORYUgEeRHdklfdNi95WL/VblezXVaEZBnp\nahSqOySULwyFXbWZIAsTONLYaU9Xn6C6x+tiZR0Juj0JuponaJ+eB/TyNiZR\nN1lI0ztl22/Eyt9Z9qTa0pFCWdE/jtNmeTENF6gOlsuvXcoUEqQJ1VOlkFr8\nQd2OiHQZfSb35vdzY7s75dL3C4fkQ7QNPl9sa5h8u2EZ82rLZvd2rS85cZuG\nV0Jm\r\n=z31S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/tokens":"13.0.0-canary.611db508e.0","@material/density":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/touch-target":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.611db508e.0_1630552533275_0.7279985762110808","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/icon-button","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff4443bf0791277233e46abf4637a722e9b8c35","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d4706933f.0.tgz","fileCount":40,"integrity":"sha512-1nkxFDKnPL6xEShauV++w7lKW6InSa6JTU7olHdp25io9qJxle5SLv/flPI+GAANzELoB+o/o7+mtxNaZPmI8w==","signatures":[{"sig":"MEUCIQCh1qN2UjV7wdf/bjaRW8Z/6CLoI933zOy2Fmvk5LpsWgIgC1rgcDwW9jJKKcdBuDsvoOhiO5eNvb54gRvFuXZqEBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/mCRA9TVsSAnZWagAAUJEP/RSJPD/wT/QpaelMpAr1\nFfzV/svvHqSMe43k4YT2i7aQWE6cpHo7As29KWgogZA0Kc88awDYAX46VwTT\nZ3QyeXac5AHTpcq8/n9vKqwl/7yNDW1+LVcwcoj9wh6KwPd8Twybejg6GgLU\n04y9afNBxYoGJptmh9TH96MeADBMfMdJos6ZscaShAUyp80ZWarD0ryrup+p\nNYxv3aF0zf4i/Ea0ONSpS5MOmeO20dZYnvGPripSKQ9//eNd70C+LOXq1ggX\nu59xtoB5NsSvesybnAydlG2MQzqfZaFHferkbI3WAXxk7452T5PB8uGJ/QJN\nLFKZtTgP8f1Xk1CbhAyvg/0PQt28+lG2tTKK7JE0aCHOmRguQx2vV/RTNV35\n0i0BeBRbkJH2lzayKbrxwLKcHs3C8ea60XQf9RESx/1gv4pBCjaQk1EhS+Oo\nChxCLFzZoBvrL8ssXwBZhe2ZnS7I5A2oJbz5eeLV7Ulu8rf/QwOu1okXGj92\nV3q0sxOlb7MY1WYcxYDlh4+8/ypf0xoT6XEspa7vBIIMDc3awSYgUsTj8lIf\nmsuG69n2JVfbIg+4dnGoQhLZpeCboknVNCz+Svm37TMBma/53YQeVmVda3Io\n9PdSjFtaiu0aC4VveCQ3OTIC+dSqkAD1dMU1Fu55CJKcNy7vWTe3l+OwSe8s\nkcLn\r\n=HGz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/tokens":"13.0.0-canary.d4706933f.0","@material/density":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/touch-target":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d4706933f.0_1630597094296_0.7086298055546465","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/icon-button","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36dee4a589e512cac6cc2c91b5d4de3fe539a38e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.c16fe03ce.0.tgz","fileCount":40,"integrity":"sha512-zIhIvD521vPdfFXY+XrjQ8sV0MBCXJwlkwwLVM5TEFx2ye3/lvf/Ph74bJ2QtvkIf7XQBh6XwpNSZGvOHa78DQ==","signatures":[{"sig":"MEUCIQDrem9+0CFjL36vvBg6TfieefVeJ9+oHpI10/GS/pM8jQIgcUW70nThH7bKwLDfuhc5w3W2T0irHH7yHlBkLIbwOOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":405687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2sCRA9TVsSAnZWagAABcEP/1mgz6pyGHuJkzV6MRK7\nTz8j0FkudcgyopxOptz0BodBNV3kH/d3GAlR7n5ulUgU5XAp2K3ES8p7bwtZ\nlgObLELrtCdbQlNG35w1sT2/sO16QUr2KdLYNloKFOkzRMJFkRSL8b2HXOXh\nDqh1AxRzji5BHQ3zXBKj98gPe5VeehnlfQVz1Zy3gkOXJx0TOd/uf3ntA59X\nzzdG8/JqyQ/s6IwikRel5YwArmHl1adiEFckg21v0sW6hh04bXJ+buXu0ol7\nPhKCQnYEg7N1GShZ1L2Plsu78ISc/2UM9/lVR0/R6HOZi5a8Tz7fhrGTOL9F\nYwbQy+DasAku5WU3MxrLvDikv8cTwJxltS2kdiJpBUeHEL8ZMQc0OH1tqyOL\nHCeM8n0l974LLe3QsYtGElm0A/R3p3y0UfG9W5Y5tcAtn524Gpx97gYooyBp\nRdItRWftVs7mLD4yCrVJ93QcJGFsICp0re4tCs86FwiAPIEzv7KvUAp2VTeD\nxEUtJ/g162mq8MKCKvSDQmsq2sTRlc7q5Oc9eXWHI9acwY/KUPcCcJjkvJTT\nxVdgM8uOZV0rsckxDv2WKKRNHdXZeiw/CaBsNdBArmGkWYf5XrnlUWcnZfIW\nx0jAyTsh5MTtrPixgDNyAziNmQCBp2HUaFqL5oPHPtbWA7YgM74jT9yG0Acp\ntRLO\r\n=ZIpH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/tokens":"13.0.0-canary.c16fe03ce.0","@material/density":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.c16fe03ce.0_1630604716088_0.9972209531061809","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/icon-button","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78917149dca2e2e0bfecb5d324ce798c98842b73","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.9203a958a.0.tgz","fileCount":40,"integrity":"sha512-SmbOKRVu/OajJXFpkgPFbbGG1/rYXgNDxy+q0e+UUcLfei8sb35wb1IxVr7/DuJMsEfTwBHqHk6gf/1iK6pPdw==","signatures":[{"sig":"MEUCIQClLEmHKmQG8IBv7A1EH4V2oxIfQWdxc/f/PBLNEqpuwgIgAy835bsLXPBm9CKfOy4i+7Oi6kwh20BZP3t1WXcUzVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKTCRA9TVsSAnZWagAAPWoP/iUV5vwNNsMTWsAru+OT\n3PBPU9EW6o1RAjWQKKKeUzhqn4v4kwgtH9iHkPEO8JKCCYrIy8zDeyptcERj\nrnMLCSSGp5TuAosZHtoXxIN4NNMoD3PtJrBktEPULIKzGX+OH9qJ4h+CmGTA\nzjaHpUueJVVwub5gvfJU40pavdZF+E2tvpGbSYhXERMWMHDwXPElo8N+9riz\naml90/gpkO0PlUlA6Epuw1QWkJ8KXzDtM0g5Y6mHwCaKUpQ3+EiGj764TJjK\n13x4cLyyQllu2G7jo3U7XHvfj6pGym9sHxJl86PRTo9aQfGkR70BRlSNJrzA\nGV/l8msbdGAZgCRL96JuGRxcWye/UC7qqGFKBI5/SpjV6AdzRJYP7TC4NZek\nEyEw5fBnxNWjm8XoHpCR862JPYeM7qypKiZQAybPJUe/VZWW+sitsWhHUpsm\ncqDlY66CvH3uMwMmQLhEkQFClPMPGRElF9yqEC8S0KiITaWd2z1r/yWk6FeM\nd4y/3OKAl893oCVT6+cf2LZcM/gIYaPVYAe+H3QXQBjRbZXrhB1KDSAtv82z\n/uwanIcwE1sH9I6FIcMmPNiMQxxjX/jg7jSYG331hIvYT2JaHofU6kBQldHe\n6SEsLHBkiO+5dh0hpKhvVtznIaQDBdnzyz7uOMturLT0gx7A+mtocZuZFtjL\nAvTx\r\n=D0oe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/tokens":"13.0.0-canary.9203a958a.0","@material/density":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/touch-target":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.9203a958a.0_1630626451192_0.7136250561455182","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/icon-button","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c622370aaa3fe0b3d195a65f5c1890fa43946ffa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.fddd5ae93.0.tgz","fileCount":40,"integrity":"sha512-KrbQHy7cZ0kiCIMlvC5FGWTEfW4CD4Vuzi7eP7tNk4OKyNTlN2zXMyWa+3tqkxpJjgjVJ73hICpgSdpnMRkeVQ==","signatures":[{"sig":"MEYCIQCwBTXHuYtzBjzJS9adL2pEJfUX+BOme7ubtjT47JLHHAIhAP4DpDg2DDUT+7wUuuxZFVq3dFijILa022JuLVSodvJi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9DCRA9TVsSAnZWagAAzyYP+gLB5odAsYXm08rY7GtA\n84PO3hC559VQTGWX3HfcjuTgxk+fuOefGiWP8YY5IRLYWWHQTG3LoBZZAJub\nEUZvt6BXugcZPwwfNW/2wzCEhCRdYklSPmeXALx96n4deGOFEKMXFzOQQ2wt\nKxPUgNhJ8IBo/zSsvSVydQBpJZAi0xryjd5o4VVfXxZ71D/XXEecTbpX/wEt\nVjojSvYX6eGh+Q8VNaVQ1OiAGvy8Ztd2hD2qm3Fo/KAo91RrXmw679LQ/ngr\n/dqWQhDQlyAqu6co3zceHd20+XNgVejcxg1eMyhXqKkPCEADRREOkSvRMl08\nsluvn+NjE1vEUk51fdS1cFl9qIA6yxEO8QmR3zhoCPemHDu3a3pdGhYQ9CdA\n5mKUdMR+CeMFqpgabFW4Z3b4eDfNanHZnpfdR0X9NhRzvgKY1zV4l3yf04kP\nsxiiSG6g3noMFOCecjYVHbFBRO6EmewzAOvzci9E8+dTJLbNZLY31t63w5zV\nTuQUFbDG+uxfICA23uZUOYdiiP6hGNVHHH0gv2KbzsQ+uwTlzJWanU/VXD9v\nA72z6bsO+cklqJ4hUHsXyaccEAB02MGbRc0wss/Gg59dC/DdHI9AJCwOiN9w\nYWN3AH2aaBFKD2aSfLvyhQ3JohX6Jq2hnj0gQkwdtsRVrWW/fLLhOFySMC13\nM++t\r\n=SnqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/tokens":"13.0.0-canary.fddd5ae93.0","@material/density":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.fddd5ae93.0_1630654275170_0.21135658915469735","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/icon-button","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0632a3ffd942caa012172bf99ab648694469b084","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.117599a8b.0.tgz","fileCount":40,"integrity":"sha512-JsTGcG4YrQdWleXjzA1BAd75oQdo/D4kNQH3YB9Rhed5mrSxyIV796df37iGhiBteu5rR7c/xeVdtIGMyyNY/Q==","signatures":[{"sig":"MEQCIBL2GM4Np/ETP0ERweYsnNhX9VXyd7zhfmr4X3TEFdCEAiABM+M4ZY9fx0jBIrPZne9C9eOUoak3cHANrOqm1xVdtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+gCRA9TVsSAnZWagAAlHIQAILFEKm+OEDUSiSIpXcT\n4NXZio9KnmmsDmTCI19pSfBN9UmKJGsPw3DVLReYbhtJB883nY3NVZWkxfJ7\n2pj6SHtJCvAPYT8rmkAYFuGJd1ie/PjA/G4lysAHa/gT+KdF9v/Hcu4zaeVu\noVvyW5X/w9+0d3InOmEsR6gkOZeXqknmlC2X3wiTinMsM1HO7ozD1Brwmf8I\nT0lmWk1wZ6no3cc4wAU8kJfj3qCjHhCPV7eD4U7o0wzjqFgT/bD4mtgTLgDU\nI/sn22QLwk3Sj7a4iEf32mdohdJgJ2ojbXyunr/T+wMBP4fMGaJCu+ZH0/oQ\n5aPttshBdaKsJZ6j1/5tKwsln3/V2lsLKD7xsKR1hHlzUUcnvYW3Lw3Sw9aI\nRCIF9PnoZsJ7m/w9dq5PskfggcA4uN0WIv+j8t9nYg4JFPw8CK54lWpiRt0S\nUgSCqneUctGcqwdFZogWOxZTf2ivWCoKlMayxN+tGMSKnZ+zThj/OJs9apop\nVsRk7jSvWV4tg3Z8dkyCIxdp7xIzuSk0rUizDqOHnBj+UFgOaF6ZvhdBPhyT\nIWnasvbcnAo7zHAyqL2Z6wGHVd2/29zB7SYKDy4b0nGgcK9QICsNFLodnqFw\nd6hYTE+iLAOr87PthuyKOU8dFfeobMx3kKpU2mzmIbFkKaOz913N/MITZiiq\n/NXj\r\n=8auD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/tokens":"13.0.0-canary.117599a8b.0","@material/density":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/touch-target":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.117599a8b.0_1630654368137_0.5595727258444758","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/icon-button","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21a49434c13355f92b78a2e618f5a4fca89858a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e4180d07b.0.tgz","fileCount":40,"integrity":"sha512-CDyHvmUgKKbLR7SJxeXFYzvKJxnWlBhEsCdxBc6vcDC7uPVX3A0sve/ewzAIUKjrF1g5sofEfbvBTSxEsA7z+w==","signatures":[{"sig":"MEQCICJOh1Ow19LkJ3FcQANnEEUVewhaMNhq71nAarYVCWl2AiASKJPdnBAJZbmuWO1+QDziRJnpOS69q68IJPNwj+9qZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+6CRA9TVsSAnZWagAAmF8P/10b+4lql1Y6iRD2khFN\nag7LDoiQFsX5SXPELF/5GogLoeSs9ahwRjike+k+mOx/2OjTHjIzB3zkb+fv\n1d1Tx5kgn5FeeyXdWbvAzqFUpetCdUmhoaNyplyb8ll3Md2al0Wz3JU4L167\nkJn+WVpki25WQjX92RaeWPZUEM9siK0aDZjyw+v5NyexfnC0K2YcOfDvcT3s\n1W2usj76okUCyqKRbfNERDg2uu5wcKezlz88oZNbVb6AkpPpD6MaImskM9Jk\n+E//FTs4Fg7XiFrt9BGg8wtzeM7g2e7WBeYUflf1fUcGn2Q0xpsASXrqBQrO\nfB5VuD/o4tRssocRAAJdOiCwjUlnrIayvrCieDzQ4N1MUGI3aX8e8BGdir1u\nG+/mQYRlDxgnxEUEJROfiFjKiHeCPicwILWHIPSgO3PPkYzz4XhpcByL9rge\nD3R/1/kGUX588iZGKXXfRyjWxZAJVLPYJAK5xXrcZDrphvMFb7O4GWq7/cDO\n99jwjpgtLVf31W8QtDGm9q0FxOEErzaCZWx7Ydy/mKuSL5S6ed8btC/GR8Zj\nmshqoEEjMdrBOZV/aBvnTZGIKaj/JClHkh9eLwbUh84DgakW0jK2HAs4ci5Q\ncy7vqNWscckLmr9odptxxabENkObbh+Zfzd81F5Dog+YQl4SirP7S9M7tPk6\nD2aS\r\n=QTGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/tokens":"13.0.0-canary.e4180d07b.0","@material/density":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/touch-target":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e4180d07b.0_1630654394354_0.7477577287205157","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/icon-button","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"048b0cb0c95234f11bf3783ba43bf14297d488b5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.42d175efc.0.tgz","fileCount":40,"integrity":"sha512-VYZKh02o7YA3h7SvzaHmALAZMLglzsuw6tz32jsEh3IwRVgJX2GtFWgpsa+kim4wyzMVw4S07Yq1wL+7zEz4IA==","signatures":[{"sig":"MEQCIDc7S4tc1rxqQV+mOFe4lJwoiC4pnT0ttb7lt9TdCIk0AiBHEDREJ9nTWqX9k2zT2EEVuql7DgIzURugRBnoZMwMgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKxCRA9TVsSAnZWagAASGcP/0CN0uJgylAmIrofp2bd\nuLVPMoiCuIElBySvKLKHa1dRGIza9VCty90L+IY4IUEiVGMC3U+XIxP39RcT\nVV8nHda+sfZbsL39ggAymNlUAAH+MkSZcW2dUNu0p+wJV3398PBduAmNMLvf\nf+9ek92d47aj6L75inlPj84RuKUyYsU+6aV7GYY7YnfT590nBLRP2P5ZWsvK\nQiw5FsA9NXVCFmncAEDgNwdRJRZONDLbvIizBgok+Awo2ZTdG1+vAXkW747q\nHO3iNCPTF9vugSS8Zogxx8b0OpYGpKDXrmQ/pzZ5oyxmAomz2YfKjDLOu+M3\n9qTln0xDOzY65l96GdXO5vSWlWl88di2/piEBQg9f9BReJ4mUdaYImyAjFtR\n+5aV7nrTrTOTOmPwl/asWKYnMeR50ynO1TD+ozEiCa2gegCj9meSCrzV6N1D\nS7QLPsjdi7EBtwsEqc/kgpkB1uQE/rewmvRvUkdLULO3k7B01weF6Gl7e1Jl\ngsAV3hP5oxf2bUpLWqXRfdq+wjldtyqgL0VgLQp+z/qidOW361fjgToE+clI\neoRtFGrvBIeswdb44YuNJw+NJD/wObEcyS6AQgj9+FiWXyGy4+edDVhwsNbB\n6yIpIP7kXE1VspH0scemdFiUWrWFJDPDmIcE5ZLjIk6rScWJsbJWENeYSFry\nC2aU\r\n=yMee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/density":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/touch-target":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.42d175efc.0_1630683825157_0.4979904437310494","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/icon-button","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1046bd820881685f5c781ee34a0872e38bf05e6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.72464476c.0.tgz","fileCount":40,"integrity":"sha512-LtgvQXdOCBSkgf1yRrCFa55pZFQvvMgnatdND+YXpaWeTRXtF4LH+TS4csEV1Rko7HDaVZq0sUty72Uupgj+Tw==","signatures":[{"sig":"MEUCICiMOKmnF8QdPtu36jDsi2gsmpyhWVwLQBAJErz8vdhWAiEAnIBJ3qvtEkWi00ATctcgm3EXIaGhwuhwhSNHfMd0Lpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4aoCRA9TVsSAnZWagAACVQP/25sp4B+uqJGxlLGtJjm\n2AFgAwlRXJ1LX8/nOPElD0wa9ylPQsPkkHNSSN0565fsaRVb65Q2zYvE1bB0\nnpQVsVGKe+RqZQyVOw1mhhT23boF2sQBKEd/xh+OkzO3KHYzQ9hJCpiXgUHO\nrwXHI+0UZBNhY7RO044CMKpAhCJ5j0hDk1133PJRGKi5FUuRCOZoAyikmdvL\n/kJqx2+Lh5A1vG/QEPj2ftdvFKcR9Xcn5+/gsX0ZPmRwfZ70lR/23HIgLLHr\noSEyefJxoXn3oYLh+FExInsQIxlcajoxzw1NoPkM9WGXQVsctlDmG+RNYvm0\naS+ANiP0gLqX0J9nmceryDStb4h6dAI9k+ZZSW3HOq+0Gu9hNrGHuZjBwXia\nb0ROH7YwE2/gUo/B7+Wd3dGGArTe6UTZtMT4am/IZHn+d72oO62pEHG7Dzri\nVtd+uAcuXU0z69w5GmPn4/7aJ93g/z3UZoeB8XtG5f6AtlqamdG1bQo92sDg\ncH9AQ3bj1R4t2RiwIGGpaRijWZ62ydnvVfHVFavekD8ICpQ+luF49TUx+ddf\nsrajKuHKJu7w1cLH/sme9Ar/ANHOn+kYfXTn9oKIFhHiyYJ2lDWlDjicdhsu\nMoKGv8VpaF+ywn2MnL1FTzJRcWFtGjsxjv2qjNPMYVw2kW69GmKj8SAh5Ebr\nDiWh\r\n=hUF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/density":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/touch-target":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.72464476c.0_1631028904776_0.10075367278017411","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/icon-button","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219721a1be394a3817de296067ec13dd8f07870f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.37d4db866.0.tgz","fileCount":40,"integrity":"sha512-3NtioEFPwtHM3jDVXnGTPBBgAcOZ1bYbCHsWF4MAXXIv1maVo+ZHuPge10d+2OMGQKMkpbf/WpPgg++X5SaORA==","signatures":[{"sig":"MEQCICJwzGCY2FlR/9L5tXmAU/b/jthlek5fcZcML6gpB+5PAiAXUKcNvd1SM/TZixy6Cx5e0iA8Urss5bZc6F0sw+n16w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtrCRA9TVsSAnZWagAAZvsP/2Y+BuIQTx3y/bGAzf0G\nRfOCciU3c+0dvaeFvCRYjAnnO0qHEAZMe2gUMtUjwdukdbT2OqfaDgtaN7m/\n55KLHV+z5ojwfUOcWbCKwIp906i8bA4NbgZnSzowWqgC0ecKbjnSlBilaa47\nTu7pXy4D9PWi27KEsOZg0q9Qr6R+mGGkyBrkoNqlCB5FCLjDxoBCKD829vre\nQ2TPYk00heZyvC5kGzqTdu6NrZnE6hyUdJ4zo5ZtRM6CXS5UV2TkHtV7AXAY\ndNJiPVtpz4zTXjlPftPuYfauylTsr89XVZSK1p9jZf07fYEyPt3N2eTKa9qn\ntiYxyuSUoDvvK70WU+StlskN4fEhqFBkxeO+EhxSwjemONYo7OQTKfOOoNQI\nkrMA5ggg1HtexzhGLRWaLkNDKWO5/FJLgd2yBvh+d0QnX0SuzAPZXAwvV67W\nKnJKW/FUjo6bas4v9uX04WYcnSlAzD0cAiDxk/BDyGCpXUPKEOu9UBGYzJkF\nUpY5JDY221TTAvYYY4hka3Ru+T743Kr+lJiULMOg7QTpLLnWk+PoOA3S4GYn\nX+bB4wfY3u4Ci8XS8x8vk2XtYGxGEyHCJAzyoS0PUdSHaDfovqMeCAcYn3fR\nX4W/EGx8a54tkW7nbDoHNQGrT29NuNqLipJfxJgOI4MHR7ahb2OAczGV///f\npel3\r\n=SAqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/density":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/touch-target":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.37d4db866.0_1631198059376_0.003641171049650005","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/icon-button","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61ba96c2e56e840a17c0d6c7fb79aa293a8d6c70","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.6df682e74.0.tgz","fileCount":40,"integrity":"sha512-eFZ8Ov8dUwlK0R7rTVecMIZDJ1IiZxiOXB1SJ0xBqDocwlp5Q0fxBk+QQkD+AUvWnzMIiq+mcBPqXThNX84EPQ==","signatures":[{"sig":"MEQCIHfvqTyF5X5YAqSwovpIQQ1WD1is6gk0STMtVJVZRRxLAiAJYJuFP2Y1jpX0sg/MXyShSyiIQLR8to5a/dBlFXqXUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivDCRA9TVsSAnZWagAABHsQAJb2clBSVhO0NLcrnmU5\ngaqMLPvORh8Efrw4NebOijVW98IO5+x/fGCmN4/VF2FiwgIofHaE43/awiu+\nQwMk4glnOOeBIY8y0j5VLJ2jEOjpdVWBKQ4Rty7JLr2R7rG5XHdDcNbTpTdq\nwwYOYvbXK5z2+d+nYy1l4I2+Mt7ZC5JYRHu7Ct/swcuQ64cE/VNKUJk1GBW9\nMr7ZSxAFzoR6FfaJ2sFdVPjGqtZZ0VLi/JfedEDL8pwgE63IZvUrXcwb7oUZ\n9HdBvYMwfE0yFfwrxXhyNgqckrPk40rfauPasvfwetR49eCPx1adfdE8t7hZ\nTxxTLuiTu2EMT0f22jTWjXnD0uNVSrc9CqMIJ+tU4Q2rI/IBx2ORr8/oKEOv\noXTl5ZVfppMFY2BU/ltYY6UhsHAE8piztNNVweMKSDt8hXswVSTMPu35q+9j\n3B7nXhmLSxsTgjrzHffBI8LWak+WHyGaGQI7HdKRx5Svn2oy3dChJToXNsza\nXAjQjLEg/10HvnM1o3Ky5/Ukpn9SL1/pI5e3gkBbo+9mb+7maNJWH9mbZUu4\nMnNdGwFKTP32zl1iHs3gTWQKovQDbIhR4Ep8oNi+zDoDKFiJbznIUYajwEJO\ne/MMv6yH6ZiuMBsGPuN/4OLChlr09u1pwBv35jp9tP+ArG36PUYRzS/A2+de\n7BKc\r\n=2V85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/density":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/touch-target":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.6df682e74.0_1631202243564_0.6767548935586931","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/icon-button","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a0a4a0b3881fca4a5ed8bcd35a482e49b4f6b2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.b49359c35.0.tgz","fileCount":40,"integrity":"sha512-1oi11oGMJKlvJ/uWJ4dUlN1EV6JXLkn0Gd7V4qG9Sjq9mkW03oTBpk8ORHsg6WALl4TJ8AfdN77NBcW1VCmnHQ==","signatures":[{"sig":"MEQCIH05fAyty/KWZwkhePzeuGAncJ50cb2woVXKO8PWDvbiAiBe+rQxnb8G0I6qPK7rKFqAm9UqDRKUKUZPopk/LRI5CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYVCRA9TVsSAnZWagAA53YQAJx3NbI/iGYQXRfzp1jA\nY+Dhdt+NED5007GpkckrArGrBmWI9m8y2La2bhd+e/KNfARg8dIGydgFuWTs\n3e8xGcC+RTHmajy49cEQ3X4VOoJzXBK5NfDyNJAnGKudGD6YS/T6mKYec14n\nVFtoWmd1c4tetEsnYDAsMgHRWrT81blxxdix0ArHZ8RFi5vHe/t2eVYAC+F6\nzmNm8hohsKIXVh11rWg/BWpd0fs0zkeyF/j0jwI24MMef4eG1dmC52QGZ/Vt\nYJrqTL6z2FkAyKGT1LZaB4VYM+xyq8GZ9sXgqYBxFxpFg2+GzTUYd81K21BQ\n0VyZDPX1lj+VoR2UTbtYV1RCz9sv7JaXnTKXZVrkGobBloho2UXxCX+B4ccE\nZELl72XZT1JBRhUs8N7xt//elb2sondb/9M66JXnMncPDpgclfJK14OQQit/\nRBQOkcKVAej+cWDjzUzFL0dA442PKSoI648tW4Mlxi9xSvcmmOMBNEm7IhF8\nDC97CMUmRmM4qob8OHfJ9RUTJDn9Osx1QqcrcanoqWWJ6td/OrAnwzEk5p66\nv2WpEEc2R3HHdYhTw9feGHpTrzzCRoDXLBfroAYdhqtTemWnVAtgWbSmhlms\n5/PT6wJefm0C4qLUsCaecghryphFIiDxGpgEH7DJGs5pdIorW9R3rSvE427c\npz9B\r\n=wrkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/density":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/touch-target":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.b49359c35.0_1631208981766_0.20522900336374006","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/icon-button","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0394f2229a98bdc35dca7bfb0c4e10aa5bf55de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.470bd34e8.0.tgz","fileCount":40,"integrity":"sha512-72Z4D4ziYIbkdpO8mKy+bVbucFYiyf3sok+jMuqzZC42M3bvGW5CNr5hHXaJtw5HiLs8k5kfkB4suuGkH3pE8g==","signatures":[{"sig":"MEYCIQDPuXiCQx6QwSCdimk2one89Yzc5a8JX1i+r64bNj44gwIhAJceYOjbybwo4JxHjcJNveVzTCTNuUnMDLh8Ttv4RsQz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwaCRA9TVsSAnZWagAA3cgP/RqxsmarwlmKOiGvrxhQ\nkhNK4QCImMrh5tkxiz9A3UumkpcMBTc/TtVLfPDTeGdyQC79Vx5iwOY13KvR\nkb2k2B6Hphhj0mAiDKZ6m/vdlUg0kMqEOFPEVWkzIEy7N69g15cVUbG7EI8S\nBMZkNyi/PHP2NVnWXtR0DLgIVD2Hs0b9W2imRzHf09vxDHeym63u9e1WO1S2\nH8+zy8r3A4032FNdiHBBtjlBuV91PwSGSGOua1urnSsfljd+kucS0ULqy9hB\nxd3ly0w9kVHOH5w9lDqT6kYWpYBGqURGsF2hSgd+tRx3OPoHDil6D0o/Jnri\naDk2Luq4/ELKNhLR/MOnYyYsmh4Czb54+be/Hemp6tL4ryQtbBwG15vdlWQc\ns6KOxqvHVcbbJxc0qJMBgspks5ULXYZVXiOjq++WLm5yUKG/R2xdqBmTL30j\nDjgyv27+FSQguyv+L27bmYRvI1Sl/97jR/yTI+dBnsKCaQyxLuQYsZcLMMFS\nCu9dSnpL2tDCIE/Rm8diJWNVUqLFypaN5nY29dMMigjy7KU8NZA/cTBdrg7+\nBoabYJUnjK3xF1ljNPehZJNANXtjyfH4hLKxfTGabhckvPlLw8XZsp7VZBfY\nkwVHXw3HVYbxSIj1vsVQ69FYTmoiEpkkScG/qmyrX0/Kr4wPGcZ5rnFZP+3a\nuyaK\r\n=itKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/density":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/touch-target":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.470bd34e8.0_1631210522262_0.08266282749455334","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/icon-button","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6edf0cb7218a8596da77d64c0ba2d0495d41d8d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d48a01771.0.tgz","fileCount":40,"integrity":"sha512-TbPDhosZ0eNatOAMGVQcXXU2CvjoxESLaCilAqo4aPCXkvAGEP1mc2qKbbWyrUSUULtO2Z/rYZUZJWVvQdCrHw==","signatures":[{"sig":"MEUCIEtDKhp7FmLsWnHGyyZer5dB9J97YCvqPMIcYfOE6dzQAiEA4RQXeID82zVPgT1lMev1bPLec9rEl2mqNDGe2Z4CM+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5BCRA9TVsSAnZWagAAQCcQAIvtw3Qk/Gp/srJLozqx\nFqjywmI5ImruJfQNuZuZKbqOWLajQ88KmRCSCP3kwa5KowqdHESEgTdKa0jt\nrCS+tpGxoHpm+tIIoU/N5d1BjzbSKsvRJntQdYbitUc2N76Aarw0XEf4iEgk\niKUAk7ShWNyWeyRWC+BPGud9Ip1jBdpIninosph3o/QCA8zhP1wrbRhk/Ylv\ncMR/9EoqSVDQJDXE7CXOt/fwXSNfDxek9SFv6+Tq+z+j/6K7gESJHxhlN0dC\ngtqBWgF/LuXYy4YcBXO7Qqdhmz9B9i31CL/PQecIRpM4ULPRoYev+/Lui/NX\nb5xQaKx+iJOyaOScu+DjAbEm/ipYlARLfAIFBZ1cESy2gNWazzV3MquR50C6\nBR9FboCaAavojpy0P/ZM+B0vi1VaDxaCyesXDNJebfxK0CdJIirm2RQe2Rap\n6DA2iFIC05Rfq4xUpBrGcKHJ67t4O4ozSZrBV1+W/BqrzOvEZLnZfcYwkSHc\nDYfDyD+sviT6ezTeGy0xQv7K3eTgbEjuQWgqw1fVVVs61O2hD9evyHKGHRNH\nCPNoKHD9wjQKJKYUWA1nzTDjJGazMeoZvU3hD4QeMGUi+p4ccrIl4rMDXZgX\nDPUe3mxUmA0LvZHZJ1yjn28tmY9Z6sGKh7fsLs5qFqaTMVBdGqHIPupZEFzi\nPOB7\r\n=BlKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/density":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/touch-target":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d48a01771.0_1631211072809_0.06822446673207261","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/icon-button","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131fdd4f207871400142bce09e83f94c3f28af26","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.13db34b34.0.tgz","fileCount":40,"integrity":"sha512-+5DdHWGkUx2Dmjjtcz6FOkwO4gXquvm2ullf5MYKVEYDwHsWWlvOoyUINQTx/LZO+6eA+YY+4RED0TYesoLSJA==","signatures":[{"sig":"MEYCIQD67eudUbdzp5R25NlfHTz1P0PlAaNQ8iSnLbAeRKYbtQIhAKfViZbvm4i03Nvt7FrsBXosuXbsAR9MaMQjcCV3CFK1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHGCRA9TVsSAnZWagAAMe4P+wVFUnom8XWGAJNZ+Ena\ndXx4o0NFR7OETniDrTbwJrAfV4WCOJceioW5w9ZNGXADI9Ox63pRvGbIlaQf\n/3cRslOXz2FOpLsxmzUd8ClU3au1WnlBQ4qqgoWRq0aNyT7lwuxgt87M3G+Y\nW9UkWoNIP1+HvF0leevwe3oEllFsjUk+ZD7BDoGvuDffo0CclYPUwpbm4bSG\nmLBQDnoGSbsRCTQ02qTFyNfDMQPwoq8eHzwwhfgZUKVO4QwbDMiZrcjw4fKq\nN4FtT6AXJqaOvicHuSS+iOv42KVocy2jo8fPikcZYz5w9k17TR6Z3VDPJWRP\nDTmKCBuGehqTNT7QwzZDUjg3m2grwMwUqpjSvlgD6L13lXXi2ojSoNvOe3qm\nyVh+bNZvrPTUMvHiNdcGcy2KOAmouCDvANgdxj7ydtIf3BE+IUFJM9XSrkkA\n4QIswpEhnQUcMu7nIYKW9wehjemJkxQ2aphInCkc9kPpvVwcoW6wzUyV+F9g\nN3BGjxgsVsokiV7ZNG8rpFiTYbHmxaSd/GPyeW0RWSCw2tcsdjjWmVjIfonP\nsQeD6OeDK30HKUQbDaEpn8h0vXo1BjpzNMllVNl+BWLhejnoskiWMraVvUbi\nDgCFeO2JznYj2xOnsXQfG5hrZ6iFkVQrVzJspBDxRm1vc0iTNzO+3W5LGVDw\nyDyF\r\n=Dc7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/density":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/touch-target":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.13db34b34.0_1631211974173_0.3700069605947165","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/icon-button","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d026d497be07c31f3a8edd5afaba14945eeb599b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.864798678.0.tgz","fileCount":40,"integrity":"sha512-Nsls54mwGW8lHkFHqKoHBZVvjU2K/DY0GZAZFx9bPTGtZdUQqUeW/DfCyi0Capc2liKHC+jZutV5MDCffk4Unw==","signatures":[{"sig":"MEUCIC2mFaCoHeBFaQfsOmLj5fRZqC+0ECcfeD8iE8g1PE3LAiEAt6Lgb7qXezZEtqa10TYvLl3v8dJA9MIzsOjbPhcaDqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlR1CRA9TVsSAnZWagAA7BUP/RTfyJ4r5Dmn/x3qOBma\nI+DEgrJWxKlxoatM226NljsZEjnRsjKhWdg0rF+LPc+zsCKZzEs3+nevZBIa\nFytF7mYq1sNoo+qJO/96nfwQVKuB4+BJw9Q6e79Au6JVpt54D/EU9DoAgWUW\nqKKM5kap6Kamj8BdsiFJ7RnV+VB4g/Vi4BXftZTaaSp8W1zeWWjiMsEIDwpH\nx9bb/K3RzzK+GKJmPVt5qb4U15c0tRNDcZlyYpyjey2HoNUCX54OhRhybwg8\nyQ6NugiANDoBohAmNIX0zCgrZXqLrXd2C5j65gmKQUYS2QfziDF5J0stclQH\n9Fgdq/DzrRcVPqj/gORgQy36z357iX4Y6H8A7t2JsakuGOZ6FuWSkwC3eLLi\n2SBc0egGYkzG66TJJt6zef/s/bIRHsRlG/9qTHOfBAXuendfXFq/pwHlwrnl\nbiTRhkvw6MFvDb+EQEXNXp4aQOVW+1LOj7s/+9QC+SXYrkth0FtC7UJVr/Fa\naeHGzwiZn0Z2b5p0hWIvakpwI33u3dgsBiw5ESRHgWG+A/MjN1CwC/zuglCU\nnTPeNNO2b50sLqnkfGYAqCc0fNbSh2CNUGtee+/cRoLLXvoTVC10HxnzWHG5\nNYSL4ox+YpVPVQHzIzOBA362MhMpZDStNHTF5+58X0DXGq3PlQ2cEh5BmV7G\nth+a\r\n=HxPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/density":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/touch-target":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.864798678.0_1631212661433_0.30429972287402274","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/icon-button","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b1c560eac357ca8f4f08445b85a61d5220380e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d04bda3fb.0.tgz","fileCount":40,"integrity":"sha512-cD/Vn3/JgL8O3jhmGTpxyteohdqL7lfYFxX560/NbNIg9C88EcKu0rxGdDP8yqvxPTgE7HJxwC+or5darx3unA==","signatures":[{"sig":"MEUCIQChdiOmjHIn8rfTBrCyNLmmgktZdO7CUIjsd+iXc/0YNwIgQlmT1TfPzrq/HQt/cGca1t64+iJHrHMayc2vMduoo1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3g7CRA9TVsSAnZWagAAEn8P/3xkltNRrlqYsGxfssmS\nfV2r3UqLVKvnO/Zb+qcV1QIy1lm0oLXUqXS4bxd9h1GXMlmmIL8azzp76/Na\nmO6Skz1nq4QbbSjy8jxybzF7oWP0rM6xXipNXlrUKV/MD/4zHAbt2AmcJXet\n22Zk/Di2BsawWmpFCGtElvASict3zQ3YBgwPvzko0LfhRQpBWfst8C8rWDlr\n1ZopWba5L+f1kPncmtBrKdNlNCvYHI/4dy8ch1P+S4NCp9G8sf5XWSaQBz/5\nq9JKGLnxL57WrAQS8oVJrkr/AOVC2FhZ6AoB/7soT85dfNaeAUYwKbj8szFm\nzwUQihSFfy40iZv7ykyYnxgpsAJ1PorgfdzNhqBk1LRNAojTNzULW2gR90Pf\nHZaeMoicH53gvewU/BWdXzgWCo0qvERv2Xp9wBj6faxa2sXItZ53B5dyQ+cc\n97clbslPKF2WTEEYzMwe1rMr6T3hqLipVKKQf7VSYdoiw0UVcy7oSLX5DK37\nlMzi+0PyAIPnGP0S02fJWMhQiKC6dBvOS6iaoi3SIv0FCQVJKM4VPgEIwDwN\noY+tcdhV7WTZo3ar1clqPGOwc+WzRLzfTxrUeAE6x9Gc2zPDmvFNH5XC2QGF\nEPAhPRiLlfnRwlz6RBywYBucM9aA0bnYDa7Jz09cvTCoQwtH82e2xuopXdRw\noaR/\r\n=I4GO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/density":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d04bda3fb.0_1631287355309_0.9199399319051429","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/icon-button","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50242ac46bd3dab1a990b57b47820a25f493ed2a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.5533f73d3.0.tgz","fileCount":40,"integrity":"sha512-9CjbkI4aWulT0IWWgNkUQmIVii8tIpX2TW+ZxY0gcMCy8EDxlbG3Msy7C3EqQEvhrj3ypZm1hpwn72brd28VOg==","signatures":[{"sig":"MEYCIQC5pM+rOkVCn6t5QE3+c52lwAfleBKhoPT72YRWeK8g8gIhAMz3ERdzIStuLG5Ijhr8jbqRTN/luill0+EBRTw8R2aZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9j8CRA9TVsSAnZWagAA+MkP/0ar33xxCOEaYMOb+nmH\ngn3U2QT4i9WGrxhAEYfckbJ/+O0ca+WZMmkb9M42hKZGuPdejSvw0jyCaI9W\n5e2jhLyBtD25RYViKphf++qQi9kBKPAaYh8UCHEG9t1trbD28kygrYj74lTn\nRsIr+jsdX7f0DefuhwgWYSPW5IXY1HU4l8GZUH+lnmvi7FnfHpmNI9IO7Khf\nyoa/yu60Eke4sL6PKTBNUIbpCMDyB2Rz1QCP3BKzCyNW8BGJFTYYHypifz8R\n/rNu3dmarEFh3ZbOrejwJ/sDFLXhqoQ9g+Ps+GJJcOS9bBlp5Ok2V6HR4VxA\neSENtYv6GaIW2AfHj8iluQSCB50T2wlllvCh5hut1zIKYjS7tb4wBpP+tjmA\n+cqAmIin22JzvEbcsueTFcOdrCYxOpKkB/ZRWD5NRNWkhgM6bJfLGF91i9pv\nDEnkNffzZE/i+G+vqYxc/OJ/s+WaRBLue5uRJ7WWSoB61l32IJrxyetv+5jc\nGYNDiW0xxAhPEwLZ7sMi9SbswvX1wWHpV+O2O93x4Az0bSYRTqwGRHNfTR+9\n0Ibe7zTHcLt8vXXBRfKr2mDmTR4XB+jHMtc1DEmNWOz6TquA/ElNlI8bqNpf\ncGc9vCruG6BZ/VgP27UklSyQWxVYZac9BLP5lKHiWGfeheauMckBr4frnAty\nVDqr\r\n=LKY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/density":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/touch-target":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.5533f73d3.0_1631574268751_0.6324716848086727","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/icon-button","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b46a24b3fa580eb2c4d0bae99a55a1ac377f8d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.08398f880.0.tgz","fileCount":40,"integrity":"sha512-ywMDbuMuirSztcfGFYr7CFxc/9IEv7bTJQQKiNf0y59j76IxTB1duHZ9xtV6RdT20m0NuE5tFCtAwR5kCJmjMg==","signatures":[{"sig":"MEUCIQDKI61eeQ6yAN9EL2DxEe/24SSzQ1tFkna+I2hGsfpK4wIgaUmdIraOGkMZXvR3q4atsKf6JaoLY6Cap349aiJzdOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+AtCRA9TVsSAnZWagAA4pwP/3NwBZaIHTCfpQZt+Fyw\ng/vv49HW/nV5QmWeaw5B8w212Z8My9bV3To2ZpXFxguYacGfFFEpwGsBtmOJ\n6NTIE0WN7a4ryXDQRLcU8p5tbgEJXpZhoOs/34J8OtLIXln37dRFqTJDW/EU\nwm1GKGjMWhW/YHAyLAEiQ/XD+3wOqRRx5xSSwPErwBAchwgcetBEmnfGy0/z\n0yc97tGh2rN8g4/xsxib4TJpR0DV3z+D0++jExrTYY+1DpSpy7Qeeih7AjkD\n2hj7s3PIBNlqtBEzq/kxdp/Rx4BueD9KFrqIt4aitxor1ft+cBXF1sTiPjDX\nbjVFX6KR/o4ZmO/4u6Ec5c4XF3USB06PlR8+LYKiwpfTxd9AzOs7xg6Rm0mF\nR3vpaQHV3580Fyv+CigO67VdlqKAGaxIJAolvHdmc0RQjkHU5T7RhfRHKiSL\nwc+XxEzAwO2Q6UhYo/ArKfBsCqSG0gnlNCeQ3hR1x0E0RwOhhiYPiVuJmBEf\nohOGqWya5Or5jj7eEBV/0Z2bGOqFsUhA3zPOQkgeTgd/k84VL8pP7ScBORID\nzVlCpvwk5kFeXy9w67/0Y+1Hfk34vRGLAnp1cL7+19hyT1arfmiFELNlj9KI\nxDL9g+hqRvdwDeLbSdklqfihEcqO/SPdXi3Cl5p7Am8fH1863lGYCZTu7OaT\nF/o6\r\n=+hx/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/density":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/touch-target":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.08398f880.0_1631576108936_0.8879060043347833","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/icon-button","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c7b38888f828ae287c4543370e32b42dc104eec","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.818f4ee93.0.tgz","fileCount":40,"integrity":"sha512-DzXdVbDLJ8kYdtIXB9vzoFcoX8t+8eieooq+ezPMsYczEvKCRR3ZASpaeQPlWgbLO+veUnfImXudBncyPFhM+Q==","signatures":[{"sig":"MEUCIBOO5PQGh37RjQ0oslCIZWaeW6cHmNxvyE8sMNTDoPpWAiEA8EzTCNpXkxt9NNQbZRcGO9g7q9tDRQV+4Q7wUtQ1zmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":394382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKNCRA9TVsSAnZWagAAIskP/A2yUxecsWEQUbqr+FHj\n3R7yaV6LNHgyiCTc/D5Ut6wgbUEizXToOfr56sbEkQxJDD9K7jQyswq/5WI7\nBsFjvwEPs2wQWE9pJNIJsdkn8nmCjxyafGWvvCj9xZdAzEL7iTH76XABYyl9\nBvGLgkq3OPdbZteys+uRvwqPZqJ6BtY6VwSJ0hyxNETsYsxTf6YCxt0iar7m\npSyHYm3203YbjXHqNujDjbBz9X9VZ1qIEp+d9jOLFDsibzfSEOYdt4j/jGRG\nmrF+6SzL6/StXwfQuOx8MVEQE4J0TlUZVpCephxHHC3PjNZX7Dy19Q3q9Nr0\nhFfVBz/9gB4HJasbkJlCv2rTTq8jGVXkmgGyrxSYRZyrA2qQX36NfW23Laew\nC+RmPtEZwRsZ0QxR08d/Y82YID/irwtHojsuL9zdh6gGlyzBjuTm6A6oh1r+\nqCoFzyL6VAB1iLDEtp+rNIaqqBuCr4FUZ5xbTHfgNd4GMwRhjZ0CaT/vFKqY\n5obwwdSOc7wZajhz/OHqL1T/5gLM5PZtteE82QEb4yrD0vdgVlbxAW0w6Qnb\nXkwVgusYIhOhm49fNatElyuU4H4gVPTsbHGKdq7hCQvhgDJFGauXbKCQBx8C\nyicZXYQnQ3YIhddv3t9oSFWJM7q9tlkgSDrGgjRw0Y1HgBXCaaLm8qlRcBeb\nBuaZ\r\n=7lid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/density":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/touch-target":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.818f4ee93.0_1631728269405_0.6602765313984655","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/icon-button","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c33e40ddf8e25d16d5098c53f5b417ad1274850e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.8355e14dc.0.tgz","fileCount":40,"integrity":"sha512-A97UQH1bCpaUnlPdn1Rl93Zky72zdyHxUlC5RiSMVumwmRQXYfIlkOqUw7q13+mfzmivg9ihP0+se//+q/yf9A==","signatures":[{"sig":"MEQCICoaqfKjDdPrgocmXus8A+G3ACsDLza+N7b78VWNN/iiAiBr5yC0Dh1N0njCFH6GLHmqeAHcCY8RW5F1rikhaFbPJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXECRA9TVsSAnZWagAAw0cP/3fMr0KEJcz+kVZVhhv9\nBOyTElQu6voInu9KsedRxsmMpnC0MIje3A5xWpdrN9bmexxoIChaGTw822Sw\nCLb+jcHVQVLbYq8fj/gDDFerRcFdt3CjrxFjjXl5CkR2GSU6VcjXtVYazDZq\nsXJN5hGEBqiI93l3r336l1DrEa4pC5Q0VeIXaom7RgOhSAbpDYKEGBQ0PPpO\nCypEqjS/5qWDGcKTMkRNrVbUX/cHBT3HjWr8viWEj9qK4zc5PMC7iWnPJsLd\ngxDCKv+emu3hvOxJPHqltZeNI+2UYvOlbW3+anXeupBTrNbI3u+nOHIrU125\nyjhYD40HLCZRM9I0sWck+L3kbe1yLu+zNzhaq27NvjaD5USQ/+vYsGCQF6GD\nQltnaCOvPGvrm8G8jPXa0jeTbC+/0tJjMvGa//8/69MfVdWTPBpepZDWsaTp\nbZKIbuSBn8uS2Di8Gn9UwQC1g0A6Ck5dOownWCda7kqSc5QnjKeof8u241m7\njZZfsiv9PcqHbTzkAvWklh3KNAGSbg2C01eudhQgE1PhahS5/yRpaGYY8FH1\n5o3aHSEI/lEhubfiaMevgRUaQPJe1PPqu+aDTIwqWJ33u3O2eiMGRZdxZw0V\n05kA6Yc7obeICmFivFDfpOh5LYndccKT88pHXKql8GJCNxeX+55IfZ2LRB0c\np9Wb\r\n=gqVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/density":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/touch-target":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.8355e14dc.0_1631733188477_0.44113618707888214","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/icon-button","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ed7c3e6e21dbd260504b5fa97a3f46f3af9b69","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":40,"integrity":"sha512-0wUGYyWgiRLC9a0Ae4q5eRK5NfBaCGLeOq+MhL398WCoQ+0OZknKhOqWhLUqnms7cbsLmowKWrnmudol/826qg==","signatures":[{"sig":"MEUCIH1xgyEmVlEpOxi26YJ+lF6dKVXj8wjLptmgY2KvqvnDAiEA9JpklLmgQE+Y+lt+tLPeMrzr0MaynCwMBVKWDcBcCNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzZCRA9TVsSAnZWagAAyrwP/iIf4PFslgNpVIWBNQ1C\nD5odWszfEt0uy68aOzkKbQUuuSlva+AynCtf1XY3pzSsPSdE51T+bn0SeBT3\nCuYqIYH1HUY/0FL54ehZXN7nhUn0BI+sJHVWzuOfTYdlcpJYBekHe8+pKv5I\nM2vBa/H5UAeoceVJjujgWOgHuhzxWBdb0lgjhcre1t2qqg9ZaHcksQk1yFNK\nxHE18G+968ZvJyFXG+KNUCYVGf1UEEPibTAs5xAUfCQr955dZ0oRpbmcP6l5\n6bB+ORhes3MKinqzZwxfsehveOR75lNXC9rLCj+imyXQOTwd418NcIdqKjrU\nt+waUOwvZtGG8M484tT2wPuXWnpDChhesVS33M6KGfyjf7f9y9z9CqcgvQOk\nnv8DeFosEvVE3WrL2++AdKkvyGnWT9sIzx4txFgeJMZAA+yfZFIg/1JTGByC\n3gv8UeQNbzoPpBhiMpKkhOZzB1LeEPNmI7UkD7ljjIGBROTSggW3I5LbxpuJ\nprriPcZMwEU5Qk0iMALeX9LyJhqO1SjdCLT2+4bL9sLg9aeBTZgYZZGv/o8F\nMEyD4o+IgiAuxmt26HoBiUmvvmXA1LBFOfWS2vxV847TVlodvpdOJ4BXwX03\nldYn2on41XA4xQxZ7ldEFUNwqJ9ZFRVagbbvheurXoFwS47o1sAE4qlqfAoq\n+d5Y\r\n=vnfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/density":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.d4e16a6c4.0_1631743193437_0.6899199226471155","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/icon-button","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32dc112e8afd677de67e7d818098bcee12109cf7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.65125b3a6.0.tgz","fileCount":40,"integrity":"sha512-lFHpLhka0BIVK8xr/qZ+A7D1sj8aEk6VH+OMqvJU1TPPUvYF7ad1gi0C2bFu/56v/ctxJ4nsaaiBmfvYuzS9ow==","signatures":[{"sig":"MEUCIQDDIMYdiHzIpclX+MdGummIGM1jLrb6ax7TeKS9bzUBOAIgBFOCylXd6ss4fKO/GJz9cRRGJUiGLdTtnzG8a2tECE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7STCRA9TVsSAnZWagAAwukP/RLhIqfF/pxwIe2ezfYc\n1wwCRwG7blsmxAOZO6zmotmEOeEEchqRghYB8O0tmTOT+e3AF6YjVtPQXfVg\nsluILlx582AE/DYiyr0Ouwx14Vygvs6zgoQSYxmvGnuX0RCGggpVW2xb0fyC\nM3B21E+iXYhCF1r5tnDx/HytIGIKOnfOsT3sZozuDmtTJ4qeLZAqLAk4lto8\nN2HIFarU46rQD5GNJP4/CO4T+sTpWsd3egiI1hOvgvmPtpig5rmwlCXKpknR\nUoXn0f2LpdCGf4Nv/0qP3hWX+r4vOi+d9VvW+lBuaGVr0pZREkdTkexwoKon\nDczJHSLJBvYzDqStGuKXCKaX4Mr6L4tGhiCbJFrudPnvK22FSZVYTKffvkz8\nHt0WzNFjuJl2tvqewKUdQ/WnvAY05uBN7fNu92PIq9Aa1FeVmwVNTON1X20u\nveAOc+VfrHiG5j6SiTxY3r5np2wBn9/XuUWMakgXX1m7vnkxTxxNAoHTJJn5\n4WdaMPmxO869XDHyCEpiQswmGTw1XrWtZeW2a96lAwa/8q1Vf8A4F2VX5ASB\nXqKV2CMXCM7UpAHPDlgbhJSi+MVB17GZQpQTkJ6CtsqtOjOf+yxxUYGy+sIh\nz5E2AliCpuaWmF8handxV1a1Mqbtd48GxszNgxDqFmv5QLqNMH5cVTTicQT5\nDXHc\r\n=qcjt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/density":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/touch-target":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.65125b3a6.0_1631827091209_0.12419869772628744","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/icon-button","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17c9088eadc98c82ab74481b6ad893040a8fb979","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.80a583365.0.tgz","fileCount":40,"integrity":"sha512-PcomkGTnGqIucs9BVY6WWYKFyzj/DYIZQgFG6KRPcwNr6CCbxm5J1aUdbguXZjfpSDOWFv5uLxkchfpjHHVpZQ==","signatures":[{"sig":"MEQCIEiFKQQvRxIVPP/qsVHjq1L07+/4LzbLVdFdn9btXdpnAiAVL5mu/u0AZkmcggY43V3XdvDtHLWMB0bIU7disUC8zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/density":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/touch-target":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.80a583365.0_1631910978701_0.40775160567953783","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/icon-button","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e19d8ceddf41893f44eeae260f73b4e1e0bd14f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.83900936a.0.tgz","fileCount":40,"integrity":"sha512-po6Jtoj/c+gSPaeLtM2Rt5l9iKRBB08h94GpWTrotiatSNt6qT0G4wmwhnuE5OeSiUPDB5NqoD1t102WKGIUdQ==","signatures":[{"sig":"MEYCIQCbF4V2X7LFjnMOWCHQBA1EQyIIxq9g9Bm6GX3S3JqFRQIhAO1O8GryuWG2OnDxuE7EYW1U87aulv1V4wDvQbyXaBUH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/density":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/touch-target":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.83900936a.0_1631921088688_0.8373449187417068","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/icon-button","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fde7eb76260b3d806d2eda64a6abb2f266b5ab5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.860ad06a1.0.tgz","fileCount":40,"integrity":"sha512-1SVlPiZAYFirpuSmMhUajRdIKU+9jMpDvfCbDXL2z+dgu00oDicE4UtqQ8NjOpy6FBvQfiLFUTbvmnj+2SX6RA==","signatures":[{"sig":"MEUCIQCp0Be079tEbmFtkbPBpoBr3IEVO6CeItQCvQ/p0Rjl7AIgfBZT4X1j0vnSI1Apam8l2spF2lACyGNO36ZwSF5MzU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/density":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/touch-target":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.860ad06a1.0_1631921787377_0.7083989436287506","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/icon-button","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9db24a9fe34c0a72e43a56bf731a4edb82965c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.3b8d4429e.0.tgz","fileCount":40,"integrity":"sha512-lTVfkTWIcwPyg5mGrJ+0B9olWtbUkL5TNMdx4TBR+WCtBfEfc0qKHigU2CbJJUApUXzTkMHyjSHwy/jBwrpXAw==","signatures":[{"sig":"MEUCIQDOT2sF9wGV3dB7wWS51mfeq4F4HvD+vsnRqXdsJlejngIgP1e14/if9SokHzIFNfQZSxYWxxl6ITc9tByd0Yg6KLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/density":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.3b8d4429e.0_1632160083467_0.6159657973246127","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/icon-button","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bce4107a2005f88cc6c5ca3a23839f75c96c154","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.2da3606b9.0.tgz","fileCount":40,"integrity":"sha512-XU1hHc/oC/QTNaG0ZoImLefAIkTM6vCA96hDGuappVA21+NmZWDOX+YfKQCFnIAT4/CKRAasZSEIbY5ckWQfOg==","signatures":[{"sig":"MEUCIQDKzDD3uB28wlXHvDuZvdLQ23R/gzZsYjEq9XeSknTz8wIgJNqHnaXHdNMi1zU730J18Btwyqfv1sM5CbvqUyWbf6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396717},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/density":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/touch-target":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.2da3606b9.0_1632166690638_0.7922256324536061","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/icon-button","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99e077c60689705c0779c9296018eaa5f36c5a2e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.e8c598d1e.0.tgz","fileCount":40,"integrity":"sha512-9XI6Mh9ol2bMQLccRbA70UHG/ZTwF/cfiBNFP2J//UduGEHayqKZM6WyxOf42dKCcjIGIXmTqPgTVYNVrs4Quw==","signatures":[{"sig":"MEQCIGRX1uqF446pEVoK6lTYfKrK/4DHMmuxKXPJDBxoVIo5AiBlQWesDyZ4QyD9mRQe5OAZuvplBrq7TyDGWYcaoPZ11w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399971},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/density":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.e8c598d1e.0_1632172341585_0.9333053890261453","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/icon-button","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1c53650fec3d4fb75c897f9c4115d184cdf7b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.1340ee9f7.0.tgz","fileCount":40,"integrity":"sha512-hB0eXcl1t99p94P6C7XWoWbxkoguKvi24ET2TJd9ad26FjCuxLwnBAt7zSj1P4GopjOeXd/VZNOT9RiSnPuvoA==","signatures":[{"sig":"MEQCIHpaOxA/Hp9P26ls+rxDj2Ok1F2MPtXzaOQLE5jzt92CAiAqQ5cmJIHkSygHoTtp3VS7tNi2VTOrtnjPNMJS6UzcLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400003},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/density":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.1340ee9f7.0_1632333504092_0.34484507910997997","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/icon-button","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e35e54c0c555580d379d530ee7973893f67b1f0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.65084baff.0.tgz","fileCount":40,"integrity":"sha512-+2o+6FvSYHI3eNP6dNQT6EFBuWwOYp9sw0vNFQsm9g/y0XS2zkRGZ83TJzkKw8UnDBfjMZe7NrUf/W8cxGu2SQ==","signatures":[{"sig":"MEYCIQCDGlVz+PPG2wPxnw0GZa+8HIy7XuWDIVgTupddcikJpwIhAJoBcGAF4TqM8K+KJKL+gVRNusLgY3CzdXqrgaYn2svI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400003},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/density":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/touch-target":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.65084baff.0_1632432358687_0.013349785812797776","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/icon-button","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bc0bf63ae70cafb55e1f3e48066c067f1cba6ad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":40,"integrity":"sha512-TbCF517f8LFHlfNgRvff/tjajf0k5SKMpWSje5Bimn59xnYlZln9iq2zVoeZWzmM2gBtIFc77Jm7YpzUg8NvKQ==","signatures":[{"sig":"MEUCIG2rxTsR3UMZ6XA1jVSgIM5aoU2E3mXPhgG6sLJYb6RSAiEAgR8XJb4o6uzpLNMeE8Mtpu4xsRgWmpyF1Z0wsw09Fjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400003},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/density":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0-canary.c79aa0cdd.0_1632490945112_0.9786419670717894","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/icon-button","version":"13.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d3fb5dcd2b944883f8241420b82f0f3ce2ebf2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-13.0.0.tgz","fileCount":39,"integrity":"sha512-SdxFytWvbfN0fj7jHFq3DqK5/Zoms+Ipuv6fI8AzwgDFe7mXJ2euPahN+3XcmJ3BaSMyfYsdbcYdCWs8bgHW1w==","signatures":[{"sig":"MEQCIC2+7DA0BLaTK+Q+G5QVdKX0b2qWN6k4bAJAj99Tl/bVAiAJkNEpQ5LaGujHk66fGnln3eaUbcdDICjkEkheOC7pCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":398262},"main":"dist/mdc.iconButton.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/density":"^13.0.0","@material/elevation":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_13.0.0_1632512780840_0.8922159749562706","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/icon-button","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b81bbeb2021c351a0b2728cda5b25e11fc3c586e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.198431fcd.0.tgz","fileCount":40,"integrity":"sha512-48Qmdtd5SDAh3kyhIatsCUEeuAanlNqvurpkidhJH5BMPVbYc1SMkA4If6oTcqzFGrWv/STgmkDjQt3Hc5r4Pg==","signatures":[{"sig":"MEQCIFv4vWDTbzJ8oJymq2HtMsVkolSIIu4d1samloUNudJsAiBIRi1kf1ilR6gtKqlR0yf6kLuf/pMT2qrwZGgBmHLLkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400003},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/density":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/touch-target":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.198431fcd.0_1632512824910_0.5924699335426211","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/icon-button","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae7a5de4e9ac3933f3dcbbe1a7c5a0ee1ce7767","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":40,"integrity":"sha512-5/hA22lwx6p+ekCLlJxJAh1bkoCU1HiSdMFmzjAcY9O4UFSs/7SzOCkG7KjLIub/co6zqo4Fa7STgmYUz7Zdbg==","signatures":[{"sig":"MEUCIElWPF5zlLH2mViXzGWSUVL8Sj0Rz3skwsEYK5VP/S1mAiEAtu7/wM+8Luit3rsEPRiIpbO5i55Z1y8tXFLYvZOSptg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399285},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/density":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.9a02b6ef8.0_1632575490333_0.8210428398863978","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/icon-button","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc141a6ecb5ecba816bd4586428e6b7b02193b5d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.758ce31d9.0.tgz","fileCount":40,"integrity":"sha512-H3XqVnRO0qmpx/7dr1O505zzdG8q9VKg5pVusUr75OsHUAgPwVXS9LKVIbKJNZHBU/4e1YLXxKpMQDg3/qXwnw==","signatures":[{"sig":"MEUCIFe+wgs3L40sNDvMxUaoMiCRD0Bd4F59wGSS8OCOBZy0AiEAplj3wU939MRLs4gn/JDs/HrcBwcoSBIaOlFEtGoKXkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399285},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/density":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/touch-target":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.758ce31d9.0_1632763785231_0.9110395856844651","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/icon-button","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2bbb8a2653ec4a6365628658bae0400c451adae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.86b50ef74.0.tgz","fileCount":40,"integrity":"sha512-VRILJpW0JoWPn+dx1zXd6iMedlO7EAi8rQd/g2iRdwhorFmD/XZYiavhwIRkhAxbClpQE001mKTFh1Hgvymkww==","signatures":[{"sig":"MEUCIAMJH4pDHP5Zhgd6uQl7IeeeG2HzZ+0R42Bxi73Wi5qIAiEA8fENslxuErXKFiGn/jJn4fLEmKG2bK/BeG45IKkytEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399285},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/density":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/touch-target":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.86b50ef74.0_1632851010625_0.5582450408260975","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/icon-button","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31d26cd9a746f5c692a1e50b029a1711f131aed3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.b2fe3528b.0.tgz","fileCount":40,"integrity":"sha512-naVasCZWBnaObqxA4C0IiAxs3cDM2Za/ivO7pL6IZEoj9a7q9GkTbAwA9R9Lan68515UQ+MslVx6D2UbWflt2g==","signatures":[{"sig":"MEUCIQDrgTEHTI56f46RaB+rwklsl+SpozLPX54i35kGeQ0K+gIgWFlcUWjs4cNkcy8hESQmNm1wUkACLpKoNm8Z+ZgfmF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399285},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/density":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.b2fe3528b.0_1632956244140_0.13741097926102985","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/icon-button","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b871c1e6f18570987d7d87843c15a20413fd06c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.586e740dd.0.tgz","fileCount":40,"integrity":"sha512-jB+fJ5sxr6lRT6lAFJkdfkpQ4701OvD6Vkc8/UZ+wPOEIYkfiOhT2nIsG6qdXaDSLLOh943I57IiZc9uNU+whQ==","signatures":[{"sig":"MEQCIBu9UGo3QQSlLq9fMlhL81qpzAoU1Fr/AQwY1/5mwD7tAiAIT16N7ebI7darcKOQ8aHTgS00+cWJLzdOJD7hlBbuRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399425},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/density":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/touch-target":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.586e740dd.0_1633019508210_0.8810004395375663","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/icon-button","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05c2750782df929f160a8b09a4410c98b67bc94","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.2ac92d766.0.tgz","fileCount":40,"integrity":"sha512-tzIiK5m2h+taQUa6l4BiTm8KWU8faeiQKxyDX9iPi/XUHM7p8AJtFWgyYKXidN59U02k32/tas/LO0lashECFQ==","signatures":[{"sig":"MEUCIQCVVKPJpRAIKAshc4DlMK61R8LcQk7QW23Nhphl+Y26UAIgcT0Z6J7nlYsULizV2qbboLPuNC/zjJhvb9grca7Rz6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399475},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/density":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/touch-target":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.2ac92d766.0_1633462140477_0.9897151724370201","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/icon-button","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23ed38c0ea64f21d1757381beab45c4326fddba7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.353ca7e9f.0.tgz","fileCount":40,"integrity":"sha512-7X/KSl8XfZu1zkcMjOb3jQcDDCQ5N1DCtaKDkb/VvHn4x0XTI4bkCKCHnnKW9hWLacKv95KEUYY39rS3teKi9A==","signatures":[{"sig":"MEUCICQ0CqhMnp+HqZ1tFe7m5nZY22Q3GPP38Nh4uhWWGnddAiEA2wfGMs8heaaKicaWIa0fddxktQnsR9bddmftybQkAqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399475},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/density":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.353ca7e9f.0_1633718844929_0.3384373968394758","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/icon-button","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233c5eae4949901db40f477c9f47f98bc5a267e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.c78ff0429.0.tgz","fileCount":40,"integrity":"sha512-4MTgqbyR3RhLIZk/RF5ZgaA9clDULDkQhIngpnCTiOvP8JLPnkMVrXgs447n0fAv7K8U2UP3uNpY1vwpEcACUg==","signatures":[{"sig":"MEUCIQDw/s9uJDYhNBA3KW83JpN+IzNBkkcaVhUGi1Ujm05zIgIgNjibJIEceLWLIVifSX9PNNoSxSCM0GCvICGZHJzFSkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399475},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/density":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/touch-target":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.c78ff0429.0_1633972953942_0.25797080827434327","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/icon-button","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36398248c769a8580878a0ef14a68eccfd66b667","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.261f2db59.0.tgz","fileCount":40,"integrity":"sha512-9P6cjRqKtjE6ML+r5yz0ExU/f2KLdNabHQxmO6RpKd/FnjTyP1NcWqqj8dsvo/DZ7mOtT1MIThgkQDdiMqcYLg==","signatures":[{"sig":"MEQCIHYdKfFnb+0iyH9PT6kjFtgjT6dx6mugpQl8sO6qptgIAiB/Jzm0EfvdUzSlbdlc3eeeMKi6UCydrUGyywj8+tOEVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399452},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/density":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/touch-target":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.261f2db59.0_1634749209700_0.08852209053875959","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/icon-button","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff2cecb9994109e82097f99ce24e2ece8576a718","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.9803d2dc1.0.tgz","fileCount":40,"integrity":"sha512-i2XObqBkH3qKqBjvyNmbjXxFf9tC4jA9fqzApsajKjvJkGIx4YA18HnBCs7mJpe11jRdneVZlTQ+LkBRP+CgyA==","signatures":[{"sig":"MEYCIQCVSsGfMrGZaYWnxjh8LjmdNUQj0/MJ0RVd+WHBihOlYQIhAIDDJm+8HDzgYJvPP7i07VnFjMOphximf327sFsHEskM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/density":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.9803d2dc1.0_1634757739966_0.31042914184274606","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/icon-button","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a67ac05fc39da105204327bc1b3720b119dcdf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.348665978.0.tgz","fileCount":40,"integrity":"sha512-8AdrnFK3eetnNLgsNuyswW4i4Kx2B8Sxx5+f8MrwkfVummp5w1MJ7Ks/DXT6Alxcp2LyPYPHp1t75tWGMjNTug==","signatures":[{"sig":"MEUCIQD4qMjs0QHBeP1CvIr72ZtSJ5OpU63j0/JUnvOtGPL9hgIgKReuZW6Q4jOyDiKhi5WcuotIS/WLqehy2nadZptu9f8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/density":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/touch-target":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.348665978.0_1634827875456_0.2697664120236156","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/icon-button","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c2ff1f7b2595c4f41c7afb9b02868b33aa0d1d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.b2b979a8a.0.tgz","fileCount":40,"integrity":"sha512-JXEyNWCICn0ZakhglJRK6y28BZxvGxVLP1b5YbYiMQN52fjVeKWa14XwcyMFKHsyJO0wBbUdzlJdRO0rYw/DTw==","signatures":[{"sig":"MEYCIQDV41KFRJy0RuZQeSFLgtwZE/7Zu0fjnKA5rLcvt6kbYAIhALowAhgZHHAi84kYuQhJBk+b5wbCfr2Ue8rUj64ZMK7y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/density":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.b2b979a8a.0_1635433970519_0.664177015955348","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/icon-button","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"703e631f391e855f71a1b3ef4d68a1c4fd729c5f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":40,"integrity":"sha512-/gRqNehNUGh+zSunECp2T7p8jn2P8M5zp6PtA4voq2vBKKNHcwlhdr2OsiBDPi26fZmHX8ntUAE2Zk6YwdNRWw==","signatures":[{"sig":"MEUCIQD5zxzs8u4NWCPI937yQLbfTfsKlJqYwL+renMG2D5CMgIgS8z2kBI+ZNedzKznB22TUVsRHn4LT3HEHhL6Mn90F44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/density":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.1af7c1c4a.0_1635443600019_0.44039290550867016","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/icon-button","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f22db70ad99829d77a5038ab081aa5db17e4ce2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.4afd353cd.0.tgz","fileCount":40,"integrity":"sha512-9mGwhR3FE34Cpj+5LyjZQegjQbyrj2UcIYz+UNjApOyjdC9/Oia2s6WobxoCiAkQ0fHZtLvnElyZd3avwNuy8A==","signatures":[{"sig":"MEYCIQCAnqDT3x75UgtTCHNMpJWeEGw3mnGrvKe+m8M3SO92cAIhAIDjbk0mplK4ah+rFQEO8XzJ0/IEnuig7URpGlYyN8m8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/density":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/touch-target":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.4afd353cd.0_1635519723085_0.8609250464693128","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/icon-button","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2840e862caf54185e62aceb93a43951af22c329a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.a986df922.0.tgz","fileCount":40,"integrity":"sha512-F7IMubw1cGlyd7SWMvoTfW3oyvfmK1oc0Mg911MCe7mV3JEEhoOWlvyLVpQNvjKQ4NrAZ/TG4wRuploe1rGVlA==","signatures":[{"sig":"MEQCID5vP4DTe6WUPcVDqYf/qZUGzyy7XkAA/O7ln/yyhLxCAiBQaC2FlzImpW1yp+jK/l4XD19yAZ/sMl9lYfhRncVpug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/density":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/touch-target":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.a986df922.0_1635543330737_0.9868827355148517","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/icon-button","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1822cfd5d7c8e8bc18015fe4bb2adf66d96bb333","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.c3cdff07b.0.tgz","fileCount":40,"integrity":"sha512-tXvNllDPSnvah1YUeuHt62vydJdqPYvWIPy95JroEWsR4dCFEdCZ23HH6aKnrsHcalySfp2FBK0rAVhpaFVnmw==","signatures":[{"sig":"MEYCIQDQ0cKj/N3+h0Krd+lGFcThxRUuYs0Exwi7TLzcBorvxAIhAKJZ/TS5POJmZ8CojXLqxoTRlmabBf+CDH+NPEQlGui/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/density":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.c3cdff07b.0_1636484783399_0.9786543317959673","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/icon-button","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45e135fa975ebdb27ad869de5160e154084672aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.468392606.0.tgz","fileCount":40,"integrity":"sha512-xAST2A3v/S2de6Z5bIN1mwbpuA0fg795O0m/MXggeIyl5xvQJG+Px8FfO9fl3uMn/JokdtDW5FAUDcZF2C2qVg==","signatures":[{"sig":"MEUCIHTrsQhzQVFQGl3nGjfDEQMl2dTv03P/PhRMf9X0nkGyAiEA8rT9TxXX8ca3l+3dOCacMEqpWlc948af55yZ8SLJsyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/density":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/touch-target":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.468392606.0_1636659636824_0.2766572961999769","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/icon-button","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e13b4d519e2972d41abe0374426538406db8c57","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.828f9803b.0.tgz","fileCount":40,"integrity":"sha512-gHOOiDEPb6cubGIgL0uVvE62abf8DqxKg2BC8ce5j2teyrjfPJZG0AtzKh8XYjAIDTc2DZYAtJUq5z6q2r5G1Q==","signatures":[{"sig":"MEUCIAxGlc3SYb3WIOrQ9mcu7tkGalp4nZT8KIaVWXJ+H0mMAiEAtVdMb9eITFGUV2K/99og6deK8kl89+y7k7Y/b0zwMy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/density":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/touch-target":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.828f9803b.0_1636660278317_0.4174272375324266","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/icon-button","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e26bdfcab350356bbbb3dbc1ac3de3d5d03ddf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.8795cba87.0.tgz","fileCount":40,"integrity":"sha512-tUtGS6mHx9gIf8kNCzbpqyPNBK2nIhBENbA6PGaYeENMn1HAxHq858k6sKG6PSMedHY1i6URY3jCFpDW1S0PgA==","signatures":[{"sig":"MEUCIGofrpO/0E6rmIKTOCuuw9bBe8CyH0qr+XK6E8mXOfKBAiEAvPVSglNZz5nVDxPrDPykUC6Q0ePRpH8DMv9xYinRlLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/density":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/touch-target":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.8795cba87.0_1636660635042_0.6944688481633818","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/icon-button","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7874315d48a877ecf88dfc00d366d1e9e8f91fdd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.cd7f8cace.0.tgz","fileCount":40,"integrity":"sha512-F58pLFF2faB0iULeX847RC5t+UnMx/UiQ8XAxySXLKQy7YKC2I8wG0TNrSq+obLHKE401jdUlSO/kn169qYdiA==","signatures":[{"sig":"MEYCIQDzQEdacDb7yhglIToYZa8+FWYYZgDVH8YA7AdGvflvmAIhAKlG3aQ5V6wHZ8S2DdW7sxrGJbTWNsBB4DIzBnjgK23O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/density":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.cd7f8cace.0_1636660740305_0.9765716310500892","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/icon-button","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78b87889c1a5550bfd5b9305ef82c4080217221","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.207230eb8.0.tgz","fileCount":40,"integrity":"sha512-8hyl0GP3crSR1ssr8kQ95xy5MZ+g0QadlwzzkjLlQr9j/NNB6X4Nz/LQC7q/ovlrC4IidTMGEliQ8Lebn9Bejg==","signatures":[{"sig":"MEUCIFWPM3LOsdqjr47uk/dgwsAgW78lvRaQEnSodgN/7DBaAiEA8U/YHdVdptBBANvATNUdeiyS1Kvxrt8bchsmWY/sIpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/density":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/touch-target":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.207230eb8.0_1636669500777_0.21382166666262936","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/icon-button","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"542804b8f52c6d684f0fcc9f4c28c34ceb91b61f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.991fb99f7.0.tgz","fileCount":40,"integrity":"sha512-1ee4wqnunl+KV6vbrqPzZCFtPjlQ7sJ+Ki0bxXtB4w/OGWwtfjwA2lzERoodLCId6BTGrLs9/5mzdmOSIfkxLg==","signatures":[{"sig":"MEUCIQDmLAZhSSdWqr570NczrSzSEUuv4E9rqVUg82q6yqadIwIgX2YnsfuwYwKSZNLKd13pvv2kw2vkkk79Ji1r9VP0OMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/density":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/touch-target":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.991fb99f7.0_1636670215930_0.9601808376585477","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/icon-button","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"735fc7a394aa79057e51635ffffab1070519016c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.15db4f164.0.tgz","fileCount":40,"integrity":"sha512-Wvqx+ftdiOHXVidKa+2IoQ//EY4PKz9SEHVFEx4tXfdfg0Tfg3bLD2QtDhBn+MOqAEWGdk7sGpw5S+8xDe7mVw==","signatures":[{"sig":"MEUCIQCB+WDeOWJdvHLaXBMGamEr+TjQWQCkUFMFuXZmsesjYgIgEhFFcQRha3PtAdrAGj2c6voIOo+2uraZNBPUXP8EBi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/density":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/touch-target":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.15db4f164.0_1636738216270_0.17149158969183365","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/icon-button","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11382244ceea1ce1eb75ab6ab8bc87b8052564a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":40,"integrity":"sha512-AAp0/+O6f799qKd8FD4WOuz5kR26QUULzAfX1VQMBWgQ3o4W3s2XirravJYYfpemu7+PjehU1OlQht3u7bGIMQ==","signatures":[{"sig":"MEQCIAYwj8D+NFTwEd8xDDPfCfv+GgG5RSF8TdqLvCJxCO2sAiAiqrV8CDztJhh2COQE/Vu5q722AaT7MCW3x+Hm7VgUzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400708},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/density":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.8fcad5a3c.0_1636744459473_0.48046818345953035","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/icon-button","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816f0c7266613e769c1cbc4e18ce152eccf624a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.f81fb1d23.0.tgz","fileCount":40,"integrity":"sha512-9e1M0ThsRv1Kvy7UWo76xRDVghE6fLvIhJ5j4hgWTcKvaSFT7ApYi2RSRD0sK6KOdqdgHhMnzlpsY1vO9f58Fw==","signatures":[{"sig":"MEUCIAz+oV0+/QZWf8BzxEu0vwg0T7YpOy/1UwiS/PB/O3MhAiEA59hlNQosjB2fTOg645xgGUhQLLhTfB37wdnCFVynJoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/density":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.f81fb1d23.0_1636756848748_0.9399641663489295","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/icon-button","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d485b9cdcb8009743fd79996568f157d05483b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.783f6fd5a.0.tgz","fileCount":40,"integrity":"sha512-RfsApVpHLjTputRZiQ1KAY39S9PZi2Gd8iUT26b0EqCNtMdsr/lOFSkb/g/LwfWCYvgG/Ow97qKwU844A0cHsQ==","signatures":[{"sig":"MEQCID+cmqJ1j6AsyGLEsaczWSDJu0Vuiu0OmRDuotKtRJ3lAiBhQC5zguHOXOh6ln/5mqPTAwyTAmTVDw7s/J2sKoes+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ayCRA9TVsSAnZWagAAm6QQAIIYF/IGHZ6ppjc8mU6+\nw1+DQ9eQyxNpWiJdra59zbyj1M0D72I8aAtFyRzj15r42hYR5ihaN+/pHOk2\nxRCCYpQZabUb3C0XIyq9+8L1dgAQ9WojJDRfNp8JdjOqAuAQg2kk1Jtyc5D0\nrMlLhSBb0rYujqAuLpVfQjNDZHwLVt5tA1nbHcwkl9f57u1fCj5X+dNSAJrU\nSxPKZjGUmI9jkjdiQynXYWepw4OGbBicDWwDT7dcGRfnV+8lR2EIXWSLO2+z\n6q7k/KG089rEvja+3HmJVK8pmPAuHFiKT2yIVKmRTTWeijILJaa0Who/Xuj5\nTDmHSmI0PsTqJ5k3lAxGrof3joRpe++tT1DIR4HyXBABSbLLcMmazmEy3Wgg\nHNW9m5s6/f+jR2e4MgOkC/FyQMUsSUensEWMnqtm8FPAkm7R8xvA3gCvtsIA\n2t2w3Po2Jx1UBz5/AdnS8wFJyOLJcw2gghknormabzRwFdQwcngedRBKj17w\nVPa5GXNBk+UXWkShJH+DjR0Rzjkum8rwYgl9Guwf5K/hEhyT/o8+61ARJHUS\n+uQ6egyYCLj3J52UenyYcJqbDkq9gUnghuE47gt8AWzqO0blk8DsmWfF4tV3\nf3jXY4+hJNkQjwLC0RcxM4ph1Fe4Sya9f3Xilh4TAanC5FjKYPHGnO4+7ucX\n6b2h\r\n=bJfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/density":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.783f6fd5a.0_1637041842719_0.9347998560669153","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/icon-button","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0398655927f35027f70439c5667515cb7b8f5d7d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.d57ec74c7.0.tgz","fileCount":40,"integrity":"sha512-1kxf6pwqYcZpuM0T74bfl9PSfQLgXWmMirXLg+PR/VgpHb2DXTYfvg3Zf0Xr7B1rCRUU5PS3Zftl89u5IaMs0w==","signatures":[{"sig":"MEQCIBtjJyxDNYbX1U69NTv3rdTKaaguGm6UHa5fRGMIY4MGAiAYYYbAIcU5cLFJHamJjaaT0+HnYjgNNA4HRoh32Lu7dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mPCRA9TVsSAnZWagAAyioQAJ4UrKYPC31aYt//I5z9\nLAeypX/p1FlKXfUotUa2CxQBOe8okzvZtMUm7tqzd8emcnaUKudtT/NAkgxi\nHQGIsFSip0Vq9L3tgKHHgC5FCdb94UzQE8qPmhR/9WcG25t2IGDcYM/je22+\nH6ScRGQq01B17d4k9wTeIqywQJDZikPfDLcJ7+69pfzQ6Y7H+XsG8owPVr1K\nN8TFkvpE2gRtFtTtkisc3iuU/839HQ3Oiq5/32m/DSGviZZ02dMWdzmDIPJO\nvnXO9JrN9S7AvyGtC/jyA14m0u8pDHTvhnZIzTJ2rI9ipbElTlSvsvA+W0s1\n+HuBVUqtTYYjchbBRXO4jI6aF1LljaltlnEIdDMoLjSJ5/uXP9lMiMfpiAqP\n5newLEGwiUatWfkwhPDmwSpx+bwuKaxvoKWYVgXYGuKFDa99iWiXrrc7Ui+d\n4YqRem6KWqB4mGr2wRR9WMtRB0LLENs+lGPu1zTAUEhY2JI5OaS+E2vkc9Cc\nqW9nm6fMoWFeBSnJVt28JZCB5XHQntcFn+xkXlCgutyu8L0iRi4hqvqoITz7\nBVMnPa+GvVaANbBa5gt2x26gmzM+Szm5RPBFoVY0AtLAdber3sfj/3Y511zj\n3l4ZCZ1YTg8rrDPLV7ml/SXy8SFNud61YJ0YiPzWyIQdcH1yMsmfLBXfs/9l\nmYKE\r\n=bZUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/density":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.d57ec74c7.0_1637079439822_0.4658901175714585","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/icon-button","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805b8a732b61a349dec56c6b725b07b4c7f09db4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.554c71829.0.tgz","fileCount":40,"integrity":"sha512-z1Git+tFgDkn/x558CfpcHnYnbC6JjRr8HLaMly61Z/KB443wH/LrnfkZTUjUHeHD0Zgg/BUdJi9aOeZcQDtsA==","signatures":[{"sig":"MEYCIQCrApnw3HEOqJXv4OfTscC4OXTTKDkWx1rpkPgjrzPu8wIhAKTQJUyA2+kpbF69esJrg7swJMMD652V1KH7wAtIPLVd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9o3CRA9TVsSAnZWagAAHnQP/1PiZScfmBQ9YLuysihk\nx/u796es2cYASEVSRSS05dT/lwvg6Lb+8IXop9o2ildZtMFJLwJVw6dLZm9R\n3k/b+xGEEsBp0E2DNbsHgULgKTLClNDZetHzHb+s4lMf3CviW80/iLQevn6D\nc3K7accDhFOYL5x2/tMaPj5Y5K05uiQIeMSIT+xXsVLvGC07MqPiml0X8Bki\nkVzTdBHQkJB5YUHlQp4poflo1/E7vkhcUMVmjQG4eO5g7JxmG4j8aLWPzGpS\nu+H/aGmHoWKEWdf4cWmyWi7D8xTSvmdvz3vLjqUu2H85tZo5MqZHsH8mt1pV\nBMMps4TYcDQHUoM+CJPKdJX0TzXEaLi81Hu3Y2hc6AvUJZjiEYA8poQEO1rW\nql2TL+NOvuLxKzT4zn2uThId6J2amXyb6ZTFb5rImH5Ajc8jS9IvqphUk2hm\nfIEBJRJ5CuLvlW17Mak6+ADOrPP4lcnrV2v2zyfSCXxqqURq2mY705Ot0S8e\nrRNequrdkBjnYQ04Woc8DtJ7P11AiUJdHwin29ugKOVnpKCXAc/tidRg3wnj\nV5byT8oP9eqbNjEYDR1zgIkaXsauMdnfpXsiuu2+K1Xv8S7PVa6zZCDTs88g\ncNi8DcpA6l4IY3iI15RQe4t8mO5tqshuPLFWII+7SkIWW+mOTHpicwQP1K94\npU5O\r\n=D0cW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/density":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/touch-target":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.554c71829.0_1637079606641_0.04577805440952942","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/icon-button","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"447b4214948d206360f3058ea354f48a8e09b0bc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3ef470efe.0.tgz","fileCount":40,"integrity":"sha512-YukueDYMiucjv7mj68Z96QOLJ0aMYeiJt65iDFKMTeWtGezgySVcLe01oX50ODz5aBBWqKqeQKhYr9CZunFKdw==","signatures":[{"sig":"MEUCIQDqtciGUAyXSZJZapd2s6ziM6oUpKFehNpu0e0h1SzhVwIgV0mWnyl9kcPyXHQfinMRUU51YoyMUu4o3W8f3gernfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9tXCRA9TVsSAnZWagAABjEP/ReoaipLg+2nJ/wb3X8I\nGM18BZYiXpB943818DLKPeYDArQyVUZBxLcMem+5x2CFLY0Pd9JR7MjNwWP6\nctFbwRa9wl3q5BNgG7TLy52EQcukdf+aIBd0uY7LmP/i1A2b5tYnMzD92m8d\nuyYKyL8kAlEQPHPJItuWPaMx4oudk3xItpYb4AXR3f91SrzoSj3BtF9hMsQK\naaUKr44NzmEDBK6PuuwOgzBvBpwClgOmJncoJz7yrSnpgaTER4b66S5gJdKo\nWQxueDCRRoDBcJ4EucYU8YUf7ZMiBsUmrYC2GvMRu+2fzLsSITiap0M4FI0c\nuIcyVLt+PjPltkAUr/Mp2WqvQKGwfzOI2VCWimVIKxJcXkrigMaC6AjSqxlp\nGepB4d/zy/MkAIMtr7TWMgxzmQTbLanoRXz+ECxBCxZ1SP/XX6Cupr1wQkA2\n1OfVGGRwf8UYDUvv4zDI24MRDW7jTMPcxTnoRDKnW2+AQ9ZsNarkiDkM9Do+\nRvYLLvClda61cMW1pJtf3HC6MMnVQNBUrvj/m9R1pMW7sXZSNU2Q5shLma6w\nxNLY5S7/SC/AjxN+DeEpa4++zjc4XMlTiQpcaW/xzxfcjs5O/xFzaQygGF7k\nuKmQKO82lAAArKkujqHl+WQgZr65kwMKrEtpJZ8CE+UL5YxU1xLZouyJLqq2\n6wvP\r\n=9w+X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/density":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/touch-target":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3ef470efe.0_1637079895466_0.2648257431564185","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/icon-button","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aabf9fe945d1876c82ac90b40ea8d21c62509c64","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.61a28b2b5.0.tgz","fileCount":40,"integrity":"sha512-wO/s8R9O/57VAOeuhfNiYHeZ3umIfkk1WM8CC2r1bhLTBzN5k5KhEuDvs3PRw9ImfVKXM5DRRKaKWiJGT5648Q==","signatures":[{"sig":"MEUCIQDETnGf3U8k8mMTwBu3kaoddT8Xtu5JEpGlLKyyjj6NdAIgEVyff6MZZnWaYQft7/9jvhWfsoe7MUMvbp1PjGzhvtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVEwCRA9TVsSAnZWagAA6uIP/Rs1/b0+UgbK6LnHD3CB\nkVWmCn2x7Bk51DrZ6D8la7JiqIiQiL6a+TNBV2CM2C4f3DmxowuN3lHqe92w\nPBJwn0MCBxhTlZIubDV0sMXNc2aRKZ9fszO5RT0CLK5kQaJ7iBInxtjqemad\nhTnFch6+08k0bt166ZFu9zneOZ7/U9Mj9DZKc+c0IGlAmqyqFzORt6HwcDLK\nAHegMvQBHkWFEJInHBqDsMV7d53tKBL8V7jXJnjIY+4YYSb3NGpvOKNwUrR6\nPU+Qnf6Nd6DrQFjdNoe3gIuTxHNZrgGNfDF2WyNxcwhlmTyQKMAWTt7Qx8HU\nqJJmtFlR8DNAiEiPIcveRRWsQGqyYrGSlId0os3TdelCIu38Zky97VxW+tOh\n9D6uNEBjOCSL5YWfbjcJDSCMa1xKbjdAcOMAp3UmyJLiqV2vAIyG318Emnfo\n1+VJtBdmqwTj2kC+2rN8+zguIj1jL52rfVDCt5PdZlboRvzlDKoSXIV15W4E\nTTmf9DIqAdwIVw/ZteA43a4SVOuhdAEOYGDBuJCWWsJwE5Yu6RhmlQYkFEA3\ncvE45yhncPhhXZMPUYaU3KZ+QQVqrOYcrAlwViS/EA5RfVppZvwI/niLrx0M\nk10SimP/XK42q2mE44xuM5JNLpKFKkggMpX2Fnguqh92jhlqKN0A59BcCnAZ\nMxys\r\n=0oeH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/density":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.61a28b2b5.0_1637175600280_0.7293836930406443","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/icon-button","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.fae6c652d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11a1fb35f9213f018f7251b3fcc60b56006f33fa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.fae6c652d.0.tgz","fileCount":40,"integrity":"sha512-42LPvTEGNMrWmJ5yoUyaGG+O0X+mCgl26w0KacoT8pbm9GCC+pK5QVWNLS0/+ZIx9uHZoVRsfM3oVzMUOUisVg==","signatures":[{"sig":"MEUCIQCdb17xCrDCN16duCg2VXYUB39OF6LhQM5kiiHWX8QnpQIgZBQy3/u8rgMHHI0QE4ITB18vpRYglynm6dLe4Ul8bIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6GCRA9TVsSAnZWagAA6nwP/14w7X5YvRGKfs0z3YTi\nCEbvhtePcV/pa7Quu8qVtvvhbgOvAPXr7IbR2UlyNwqENqgkPaHk7VQCzdCm\nQzXsKXVLsq9ZggdkcbQTdtMwLUvc9zA/UctY1hNVW6nRpgQhN7C11bGodNAu\nqZL6e0o+NKZ+lLyePWsnCFeo9wKmrqoEQndQLiBkv+kvXkzfrsiYKh0OwSkk\nBFIPWKs06ri0UP34t0Ac/qFzLQFG/+moj1uO3e1y5dXOFWJZDKr4rAZ6UqE7\nIcc7d9uJu2Jc/wS4HTFic2s3x3w+qKGGL0ZUXfFJ+O1V4n+1VNh3rD1kJLk0\nx4S9yWbFUyAkl7vJtg91P4EwadQYQPYWDTWvFP+dLYMzUY81jgWz2PfwF9D+\nAeQ1DTRqtWc4lLzvYvuWcsgQQtkYEr91fGXUi1jnxbisVLnwko41oXfnSm4T\nt0AtTIUDfPbdUJZmuYUP3kTodruVLWyxLoq+TBrLm1f1pnOpl3wfeiHRIdOp\nzs1bAWHWQT02Pl9RpLOKyiG8Y9JLAVr5R/NvVKkAkWFLBJJyQrXC5qzTOwy+\nZttAVLYH+FfpeLrdlne0BJB9CJO3lmweCFhObmIVXRFMcox9f+FpXr+slx74\nVkKcSVpGFv6V0s7qQfRefshhT4G0qBtFkY2FdctcHVBsLIlRGBxOqh2aI/Vg\nHscp\r\n=MjjJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/density":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/touch-target":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.fae6c652d.0_1637252742424_0.5365424259303839","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/icon-button","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.978a3b5bb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2beed2733ce7b84fe3d7a742bdfd7dd97d6c503","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.978a3b5bb.0.tgz","fileCount":40,"integrity":"sha512-RBiwIyXA9fC45dMAGgNNbVESxyXI9p41IQ9LyQhWXbgY2fHMgYJn58e+berHoCr0SzXHg0Ch9nP/8gkqq0SulA==","signatures":[{"sig":"MEUCIEF2eO8xaJReStIWO57AdOLSPBdPp17MR/4IjHZmwcRyAiEAhoT93zBY2RgVHEPH+KVtCCm1KtloGF3coURfPK6tDm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2TCRA9TVsSAnZWagAAsMkP/jCriY7WnZ8Qf1Y/AMws\n/U1nemVKDaNa/ijWuf/TB0M5cq4n5/+4MgQBaa81E6U3wCRaqqje4FHbr6kB\nC+HBaFC9m4Z39mK31yWhMjjRYACPvJVUPfsN27rhm6AJRfj5067IasYNEZdU\nfC3FCynwiIZ+VKzusbLeulRk7KLZyGzzN6iM4etsF/u0AWsr0aZ9ugAOlr/+\njDE29NVIUV5uQ9l2+sLSaZpMVHicn9z6ZSzAMdqCtM0eTQuJPyLOV53Z1cDP\nzq4i/oR0pSbCm20tg4FJP+Islqc8ne6B/Oamx06/WX2BdnaLVPqDLY3DQVdT\npnrV2hM4IGf+w6nVDGTktl3FqHut8dvVVQPQR8kBF7iSrJCrFoQZIPw0oCR5\nX9aG1+5m3SHvHT27LFhtArloNHSIRIud+jUKUt6j3grjN9QSjBOyXd7EfXbf\nghSQtTNUIPLuRyaKTfGWOnuEB7VerHNcsVWh6qiryiSas5Q7E/7Laf+1XJ97\n8SfI8UB9+SGXq+9KlZEZ8fct+2Vl+18S3jisa5sjg0AbtaYOQMvQ422ttFm2\n+sNwc2SGRqrLPzydnjNLA+CwZcfVK1XmQOpQzfOY/ptbwWYDdD0QVhOgJM4E\nCj6UQbhgdz9hd01n5XgdmzEXSprku/E4OOn46WgehK/AiJiDO+Se2dOJrIF+\nUXT2\r\n=cvH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/density":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.978a3b5bb.0_1637350802807_0.4688606069281942","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/icon-button","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e6f43cf44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d37d9bfd5820bdc17ac9aa777ad7161b8151f1aa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e6f43cf44.0.tgz","fileCount":40,"integrity":"sha512-YqVjJCMBhflX3ElPJuYMgrIbxqHsH4qSuveq5nwH6gnziCydrmK4iIgUbTA6lxRAjAKxa58zSkthx3bbwi70Kw==","signatures":[{"sig":"MEQCIC5TZADVMVZb7/ICcxYZwYJlZk1kgWkUC1wJfpX3Lr7hAiBjQ0qO5k7oSCot97cFosHVJRNeYqdaGfLivCrACGw9IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9T3CRA9TVsSAnZWagAAQlMP/3RrBvCCm19b0KZPlmHJ\n1w6e057XJzXLq5ViwsvaNz67B0dda44HCKloKL46kqlzbBqXw9g5xS+a92A4\nYT94DRZPQyCYTX3qjv+b6oE/vFthsI4uxFPe0pYGpOo2dfCfXj5z/NgHapJh\n1kNDqookgm9JlLd1TcRsmK1c9wZB2OtY50QU3BIOQim+4x7fCZrJaBjO2FOi\naGuvhNvLSY/8ZvjSV88lZaV/16/XT66ZYYNgu9jAdMbR5otqf8Iz4725f7ER\n0dSrylQwgQBL+3rA/CYLP4uNvMLxFiAMujAWUrcJrLZOWUZ4faR6lS+Rl6g+\nREotqFcPI0IbcaCEu5odLsZEKmKVdpSxhi8CZZmsUmh7yaMzHhAMAfzDt1/F\nUqyRB1/fxsvikZOvFa8da+mY08Rm0eiJBuw/h3aR2YsM7/cYIrv4QSSSWPjK\nygvCSmpoXjCGSI+7MiCnrXoj3lG4ExFVTef/tiMHgmrZptSeKi5gbY8k3A9+\nJAWXKhnWSmhc/P91z969FV41G7csg2iOFE0qT8Z73VehJsb1mfqcLbDv9mVt\n1Bxv0JFNOiM0ntMQm6WfZdUBSjtZZ/tB9hV1Qm/MEkTF44X3iYnmikHEgcaS\nj+yvNsYahBCo8VmJB1vYMHA/3hXhSeDWeBac1kfFx4l2nMSZ8IJI0iXV752U\np5WT\r\n=FHcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/density":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e6f43cf44.0_1637602551398_0.548693594026985","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/icon-button","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.39cf14bc3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de1849e84969b5d109f8c1e7920b3f5715fda6b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.39cf14bc3.0.tgz","fileCount":40,"integrity":"sha512-TT8GXy+maurS4XxM7QyfTSd3yAU0/uAMovfALB1OkUiSu8hkvhHtrHL9aYARs8rpvzMnrkQ6MEFOKtMThp530g==","signatures":[{"sig":"MEQCIA5n1Fk4DVdaic4e9ID8BXw9e2tsWEKzTKTc2TTn8HF6AiAlOSURRAfg05OgvN3gTfn4W77eCmHB4z5H3mO2aMg7IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCIsCRA9TVsSAnZWagAApcEQAKJsF8wVk4ubBVEweoDt\nLhaqLacI5b9NpLpPYK7RpaVsuqxaKSt70U5MnIYzfm+Fdm1j/O0n1dC7cVHl\n5nKikFWlvjxEIk3Xe206cTqaI4Hkng4H7weGerUaXTiq7vV9T6yZgbzzjEgV\nGddauwHTYFtB6V0UIkT35DqrZGDdL6eNAbp4MNwkiLNoVNKf1voegn/C+r6m\nqbu8C/t9IBHKcRvm2We8MTFxwB+Yl+yVeV3P/AiR6zKfHoTtA+jdbe2jLjHI\nlKbSeFgeY6JGvzGwlC8cJB+NO4xzPuPBP26OSQsd4v/zCMiSXCvNcBYX2rdD\nc5OVVHGSXAvwlQ81L+yzdsVpLcLR9RoGRMY+16e0P9hU1PWWJSn6u6wPLrjm\n37dRMQ3Ig34zePW1gLLY+LQGeFp5gD1CN05+ZlQSYYJv1gD+OxERqNG1hecM\nLxNegrijxXtLOkSyNpe+MR2DZI7X69F+7ACbLzyBpe+xhGpwxokx7pVe9bF4\nQB9LmSHm5J6v7LNPAZrSSnaV4dkPSryuUXtGYApoDwY3Erj5ENDtEEv6n5+J\nPCFchL2WEDK/iv9dxgRN0S5gOLn71V7jqJmQ045ZcRQBpJ8+gGRvoMOmMSc7\nurH4gHk7LUI1oNQhsW2TqYwJy9lKoKmlcEp6qnB0F7FMt3iSuYzONHkF5PP3\nHT9r\r\n=YtbF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/density":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.39cf14bc3.0_1637622316481_0.9061589686904332","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/icon-button","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.93134d453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a67a5e98628190f0ee4a49f2826345d3d187f14","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.93134d453.0.tgz","fileCount":40,"integrity":"sha512-eO3pIQmYqt3nRXPH/bFV3+roAkrVkdUOKGXUHReunk6NYV3jDnSzhMCn4RRJaSEQLryvFjBTA4Fq2HGgujw+Aw==","signatures":[{"sig":"MEQCIGDR0UdgPRI0rqhN6OL9r3+qsSfY3QpllsbnyfOt4QLaAiAl3ZK2B6thFOpQyf5a+G+aGYaTF1m2BRR8FA/Iq3pbiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtQCRA9TVsSAnZWagAAxeIP/1I0bqCYrs+WnmfwYWB9\n0S7ah5WWQwSuNwI77mLjyMKQENkGeYLKprN0kfAQjWQ1fqlfsCfqu5q+HUxM\nkflRmME5kc8lClqQTEsBcaaVQluR9r5kdZHzJh47UM/f1KxwwVwUu1FsR9BB\nyLpoVOynn1MUJ/nRES6txnA6r3K0F8uVz7yVGax2OirZgZ3tVSikERwpQwwQ\nCzomgfOB36/GAE3taV9IESVLrUjyN85Z1FD83Xdn0WQNT3Rtu7tSSDuWkmai\n54w82pv0OEqb1tEATBBpG/7Gd17ZXJ7cOAZFE5LE5e8lQoQUUtSerQFuYdg7\nFwyomSwOUyn7PgrIevXEEwpp4b/hMc+KPRaYibnu0+T49jTfSNePLHH7nH5J\nS19oct++wxq4OhkaiVSONhSt5f0G1XVZjUjd5gVybitgy+dFhbgwAhoF4gW1\n3YFLOA37aLFvI4ZrPUwBRE3oFKoyc/6nJuRWEqq6zmgoc+GN26fUt9rbKped\nHTPs2bas4w0BYpZPIYgD7+COQOL4w1EXNef8TeaoCGvltVIqfdSELoTxQ4FR\n3kdFpxbbvnXDthFy2h051UyKPX42wNA63wsV4H5mHePAoXkqIwQ5/92MnWFs\ndgWqndl01TYon9JGP1mfVbg2MR8hdet8T6dzBNV2Qs1kW45K9K5gv83cNO4s\n/ukT\r\n=0lxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/density":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/touch-target":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.93134d453.0_1637681999997_0.007203576296219039","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/icon-button","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.bbd11268f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"963e5138d963a6ed2d525e1fae4f861d31ca8a0f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.bbd11268f.0.tgz","fileCount":40,"integrity":"sha512-6ntCQRSZVX28sGWstWaqvU4FajFOQ/E4h0UpQowmxvJt3iUEh4Eg0b4FzgARvhfRmAGwO/yHDBpMf/b8h1wjdA==","signatures":[{"sig":"MEQCIHxRSS2MhtpqhRFHxpMJ+A8JNX/SxB3IxNdVr7/G3nKTAiAKMz1HgHlOyYmrtNHBcFTrdigrveQQ3/ymd5xti2/BGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWweCRA9TVsSAnZWagAADTAQAJqOCO9mtdF/3vj5G/ea\nKB+6pyfc3wstNXcb4oEo0OcUnFQtyTaQeqM6YQBvoXYqZmlfyR3JOAcenA84\nZ4AxPS9DVkCn+it9mrDIqoa7X2lhP3iTxdW3fkQeCAjxuyFenonD5BPLn6up\n+k1Qy9GHNicSdgq63rkCZhvr57fsxJzSKJC+C5BYY0N7XoaJ7RBA+Zmqm6iy\nMMGwSVw9cJUgDUkzeFbGyDnuPSX8W7s027rEvjdroMi5jDwkeJd9jtFij0eO\notmDgcvDgUnV2oBWprqECm2P//azhCwlXKK7oC+66WnFMMyna0DOO+/7utom\nxVF4oQg91e1P9UCPa6TvRhokW/3UeSzxBmxBkQ5Ej7Cy1KNphKU9zUhXCj0+\nw8W2kuRXEpeEla4UsLsayjIIZCl239T+ht4jneN87zrOdry6mqptMyYYUF7z\ngloMkqeiP5Tb2pya54S6yaQxBH10GL3deGtnMRy1iMOTH2BXfX4+vlptYxqw\nyS3dht4+HOhU8L+6GQIQkL9mVLJYeGWDBwwut/im8FGXKaxBafmaGWn6qTla\nwyJ1Dn1HQng25HL/ufsEOUtguoEcoZU029tGhkT/SMuMneiXdzp28z0g3OiJ\nIlzX+M4VTMAZDl9pLUgxt0UpoYj65cemHmG/tSRxe4UJ/up72GD10sak4iUK\nGebW\r\n=c1FM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/density":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/touch-target":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.bbd11268f.0_1637706782128_0.2858311234835156","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/icon-button","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3db9c4d3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e458bbbcb2854244265fe527cadb0fb019e9d92b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":40,"integrity":"sha512-dzdaCS194qeYjZw4S2LxiwWGg5y0T6Mvx9q3FIPqjL7nVg8CiDdFloLZgRzOdLr5f1LmTFuj587oqUx3MaBMQg==","signatures":[{"sig":"MEQCIGTDNKLm0ktwcfzlfLSGVvcVXzXjKWpw7zmeQgYW7SNkAiA1p2bavFHVbKk89sHbE73sZNQ83eG9s6DR1D61IK1yMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxgCRA9TVsSAnZWagAALB4P/AkvEVaRWzaxj7GP7yD3\n2+ofznQj4ivZ64r86oo5l0/on43dBz9MutYO5gqm7/SQ5jgGeIznV/Wd34vy\nFttfInMLLptZc9fybIlX+VdX8YeouEaEioJCf0jmG11ueODa1cuh0Q751+lS\n4QSlxBeQagZncXnmmzTayGZXQXqWFT9URp/ovbzLtYTOGpVtOMjmEBqCDvHF\nbq2UhuFm3PwutjbvYrl6q4uCE3WETmEN0WyZfp4BfPqZXLxpZVQcIPmDXL8g\nJso7c1OOiDmOoO026fsyOW7zDuCfvfrrJrgvKGWRBQTD2ihk2vI9Dx3w0FEN\nuev8C9AlL/iWFjDShXHOiGvPsMzFbyBdZTa9gsv6h57p1UOXe6TUlEMEBYdq\nqErk309EAVBNfNZoqjfQFLG2MRlQQ7GWPQurHbHVoofqL1GYQHADmeNg9i2G\naxahjpuw18W9aP4nxb4EgVl2qPYFdlbN5XdszpPIVldmA3zwj5ZFAecMcbRx\nNe6CRkPcWTH7+RG1EYvUNdDnLaEXPeOz2Xjx196IpAyDxsVskrsXye6AhXF2\nfDklTTkYe8H8T5kiA2p2Ez/pusBjEWzqNqMKKKJOLTtzk0JASaEbTDr+Gk+9\nIBQ908iYMVHxUc6t38yaaRSwGVj64dbeVGGdLz2iIm+x0jp5hV5NA+L7uLy4\nBY1i\r\n=YJQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/density":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3db9c4d3d.0_1637768288417_0.6552916995208691","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/icon-button","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.78305b6d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4306b29b647e1a2cdefb569d8da48bc005aa795","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.78305b6d5.0.tgz","fileCount":40,"integrity":"sha512-s6CA5NPf9sPAEc8yNcuqws/hPQD1suvYeSUxKEFHPzY7TbBEzMorVNmjylwqnK028r1f8wStT8ycDzLGz+IaIw==","signatures":[{"sig":"MEYCIQDoEkVN+iUXyEt+N/eAUKD3Ehv/mr8GQAsmmMmZXwYtSwIhAMakw0t+7Z38W3RHhzu0FqcmAKtbO/F5oWSTZTWG8aKl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpe9CRA9TVsSAnZWagAAxwgP/0dWPPxQAHM334rGYxEN\nTdq9+NKSlhSvqP430fErFbTzYZSZ86SGsgNhXPN7rinfgOADpkqOII2P8I6e\nQF6GglQm03cpsiocS5a8INPTnSwm+EqyNBwvb1Ia6jH9Y275KxdeSMUFHgRt\nVHnqLTFiZYcy4drrcootvdTJSPRK+mE5uqmA5O0Xt/N561lWHvXKL0ff0CtC\n+SKkp8lWfZ61yKPVzoe0/tJd4Lgkb0krqHtbhJMGv8VEKsrB1wNjlKmBaPWh\nUA39z+y+R3wHXjSTilWCN2B9vUzghT3XDzbwZtr0QsIZPRePpnVZR0kxrKOD\nHVtE7ATzU/G9oy1heghEe1cs8q9u7BVC4cg2rnj4eiG8N2rT0HiPKUnDL+ED\nZq055XE3dNkwc1rqIvaFwYgvko+RGVC+ncn9cb+Jn4noUr7XGwHVyIr6Y4IT\nUxJi7zYebimUgrwOsMse2M8a6PunUn+NWQlja/ZH/liZ4xNc0Jb19fL23Giv\nrOImDGPCD/4+VJVv54MaBDvZxuWkXYmV8qkpSyf3KiRLjMfh05CO3oWzvz+j\nNX41fKiJo5TJi1uEG73YK0c9fu+BtP+zdexfmnzO2PEzIZ4Y2uwTA5sSwte3\nSZWPFfJDvlysMmpUTZvPx2OihwQWs3QI1RDWnuNwOZ6ZzFjAVcKICrKEFprm\n0baH\r\n=wHJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/density":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/touch-target":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.78305b6d5.0_1637783485175_0.37618249727960085","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/icon-button","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.43d08ba77.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9160a17025c3eea7c8729b519908022878f7b71b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.43d08ba77.0.tgz","fileCount":40,"integrity":"sha512-Xg9NLZBb2a12zcxdJh4hqV7bUppdz+tKv33/HOv4SmfZPdkYWCqOpeKkZ6wve4cvbsI7nDGcIk5JMYMccoHOjw==","signatures":[{"sig":"MEUCIDhTOIdmq4ljrmQRuWniDaw0aa5FOfLzmIgigoY0HTtRAiEAnOrMJM3+vk2HFJgZZcgMLWn5FcVCZUiz0Tt+qwmjhUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwuCRA9TVsSAnZWagAAvskP/Ri79MTxSoLjjXPIJeY4\nafIeDqono7kuBQ1Xlqdb3kDY0sknwBT5fY757xIkwG08cm8hRZf49F/thWzj\nMmea9OlJPOupeoiLTkM8dfI1tkR8UsfOUbcIkFekMyJjptGnvRCiYjMk6m6j\nYDbycehbyI45qyNNIviS4LVPFFq51gSduJWDIJDOJw0RemRpCOUUxzo6dkY2\nfiDwpQCXHk5AUWhh/a4BOQvaYg1Ht3vaxWJeTKee7rM58WTQR0JGzCge9kOq\nOGOrHT3kd5mrCDmUdgH43G6H6Z9JzifcFxkoD9wEimq51i0HaKJuuASKvup7\nkoe+4a+GBc3/jta8J7evhtHWE0iDxpB71xcdW1PZ0BrVG4SZZLmyHvZInrP/\n7ntzCSxopqOIjKXMNl5EsF/dEZBu+wOhy2XIfsNNFDYbYQmqSJOiEiC5Ex/2\nrRcYgCDYtthfdpRjYWsRhN7KZqcSu1EjGK+byiIMj921dofdYTEvBwyyVO5r\nSHxwOW+waiZh4FoiansOsuFSPdQdwD4FcuQtn3x799WRoumvwHHPLbv/HmuS\nksUd55yB8pru+fGDKnXxw+qQbCnIcGexIxfd5EvoOyJeZy9wAx2veJrkbZCA\n8Vs4DRBdibW69EAoUQM7ccTAsX/H2+Y9XKYWVQuyo2u9HKS/fl4jRg3RMP36\nfPPH\r\n=xXQK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/density":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/touch-target":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.43d08ba77.0_1638313006355_0.9578801108743182","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/icon-button","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.17a072535.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a81ba9d3bb022d9dfa84d8268d2827c370183e0f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.17a072535.0.tgz","fileCount":40,"integrity":"sha512-EsMtMpbb9pu4ydZ/jNicbZVtOVBbjp6Rnyfrav6iqvI9UhhWSE3rxX5Avl8dV9q3RHtMfVT1cryvhVpokkJPiQ==","signatures":[{"sig":"MEYCIQDMe8BVqOEmvhWYW5fNl/ujimL7bs+HelZcWF73wT1cRQIhAKhC59E4YL6ZaYlhd8T1ZKQsq1LC4c7OJvgA6WNCNWY+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsKCRA9TVsSAnZWagAAkf8P/33FbCkB7DSxLlBx/LUG\nulN8ga+rT4+Q67pDgeL/PKuxkyb6iW7eG/vnOQr4C9ErxFmDeYM0cbxdonRc\nSyiLv+uvshHDF2f5mVkBj++yg78NHZqJ4EtpS3I6pECoN6vAoPLXFWG1v0UI\n7yDV4MiCuWFXUq75drmoKbQHWI95Psykv2XJBkM978qJlrc7bgSmDnx4RNdU\n99fVDM2d1EWqVHV5n9x+ydU4EtrRm70S0lWzCEU17V8b1XSkDM/Wlpuip6Xw\nE5ld4Jzn0m3XCFlyGYzHzYoycJipVt26pBI+5TweOVlpe+moJI5bFareHwv9\nRQHElVeJ/FlOoN2TJxrXI0AfGP9q79SkWlIbI9srTSJiYu/WfQXSsz/BuCSm\nX9qt9EDhAMUzGe+eDdCrVtZwCnmHOlrItamJ4JaJ2kbUAgtAJAkjvZ35SNxV\nQhUjcvn/OIng6wV9du1aT6M0srsnVFNU61U7xZwOWxoYMD2GsDWANNHhSzHb\n2gdj+ZgbrMxMfLtkdDwAJoUxoMFVfQMAxWM6jjqzYuPIPs8Xg5pFj2pbf0Il\nZ25SIPmu0/IL3opl08HhNANJtkTonBi/cYfR/rEsRBi6eLHvDhm/o08sJkO/\nBxHmRjD/OPHAJnEKJvozFyGP5JvkyIQKWCrAMA4d+ZoLft91yZYtnFsTxy/y\n008W\r\n=4M2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/density":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/touch-target":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.17a072535.0_1638468362038_0.7985518924025028","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/icon-button","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.5d809696c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27498f0dac1607c30d5550b631939920518147a7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.5d809696c.0.tgz","fileCount":40,"integrity":"sha512-DqGDyONDJaruRFJa3D41ZsgeWNDKNQ/vpzYBl7gCvRoVD1IKHWqk12EYaT/VHciNfz1dKtlz0hbVxrX2cLwmbQ==","signatures":[{"sig":"MEUCIFzSkNXeIUQkvAIguagt2ZyWWIVPEueiUZcpntsTPBE5AiEA16Ry3559jm7sd5Fc+7O6fOZ0HHGxqOtGz4/PWhOKOFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8nCRA9TVsSAnZWagAAVLQQAIYwSJnxmoP76pV/Ifk1\nbC/luOeFUxVB+YwUHEKAt9yQyGOEMQs07ZUv1m3N9oDzimFZ+loJDxT4Q7tR\nOMZHrnhJAoUN5fpPqNqdlh6UuH5uAPtyg0k26b+rlthzG+8ZjAGyY3I9vedi\noddelBCGyg1ligNwOjWHKFeFXMMU6rKVrX9/omshe+Vfbzjk6FT9al7t4A0V\nPGlp6XYB7a6gsyBZ8ZODUCK0qKsLCqUg7Wf3O6ok7A2WMfhiFwNeUywbxyJl\n4vuUws1W3bJYPqaG0EdefpXcB0KmBOYJk0cYlp668fVwhK81hi3b9hqaVT/w\nLjpvHUMxHVaEjgraQbfsS6SO5w9JT5zm8sJ4/CTqmofelk1Od+TDzfGqQbHF\ni0WeJwzNZeaBqJ/AmJXbvg7xgZUkt9SzWpQEoe5E8MsCNUrc+ziODITh2Eeg\nHbmM8LMgMsPEB82/SJXqnVj2J+UScuxnKinBj5ScVaG0hPnfO0ArdLNIE9WN\np0yWmp3tY29KaggEE0sLEYRD5KtfA33PQ36iBMqYar2qiY8nKp2/Bf9QIHFG\nYDfQ/IH3P71chYtVbJJ8+Cor8pQEkYfS8sHt4oRn2DX4jIylmHu9GqWvoNAx\nc3C3iazaZvjJdL428mPbgnylvEWXwO+soYiHt0sPRbOPqhHmpVxKViafKq6G\n4420\r\n=0Y4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/density":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/touch-target":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.5d809696c.0_1638985510869_0.871336593083331","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/icon-button","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.b6510c8c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7887d5296e2ad0b50bfa69db3bc87e3ce6361cd4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.b6510c8c1.0.tgz","fileCount":40,"integrity":"sha512-RyC6ANOtI6SvrZpRS3NfQw2gLlfwmBrMgjKno1xeKqNGJX+PYWQ3g1YNGF3Te1Zwzpb0b0bI4SJaB9EZM26Y1A==","signatures":[{"sig":"MEUCIQCyPBegu3g51PUkRpRU3UTv8LoFlVt8Z1T7rRSJJglyHAIgBPxreJYd89raXUv6UIu1qHTiWwNZihnJC4GGlN4TeNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRcCRA9TVsSAnZWagAA4IcP/j3sgnizwRf+WJ6Xb28p\nItLJPSUOIAE9QHLUjubeH5fx/sQYfboPnk2+iB/9D1Nuk3VMfv3xSYUfMh8X\n8McnO4NdIg5zPERc20KRP4a2SsvbwbcMsZUgCTWBoJwyX0dGgrVoMSJK1A6v\nyCalad9lpYMS7OfNC555GnwFb4pxmHY/XcUM8uKxK55qyrHpEI3SBe0HjvQx\nK/qABchMXfjSpNIIeOfG9KEUTRpFmWTKf3d1Mf4Ix76sN6PRz8CJl93rO8F5\n2Bi/Xw8bl0l0MBGNqaxyMyqsV93iozEtUttGGwaPKW54+0sbrL3LiOsABRbi\nsMdC2QPzHq1KvoKz6mroX8p8ckcjXXl+RBZKHsgHfLQOybElU0Eh3LLB8cK1\nkB18vtQ+DUXMXPC5l7w/Kk7DNYA1xlTUFHwHYAjZ9YQ+rxhqvmrCY0PW+Mv4\nEpe+HXnwvLjwdAn8xV8uMnnmccazaMog6cxUSkd3SeMtC+g6Fu/AsJljuLcM\nkMZSTLsF+eC4O4t2zn7oyhVZP6bCcbthvyF8djdNvf/OCWdkFLJ9h3DotLFD\nvbu2K4agBmdeOtvd1xVCQfwyg+s3cIV3c+4pEXAdi3jVYJ926EWzjfjou8D5\nPSyblS3Jk7+p9jzqXzQ1RG+KFR/YQEgLXr+RmXDx1tQjKrlmtYjTlnaacmN8\nECzy\r\n=0vj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/density":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.b6510c8c1.0_1638986843652_0.8808185665728037","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/icon-button","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.f460e23da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d27a9c215f75061e77a437876dd12a58e16065","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.f460e23da.0.tgz","fileCount":40,"integrity":"sha512-b10OD+1PxmBSx9cGP1EGZc53GVpe7AheMaqCZNXNE96wnjeN7K5ICXZiactoAbvNPIaGZbJoN50YMfRDHtvw2Q==","signatures":[{"sig":"MEUCIQCbqt+GRVjC4b/+KY2RTmhfdV+oozfhf1DIOssCBsAdnwIgX8HLelUENGXI7jxDWVEG1O16ACzC3bE/Ba+mMtQ7aOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GRCRA9TVsSAnZWagAAM54QAJqNVJbmuedsulQbMzw8\nx4cllgMLWbDDu9SsdIrZmru5RA/vbCNpONvfWc6gYsuJNcZ8ZVSYq8+RGpMT\npnBXbnkZhko5C6BlOxWc7ldhertp1VkJ5/3/h9I5pVY6nRPYvRplma0BlZyy\nUNB2xFolb/v3cmSkczZW5pgVMkWkl+EOznzj+kwqD+RZgKtdUI3GSjZTjSLq\niPl5P7pwQpKQGPruCPN64HEwiyQUGhk82fwtSje6YDLCpe7Ba/3MivZ+ofDz\nhzbtvFV79n1HTlQ21Prjptj/fHkF9x2WaLN262ahn93uJp5gevJoAlvhhXQ8\nw2xNYt7ucTRh325CS40cHSFjSE+BF9VRmrCUDiilAVvFXW44NEmbtf/tY8Br\nepDFJSytHShsT0QE2yoxt2YJhEQqqrNOA/VEUHnctJQsyJpuzpCuXmJunf3d\nvblhooJ9M7t0dY05EgBRnykJ9n/06/amjKlir5OgHVJcTJvij6R5oc6acYir\naRu2FoOytva9HEZ9F5YWX7ppQmrPn2A2qYWsKEzuWk8Y7gq7f4QkcMBisskF\nv7qK/ygTd6bMe/LPucUzV5LDvMJQbHVerMfzJ0ZggoNbkcykpazLjbQY67kI\nrdMVwQGU8f2kGF8OxeVNlgD+UROsUIXwrV2bz9IIq3zqjFsaePW8n/xkY37+\nj2tA\r\n=ymkU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/density":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/touch-target":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.f460e23da.0_1639149969266_0.44977230173156046","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/icon-button","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.7d8ea4624.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca13dd4cfde95a7fd2cbf97197c7248cad4014c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.7d8ea4624.0.tgz","fileCount":40,"integrity":"sha512-/aYjiNc0lN0pX4ASUWjuGJN8KNVYqhKCDhZ+8QHvsyx+XTeXbhDtp3gUXXiCP7NeHqtDZnAYXJq7oY4dW5C0XA==","signatures":[{"sig":"MEUCIQCn4MXbiO4nLsEZSlLHL33zgx7tLrZSpE6iQJuqO+V8mwIgPGSbmqW+HqmUh5fJmt1sUWSAJ1sz13gbDKPIwy+mTfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6q2CRA9TVsSAnZWagAALOoQAIpvJeqIJh5HAWSoEyM3\nBpkRszwBwtw6WjBBEJOnW02DzF6+AYh9djh+Fwv4MiSuolB41boF+Kkqhlyo\ndvIJG9hbvNUFNZn6Cf5Fl2i+l8hGghnzdlvdj987k/QkgvGX0MuwbMUUxW7n\nIvQkG1v70x0cXpEhpuCNoF1rzAMspM0hyg8LZQdz+kPOF9MbQyqC1K4mSD6w\nn/RJkCEpN9twonX9tn7iN9aROY3sLCMVV/NAFEdEyd+apg7NkPEXXaKGFpOD\nFUGKvhK26q+diPcazwc79lgq0e503FReCQbhTsmWld7l8OxUdlCOC1mLi9EX\nlaEpMtHKd98CR0mDZboVqkbg2PO5egrQnM3Ciiid7l/jDFGrjlxqHaK0b/Eb\n3kkI64LBttrN2mUAA4MIQK5kDGpo2vj4TLzF6yttN1pMijkHuUNvWWrkLgn2\nR9gGXfdf/QyAmpe8Ks901G8kEJMLfVC2wbhtGAoesPd2HP+8/0Fg8Ba3QffX\nmhrZ2TvQCAya48EVnV2qIPxwYqvGRW9evSwWh4rDEGEXO82+Bes8R+UseIOr\nmdbpmq/o9Jd6nJ8wtlAbrmMSty0pHTfkFSV0PnjL+bZrQnKRlUPvI6gXFZ44\nBFXSnzaWnAAPjpUtX7RHi0zaUjboVN+BnpurZDuXr+GExQc0ttx53ZHe0HSy\nwhbV\r\n=PWWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/density":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.7d8ea4624.0_1639164598443_0.12383163784911244","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/icon-button","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.8fffcb5dd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e19eceae35eb2928351fe4f211f7ccd3e6315c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":40,"integrity":"sha512-i1IoR5RGeJG5Opc2mS/AmnsOGE+e1lZvbT3YX0dTEngaENIdw0aIfqN7GItEL6CNMB7oWoudI1BnFWNU1aITNA==","signatures":[{"sig":"MEUCIQC6dXQH9Zd2x/ISpbG2FjpoLN2JZr/SMWezV3tbOJEf/QIgMiN664mQRYfWNnQdejO63MCCr7bb5pcMcYPES5RprB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwaCRA9TVsSAnZWagAAS+oP/AnKhqkryttgAiN/t+J1\ncqyL6B8an8BmsWwJngyEdsAjyv8UuFaOhdU7j7o29lSbUpN1grXcgAxnUrXx\niWk/3lMQDrFBoXeoT6iYpx8NP3jjP4vDv/zn8RDLNLi8b3zD00XJ0rDLIvPY\n4PYPTS5EJK+ADDTx8Uwu/51PScIXV6HCbAKNurYG6hFCK1lVWjXqVl0+NjMv\nypRlkXrM5Q9t7XmWHd4hJiOsl78x2aeisnObpn+9RpeOj8A27/uuzJtxLZQH\nfdxCBZhZI2eh/0EIawQ+XNUyTXc+A5k+lbc0I147u/tfgiaizEzoGsxs6TbL\nYGOsC6OqiKFCXFAPtVUh1OmRx02hj7h85WdPMiW9QUFqaiUpIN7ud+uW/tgO\nNa8LfAM/i21/NKT3SN0GQvJ/dqJcnPUQNYwboa+J53WVV/ICg5mJg7kS+fP/\nAbgB9z2WJM8XGhyPY34bq3+86oeHpwn/3UvDtT91+2jCHJKfSrOcfYh4WGUr\nfApZ7a/CaaH+PYpIDto42sMeuyzyb00ejWg6eOGP5E+U0dPVukLbhFvgJIIt\nHY3Bxmzu76MXZW2arfp2pwNrjzNcmLmGZCxvfCiOP/5Ei5ZXzQE69gFyBoOs\nX9DLprBv0kbOPypjU+lXla/MDzGpMd7l+YPav5dKyrmniqVzy7vSDxI/x1WM\ny5gP\r\n=wWVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/density":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.8fffcb5dd.0_1639472153972_0.13885859788750876","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/icon-button","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.21e1cb9be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe2c1ca6fd35963ec0b1008440845af007022a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.21e1cb9be.0.tgz","fileCount":40,"integrity":"sha512-0nucjr93KKjT3FqrnIseUP7g+K8MK4Q3CvGn/aZmY+mpziGp1mSi1m2m74TRtoA+RdJVOt01w03W0w/RHUi7pA==","signatures":[{"sig":"MEYCIQCq1TRBj5Y/5326AltrMkkQZfUpxFT21EhqeekYmZZzdQIhAKzc76eLXI2k4mkPzVTEtaTq27vgO7CkDEXMVDwTXv33","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMzCRA9TVsSAnZWagAAHkgP/iH+CVm7lUd63eDpw/SM\nIJnz8fxFJysaSY6DK79yDcBKcCxngVYS9b4dxHsLiNRNWb344f9h4/VRHnMZ\nY2aEEsDRxfcsvhTvuAkAFh/eoBX8zAuu0ssElkEfAw3GmjsNHY4E19/tGLry\nBzMzlETXFY0sEOBLceoe/IWYsr4dpOOOZ30h7Sdb+nkuXIr+X5SiTibbMLhT\nkB40FbIY4/7y0eMISK4z+QwvWu1xDfFqXsDcXYgRdJSkuQrrKpb+s12G1D8S\n2z2oNFmB2OAdV8Aw6hXbaiUATIMhVOsm2xbQiEogP2lRopgUvQvUJAxxtCEY\nR+wHtVAOwFb1aO1+c84e4/0QG0HO+CWukGRSjaguxL0YU0a4VND03u3E4Pda\nH0NoAtpK98n2idYObuEJ/3w9MaarpT9gxpqUB0mbaHaGqVeTl4jb/Ir1oCF3\ngTayrMj0yz5vxiq3tUdpQqPuE0gz6SEe+VDBCJr4A9lhB1jXaIiKDmhVP3cP\n0PAPs9HDN/SY/eJXrzpBDJ1DqpOnFc/PoYf20pAIkb2J22myR8GSAiqU6C0E\nVYxYNCnyphFLXFd2twcaiAfA12kIvXoMevSVF5el0wbYZnzm6LdApf+pgYL3\n16BEKXh8TItQ4GBZz6DNGPySZ0UR4nf6K93rVnEytLu1pYxuWlSK+A8RDp7A\nmpz/\r\n=k0ZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/density":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.21e1cb9be.0_1639510835392_0.5463270916283327","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/icon-button","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.ba78e8724.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f75f423044cd6ddc103b7c1c9c2e04427b24fc23","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.ba78e8724.0.tgz","fileCount":40,"integrity":"sha512-ze1Kg81rJtKedAMnKakXazLO6veBAe3IDaRqEqqUx/zI0T/3RTedhU5RhKeJ9fnWJqGFWQ2BOzA/UusjdupCWQ==","signatures":[{"sig":"MEUCIGrr+GMyJpO7iHgZjHvW6dyQ+VStCFD8DWogSrFn61HuAiEA1gMyTvP9luqG7H65/CicrtgWAO7w1yIbTU2vzgcAfiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiZCRA9TVsSAnZWagAAxc0P/0zZcfl7fDKkGNufAwah\nwHDE+apMnfX5yS11gBgsCKWh32kXvSFyJdbFKLWLvL6ZNETv4/2tMCUDUsP6\nPAF9t5KcfxlBVT28YfnmL8khkJrZ5j6KIti1XlYDHUKNAY8fJSy+jh2MFuaM\nCPAcH/Da0rpbcgAUXVhPnSJSenEqCH5GYiRQNdJPuCMYGrPtY04rRNiDSfSs\nX3aKO2sCd5KGBpvlrU2xvGejMfVubOg9EL1QxQuFyKa2VRZJcXhDN3wXT+6J\ntfk9YFFbS1dhT0RBLiqEynp+2aWwrqLqUzTSjrjQ+W6u+CxqCXJCVK3XRMNn\nNSv3EZ73j25LZe5j2cPzs2cJGqFf4mnWtZh1P/t8qzpm4ss5CMOnclQAG4m+\n/5VpdKgwG2KZI8CCZRwuosfROYX/Bi9RzIVnx1cU0++NSXy8MC/t/jB7wZ5n\npiv8jF6RW4s/lSnKw8VfRmfGapLB+Ks5lzIvGUGOynRx/cTEkELKrJ35FSVt\nKUgHHBhN+6x69EDb1BUElahmBCd8H8hy/8ftdh73F065EcRqxqigV3pVT0Zx\nivDHScdGJYvrQGwMcB8WIzCtVvDspHuRkeadHxlfOLeLni7Inz654caDM2ON\nzIQ3gjxer3HRcFACYVA+sIOHcZEhxIbN/S6Td1iae/HFRN9pr7w09DmV17Vi\n4PJJ\r\n=01oT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/density":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/touch-target":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.ba78e8724.0_1639606425587_0.2395396001188883","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/icon-button","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e3e073c00.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b6135cae2fb3377a6d4f42c0fe5b5079d6d4357","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e3e073c00.0.tgz","fileCount":40,"integrity":"sha512-RWslfg4Eq5HVO7MMtdKkFXPaeDmgpWFmWsgZ++xMNTNVvpjzMEOA9nSeEHVbXd4xiI+gTGnLJ2xU8FKuKFkCcw==","signatures":[{"sig":"MEQCIE1V2/v27955lySBh8oJ+M8/f6anq2acUDp46fEh4ObUAiBDXy+1ptL+3+JMGFAObhXUJOhITUoG4W/kJJvUT+6mNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFECRA9TVsSAnZWagAA7zoP/16wOnGn7LdWuHJME9o4\nQF9JMq3eXIcp7NnYVYzepIaVdPMPYn4aY7ZLPEaZoS7ligdMn9kyNYdwhbha\nqJgigL5m+dKFricQmrVl0nfRnZzJcipNFP/REP9VFUKMOhUNJJ45UWrH+RBa\n1QltzX/AXn6gaK2cMfMS480cyZyzpOmVzc64R/XKfCXMedbd9bmGaWTatsc9\nZ0FelJIvyWEgykjc7kYWbeKJ098cJddVkj9nGSD54jWijMRt8PtoxLCe3jOG\nUMm1SCAFP6CFNbFiuiiSu4tAjgZzLOxTL+yRYlpCBxrZAt+y+tnVtsD3Y6hi\nEnSw/yvMvNAE5EBePsbM4aDutPA2i6nCfNKc9CXiNX5OQOM0pkeqH57QPVB+\n80bYvdwLCwGKncOcDjgp97orP0NuUMXh1QZBeTNfrIKFIrlpGhKRxdXkU56u\nYMcoFgIS8GsQ4RKs8XNTUoMv5p+O033SjLelHq71Ev9v3ojKaocrvxTxaxjj\ndcMsfxx1ye5qvpWQ1pyYSaj+rr88JzIXJX3uPcxJSUznc0Ewkqf4gUgTYMPL\nfpLTqwiHAU5ynL+L8cQoiOyP6EO6PLo1rXvuXDAgX10WUuTgB7XL61bczc14\nTifFrfQETJw+iHs+LAIupsouK1Z2PG5O3LxN5ChGcCoEiUch7byekBoNNdPr\nBAZF\r\n=Rjre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/density":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/touch-target":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e3e073c00.0_1640034628033_0.12537706394106163","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/icon-button","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3366a71d7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"543e278c9ef6b5e7f5385b9c36d9657c38cf29ed","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3366a71d7.0.tgz","fileCount":40,"integrity":"sha512-qwfP18PV2IruJJL8M47y6EICXW194vVAhmf0pHVlRcJFjEKn6PNWIiTQsBpmthGOw8s/8jxCVyJR1apJH1fszA==","signatures":[{"sig":"MEUCIQCmiO+lyCmcKChBOKvcbTwSirF1GtjQaSAGlRkcufo9sAIgKgVCZgcucDA7Tyll5bxNYULWBpxAtwSrxgmLP7vCfn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsFCRA9TVsSAnZWagAAf5cP/RO0vneQCnVho9NbAhRb\nTd1zzkUnGBZtv3RSziv7XBeZEJe4/AJK2hPzcZH6ApVYQDs3/UBtpLXWvVZH\nhGcUqM1pcNJZAwwBZHZAfnJgkMzq3wLkaiAqVS0T3lyG41OsiSNL0FF/mKXC\ndT7/ldJOB7CEoU/HFHsMncQc9UOB2qDJtGiacNR7Np9gHPgZO7kZIh43A/en\nEMIvmh41JtnFosaPxlAu7aqDzV1iHlHx2GKpWkF1l9LVhGONbYr6M1YZz7l+\ndgkYcEG2Z0Fmc1AkU65lT054bq3D0P6FPb6w1PPY9B/pizDXp0EwEqwhvuMD\n+P7enMIeuZdlTN05g0qfJIL65gIRrC/+mVecd0gEIsHefXoo0RTQQUW3UvDt\n3iWKJ6A8FLESkkwLRYEZR9BJMaTWr8HVEtxDyn0im/4ZBwAYQ2528n0Dpdrb\nG7I3KHPCvLkEx2HNaF4mIky0PQy08CYkh/LLxraxHfXqLuBGwYJF/+9kUaUD\nLS76ibcE6NvyWyHdqSxceGuVC60uK1PRuTyFospvK7k6OLOUv7dInmFpO1s9\nHW7irvyg0wzQyluzgiF2p6CRZ1uV8fqTpwAdPEXCnq3IvGx9vKPdeWAR083Z\nViJghgjNn2ZYzBhViSOo7WArwIc5CNLxCpDtvZPPLECX1ZYbLlKxuDJU928U\nGyNI\r\n=EmW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/density":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/touch-target":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3366a71d7.0_1640176389492_0.715313420666601","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/icon-button","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.c047f7c19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b623caf55bd23431003a363c0f0aa0f1e65530f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.c047f7c19.0.tgz","fileCount":40,"integrity":"sha512-LLq7L1vDPoF5h6RREJms6YD8uOilqRdfic3E25tlCt3VDJWVQg8w1T6GHHyBE8dwGfxNAr/DTa3Hv7SWQis2uw==","signatures":[{"sig":"MEQCIE5ZOwC3QdWepan2FcP4sHl7/WcZk3psbMKcGe2F0Tk5AiAaKRddwmb9qLWsbekHrYr9j3blbS2e1e3WW5m34jx6wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ctvCRA9TVsSAnZWagAAjY8P/1KfGJuTRMZy7ZGtwpKC\nBJQhYDZevjnTIhKXgwMM+otEByMmZlBfebCTyu4k2eXmJ6QfGi/2Ca2JQ34R\nyfwYsZ2DvS/y1cgkdU4+Rf9LttwGsXPnT0kp51L37b9fwuvwYsLp+1mT4+YH\nPqsotwoxxgW9OxFJlQltVD3MpxDneslGNX2+l5S3tqzBuxAFsLWvhQ0EFA5s\nIkeyJoAwq9utpHZLlOwB49IEm7s1zBXvhXcrOozjGq5xwbuc74lc81cOw1L6\nEcfGsvSESQKg5Vg4uxOZnev/Qt15qNui6ag89yAA2px7ndpsYBNBirGt/7GG\nLsdwqColrzatEy14xnQHAToR74vBj37aiKjTEWPAesZQ23G0zkCIK0i7gpbf\nXyvqtHUlnai7zS5PL/Ppxo9F87ZtjYuGsu13gu1J9JXxh6i4DzaH9Ebs8uRs\n99nvn1635rPUMvma5s7mZFLVR9MYHkSczYYVCS+aXk+xHHxrDpFFEd9/Yz/v\noo+MPcXWu0c7uvIk6O/iADDLg7l1ZSvXYaEHwQy9FPDJDlKOVQN0y23MgtWQ\nBICQqsNPesPsXGu7Y2LKFJDDY09c5JFCa2UXfCokUUqeDMEtKJXtctLJKTzg\nq7hheM1ax+eosFF9AWbVA41lYN5R+BA9MKMQVmzOK2EX0U9iHj5PnlYxIt5v\nRJj7\r\n=+QOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/density":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/touch-target":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.c047f7c19.0_1641401199666_0.48685569147776464","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/icon-button","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.05db65ec0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9530bad40f7066ce2b5c206f8f6edf0a25ca6d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.05db65ec0.0.tgz","fileCount":40,"integrity":"sha512-QF+1vE4bdmsR2v9ymPWizoA2qh2CAoveKB0mQqDDUJ6m8Hkk8GfLtHZtsAPtOyIz7XziWu/feB9UmOfQvPQLww==","signatures":[{"sig":"MEUCIQCv60fvo4R7WPuA3ax61PARvktauEvavmNlc7DDkmAZCgIgJI/pKe4wJOoSc6s57ILMboJtBVlddMsV+FckCNT2+2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOTCRA9TVsSAnZWagAAMb8P/2nS42ta04ICY3OGKK3P\nD+qwNB3fZllOpJR+VN0cpVNg0QoBontjCoI3lj12UYJFiATTEApT93fKcDuj\noNeQn7fr5crKgzVGeebZGi7ByKhvgjbEWp7RY15FWDQgSuM7susZMOjljsuO\nsj/CxGCHYU/NnZ2BHbJzP+6dhE0SMDSb7K4oxcC0LTZ+i03CNXpproLVPeba\n7pz42yU1k3f8Ll2ndxd2TuguwPY5TA0nNQjdc3gg9wd6es7GdxgZcqoPnYQ8\nMYVXh+VYmnM5O+aYNAl0AO9/s/EmABJFNHheL3OCLMZgvwY76cMr/JD/BlQT\nHi61wp+rEwUEpB0PAdkqAP4WUlDjDxLF5yTcOdVI36aobsQbPJGXR7wHpz4Y\n6JoDiJsLP0M/AtLr3wRHfCWoQnxfw0NYplX/kHSQfaxOD3NYfKNbduNWYYO4\nAPh4ltAqZKot1KjSbh9MnBcnZKjYaWF8GzpwdRSVMmg2v+EBfKYowLTsOuFY\nkXCsnL01/9egn9PebYHN+kyuspZm+0Zz8Yx7o2fFD0iLEqFbiiCG/V2c2PwC\n6PDygLl/TJKQ63TCing34u/WBKPTEEKq5KaMiV/BpA/boLEMo+2efWJ29cF+\n94SNvmdplTnisYvKO+w6ISWw/n/WfMTbEFV+V0DLkSd2mq10jshPtqD047Y+\ns1wt\r\n=dXRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/density":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/touch-target":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.05db65ec0.0_1641489299510_0.42797962621482366","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/icon-button","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.6ca8b8f85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7bf57231f9cb0a64417fef579fc6ac85665f824","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":40,"integrity":"sha512-BJlMsMr7JqdEGWcWwXJsne06ZHq297TzUqhWsO/8zZPHkc15BSvOhqqYUtkXmpIcudgmQTvBOrO1O18Sobm5Ag==","signatures":[{"sig":"MEQCIDBsyMFoMDWiucVD7o1otfdrxKZraK9MfY3gvCIJv2loAiACb/1Jt4q/VkC84US2T5nrqOyZCLkvRE5FVceqI8dwug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GP2CRA9TVsSAnZWagAAlUMP/3I+/P5psbFcv0rRmEF6\nY9uRPmKhppTMFxKjIb8p0zFjYuiS8GaFlCZH3arsfmBqEvMu6jYuaXYNDjGz\nRKvNfjzkdYs5WuDKodtmKJ9oqb+y/2m9/IxTBDR1+RhgtNPOFjQyfiFSjE+5\n4ktP3l9ULuZduffmkMo1pfdn9u3Uspavz0F0O9m5KAPU/U8Qoj0NvnlY3CDg\n2RGwPgGVF8eZMaag5Ycyi1u6f3VqjvCtsVs/i+931xRZjh0X2Qnmm8hSl+yZ\nVRT4gPd660+mjDlqwkqhR0uHlxq8BUzFc+CBRVYrH6Zi3rTqWfPHbwwBk+YR\nu1xFY6c+OOZ//q6SVZT9CFZRzPszylhBO0auIPoEATkYoWGKHn6I3+JfHGlq\nEFlKVDeEj2d03lwnzOZn6d4p45WulmxpPgyks0DQ8vS7VvtJAq6Atx0fIl1L\nHOqXMR2TTfIDNnfGpVKPUoVBrb606XQvR13yFYIsokZtVSzxlzMK8JxZ68Xp\nrt5r4VLEjJ1Xik4t4y6JdqlzXnl4fkXT3MAn5Rzw1kHzVgAVU25WdowpQaGa\nVJNnxK83F+/69o1thNH8hPS8W4+RpZBKYSpZXxWqTrT2AI0GW7lE0eqQCiUK\nihoIOEHnbUF0vdk1a4rkkpmeS8gbt8otzaRwyXg1u/t0XdoJWZUh0CYwEBeh\nK1xO\r\n=4XYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/density":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.6ca8b8f85.0_1641571318462_0.009253482028682258","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/icon-button","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.173ee7a7a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73c704518cecb568d0d212d3ff7614e8914354a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.173ee7a7a.0.tgz","fileCount":40,"integrity":"sha512-l0K1Ms1RZHALoBn2hgdS3uGmD6v1G6Q20gAv1OSOrowNoG6tmKPxa/XW/lwbqTmz6UOKt0WDFmIQpa3Ct6/19g==","signatures":[{"sig":"MEYCIQDmk1RHKt7kAt52ny7R2gHTYcSU9sQj6JVVELKrzwJwjQIhAK8hzv/LowLYRUU/a4AJqod3Xliz7SruMqt8ETBkNAHf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTpCRA9TVsSAnZWagAA8XoP+wSK/ryqZE1x2rTtlL+f\nq90yRAsSTQ2iX3W05BSsvpYr/jYXNOUbKgpvificeW5VJBcZXJsBildlIrQK\nZk1NOuywKqhULNMcJP+wkA/Bo19hLNtphzb1gRjECV/m1jrrx+8DaJPNd1Rl\n5ngqxue8MPuXlCKeV3F4SDEuWG2umTicFtIb1ShfI8t/vcTYV1Xap//K5nUn\nWxxq5UzJLeQvJ0ctEe/Zeg84HeXM1vFJv0dEcDJadXWfnNuvXcJlndhdZLjk\nOf2Nhh5Q/hTvrMiTpSq/4buJpWh/A3HSote/a4fBATZzJTpqOQjpFF02do7j\nVHSHXUlyfQLer4fBV2aM9VXMXVNkSiWU0IJTTFjj2W1uYQ+jSx4IyWIXcKtG\nfYdBupjXJyh81tXzzsGllXdIjgXiH/zm2Dup5YIGCa5xS+mpddv7l8cMYcRM\nOA6gKJ/Tk0HnJ+V7+ZH/gke0IYi7GUY9pun6sWybZwNRhIpHEoRwbAsfjj2H\n25RIcSdjNwBGfvZmeHtRN1zTE5+XimFBmgBWvm7ueP0BNmR+kKJquEF8r0mu\n8xbADB/6omWuONp97gUoK8U6WLqcsjzss40qo7nyyt/RJdPuNNlDlXmXtoP7\nHUd1TqZegYuV93Z57RJSoN6xnJPC5Kmz/8dUluxottMR06UvQMd8YrcLJ6QP\nQ6mq\r\n=wX0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/density":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.173ee7a7a.0_1641833705373_0.6355135502883209","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/icon-button","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.b704e4dfc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52b68b5fd8ce9d748fc74d56d0fcc109ad456063","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.b704e4dfc.0.tgz","fileCount":40,"integrity":"sha512-lX3YBHVwcy3UY5PKIaj0Kmbk6yAuLffiO654pJ3RdXRe++232S7yey30S2Wy2he2Tb3oav2ZjP0TdZH8JMgidQ==","signatures":[{"sig":"MEUCIQDbYj21IO1PTQc6EGNO8y4FN/RV4EI8QGXhahueWQfZBQIgMQiJx2Htuq+3jSxKA1uNiWJ6Vx94+w1o3Csm1jMdeVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwNCRA9TVsSAnZWagAAc3wP/jK+3h1J/Zqk+xDAD9w4\nw4vzR67yCV/IycezZ/L2FYdDnf+G8R1CSRyDs5DoNLPTZUEsL0crEC87HuEe\nPK8xnE6AeLkZ50vA1NzLRGRG6z0QWE/47qVHkReqfrhY2VcjYRWbgr5errk3\npkdJZNaYSaeSAMVK2PNmE5yKV8p1GfwKR+iT02vwz09+VW4ieU0mFsqwGraV\nOrF0+kAMH2+npUJ1Gx6oI/4ooqlpnMvk6L2WZZyhwh9mogveHW7e6dwelCSt\nbAN9y/a78NtA9IpZfbOQE39AMmZCut/SI0pUJBVA7PhOVTkuhd71RGHsHx1f\n0Ko1GD3cGQScnDuYHcE8YfhAPSUefqb1HcwJoGsEaM5QkIfdlpdsJR+RG4hf\nuoJVT65UGVWl+D3sO5XdJ3udmBalcsNMv0UIO+J0gXi8epMqLvX+F8jDxKru\nCCxX5XRQU7DiROb8TgrJVLIGbwI+hFrSBgY1qtXxlQUQhCsS4xD/Xe/JxzUU\neVSQvfTGzA8VDhJzQseiuS3O8AQ7GPKGozyfpf57MqiSdjaPQE2OVYZ//oR1\nQ1o5fqwUQkkME9FpA3bYSTg/p5mtYZ7f+X1dBJeNH448NU4BYvnz2m0ZJF0d\n4lj5vCO2LSmO+2wvpL5Q+LL2LhWZoZ9hpX2sgoj5M1S/4nNlxtB5t+WErP8r\n4QkJ\r\n=gDxK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/density":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.b704e4dfc.0_1641839629043_0.5702066518498388","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/icon-button","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.c14e977ee.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2571b38bdf8c6217a60a4458f7351f2811c62148","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.c14e977ee.0.tgz","fileCount":40,"integrity":"sha512-tPctPTfixezFA94+zS6k20TgvqNgbHt+2y1PKWzaQpc5Z2fWED1vEFtZD7phroGV4/EQM2o34yAatHBaeWGB2A==","signatures":[{"sig":"MEUCIQCBQcyfxrEyE9J7sY9Iwj125bzp47K/weLDFeN6ZdHeqwIgIK7Xkya6Z4bfqzMMQ1mGO2GihJzx/C+Ayue/9wF1fak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adDCRA9TVsSAnZWagAAah8QAJ58PI5uvf3XZuKVSDDT\nIDhYKBm0aOUBIGYuibbgzIKW4OI170NYe/2IZDa+BA3ohF8PwL4QKxpsXnkm\nkBA7dMmrPfGKsabgqCzPWdnfuAffEfgGN8SwEG/ItzSX2eCsnEWC0a/i0h7G\nXaUmnLlbzFp4bELaOGnE/IJAa97lRl0x0gYIxZ7++GwuCk5jCZ2y+bYwLqVI\nz3mMAbjGUKTUKOheaNaly0ZRTXJkxxhyh294ASmZQpkohw439ySI7dp32VIt\nNy4b+ZzpHCciXGAkMIG43hpBK7Q7o4va0liDLAYRnyHHrDJAI0ENFdKO2szo\ncedB7/ijQvzMzXzgAHK+bFQD3h3uE9njwUU8K1IvXhrOkvmpK+YrIEKZa7RD\nSakbCaZDdowI1IvXUMwQdhmCrTVF+UJ3hhGaidCf75bq0QqvMBrUW1+D8A2m\n51wX6j9zLo2NbwIvOpWf9EUC6oj9IAd82wcv4UpYHQ6D1HKSU00TEQw/JOY/\nfBYcxUOU8i6ywr4NgKF4hn5LJLEz5MYy2mTNpzW6cx0J07uPz5a/4hSndLxf\nUK8A0I7WpiRB/XtKmoHVEpSsKivRnmMiVaErdR7Ex28zMMSH9tL/4/W3/qNf\nWMH1y2ZqYtQMvLQ2qZ0BMy/fUhIn9tbnworKOgfg6Dg7viL3B3wFMpfjpDch\n378c\r\n=jB0P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/density":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/touch-target":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.c14e977ee.0_1641916227058_0.04805236031855875","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/icon-button","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.b094eaa4e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47851e17bc10c1a5e31b1fc352a26511829f25a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.b094eaa4e.0.tgz","fileCount":40,"integrity":"sha512-ZZrQUuuXl/5c2gmHXhJwic+5ChWZMYxtoNbd9BPX/pOhSXihaiMXRaBxblZNwBwx7dQSjXiNWbIryFT7XOZfUg==","signatures":[{"sig":"MEUCIHSvj8TeWDoAb1NQ+7hQNa3HzemIa95kFYWuA1ZrN9juAiEAu4TBY1wglJWW0/3xnNkeUs+WiYQ/B+0FLF1xTNu07w0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRACRA9TVsSAnZWagAA5iYP+QDUc49/CLPbseKZjOfA\nmi5ADnjzCbE1CeRvi+omWe0J0yf50VSl7dW/yCBBRNGo3KcnhhKdgx4zsG5h\nI9dSb3/0w7Cux0sLxgzVu1xrpMOPXa+kHJqp2GJCezkzPcc3sEU48zGxafoO\n/m4enu70pqR/FuawICcKdJd7uHNvYYeLILMOh8xTbnuOhx4EUv39/KFb98EP\nPzpTnMjd3AOhq2WMjvNoX8btIh5vIwSlzR8qy+BWVxG3/IhYjfM6mXaW5sBm\n3n6cbO0RgeilQ/QO6HGZlUU3+fgvBYg3H1Tdem9uQOSbpVSGuTZEWs2JIkqZ\nHhTmnj3EVn7zx5RFwt/1v0jgniv3Bq5d3CU9rVbdfx1tER4M5qWRJZHBdXo5\nZxMISCe8wyJiM7tpClGRogjXiMqJF52Y9+0fD7/vbq+Pb6gyS96yJgL88EoL\nXyj7o8f9Hq1zf77eIIUCjpN3WYl+LMqlxapYZl3YgiCOK1fuJrVozPRMSTvj\ndkM6jAo2A065T3MpynjfR/+CiakdnQTsSWDomjK1VdX01gwUiHO1z+w3i1sQ\n4yflFKjBwSr5nRGdFr4qoYc3KTo0e6ZKRLxtF89kZ8irTyM/gGtC8VLw+uW2\nXNkDesOc7l9GxCVYgdMNZHve04tV1LSXHag6kvRWRfqDwqMiK03zGPxdhXB6\nEP5E\r\n=31Gq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/density":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.b094eaa4e.0_1642185791974_0.5605729744450252","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/icon-button","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.390220e42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8efe3346dee5f91deeb8a0a0b1e710b44ee05e74","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.390220e42.0.tgz","fileCount":40,"integrity":"sha512-YP1vCGwlu13z+3eoh7JnACUjO8MLKar4bqQUW447xpx9n7mbMzW8Sgsl1VWkhWbuA27RgIGmLo3Hd67uJCFEng==","signatures":[{"sig":"MEQCIB+N3dh+8c4KSbaEhDiSJedfT8ps2wk/slVgGTvLONg6AiAc1jjWz4zRbi8rdjurMe0zKx2vJpth3cDV4ALWSZD1Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2CCRA9TVsSAnZWagAAiAAP/AsaB5EpzUzL+VEi1qzu\nBdGt1K/sgeBIJE44gjAtrVGpYgXL/GPb6kdtZ/+8YdtzLDSWu/to+QsWw8Sm\n5vJ0NUBhGKNNaS9ih+wuYyOwPV69dEdJA0TorOun4CpMWxzLWSue9v8aBlz+\n9sohmPIpbKY7xW5V2x+tdCwG32sFyI1SEXBl96yG+UOpakCo+WKbI6M0GEbz\nHONFQllrJd6Qv1lJgz9y9UE5buqNgUrXgGGLjgjjTAw3FHSV26obrBBWGZFw\nLEmJo/i6QUqZ2PHDKkMxtp8rS+PnqzeZbhmm79oU+31YzjGKiAmM+LWWBOJV\ntOnINRkY+G39lOuadJ4flrr53A0h0MSm35gWOKmpQ0zI3L1cHkLuOmiQ3vtS\nObITBDuQosM7uoxZL9HOJuhBJWi9ZZyUXobB/BJosFhr9y6H4Wz2KJOYbxl6\nalopH9884EHgV+FQElj4BU1gAdl31Cf+KsUyha0PaKIVClstKlctOcGuYnBy\nisXnHJ88lW95oZtQRRakuWxBQUNHlldNFhD9hJYSXQhKpZV/Fj+t/GjTvFoq\nxpahdEIF8yt3QCglvojQNsHdsupjcSVHsNxQYIV+BOHtQdKwP73+HG7+UI74\nrQCjg0vAxndvHelr+xbZZGrcDu6ZWtcWKhs+p7NqYTXLwmif1Z8Oi+EOJPnT\naRso\r\n=oFB9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/density":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/touch-target":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.390220e42.0_1642438018263_0.6013370867041159","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/icon-button","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.4b5391f8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cbd079e73df8496d751e1fc96570fcdcdf672b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.4b5391f8b.0.tgz","fileCount":40,"integrity":"sha512-rqi0WxZYrfCtx6LFF5lK1le+jk5fSPeyxllRSvUjw9BL/2qCyydrOo3SQh+aG2VCneWbE6eQJ/yjKZV+v8+sRg==","signatures":[{"sig":"MEYCIQCs4XNElcSPbkdUCtGOWfdXsEEky0E/LIN67pL0aPSVRQIhAIy/SlEUS7ItF6vvVYdj0YIZ8lIU/fiEw71J6eU4nPYg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KR7CRA9TVsSAnZWagAAv1UP/1zsxU2DdZxqJ/cntH9I\nZzpFT2brkNPvEssl2G+2ITmKI99GoZY8FJx147340US0skzVHuGWdklvmaIs\nD3V14rVjwWxIhWDaJkhzLViWE6asQXacrZ0XVwrfzD6vBaCNahmgxJzdoO2P\nS9980pifAp4esb5ZCOFxpMLLj0N6RUde+bJxIkRgeZRy+bHtXR2bD6fIvYwI\n345B3VCrkjlof+hffUmSi0YHWUhr2TyQdHG8CAoZAtAVySn+Ca/yXXs+Y08j\nQosGZEvqBzVYWQTBZJ1Pj7ZTFUpvEmzZSFLjo750kYWRSiABLw4NlkU/WOhL\nnc2tsmYozi3iY1UdPRlZBoUUDx/IXitOBedokveYK8AC9BHlsYQlBHfIS/na\nLvNXZl6xrd6yT3XQFgXX4ac2r7ccpNgzIUFZuN32bZgnRgLfox9GquppQDXj\nxh6wfUbPnUMvLRhhv64CML7m+iEjCWbfZRt7Qt7xT0eJaGH9KxVCkvEz9DtB\nbl/piFUL+ccD28a7XAbCTasfFyMcO1JNw1NFqrsX2w7RELwvqz+W8kyPjT83\nYHZys7VcnDjJ9+WoRwwrPWfNe796H73vjSbRrN5c6KYs1ABHqdqRZAdZWyoi\nXpm4HUmR395WaGKRI6PomfZaLybWIDMHva7/y9vlVrD0J/SuiNwUuk7xzT0W\nmSXQ\r\n=obnR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/density":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.4b5391f8b.0_1642636411234_0.18124550829113217","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/icon-button","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.cef6bc623.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8515388069f932354c768dd1946ea80d11b6afac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.cef6bc623.0.tgz","fileCount":40,"integrity":"sha512-w3b7TY9M6h6katIC6KsDVgwivZSKndFVKd5bnnNTKdtiDD7ZETSQMD2iuXipafb7760zdD6J5cR7hrfPFzkVmg==","signatures":[{"sig":"MEYCIQDv4/dARsSsLmwHZjTqUlffvV3Yu8YTb/E4ANl72LXwUQIhAOEbSAMUAkboHXFA0Kz6C56F8UF82S3YdVji6ubohmX+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpKCRA9TVsSAnZWagAA4UYP/3WpfBkyxWj/KBxLTPrc\n4rzTvc8BvIYn/p34l3d/Psnvry78UOYGWBvmSWA19qEy96kUiqdzElImLrlI\nWV4qHkmVpCD57Mj0jodO/DdKNByMnGQ9B0ECyvGwiCg7V7bbJA1Dc58ZODId\n8tSHJfi49I8hkQb0Mj8amY8n1HirNuB6yITI1tqoVeziJUgsDrWcdjZ0V8cR\nBIg92GAKbKFwm4kzioLJM6n/9Djwz1VwYsoi+EsVWzxlsIzJ541ldR7PoeVv\nuiosUx+4Xzn0vMpFDBO0ceG62FtgpTQ9jIyxUXKYgT3Vcq32zK2QD5PjlMh7\nBvgNysKdXnx2oDmxzLIeDHIWm10x7Knr5GE1xDMpV/BfIhFqDNQnOz0zlH1C\n18Ez5Dok88d4Y3bg5HJly7QOrSHMqj8bBOfbrGR7sEJzbK7j1Egdqtqyzxlh\n7aFvRVdrUHHAjl6HAU1UILUWk+9gh9VGiIlIIn46L0xoKX+ZP+X+MsaoG1Lu\nDxM5jPSznyyCdcCQPDx61w9htSDAjcMlwbNroHMbUGD6qKjOtFAlqRKsu5hw\nQo08fZQWz8/C3ZFuzqrY0DowqoU9jYwdUK/fLjYkcl4yjDcir/Pup7ntXC5Q\n1AZbfIQYayFdi19UjfqFY6okH6OdjAt6vxdxv8Eg26aJjvTG2xx36rJ+EhM+\nQFDl\r\n=lmwI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/density":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/touch-target":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.cef6bc623.0_1642637897974_0.8932957067964693","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/icon-button","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.0379179c4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52fea81ffa1fa57cb8df612c55c39b8e6285c2c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.0379179c4.0.tgz","fileCount":40,"integrity":"sha512-lNlnB6rjTe/+NBN9u85dKSfhoYzkV3TkvD8m3n6KAF+pUugWfsfnolg2D/U4shjR9AWmnZ2QSkfDcULgZptp1Q==","signatures":[{"sig":"MEUCIEMkDqTjRpTriEqbsw3uLsXwK3L3IKEcBxKh6Oi0jzafAiEAtDn4AmFN+3VFBm9xYNWexX/4x1JUEKwglr7j99ctyFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAOCRA9TVsSAnZWagAAVkEP/jGv4qKmqeQ026r/DSc3\niX9JsficVizmjEWXxE9sxXHV9Tv1s04//EFlqyrvglMQlJZ6nq9PkjfoRmMT\n+iox9FxF7h0g6REAWbhcCse3M1ATYMuyLnVmSmATxKiZDG3juJqf5sAQ3Npv\nYa9WYJJBoFBuqOOIVyuXWL5kVe0Mwj/ZrL59W3OanH2EyzcPyi6kdoprkFNp\nk+22eeSQwDOOnB4mEPQSxYNhmHQT3mPtwA5AlX1opi4ZWb8KsuAqR/TXzhh5\nalY/DduvkEzN+qCBN9k+Z/0gAocfnSGo7xEsWgiK+QGOtcKf0S7ujEb5dw9Q\n3PrLFzlGOWRnJsSrCxI4kQZzH0auM1qz9gUva60rkXdgpBpDEO7lSAieJ92l\n43sEPrWwdIkDi4m0ACy4e6FQv7cLUPw6cAAA6ROVqKUfNowgtuLqOoB1CLnt\nluE5v0pJC0vxdy4eaCUJi9VXgzZaSBIn/F2P/XBAXyB4ZRMF1cWx8/T6caXk\nGEldNF3z2rsyxQeU086VkzMq999nO3i3YnAY/Sbpa2wc+dEV+zXXdr/ocmlX\nqBsZ0TN3lZ9kyByFGWrhBU60DcE3J+HAebKsor8qqLzSnDQvxWwvnTHM2CVt\nOiFIMv+P5RMHHEEwQIkGTisUKeydAbyx/DCsWzmMj/N3p0CLYYea2mOsH2WF\nwIqs\r\n=DjjD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/density":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/touch-target":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.0379179c4.0_1642704910189_0.5968115905518092","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/icon-button","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e62f3dabf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f9e5109653a0d02ea11ef0f7c4153148f79e746","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e62f3dabf.0.tgz","fileCount":40,"integrity":"sha512-775gsmOxASq6bOJFI3vsrDuudTwJrq+m9D09NbnxbdUEJYilya2mTkRlB5OiIme9nj9svN/H+Flenbmo+HTotg==","signatures":[{"sig":"MEUCIFFlHpiC07zVvIoz4Xz2fb3W59v4GmioAz/qiP9EHcV3AiEA7B434qMu+sp1jYP4oVLvkRRAmI0VhCY53ijRaFGBtVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvpCRA9TVsSAnZWagAAmmwP/3It27jCuTkPw2EGFhEc\nf7wBMpgkATZ8KtApmWLnWfGZ+Zxh/3NFr5v+1lGQuTtJ2SlLdKF0y12vmoh7\nRyXWmaiMuj6s8QU0db91X+rGf2XVpjHFNTGbyCYbVihOPuYYHruF3mRJnggV\ni5axiDoGEq2/Hrf8lzZ6DYOYrd0gOnU0h09aqBR7ncYw+HBld7JxqvVJ0NLO\nCPOMfO5lv+HA079rDUXVCRyczFKqDiMXVjAtuhmFl26o1HVpSE4QLWOYzJDK\nSop4EWay1/l6gNVet9PNL3KkpQNQOmN/EwI+8ea4jUMDrUTg8NCxIDYc1DsD\ndKkowvOILN1NaefusTBThKOrH0KkvFJfHGHHVHOtShmEXmQyF16amdauVhVQ\nlY62KftVMzvF3uchZLV2NR8T440dGsssB2tAN1aDZ+TvUxUDos+PSpM2hpWd\nTR/f8SSLbPPOc7Y/SJa3K9WE6W/kPBQ6hcSLKj+lIuT0bfypPlbITvpeNUsm\nEA01BnUpLxZAFgYRKjW2KznCSMpxqTZiVrvBP6jefVdzxwDnWxqQ7qsB3Jqo\n7gUJ7Ogrj8WyICwFVVB4FO+0MccY5UOiD9LmDURtrjq/3LWPZ2f4olChA0NN\n01PtICDAaZ1SX40Zfft5s/4U4qO/Z+PCZqazFjMhEQxQm+CCuHyY95BXhq67\njU7I\r\n=iJBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/density":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/focus-ring":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e62f3dabf.0_1642806249403_0.5372186609162766","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/icon-button","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3e20c1de8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"022289d37a20f7afa20dbe9589a1fafca4e894a6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3e20c1de8.0.tgz","fileCount":40,"integrity":"sha512-+xdpMwY1ETKf5RqLRt+JyLgzva41w8lW/zVoSYAU4jfuGo4JoGnonDQjA2JezRYFApjQNl2IXsHGXN0wolyagQ==","signatures":[{"sig":"MEQCIF13cSIE8aKRFq76qis3pm8Hd3x09qJd2GwaogdY1dxrAiB9gk3AWkCOxwlgDz3dNyCkWmfPKc9c+rJupOZWoSbN/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgcCRA9TVsSAnZWagAAgYQP/0t2CbnWryRucY/vOQVw\nw1EE4d+BR8310jzvaVsWG/TTY4EYJ84VXqPT/g9MScHb5n8gjtgLXiKG9rEw\n7Ujg9uz3Reby1WR4rdKoVXC0La4lt0vYan1DAN935GS0Fm1kzAp186q86dX4\nw6juYStBd25hm6HdtqsWRMEVkzFZDtT718rgC0KiB6rLxDOo0iYZ+QvKE9iP\nyjNEueRJTyTL+N5E9nBV1YXFxxFBA4Fn30ZCk0JufnFDn3R83MMuckv5Nazm\nHoY1NmL0hQkCb3OBbjx16QqHBflJsPU5UaH4FHyEFAwXGO7DCQBHhv63/vo+\nTVhwYDB5nT/zH2Id9eHYfo3XFTsR3O5e+OMlB7bDeWxvpnPHmiDBfGD2IaG6\n7Z+xoKeNkIBKg0IOs+4PRgzu8euA3bdvQgtUG4hYWjxUGK/oISJR2QBQNeGk\nbh6hFsR1uwJgTEiaYXkzyMArMbASBsBqVKu6CYEhqyn0exI4z9qqKL+cdMof\nlW9sa3s+DvntFmdbsGKTqoBfjrC5MvjjBYhFc2Q7JALd1KCWANN7yk0nFeeU\nFJOCKpOINuH4+5T9R/08xfscY/O17zPmkOrUnE4gJtgcBXkmYhoj0v/FsMpM\n8fHZX6mK3QBllise7WJNM3tnwanLNOzE1La+qabrDGb4pQrb6r9J8heXhSjf\nKK7t\r\n=fteY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/density":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/focus-ring":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3e20c1de8.0_1643124764646_0.617285850133799","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/icon-button","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.9f9d928b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d455186af81d7bac18b7938762e5275c90e166f1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.9f9d928b2.0.tgz","fileCount":40,"integrity":"sha512-5EzcuEu1Drz/7NyAEY6jWWatQfEwyph2FeEt8VPXRj0pidKJAiAGjGJg7/WLIl6lWayw8BTmxD6S6YXjnYWplQ==","signatures":[{"sig":"MEUCIQD2HVOw9j0IItsIrpAZMNCF7Qh1uia4tDGVl2gYZSbqDQIgFBiWtBi/cXlmBxfD0exT5p2SglfPtRMm7VO8QvHLbmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDlCRA9TVsSAnZWagAAWVUP/2YYIcy04aaZKGNmlFRy\nHzs47IytW0Ckura3KKMtZQat7JnqeoHKFEvvDMsWRowntBCAtItfOHGzwjFE\nSInshgpHpDyhX4i1XwXzJH62xFRTiAocVdBJosHGngJ0K/P35F8zMaBKChp5\nJrQUUzRIHXP+bNHfzMCnwk2LbgcdgUwupMPlxs1g0a73p3pZ6Q+znpg4a3wK\nuq3wIxMAhHm/hvRoDpUmOvIyXR0brMP8mYcVAV2oMfPyzHPUS/MGKwxDQlWw\nqBq+gwxdEvwdKqGZhi2QupsDnN/zwUjhBhJLYhxUcvJWHwQNWr7f8jSFj33K\n8o+vlaILavj/Sw5lRwUuxjjzBWt+Fg/iN+kKvUoTHazsukGHeZBC4XdmOVuW\nxLKd2URoi2QhHMs/wSTE20elLlv5lJoXg3O5iM4UoKscgSlNpxweiCJmrlhv\n82WHAy3jZr4Vr++vcoTfvt4sFC5qFga1hncB6vndEVLiLyasIcSyUkgk4wnt\n4AuODZdq++SGDxkoB4hVqK0TcTOlqVuxxnIoM+P7yKpwHn/dVyvkJDjE6LyG\nYBR2F41xxywfFbtkS9F0jKnw4GsSUx9foEXWDr8jugCTu0wwNUjFu6yb1ohs\nFGS/edUtUySzQyV0GPPHaB8dn/+1Z7Lpc9FjUh5VfzN5VhzlMjpKXuoYRy/U\nr2mf\r\n=3J/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/density":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/focus-ring":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.9f9d928b2.0_1643307237177_0.2182428574075459","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/icon-button","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.a2bcb065c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d33fa1147c56470e6249d686c0a109f919d757","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.a2bcb065c.0.tgz","fileCount":40,"integrity":"sha512-bkUAP8GOR4mcM8EN5q35P9r+rHaNZlsDg//pgbfWatHShi6Nr/ozH8AEKRtuOpl60wee6pVSAegv6ZsEafl01A==","signatures":[{"sig":"MEUCIQCj3TkPMu++GZpO5sXOw6tEhEEcTV/g3phxwmp0cLjcdgIgVkMj+jWJR/pAayFoSC5Tw0XR48XF4xkZml7TgzLQGdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYOCRA9TVsSAnZWagAAWtIQAIUy9L+ms7Odtogopdcf\nSboakJnQuIzxojk2FxF6kjSHCKe6f2YtpUTNsGct2YCUvZ3P22ixgQrdSNOe\nJ9kUkcJfj/sVf9QBF63cRVUC1MjXKtDqe/jsg2gu2FnVq4w1F4pj95PJjsMS\nI5IVakFNSKYdg/Hv44wXG8gsZE8lFtmMxL1if50Tgs4i+JoRdaDqWK9hDVWx\niP7p3HbXCo908jIsComdxjXhOjmnqNAULcVHaVyVJYwva+6DpeZhdUgrw+0U\nAUtb9VPmwKspdqwoa1aco6hrBNikVXKuHzwsI1X/jEOU1xfmNzEs0FIlFJ63\n/p46n3U781HSBEyBDFeXDBum9dDV8PQ7dT6NCbm6fQfWaLgb0NRc/MlZJOXK\ndCuqL7iQdqpr/4r5CdO+2XExtZdoXGlTWk+dfUEPxVikacZ3ZhmB28j5aPv2\n/aArP6XMSkFDz5YTCPj761jVEo69DUpVc9y//dIt+f49i/tnmnBUB87QCVRf\ngzWBn6n18UCrEHICG825Gz06yrFAGY+nd4NClZmdmMQgx2NAA+iiVdeInoIW\ng3JprsOKNrqsB5ZfpeGlkHc93TLQW3b8ucglCPjIdWimzNGjmnq44e+idJON\nLRwC/jLr3gRAWXThSkWCJPnHOad1BFvxHEDrfQie6ryf05vnZGgSdb+bj75G\n3IZV\r\n=6+pf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/density":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/focus-ring":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.a2bcb065c.0_1643398670735_0.34206486172325623","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/icon-button","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.4e66fb2e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9187628e7bb05ed0c13133968196e7c6910678fc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":40,"integrity":"sha512-tcJ9uGw2FhXTD+gPV8nyC8unR2CZ4sTwCcGN4pyZhOomLeO4sjhRfa37/9/3hIHGYMI6m2Fy4159EcnhtcIJ+w==","signatures":[{"sig":"MEUCIEXCyYGo/9Xh1sg7Y81qZevHo8mWEvK3x7o6i7E/Ou05AiEA+k6Vl3ANZeWqj9suLV+Cwokx3WFh4w0rx22krTjBdz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcTCRA9TVsSAnZWagAAxaQQAJOWEMNjYnLSjoNz86Zb\n6oXiCLZHO1SHfoErzta4874hw27WejMmszx6EOgnxe1i7FEyd/Z+ECMj1sGV\nCZlotFN3/k3SpHlzgEcn8tnXgQQlaupziJ8VBRicllgck+ha3OWXS02d42yJ\n9moBg+6O/q0qHKNsQvFBfLBZU/Weo9sr7WvNibLqr4sS3l9MQeZDPYAsjZN6\ntilYo90JfFxoD3cadzH6nqlQ3iIzLLhKngWG/3zCEb7eJQ3VHR8TNf1fXabF\neFbgc+dHcOMh7oHb6FQYkOuSujCXh13AYK7WD/DagBg1KHWswAjU390IGqwW\nYcWxVaPTjYOJroCDJ8w5Pdw8W5ybTlT/8SIDgm5X2WPR+kvmMUunN3XffVEC\nzvKZGkMC1jXHgoRDrDe1nknt5zVdjcsxgJ9Szb21UURz3VzfZj9gf8GgyFV/\nqTGbbGofNskzErtkMWtNKBJ+h7jOEEeM+/mXuC5XtEMuzmKnOLYCJbTPhvTO\ncl0CdJ6JS9ywF434TuT1PQkyzLV+35iRVNGVJgxNrMDQ1Sb4lFH5XbRGgnMf\niPIryLxcn8Qe3OqfwAHH3W0plJ0u74ZfxW4NcR9iYGOwQLh403L1HjRbHS0x\nPIOCYKYpLIIp778Uuqz5+U+NLgmhNPbF8bzUVJD0A9NZ4obnbVJ2rJNPn8u7\ngUjX\r\n=vl7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/density":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/focus-ring":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.4e66fb2e1.0_1643398931155_0.463323140083991","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/icon-button","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.9736ddce9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790f6f9fd45f710d2887137c5d306d232c565f4a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.9736ddce9.0.tgz","fileCount":40,"integrity":"sha512-UdpxKxd9kv5402TT5zwu78HoBLF9+BpavYRRCEf5hZSH2nFJtm2hurNb+VQ1RVdb2QJYMTtgywXE0als+jK5/w==","signatures":[{"sig":"MEUCIQC0mjpdWHnB1RigDjv1ikwh++JxkK/3DwSZciZ+j0H0JAIgJuHNuJ21Ev5vP39xjcmke6P0oMLY/anAtv/iZlRvwm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3tCRA9TVsSAnZWagAAmqMQAIfJX8OkjN8uUyS2/BqI\nAhEWJcUVb+jLHDRpfutiOm2ZQysw5QfZ6D9IKMOPklEMtypPe3FN/tA7En+2\n0CHustfjwFfO/J5pDNvvUBGZ/G3Fwj1EddGlAQuqVy6AynFwbLJQIgN7Cv3+\n83T4YJx/5QuO59p7kZJIG88pvuDc3fXuPfUXyrVemCfLy3SMFBO2y7NbZH5J\nkopvYpysQK7VvUMv9lsa548fYuF+f1VXNmDPBPUPJEzdLY8XLQRXl+VH9eSz\nvAaHyw3sAdWMkOzGTCgRxCOQ5j+eJrfysjS8K038xpsKfo2GMm6gEI5sZLjE\n3LqFTNOIqOvKSzjY1HlzrFUGYMrBNI0vcFaS4Ettn2fa5RCGI64jP7cWdJjg\nj7v2oFs4dbk4fZ/WTJOMvSy7hbmp5BSuLHU/i2BNckpM6tpbGt8QxePzUvDF\n9+jNesnSVWX6d+O1InZPquXzSVc/Xtg9j8SMuALWG1IybrAqZedBxkurSR0b\nxbXXxFXGQVH8RxLGT0umMnl9u3vPJ6wPSffwszOPjhU1ejr4OoEjWQOevCQy\ndzdwgQ1a7eZKwj037Kn0wNabVmzFQHmTHDCsvb+04EFRCBkKqOM5gE9iPEXy\n4yK8Ot8SgL964aiREZyrbF5tPcIhjnvgYlvAp1V3j8N0jGGaAGRvkkS2xnV7\nl/xg\r\n=eBni\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/density":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/focus-ring":"14.0.0-canary.9736ddce9.0","@material/touch-target":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.9736ddce9.0_1643449837093_0.2862302752351984","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/icon-button","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.cc4ed13cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f33b1cbb6b1cb632f2f750be68332c7fd83b094","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":40,"integrity":"sha512-ioy0fvPmQO/uBY2/YNVD9tGy9sbBclyGwPUs3dL/5WOakhakGcFGWmubQO4DrtRlYm9pxNGz/bw3r/RSs5UJwg==","signatures":[{"sig":"MEUCIGOKwrZqtgnw/cYWvAfXrlrfnIa3IS7HrtQE3WtodEc5AiEAz5vdPghS/rWNrNLUXuBuo+7LxNh9HLoINUPHRSw01ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8oCRA9TVsSAnZWagAAlDAQAIbr82MVObW/Oz2icU6Y\nceEoFcv7kOIVmj1L9KNEvSwL65IPjleEnpMP+YwM5hj+2OHMZ3a38Wl3BCCp\nU00MuRL/5v44zNEy6VdDFiRMOTeGptYDQPjsGhNKLTLl5SVrdC/zQX+COrMc\nLljLEPKldv+y7Hg4hUV9pgPATeIQNkopSF1fO2y94RCaEmxsUMtrNBaOeRxw\nshwVIG71PBuNBoH6nWT6SzZtHE2JTluSPIJUP+F+5ukrF5AvTEZnz9gRmeT6\nP6+XdUCck+GUpve7QCvPvqnRE/VJCQtOlAbXQiHyqcP6W7kNah/wbD/Ha+7+\n5V+42RAOiz52kNS57dOpxiT03gG3L8UrHYbRMQhBXP2fro7vrP/VD6qoHdl0\nKg57uUMAYwOqlaq+W1T0o4pjIoScjr3lM3hGLXraq81CKQTRp+Ep/oxWrfmv\nWRX3M73ihGI8nR+J0xRz+Ug7DO6mTt+XWXt4ocuv9WittV+M9fcHebDqv3g8\nZBZX+lkb/1hGayDHGZmPHbMQxbwGwrl74Or2kj34YYkXPvwDXeoeRyICjQY9\nkylaM7oURqGvSMs5NszbMPSLDKK6eryiEO27ArqVjfVta5IKMHZManDau1bq\njgbPE/8v8PKOTmgQ1SlJENHmXtYcfN+2AnmwztXqijkl0hXcp8bL2QrrO9Fc\nmE/b\r\n=oxgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/density":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/focus-ring":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.cc4ed13cc.0_1643999016799_0.27470642759831154","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/icon-button","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.dcba26fe1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da2c259e0bc83c078e0ec8d601a5823ed8184ee6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.dcba26fe1.0.tgz","fileCount":40,"integrity":"sha512-gjIhHXCDqy03Zl69BL2XvoulBgXthFZD5Lim6FhhV38uS2GbHvnqkm8XE0DBFDPda3YUvCxc53QTvmPfc4HLZQ==","signatures":[{"sig":"MEUCIA1uSFsLzyJUZR2TB5Lv2V5hcnTlgtFxKJ04CJ/HUv/dAiEAmf/APJx0B/yGQXKtYctgXgCjuN1Pj/fLr/6V8JmXfj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFnCRA9TVsSAnZWagAAkMwQAIWjZpAcYxG7nIsZPzbM\nDTOoNxql+z5Cgb6a2Y4X6A0RAiF3d3t+eNNo8VmzEWR3be7PtLHTauYx0pbV\nirRcxIvVM2MewrZvi1cryeMdJQBxHWcJn4b1w2qm0BLFXdw2Jxv5l1pQDedc\nhylGB/I7Jti299ptRWoQgHT+w4jVJM2WvRlM0OzH8sxmnSz1bpcfc+IneVU2\nmNSPIJBgwOu3dQ8RAAGhLrAzkP9Qr8Tak0vnXKVEAWT+0jCgFZuWYLipy2sw\nzpTml63Tw2vXZRj4E/97a4sLK+IICJ5aRNiBv8S6f1cAnVi+kVPSuEyxmy37\nCOsC0uV4viygwzg0xkouCeqEm6Sl6V0Lr9uvDhxFTiIFyIoNgfKe1O7bcKJA\na41FNnfpu+HpjIrG25h1/9gl1CedI5fHheAiH0podalVZu6KmjbFfqF9lh6R\nQuYBaADthLdwQ50E53qNiovM8awSUKXAjfQTl14n/T24XT2Mt02e8r4KrUYH\n/BmGkCjMgluRz0WJw3aB9VEePHnhQywiwzk8uT1gDIzEQ1LiUELffeppVmeB\nzLfSk1IYluov7b40WvRRAwz+Aav4y6w6RhbdtYqk8u4jtg1IDGEzZw/2X03C\nWNGTStkJAz7aTZ9/hE5Wzkx4cGNWfSpHk3cQ/SO5PsJm68nizxMUABqs7taU\nuhXA\r\n=9roN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/density":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/focus-ring":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.dcba26fe1.0_1644011878821_0.1913739506274812","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/icon-button","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.ec54d9046.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d707779ed7f206247c34b48fc1b19db1b1d9cb7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.ec54d9046.0.tgz","fileCount":40,"integrity":"sha512-48ZyWIBVDjdhF/CiIC3FwVHjsGr0U4PudJB25uAkH8RQ/rvK1XXcooCNkEzyViFXFf4BFfhx2fANUB6aLzCGDQ==","signatures":[{"sig":"MEUCIQDMXPqZeY56QBnKpGBiZuSiK7sd8IZKiut4GLDuULAgOgIgUtVXVg9/GCv61FyyUTE1k4zngC2BC8zYQEh+Of6bwF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8TCRA9TVsSAnZWagAAl1AP/0erzzw3dlIpNCprNwQD\npTFJX+TLL1Ab+k5Yg60e8AV/KsBXc/auAhXYMue6mL+TX/oVLFBbK7detVVo\nCNDQQ/KZrxN5YzZxuda4HGaCC4WQQO0KEo4ue78gAiQUyG4Q7QZvutRE8y9n\n4Q7rpQ06/+hx582LISg/LOMtQOXfFi8USIpoS1JVq5VOuxasuu6R104pYaf2\nUniMJOn9Xb9PeJ5pr3UIC2CAcJk/AAyY70S5PoZ9oA4g5CJ5FtX8oGdi2ZcV\nJrh+IlwWY/B2Kp4sEOxcQnv41vJoyCrGVkhFQvixhDeYU6o9e/YqJVWtd4Dd\nylKeHH1jORiHsyZtnA9g8W6fnTrxKXB/sd8bQYP4UihhgNREYApzSfNP3lLS\nMw0leYKiBBU8/REx3cq9nI6GxcfOL+E8jgsNX6tujmpLSyEdUOVPkK4ZZv8Y\nun2PdcRT32Iu5amzOakkzGZfwiImkS6cxyNd1rUImc97iAdEAWOn9qxiNCRf\ng6PV4PufDSOIdqZZP3jiQh19+vJ7dhP2bGPFNf2S2kUGziqxyvwB/+TH9Y1O\nD++6wTSn+jfCVrqKZNSxyx1Nk2ABuypkidpxLng6ektQ6ixQ3THIgggPRWwk\npkpAdycWd8HIDW0IPaI9SA7CnNTzwRKnnk/JJ3PhtNVYSS2tdcO+dPc3tvbP\n9/bT\r\n=rJbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/density":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/focus-ring":"14.0.0-canary.ec54d9046.0","@material/touch-target":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.ec54d9046.0_1644248851259_0.747071407942774","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/icon-button","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.ea9b5b463.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98fa27269b25299615d02d71b83d1d2618fa8828","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.ea9b5b463.0.tgz","fileCount":40,"integrity":"sha512-K2PV2e+MB79jMTpHGlK+bpdQZEZSwM3ZWN6FakfqQmREhjii/hACGaTWAZz53SRLI2N4RMZSoA3orNLWcS1fKw==","signatures":[{"sig":"MEQCIAifNO70SBMWCB18nhsFk9YMvE8lb8Zkwf5a+hO3xcT2AiBNbzFgCyzRE60kPEQIt5knoZ704ec+KJ0EJgZLrhkbPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//WCRA9TVsSAnZWagAAR54P/2SlP/jqskxIpdADNxUG\ntw1KXFiaVZtR1yuJRvRcj7zH8vEXfa8/rToa5iNO2mtlBk4es9wKn6Lu1/g6\nuAu9rsD5NPbvD6ttBHp7Iwid3RhYKrUE8LRZr9sLO9RoKM0PzFeKuCIf9yld\nxn8Si2VblxWk0Zk+uEEGxd9n1FyPvBSllT06QvU8k6ocXJXKI04m7Jklc0a7\nDnmk7IvITZ45KX6+Crsu8WTsEEh8otg9Cpgxf/0hlNph3hMSRkKZbIoEWXcR\nvCfG292I4M1dEX88dFJZ/nNfdV4bXl++QQ5u/ejuhpupmj5fXvsCuZIO943u\nOGQy5Qa2NcbG9Nteuqw0LuS8YtMZexYUaFtjbPn4ADnI8ET9IHrcm1U3cgY1\n2Ax2P5p2FxYqZFTSUB1aX9Vp0gqAbzMjVOHr/UIkrIm9kchHoa5CFB0jWG1C\n9X+BzLWtqPupL1XzKVsVjKOZZyC87itN7pzAMLV1DqcNYvFpu7T5fYdxjqCw\n4MbM3BhesTx4UsIPoJorTrAkmvUZoWyrBPF3UcHX1qCZ4NsNssCWjvz/og3U\nEbDUzReqynjNJ1HG8ZduWozd3K0DepQ+Z/DjYQXP/Z2kBxaw/5MjqBm1kPQu\nuMy5+wBvLmFMtMNHHh9jkM2mr+DPFyPdLyHXIszlvrNRanUIhs1/fWeLAehd\n+c1c\r\n=0XTe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/density":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/focus-ring":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.ea9b5b463.0_1644429270066_0.65380152422357","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/icon-button","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.96ea061c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11576fe315657c1df54070898a55c785d66bb543","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.96ea061c1.0.tgz","fileCount":40,"integrity":"sha512-sFRxowraNd/G18ZRJZbeYJ84X6SGuwd2hoDcAPlmH9qXqD82jJeucpxlH3JdCCxP4CP1aCEy0+hOtZUXdsP3nQ==","signatures":[{"sig":"MEUCIQDhwnaJ7rETVmbhkxj9a5XEjE6C8ki/zW8M9Kysmu9xQgIgJJ3QuONs2pW5wV4FvQwQhwzmMgkNc4ykw6ltEo9REqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA8yCRA9TVsSAnZWagAA9vYP/0F6H+B1is5zbUwNv/pb\niJxy2duZR6HuRvK8kwWpy2h5Xsh397kIECfR79Fa/8ROOV7nI6IIIgz+DaFX\nZk9KUEilPQcCjsGpHtu2eYsfLFg5Wch6uJU95nfpFlq9xazc8lyHE+KbTOAd\nZCXrzEoOCR9W7eM/G8+Q+adU/kAC2gPchZIPgSkoxr+wUQYlYmYEeAlrpE8r\niW1SiCb5aKJs8KGkj/ocRbkf5PrksawPc247B26wKYV2kPsX8EGO3px+sgT/\nzEk8q+rgKDbhxqPONbQrI7RBjKWLbwUIu9Xsk7cHwvxl4atzWhMX6lWXplk5\npw8gqA5821sl7kl5DLP6xA+Naab44n7n8iRFDwCRhHwAtXqaTIWJ1e14wChd\nAcS5CrrwIWdYiWTjmRMsLI2wpVyqaPTtwpM8OqPhw5D6JO4rcXTNDipUqM7f\nPf1vCNCQbWe3B99S2q+bSkSFd3RtiL+oa3v/cp2gfNc7QzwTKTEVCuloRqcs\nwvUcVwzSFYnHIyaSxNN5+MbqCoMVSPLqia146hg6XPEawOfW4/TtmQxGbfdB\nW0XpXL3VIOKzj3tSzhduK/4CAdIRl4DN7T0rEFCSIgatumR7pjaYmwG60Gca\nrsBlLV7DN77ulox4FqnrF8R3KRihQtMybfc1wZzoW9zy91qWLHVlAOji5uAr\ncs2P\r\n=yCdh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/density":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/focus-ring":"14.0.0-canary.96ea061c1.0","@material/touch-target":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.96ea061c1.0_1644433201807_0.5774404452693698","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/icon-button","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e00181e59.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27b7bccb34a5eedec82ca94e729a95863cdf990e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e00181e59.0.tgz","fileCount":40,"integrity":"sha512-inKnLbM//1PzQ2jomz1pf91YkxWHlmcLBe/DMFs/IeQ/gJrE299keP3XleCyFAPRBTSaUgOTzfUmVkg6p43zmg==","signatures":[{"sig":"MEUCIQDDfy6+pUqab1zLwnNkRLQa4PJWlAvoBev/vks8Sf5TvwIgQBLOh4/xL++Y+9lSYEb9H9+WkQRkgGj/YWn+LGs2IhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXB4CRA9TVsSAnZWagAACPIP/iwhH3T++26HwD622eYb\na73vsybRt3T+ulUrbrihmIF/skrsczswSBYmVMWxnKYtdDWvmgUnDy1okXsF\nR3kVbmJsMXRGKtn9Ig2VGcLK2u2RrLm1gvidsjjE2lftHgu0wXI3rQnTpKSC\nTL9QZEYJ1rNTiS5fnNjzC5VPGj2OjumBr7QKdeOUfvhdvrJ7DwyQzdom5uO8\nNwkb5zSxDgoMkKRfZbjtdVLfR7oLdVTS6N1XqV8ecvyy3O8SeYb369kD213q\nodbtIqY3q+ZQE5hZbu+lVMFbLrHckohIZA1nVPncw7Yi94Z6dzbUmRF7Zgim\n8kWp7pAm7aMu3++B/5IqbkOxv4K4EyzagZoHzmRxB9XCLC3YRu3+J0ro0WYp\njr4JgfSagTNoLGoPeMW4qBX+jjg37bOQktOV/2GZLt1QlA1clGKlo8FI6eW2\n4oEUJGD2yrWLxf5JzfJqxVAXMAQFN9AiVwoyHYZQRVv923tba/08JewgCKAS\nHtgVK45gNpwwUAjvFOPwTEcMEAJ4vx9k66oMVPBv2U5zhnnq4vD0Vf1Uv1mC\nj74lOEvyJWolK2ro/A16wySLSwZKNTXga+8ZBmsH3/J3pZ54aEYaJvuzznr7\n9ceo+ShV+SaMcV03gXZkVxayi3DSsf3KwmSOnDiISYR+xhU31nuq4ycx7GDQ\n/ezn\r\n=crMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/density":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/focus-ring":"14.0.0-canary.e00181e59.0","@material/touch-target":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e00181e59.0_1644523640197_0.7597750903160996","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/icon-button","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.037285f9b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4cae7ef8a1a829cffc72b4d1bd630aa87a2ef42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.037285f9b.0.tgz","fileCount":40,"integrity":"sha512-xH3i64WPKsQrl1a7edydIl/1wiJW6fU65NT9eBd090xNNEwXQfx1rlvWEQE1Tty1XFtbWEIQzVjuD58CvelowQ==","signatures":[{"sig":"MEYCIQD24H9J8drOZHLhyuTE3+Vvk2JCuVZ3DquoWMV4iB6tpAIhAI+QsszzpaZoW9bCQhEQyiO+9sMnYeu+ffeM/IMeu1sQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqs4CRA9TVsSAnZWagAAGLUP/RHH3nr9RCl1mMTolRFm\nyh3FbofnNnEypmjlHLSFnZL/0ALktlNqhQWwCcbDSc6L0ERD4XLvSOBj2PQI\n/Uqp4+X1sjN2q2hc95Lv6tzrKulcZlp+PZBDWQ6gDBOEdbmr8IPc5LdA0V3w\nMKrhRNzPGPuF7T8xGGNADdDUnki5JJd8bOLC1cEDs8LXGX1J0lpfyDhDrpQ9\nrXAbyL3MNE3oaDt7oZ1OKlMAKdLTPIak+yyXeVgLdWpSzQWEsGzVGA5zJkjY\nZ+IeQPTCmjEZQH/VAxEs0S1ghXtE4jK6QAhr/PKf1bmI+0Ba10k5byAbkbJm\ncJaBH6/w2O0RYtSJbdzWXNcdmvzwJFCWpvrncZLubk3g10fdpUmgCH6tn2Yo\nQlg9aj9HHgMo6aI35ZVnAQZIhWkMAzqtlGrGxcRTr1b6dD9pESiBMdYHE0fh\nfPyFdIEAATIa5YksIB/emm7PwWOEQyhBdw2XgRvEx9zMRUjudYHXVeu0DCWo\nDB9exdVqFvIXq1jGxvpLEJjoW0CDhXj0oKlceg3anhXU81f831/YfTQW9ngX\nMHP6OZ4gmR5v2Ex5YsTntIdOB4D2HjYaqtS4QqQViSh8DW6aGqZXn73bTmAU\nJ6citQx1KH9z13xUvII1lL2TBHYW7jJasfUl4ra8LYDkbXHO1yIbA/ClEQys\nmSr0\r\n=xp9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/density":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/focus-ring":"14.0.0-canary.037285f9b.0","@material/touch-target":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.037285f9b.0_1644604216243_0.5834215265425595","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/icon-button","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.1aaa68dda.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4024e74dfb9ddcef5ac7cb0b832720df17dd8a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.1aaa68dda.0.tgz","fileCount":40,"integrity":"sha512-+v18/ABxoGgxb4FIcC2+pCm/dvkDsJyJCjqz4MkGV85xAQ7x5Rs0PbaXjm81rEMJMjInxEWt+gslwp3lFhGOwg==","signatures":[{"sig":"MEUCIDErkvUReyfC8Irz7m0IsRzq7rzQNAg0sv6B6/OEFeXaAiEAtTRS+dgQv1HGnZE7U+dtXsf6Q2MjiezwgDNSTZwQ00w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVaCRA9TVsSAnZWagAAf70P/3xjMRsY6ULVAerLzlSO\ng/B4W3eR+mOW75ls9uxmXZxFANq6YMrqQ0CW7g9sJvo0cG0FBcUclNJFksKu\n7OgUMueVlczL1MoYk/bxovlucxhP1XYIViF1xn20HhEF9A+3IfiCyz4xktME\ng18ap14bJDjbRXA3wsuDd35qetZVHsc0N341tnSQD2OGHl4Yh2msda6iwYJa\n1MKZT8wJu4BjpFahCCqT+Vs4QqvEdCs4EUjSh2nYmm46KYvm2vX3TgSsYkDR\nINzqpoYRYJMnGxB6BiOldvs4SOF/hy8OpRnJyqkoLDds8W0+VQpgxy2rqZrP\nQdcD3dH7kfQvLbmLPptCpiQ1+/qz/rE1QNtUsz2gdoRAQ+FK2VxshxbltMjN\n+jBLgSKpdauNthnth/JZx+dB2p2kqzxO1cKjklDjMM2agrlYnMZBMsdYJ6LI\neOyrQQ/kZJ/Sc8mahV5CylOlV4ej6eFineeIacNrdSCJ7gfMo0/EYHWm7zio\nT6QoJfxtBdnMU10spIuKG7RQUz3uMbjMnyAVcjaEP/1d1U/73RVWzeg6jgyi\nebPZ05Si4kdw6X0B7I0L93/acu3kpZJcb5lDiU7VcGdpVyKa3I2j9dPJAejN\nCL177TEA3E2yI6G7CJ3scp6rDosyYgUwMTm0LQAltPUBI5fjwLlVXcwdiye2\nDWKE\r\n=Jdip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/density":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/focus-ring":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.1aaa68dda.0_1645040986596_0.4110677521821795","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/icon-button","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.ab4aba1af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c85dee6126a1bf920f9c37bbfbe53f9bc4ffecf1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.ab4aba1af.0.tgz","fileCount":40,"integrity":"sha512-Ze0vsnSe0KMZXOJz0cFW5j4fyV+5g4BPgWamEjeg5PcbKKwybzMpT1xu72VHzwnmYQw5IXZUIxVKV4knz2yBCg==","signatures":[{"sig":"MEUCIE9SjLC1jdq3GS/FnZ8Jh4369mYDHMvZF2wTNctsAcFVAiEA6cBiMtIpp1S4YDvUAhbkzVZH9b/mTzzqhMRNlaJ0vo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ2BAAlVLuDkjmtz6YmODb0tU59blrmbhuRnu++lp6gu9jK3LHjLM6\r\ni14PnbYCM0fjhGMbXTxV0ZtRtNZDaTUl8MQz+PIhewpdxHM5G7yAZmRly5op\r\n/Pn/sLNLoU761y+O+/UXq1SDAzgVEciVTjusLuXPNbhm8De2T/4wFsSqv4OR\r\nhkosfcU9khwhbOaK3qlapFdPXxe4QM8DlUelzwQIcgAiqkBwIenq99lCj+5E\r\nKrAPhvHOFExXJAGMFK3/7e4QoeS7CMaQvVgzNs6MQejkILJA3TUu8okpfB21\r\nRWQP1vU0IiiKtbVqQfP8CBuggvE+cENHBeLqj5nRH+M+DmalvPgfh4bVj704\r\nUKouPX7oi9+4oYNsy6HWZKtNiY7VwXMMcPdU+OSVbxqX5vMZdqhwO6ivWrtT\r\n6EK391vcuv8mrqzNyvHWBmx37ldhrouiU+eEUQr168Fcp0SFT53MmnszCiK4\r\nIachXUW6/kNuWgYz4kUkKWyZfWH+IqDWltjSw2HSUNSTqHaNkIMGrISJDc2n\r\neCeXkLwlABIbP69nk3/2ANBt8yrmPLFzeVrk+7Bqx0SqaMvNCyuQimCABrZE\r\nNsBLhCBhba0X9i8k9H2s85Eu0QAeKJSQwWDMzuZFo5k+XNjKVVhuPB+7+Aok\r\nDlfQVMAEtpbGSGoXU6y0Cqcv1vk8/mofq1A=\r\n=gSzo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/density":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/focus-ring":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.ab4aba1af.0_1645121819043_0.906032430280973","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/icon-button","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e58552c6e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e5631de6196dc8ee8fe38c3c1a815dea1d7fc3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e58552c6e.0.tgz","fileCount":40,"integrity":"sha512-LQWWmlFoNFwFxKYuXKnY2uWti/k+LPs4L3WwiRg+JF3CdU9YOd2Bxx408LNzSD1ejowoWIFJn4FfvyKv6GWVaw==","signatures":[{"sig":"MEUCIQCOMKnNbWG9aYRgw3wgGPfQM8KyQDHXfzWKJWjIXtkchwIgDgUIirAsV4lBgLBoEC2HMs/LqRP8gdN+thEPH4hqRcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0xA//Wdz01FI0r4316aryxpWTJu1k34f47OCfMO6RlZllgO9Dhrf9\r\nUPUvIQQ15tOOP/lytHpxig2oMS1blqhwmjNU1MYaKU7J2akN6JdllR+g48Pb\r\n3S4iNYYWv8aU9NXGB2jUesQu8JMiypEG3gK1GwYMtwdxDo2R2tLNRRNst2Ut\r\n1EbHPFiGFEH7FXyVwijjvzV/PCRYl7lGAWd6/EIRz4cLARmxydUK0Qu5KxRs\r\nGEOaCiLCNy46iUZ2uiensKAeqG2dJ1Qdc4WC0Ea+bLmjFHctptB+3hY9l79Z\r\n4NF+o7+KO2QgoRYsjcvNkP7n2m5cpPbt6ql1qyYAMOreFPHO7NXsL/p5yUQZ\r\nXUX0M1hJ5us5DFdcKQUas7Ru+ruSyR1zH6W+BIR7iNXZ58U05auuL/VJOoiB\r\nvIKckpgd4xAdk74Z4Q6PqkqVlJlGGLZL84eKfKXxjBjnIvMpaIhbIOScEAqb\r\nEWdDOGSbJeoskgOxhxr/FeARwOkFEwkfeU5mTYYbogUdVzNVXV0HuFpwyUwq\r\n/ZETcUwBtDXLsIVOOqJGqtaMmbuhmoAsbql2LZ9uzboZuXAKVVz6tl2gSXvY\r\n4sFUoOPiTxZvVisqVw0OD5loU/8lTZftAGikEP3gW7BAFc/lZugfmy8shHn8\r\na+mEqaGkFHMC5mO9hyg1kTEug4jWYFEVHhk=\r\n=pIgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/density":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/focus-ring":"14.0.0-canary.e58552c6e.0","@material/touch-target":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e58552c6e.0_1645207485141_0.594744604687858","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/icon-button","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.868793776.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e3e4284b7a921a532207ae9f11b227157289107","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.868793776.0.tgz","fileCount":40,"integrity":"sha512-eAS91fQwCbsdp1ynNiabbVDYkc+0n2IlH8sa+Is2b603l8rQfLRjAtV9//Gn8Q2s2rfeKxZVeQVbfUZOCPaorw==","signatures":[{"sig":"MEYCIQC1w6n9PBoiFtDD4P5V+Eiuyu8aqbtck+mUkDqLNV34ZgIhAK/9SVwUGnxWA5CENQi1vxQclSUDsnp9OrNtKwepszCE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTs7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzZRAAj+qUaOzlfryqcbF9jdGh47T2xn8LDfiW7GGCjIyXGAG4uXJR\r\n4eAIhCQyKRj6adWaSszRoO7Reqo2d2otFswMaMU9HL5ZBgh59o6jsWFEkmGV\r\n9LA6XFufFFve6cHCdAwV6mD6ce1z9BszHWw8tSsrlt1gSJN6EpDEhb/ZdlJ+\r\nax2ndhiEdMcqGOWp+toXvGnfQZFqSPqeShr2/BhkDjBNBmSFmMiOZNayepoa\r\n0xpbDR2eChGxRsDr/UL/yUh0l1ShieaUw66YG46ZanmwCEhNzKeJdwoloAIq\r\nBLaMQ7lUtP1BbYb1LJgJC9OHpqAUhEXjUHse1jS8sUAhQ9aAQTqga6wWP3mr\r\nsBfTTkIXnyAH3koAknhGQPeL+26KyM2lvuqLvcH6AlA0NcZuJsCrmgM09z4M\r\nK9r6BVhruJSrWBegcahX8EW5W0zN5BzpyLmIqUsMFPi0HLcMU9+GCgmaxvJ3\r\nCayDY/dhYZZ9OohX9NDTjuIQL5/tpWMwgxgbIHZv0clvlcJB/PykKV5kuej9\r\nHQ7lTIzKMPildPnXv7zFRGyy+pc5FrbuSBpxmL7BKKhUQi1nnNDXIOTrbK+I\r\nZN4DS2ajHf6PM4o6m4TipwTRzHAgYF/YDCMPIdtk8aFGQygX8xpgbxgji6fd\r\n/ZV9S2Ht9yS7OhwuQjzE4wdeIf/9KGGRG6I=\r\n=L9EH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/density":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/focus-ring":"14.0.0-canary.868793776.0","@material/touch-target":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.868793776.0_1645558587825_0.1652860571958228","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/icon-button","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.fdc37a445.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c05ac8c44dd2b388e2a05081df60023e2438369","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.fdc37a445.0.tgz","fileCount":40,"integrity":"sha512-B18Qht9BScFlEstOErWyDObKnAr8T5/Uq7/MTXEyTHPQ0/8C2nr3yHBGLvKoiPkdxSFf5NrtAe7om37LgBAdcg==","signatures":[{"sig":"MEYCIQCEJZJBTkKhIApKwf+gbHiZ5miu0vpYZUj20WLAE4sMwAIhAIoA9FQTtJa+729MbNrhnYve7RTwhxFLaH9iPsbkAK8p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW+w/+JEX0pWz1JRAJ/ICe5MrNO5iJUW4zXfjF2y2Nh+Vtzy+ivkoG\r\nlCQ7UrT+wEYmjSIetZdn2Tvtx952D8SV+o5fJTBjl8PNkFreSp5XmeNGaB5G\r\nEMty3HBFBoi4g12n5/hgi7FwBT9oZ9USHNrfvdgFoobmH5g+0i3uq5b7Oeab\r\nHU8zlB/MM8w9SzPqguYZ0yAwXPfvnaMii6eN5dkyBkHGd9yCKOvPYU4xkCA9\r\nIwx08Z94ipPttvgFSVrUqcPi8KO1C1dwkL6xZLS5AW8Q7OTCZjVjfS8jvsTr\r\nL4RUvkGEm2q8dgWQl4Zjyv0k+CU9mvLsi9klCxQTFgb8uuW3OPx/MwwJOBNl\r\n4N9VVPYROlq8Hab7S9jfbblWc4QEGqo4v3f/WPZpkb9dq2oEkI9zf1PqIN+K\r\n9++J6P+yL8e9fL/7LD3OiSzRLA+QePvmBzewtzyoPRAwDHny2q+s6JGXbuBf\r\naqwri1hj14nDaOwTKclrLUSYBorWQs/zIvKGROBa/AZ6hIiLN2piEB1WmFxg\r\n3KEU1DtQzIV2SgGVMCnVmx3uOWHzODq/SHRkJMmYkS2u3ol4ok6UQFghlsFO\r\n9jBV6vP8U4NDufGEs5QnLTqGM/l2Ds4gcbgEWYgigqslSDbnGg70QKNNeSVH\r\nCy+lLZ0/sXf5a6YmTb3rB7CaLxrnuvqEjdw=\r\n=zcS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/density":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/focus-ring":"14.0.0-canary.fdc37a445.0","@material/touch-target":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.fdc37a445.0_1646074004829_0.15484032491252475","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/icon-button","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.43c7d87dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fbbe3eeb8e39f0bc80981f3ae73811197b1de34","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.43c7d87dc.0.tgz","fileCount":40,"integrity":"sha512-tD0EeUz6KFBqjTl31Jsh5JP5UBHp8JC6qoJ8PgHppOO1rmRJbTxFkjyV09x6l6MA1mAZtQFOq7CuxCF7uVFyew==","signatures":[{"sig":"MEQCID/kAacyJlUPdMPz6S7PZ40UhyeijtErucCJGGzfkY7qAiB0Qn/92lw1YeAt5FrCIRW+VIfJ26kdnRd1q2ytotD31Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4ow//d5i1O8zy9pZDNIDsfTgzdvzaST9bVBBh3K2OqPgBcyIiKNvF\r\nuedzo3j60B0KriNLIvvbVgZhSr00AekzctW5BhdoVGVG00LSW46hI8ruzZJE\r\nWrxrp33266elZzh5DiGoA9ZDC5eS4IcbSQmcG+QjAKmJPUNpPFQaCSdAdQfs\r\nPGg9Sswuuh8v0mm9iKfLS3KrxvqqSp1QK9M3k44j50Nprq0lGFLBDouvD+NI\r\nlUbvJjw3gtx2Nip+zBBiyJIANsHntxoNs8KxYq1vwW2ZH8m+Mzjf5doY2a9h\r\nl5tqGWwq5E1jt3sTF369HdlOs1dJH/krgNEvp1uFLlKZixvyDuCeMH6whAR4\r\ne1q9P1M1h0n5Rmkgkbq9umSTAGQDJFR16fC8a9K482/Kl+1LKETeLM5mzQPh\r\nyPjM032OhOwRTuugLzC0mrUittBzHyRzR/L8BGBK3p0zh1sTBgQ7s9tw2hwy\r\nTPWCjacKJ8vQmYob5LRVQ3VkxMSPQ4OCNhHsfOKFzs1B0FkoK1hmjHEDYQt9\r\n9EqYYReKXbM/llaRJBWFg6pSNZcyu4EzosEO/r+FYZz6R8ww82kO35UL5T7J\r\n1Ie9qFSYqITl+xE7HXBY/e63D2udIXKuD0E4qXGh/HWmibE4p9hgcWOh9saM\r\nrYID+cjCqygYfOZifQ9sd8zbt5ceowGUdm0=\r\n=8ZBx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/density":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/focus-ring":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.43c7d87dc.0_1646148826780_0.8607095840167078","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/icon-button","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.23043acd0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"435ca54207deb9e99124da2e2cce03b3489d7d55","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.23043acd0.0.tgz","fileCount":40,"integrity":"sha512-THYGSBpcMgXXbn8eQq0a8llowOJVrAZknHyWDrqfqPcksVNtolR91OU29VhO49kvxsh9ceqe9p3Uu5g/dz4/AA==","signatures":[{"sig":"MEUCIQCxCYp80O1wwR1BsdJ8TsTaN3M0gI0Rd5AxSqRpC8fy0AIgUJZbZFcwvvmL9kSAPbN1AekVO3N5+X41g70nhrkfCK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/aA/9GQBF6P9zFH0TIYiDUAdQU3S4SOAGf2bKp8f51qmoiuD0lGNf\r\nBjFPsr9JZrd+ZDled4xl1B2YwWisRSA7kfxILThdc3J5KNbB4KXLRYVu6GGG\r\nTachPXH0udXb7BnJKISexm35yyaVAa/ensYAnGlzDfGFFB1ytL7s5PfZPED1\r\nZbV15h4VAdPMuuCt/RKIjdqrEegHI1ZPMhk2UMpOSJj4Seaz+mguxBTnDTcJ\r\nAIW0FlFUZ6PnFDmll2KPupwz+Ozf1/19RRj5UVoXkHmBsrQf9o+x64uoht2D\r\nQEo/hGx06FofOQkfCGp/Gw4n7OaSuAeLdqdgSWeVq/KmtHPEtnyJ4p1T82Hu\r\nnUFTa4Up8x4F+4mMlkQTxc8G97OxZ6mcD5n97K5Ffo5MpCb/IQ5rVTTSHXTn\r\n5sw/RprXLtY9ocb1HkeN+pvX6px/g4MeJsoLGuYU0X/I1doRQ+yNdIw+6LPk\r\nKlTmK8GUP9EdyX0Rc9E3+DzZ/FWYNOYXA6SQt6g3Q6E8bApxws3GNXOadTXn\r\nPTUt78zYnOpjUbc6Ssase7uHWRB1UohdDzifV494fWSpoLgMCLelk2LjRHgO\r\nokRL8wxLPA3TxQ5K3SuW5mNc+4fIfx8CRpbyQRpZCubErywkOmM2eJA7m3Lh\r\nQw/QoMNgid+jVhxMoRDLH4WtbYT4xIWTcYs=\r\n=Y/Vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/density":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/focus-ring":"14.0.0-canary.23043acd0.0","@material/touch-target":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.23043acd0.0_1646252879731_0.005690761799246324","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/icon-button","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.6505e61c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df95ca2ad5321cb1b7870a753f21f87c53b89410","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.6505e61c5.0.tgz","fileCount":40,"integrity":"sha512-/VxEIktUDcSqwFbQ64v1WN9FEQ6HPTj6I3mc7qCHwNx4BttO1fZY+J2ely6raAPG8EQmNDaQn9KHiYBAgtcs4g==","signatures":[{"sig":"MEQCIDlLzPiM2j5sGUF1HpiWw/RA0MkKWzAi3/T52Orfbx6NAiBR4IlHacqHRGRbNWXyXGN5gJU1Vr5e1jUqt+TmPhvLXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTaA/+MOJUWzm2ErNxhUSaMUanEP1pOf6/f3K9STUUeDm7SIsYqlVw\r\nuEuaC94hduriVf+AtowOIbNA/P9wDaX+XR40ipesIMCo0LygBZu86tbXRilD\r\nL6lPwnBCfdTITagBRW6aoIfIATw6FrHTRRiz9FRfDdCgs0e931wem8KSKzWB\r\ncvIOKiZ5pJOV7BIE5r4XSoc/HsG/JmPD0a2wcKg5gVxFG/oeDnSDNZmhGtjV\r\nitxmCRhMhQi/JYJooNS8ToZXd6LYlRZNyyG+vI0c9rgN7/AxT9jArmDIrchW\r\ndJmPHQCLobwqWkZB99hhB4chjbo75x8XebUKWC/VTa78zdSTRjQwWvF4D+13\r\nT5CoBBfpb7BEkapWdr9fPBE2jSgWrpijsdsLsCNNy5x+diD4xtZhs2bRoK7b\r\nqGtb7xjCrV5lRfGLjcw0maMuJT6wS87NjwZC0ltA5WXTggNty/oMPS6oC8Og\r\nuFjOUUsNimd75N4WsaWa57PESxRjyagYrDCqDwEd4wqu2rFo/6TgHBzGxLe7\r\np4Ih0g/A6VTu47btp1+JBGfrMjWUxzuoQAer7K7foJ0TnnKKR5xAA+cOcEF4\r\n//iKH3yuJhfWT6sYOqaMGxRcIo3WKCP88juC9JXGHwFFrFkLetakjDYhdOoR\r\nqz2jFHuGmKPcTICzc8eLdDWb1GZTJNaMSdU=\r\n=GC7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/density":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/focus-ring":"14.0.0-canary.6505e61c5.0","@material/touch-target":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.6505e61c5.0_1646337679927_0.9835100394970546","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/icon-button","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.16c166154.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83a018774dfc478c44b7ca54a4df279489ae4dfa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.16c166154.0.tgz","fileCount":40,"integrity":"sha512-tFYTmgW8i6lpuJnizwg3NEKfZRCmaNGZMM0UInuapS5AE4k5cZzOLxZJyv3CKmDArr0IGwqria/UiqHLxKRGQQ==","signatures":[{"sig":"MEUCIEpbYP1zYVetJdoOcHwP96OqYgkfVIRnb+eSvUbvX3rrAiEA9RKN0CQoIjX0DJ4CoWHZGijDIZtbaEDk28EAFUvaODc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUNxAAmVIx7wuUTmstIUqo8VWSVWQst+GPFvL5BHS3D3WD0LHa6rzM\r\nhSbRsBEOYqfDwIdjTEp6mq2apAoZ3G9EqTWzo52TPt5nrPHoYun0iUz3qo5P\r\n9tVVLcUNo+qr1ObI5/PlkWttgrmYjnEd9Kcoc051/qhtcA5JSMyjnZT+iNyH\r\nvsdRoC8uHix6/WVJPcPFca8Pq6W3LVAvQur+GrLIirRs6xq66MS0xKlGVL2H\r\nijDb0llaDAmvkV3KrqeJ0KB/5lEV25bQRBN+7+lOaMY9Dq6ihAbZv/2WFFkR\r\nB6MF/Ox706Bj1AKsrrEKxt4rlAbZpZMC3SayGFP69z+nPuv0xGu4glCZOhIR\r\nrhRF1bjdv6fhFQGUUu49jm3gQDr05B0OaoB98X4EOzFRrPN183g0udSz9Z4P\r\nNwHCtvzLnFwGQDcz4WVZgWE1p3rW92x+w8cPEhMzHrpEI7jVzNrf4uYfyTZf\r\n6gR1OOCBY092bfn+3lZtAaoCDrDkXalB3tWO891gA4ajA7FEUCg3fuiyunOk\r\nvx3fX551FOThMslGXCueUyTVRUqmgXFSnfGmSWDcTpgUFBCwzddH6NePafkn\r\nLWhyCGe60DzQlSyd4Jn8srg7dT5WVobQkglY1r6mIeCK5IxU/iAefDz7spnC\r\nIPW8b2plzpNvCMGVcKr2LrZqyVNfFQFAAps=\r\n=7hRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/density":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/focus-ring":"14.0.0-canary.16c166154.0","@material/touch-target":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.16c166154.0_1646781777913_0.376108792452178","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/icon-button","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.bdf1d3771.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9b3609312cb5034fac7aecd09c8305b5b6814d6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.bdf1d3771.0.tgz","fileCount":40,"integrity":"sha512-AuNKS87pB4T3ugUhZE7DKikq48/DFIb2N11P4TdRxHiy4fVyzAooV1SORNNLo7ZRBeIf3w5BjLypY0btZqBfdw==","signatures":[{"sig":"MEYCIQCy+Iz5E11mCgw4+DjjIbbEEeXjka/7iNoxTPLMqtSLyAIhAKSVBFBOYdkblSumcFhkVtrUlEhnra6dSISTbha5mvDQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1E4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxhw/+MUEmLv8UTsqPsY/eXs8tNU5LbROWIFRqwMQ/SYQlSyfkfHFa\r\n7n9aLrqNeNkTzkeSigTFyZZEPVmUNl+Ppm4DM8L5IoyKoPWvvf90GyWV75GJ\r\n/GEA1hOtBK9mTkbSMixxsf3Q21YjEBvvzCY5fMSgZ0MjjalNvrOiYDxD2czH\r\n3wQC8lwYH3xeh4whLC9RXho5RG9ah1dyfKcKnIe3rVidjktqVHKhd6fOM7+H\r\nL8Bw5hNda9GkDlsIT6Spye82tzhowoFDCvUn5M9C7NfHXSnzYCviGdqVtFA+\r\nh5Koi1Mo5K4d/R5jjfdldfzUHax9evlswJ34MwcGwQy8MvEOVxJ9BUhdVSI5\r\ntnOscFy7pDL8TzjrLwcZ5CechmY83CO9U5lqHi6xSJq1LxZVDZdsWI9fKiIe\r\niFtXqTx5Rc9Nss0mdlv285VI1TLKARynutG4zXYh+jV/otlVyqBRhDFmeISY\r\n5D3CLtfQC8gvOlEp4URBB6K6eIpw1Kfu7mBcPbi8ZW4b/SIAXHFKm1LjumZ6\r\nuO3HFSxP2vwwyp15xEMM8Rjap1JMQ7teIWyWXDR1COX9DdDUd2LjnWRwh+ld\r\nTGCReizrWDItJkuiJGWlZxzvDkbYGwYF3tFDB9fBOiQ+S71Z++F3nGMaIb8A\r\nY7Vxypzw+pwHuVEOFvqZVJE8K3r29awMKwU=\r\n=LSIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/density":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/focus-ring":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.bdf1d3771.0_1647268152531_0.31946450326997633","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/icon-button","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.cf4292778.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63fe9d1d68aaa099f2d1b702a9e17080cbdcc868","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.cf4292778.0.tgz","fileCount":40,"integrity":"sha512-PGizvscqESZbtjYd2YIOG+jYm71dAiGlTpaf8sxV5ONX87O6Ug/2RJjwD4pvakkRDeWivNHdUTSuUICtdoq+3Q==","signatures":[{"sig":"MEUCICN68NJu5zJmLQxZVKRlJouLO5OFKbe8Bfkn46jtfvMLAiEA1QU0Ts4YypJisDUZ8kC52GTRh2yLMujoPbhE3HLxWfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDGRAAnWnsxHgaYCs6FQS7C6zhSmCSA83yirXDcDYLVaNcosLydgkw\r\nw8kSOL0VAXcIJp9mswulRfVVINdO1EGzmR1RgiV745HHcGg31fq6yTYmr8kO\r\nZPP8jU9UZ80RJgxGmtGxMG9Wh4r9xPltwoOmkqUEghsL+SEyOLMIXlC0kgbJ\r\nXVLx6wqEhGbnXQe807Yk+tcG3l6nrlsQLIf0sN3awP/+eqad6wWChEN4Rn2s\r\n2sqs6pGe+FQbX89W+Vute7/rbd8/5XrzCH8wIQiBxJsD+/l4BF5cWY2vmI7m\r\nCI12ywQcKHRPGcCX4Y362ytFzXvQYSyEr4T/mQKbPPQku+qOz0oKnjBhspRJ\r\nt5M506VrohtA2Hb3H/kWemu/Bep0HBj9RoboEHXJ/JP4RWvRufU8XZWAgKrt\r\nD8YPAvQI6Jd7HwsRqn+zh+BhPBkXDL1/XaxCk1SKvNfeNk8/D4vLtXrFvzUR\r\nno98G36/PZH36W6WrD/6LJiRR9SbTqU/3wEYQ3Snlw6md7EEWUiBWLbPhUCW\r\ndnvpvfcFIqfO0mhDlNYHgmujt6/lVR8e4TNyztf2H0x2z+i+tztySomk0sL/\r\ntluGoD5EH36eUXRRnA5PE3PUkUJaZ8uL1ZktSymLwS4sHtglxWshUFbFW/Cp\r\nBrgBGjviW2i1BHiNpknsBELvAvcb0t2vTGk=\r\n=nc7F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/density":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/focus-ring":"14.0.0-canary.cf4292778.0","@material/touch-target":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.cf4292778.0_1647304211029_0.8847645401575568","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/icon-button","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.bbd43e0e0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c7796c4f9a707107d14e6b911ab20f917a4abba","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":40,"integrity":"sha512-YC7fLpTq8AH2RyX4BqQU6IdNp3aKEN4GMhS9P3LBGJJfKLnMS4CA4jzHefSeACMAjMcP7TeAKuyVYzualcBe1A==","signatures":[{"sig":"MEYCIQCXcMJm17Sk5lhUctS7WPSlHVB11ddojwuZhI/HwK+vzwIhAJEmwtMpqP4pioreWgRNM6dEI89LJc603ZL65aYuyX1k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGMA/+LjOzGyTdxgcbv4bBUEnGWHJHi+EqIzCQgTsAmucmknKGnrUJ\r\nA9+AQ/7VgMwum9NBXpmzpDGcXDKeyCZEfegICTB6mWL1IxX3wXlIWRcq1MbX\r\nbyrGArGa1Jz37xUKxy8Oqb94tbk3vCLsKSVTaYEzIKvqJTMGlahQohCE/vJL\r\nHAx/928VQPQn+83yLcmS/lM9LOR96h0LNJ28zVAp9ITvsUJyaoAjjXUpcI8b\r\nLJ6BcKkGsbuLbT+02iLVxBGq+IhgYes+UKANnJEhwLeIA2KRIvnH9xEKX8Hr\r\nMa7yqkB2FkErhuBSMM3N0c29m8OhVwwxCErmbydCsMWf0iSZnJAzCWFHtjYe\r\ntBTdsXTCAdeYh13Khp46QaXnqlMEVgEuOQTxYHf6cWKCjs6UosOq/TkqFe0t\r\nl9JzLScbZp9SedM4N2a/4m/UL17Ds2kevWbtbPLqykP5Qqo+7C8QwRdEogQP\r\nk5VJg5wh3buX1iCo/UV+XS96qNeMFwcoy1xaIKssjMBAuZAXi5HIqzS07Puh\r\nseDDS7Weg2AoHkDiUaqtcdVeaY98F9VPgklV6n+DZlTy3EntnNW0xRqDhrEM\r\n7DuZReZm/yz2H3NKG4/Pjrz0w9rc9dnPLiuWaMyli4TTXD5p/CGHMq5Uzbum\r\n2qNXFOptMbHq0NYDIFJ1XCJkQvmfduSNUm0=\r\n=dmIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/density":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/focus-ring":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.bbd43e0e0.0_1647463838593_0.9173938794653338","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/icon-button","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.1b6afad86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0367a6006d39b163e8cbcc0fc940cd71a6a1ea98","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.1b6afad86.0.tgz","fileCount":40,"integrity":"sha512-PK9ZmC+/W3xVkT2W5ypW6LpUiRen8GLBW3+fR3oVODOAZXc4dKlgYn8sbtf7HJT0tRYhfNcb8O3Hp2m+FfBTDQ==","signatures":[{"sig":"MEQCIC8xmU3VVV6Xva5n3DectMy+3+y1E74NCbywtsbFGbyqAiAG7r2ofLBsw8BD1KcnOemFCla/j5aCc+scdKcMqBhHzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4mxAAlWnz4dEOd6YDW8g+MgSbXcBEPPpKtr46tk1X6PddIKdMW/yj\r\nPtLwjerMb4w1CNl7Li6R28cpgtkdcT9Ue70Nq7wLNE6yX/WcXnm6w/ZbhkWv\r\ns0fC1dS4jcAZCrBVZTjGdxiAmuwFv51zpCR2G6PFD8aB1HI3tfveSiMTRQgu\r\nxyBr8gCF15mLBumPUGIZy1a2ZG69sHBgmuMl+MkVZNEDgB3NizGN4J3R0Rx0\r\nX9Mu8Ul/fG0dQQb/L4aI5S9tinZRieedNekPMjmx0sOYwqSlqmVAi9EJ+TnJ\r\noX9hvr94+dkvXTquJRidgGQSm5/uam3cDTPZsKF3t8Df+s9kS4w7v8p3Q+Ws\r\nZPQw52PpNSJTBmCgYp50qZ2+di4PKZRxbIgdkbOyze9UIlQAc63XkHmh0+Hv\r\n9ThyT1Tuf+Ir8uiUolMLzSL6/Yevlid0KWmj1DQ1PG0MGoTrUf8pV8yBjtKk\r\npHOyb7q0T7aUlnu94kGlu/pXViWL043WBVFqECtTPlnISThvmAyeMRmp/qSL\r\nISjEWZLQzWPpkTAArYWTgChivA4fEOn46btbNLnGnkxf8h5VjW5tX2aWIWYT\r\nRgqXCohNiYMbswQzaE8XvFXKUaG7UiHF1q5MGEiBCM3cNDEttpSWKEMD0OJ4\r\n0/WvRzB2NyVyeafUXKA5bU/WDw42yL0R86o=\r\n=tBrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/density":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/focus-ring":"14.0.0-canary.1b6afad86.0","@material/touch-target":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.1b6afad86.0_1647464650188_0.4296695051206516","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/icon-button","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.bdf9d4af9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e3174a2c65af83b07bffde6034b538f55d9a4cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":40,"integrity":"sha512-eF3m8kq7LQucWTTvDorAmJrlQ2Ng3/RwhXTzZNTZEK88TW/U0dOIi/YByZkF5h38RE1VSpvDO/pzDj/cROa9GA==","signatures":[{"sig":"MEUCIAL894wTZsC041J9he7ysbVZ2qWIcOaebOHDDoYcoNqcAiEAmKYdQj7yiNHNVCJ2jG13hs9XDorvguSVbO603x1Hbe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOsA//StpOmXDHKFB7M6Qi4xNmogibS/DwiDOYYf3l0/CAJz8yJPsp\r\nkFIByrl7yVmMjRM7r4iYYuwXyk4LWieB38/yNRl5q8LBoRLyPI2UxgnHuWDL\r\ndhmhbP732L/7aAUBunB+Kw+iVZgJtpNIapSYmFF5rUD11+LDm2UVdeKZr+cW\r\nmriUqfDfcbPpCxxpd1MF0D9ki73GJGN2ffQ3qiDjzEhFIew7lgFRacO86tCS\r\npP5ymgp9z8FTbzcd8wDjFl3NI2sOCvsm5EXEcBaVtDippClPtHOKUFtIyrRm\r\n+WqYgei1jkHtPh2vDxWS7skTLJbbo8T4z5ecxep9bTDKkP2a+R/boiwPtGcL\r\n5tWCtV75R6RhU1pLDc1eIFANJq7+P/P/nIl2JIvXbVCtJd73nQcIFB+sDFbX\r\nCingL7F/UYv7ho6tw8GYmcynErpGSRfxyOogFzwMXJSVenfzhzrn5q8uJT+V\r\nGUJv8CPkh1rDb8gPBMIg8NMOMe5UZWmP7rzNnn+e3r679+eJjZn7o/vS60JZ\r\nvUyUq+kO+/mfZbaYMIsFOg/KrvFqQM+BQ5vbjnyeDOnEnAfwrt4bGnCZC2oc\r\ndP+w0gipyrWEQOwwfVEXKD/RN8G4XUwFyK2EEbb1dq+4jfEk3tERGhOzC2Wf\r\n3CS9YOc+vAB1Z7Lmq8zGRtU+uGWfO5okR9E=\r\n=+uem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/density":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/focus-ring":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.bdf9d4af9.0_1647465506691_0.35433089588966316","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/icon-button","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.32b391398.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1094dcc2c6d643f4e90613f3d0b0c86788280ba9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.32b391398.0.tgz","fileCount":40,"integrity":"sha512-ZJBq+isYG+MzcJrV6xn03kbPLxwnIcwlvmlaSC/23qqInKvOp4aCHzG8fw90EWvS/qREZezZ0HN/V/SVM4eGdQ==","signatures":[{"sig":"MEUCIQDFO30Uh3duBkqHBF6+b15HzRerk5Nt6CVljUzKWkFmGQIgLLs6rc9Ll1nwFizI2H05AbudeztlRv7CbdZz5SA8I58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWkw//VEVOcB5FC86dCZkVGwRgkTtkAwrsvi3RAOY8W03kTDHzAg/k\r\nbwW/6lgco1KYW0+0SrOIexqCU7eJYG547n3kOjTAJxLZUWwXXbsYfPdb8csT\r\nR7yfOPHqxUJyaQp2v4x+8ovGOPljKld536GUQMehW2VXV+MLRd/BhrN6ZSAj\r\nLrbuVH5+wsRUJOGUzLOHH1kqnjORMVaTb11VXzkoC99sgXfooEmveo91RqS8\r\nfSEy0MSuF6sZouPQmOJ90AEQTqblOnfh8Qc3CArC5oyR2H/CsRHpGD8c+M8d\r\nv6+9tq5wmO5IyJpTbuOQ0UHWBz+qIrstePpkzCh/eHxpirxGjX2+Hp2XzvBV\r\nesYOCWtGZa4WBze7isCS+YdZn1tQyMHlwAt3DjMOWIvmqDTFeJMP3QKT+pZ/\r\n+Ale8gxhJFG/0/qnzzO55mIBFqL84F1CXMKSaYH+GD1ShyijLyg0+8Xs2Npz\r\nSRJsA08+qPjnWP3N0G7dG/fSNWj/F6M7uYQ7x/3fM9WSQ0eppWbsqYezISo7\r\nfodiX3q2HH8AXN3feoCHHPne8wAQGtjws+RfkHYmNZ8PuNf7qpWj5kRBQwxA\r\nc0Jg8tiuvk+YP0oXlXa8/0Dl4lv1C4QfKtGeujm3R5zeeHVV+nTU6byb/OHK\r\nxD90mcCM1fbqFrIoWncANUlnJ2yrv9D+5eU=\r\n=xky6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/density":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/focus-ring":"14.0.0-canary.32b391398.0","@material/touch-target":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.32b391398.0_1647539989723_0.8884695893017933","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/icon-button","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.ae8a6a3a3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e23d7110f821f3497f0f078d93c30babebf3e9b6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":40,"integrity":"sha512-ie5ay7+z9VTNCVaZzs11Abv5GBSSYqt8U/IhKDuAsnB5TdTjk1PvyWvRwENnPK3JTHUfIS7z+hWigShAbkht0g==","signatures":[{"sig":"MEQCIGmiaD8mw7n7uL5BtJWblQ2dCEEfFQJ1T3wDfR49dKsiAiA/zfcEtHJ/mS7lXJ2MJn4jGS2qjfgsZ4QydMAZicgUZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyTA//XEAYCFOeL85Bx1sAyxOteN6obDEm/V5fINCVD4Nuj2F1t1aY\r\nEybHiQgQYuEkQAdb1uZ81fXmXJuxVbcZesrmg4IM+AgwzNsD/cGmyT14zj6F\r\ns7l2+DbkwBJov5nuOqK9aCMLmrKNbxBLYP9WGiJQm2909E+zNQ3eLayqkA1O\r\n2ai8FHrJ4QSU743IRS6qLOVBXs94F8vPx2/lUY0Q5tw669CpEOp1kA/yhaLN\r\nQ1bh43wQ+nVKwGOYW8HtQJeWJwPtbEqwF9zvDmIYjcI3WZC7WmEGaOP4uae0\r\njHzzaIq+MoinbiZEvXKmRnBslBr7G+g0QFCXtUVkZLU2D+kC0dG7SfvGm9OF\r\n9yDZ9Typ37/ViFpGyfw0mSQPKH1/o5p7eDGu+BHRPGnx3vkFalmn5GRL8sly\r\nubbdP/GuxyF7/AhaWP9x4CXhv5cclcufAOEmMBVSxpdCoJTyxDypTJKo3X0R\r\niRwz4hekKXsmh0tzt8jb6Ujn56wwHIatwBEVIdSiqdOT0NuasNh5Hh+KK9Pt\r\nMm3ny0MmhP8c6pZiAqqcGnflX+QgIny9zQ/mVec06qA2/h+YXIW3BWYN5xJa\r\nMU1mf7UnVlGySVW8UiI41vDeuPdB4jAZQDFbpYxRwZC9p/9xx5w4IbRZNaNh\r\nMi6q2HvCviOUFpNOw+KaXCitL+i/OQSFe3o=\r\n=HO+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/density":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/focus-ring":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.ae8a6a3a3.0_1647621588453_0.05806404766836404","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/icon-button","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.cbd9358a6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34066f3fae25000437f6e784f97d67af03c2e4dc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.cbd9358a6.0.tgz","fileCount":40,"integrity":"sha512-ISCZeQFXEOLCN6DgYG5PmRZPtI7mQT6ZXpWwqiQJmbdjxGeR933Rr4wPBF9ntxa3dzr2liXDiZRTdmXHAVyySw==","signatures":[{"sig":"MEUCICNKJEbxhaFdrUhw5Zd3/66qsnXT2ZWAVuk4XFa9hLofAiEA4at78i0wllloZvo1U+cHoWi4igjluN70KmncuUlayzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ02ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0RA/7BARCC9h9OyTxZw+VkgeHHaT3IGUgCBX4XUPUe1pv/1QIHrFa\r\n4fEB4MNb9bdGnY4naVXANb6vF8FwZaH7RQbRvvJ6CwhH+w3jcRju2xtKElYF\r\nGrtxT/3qey0LIimdz+LDefjtswyle/8KY48X7AIz0grd6/YIBrJAUsh/Nf+h\r\njAOOGpSCM3Yqqdim6X2K7Ut4KbaOh/up8kcYk1KnGKs/e4WlcfYVqss8YfKt\r\na1i+qpatEE5mZKMOl1//7xz38arhe/SRz3IVp9jG7NRKRHja0pGZUAxlt553\r\n3pm21YJvfKkMYZkZR7BdQ/VTyXY5XUIXf52V5WPz65ha9r5xc7aICwLS9v/k\r\noC54s4nM8CwU3RBzV48AwIEOcBgvURnC97gl9dNF2ibja1DOHVqfxMghZHJy\r\nGzxfLyWH+vQdstxUpZVIni16J9dNcZJZcwCjVn0yc9f3Gp4E3NpRcybb7uiC\r\nw+0Ms/eQg9sHQ/mTN/n5wLpCBfd+pA/A7DURPwO+VL0Cu/1f4I7QyFppC2Q/\r\nwAv+/9siy+Gj37bMGliAsLBbqz1bw5TYKorFfSDL+9uPhUY8SaU9rtTmJLtS\r\n7/EwTfkFza8ybGnaRMUGoeBSXUXNpaDSuSTnEkYEU00dOzwdEGAjzj6/ikcm\r\nQmH9WeKv/UrNDrUtpfUfQbj3hCEDbU1KDOA=\r\n=gDVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/density":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/focus-ring":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.cbd9358a6.0_1647643957969_0.8397577190379508","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/icon-button","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.dcfe49c98.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adfcd0a31b49ca8f32b22a3c1f7d654410673265","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.dcfe49c98.0.tgz","fileCount":40,"integrity":"sha512-ujmGWmHqdq2DZruBFHsaJVWORITxie1GThT4igyJrwF6cyO3lAcpB+pKqb9bEus6dgBHofVSno9fuo1EG/VUNg==","signatures":[{"sig":"MEUCICSJaE2q0MGUzHbxdpJjuUKacyrumsko+4lFrU0tt0gWAiEAivWZpvx0HbDi3Zmc6W3kdj6DybInOanAW+wqBmnsATE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF4w/9GWtx/4QgCZ7xvO2NXL3kKNBo7SebzSb/TzLdkJXlXBzm+CLe\r\nwv6rsJuCnnxlfcoX6UzenlhYA8VD1UZhsdwZCzGSL+PtDwyPDQuSh56yg86O\r\nsfFd8OTv9tBpwnvyHj7YbUUlFLVushmIlVwckeYHAAVhQHnmlxsDThVZIWKU\r\nlOL4Ao16e41L4/sNIeqkEkeyhDFwi4nz7NuVH6LSvCUTvB+S3//77gZcMTgv\r\nrOYY1Rn8GcCPdv3a44kAUS5M8xN5iVM+lIzJvMfSCEWGkVWNTVDmGnocI9qX\r\nqHYFphlT+oI4PTjFmNziiTyCynf54Id2KkgA42q5wQ73BIZYcf8TcA92gHza\r\nkAZp0V8a2kHy2XRv7TS8nrWsapBD/nM2Hr/ChsBXfYxR1+sFjW2yS2fG5ubx\r\no8z4lhJnb4OJqacujO3uLAjLcGJO8BXXLHOxhsH+9u2rdvtc3UtVCalIaIJb\r\nzwKEoUHgPm1LMSD5DY0rKYQpq3wV4A9yuIFY4bf51c0QX5xzCu1OsRzlJx5v\r\nS4O3qhq3e9gv/HaK29VZgRIqJ6k139AKItr62PPCcW2lzFAZw+u6dQbMTNtG\r\nad50Wj74NeaxMGbTDxN/Mgq/n27IPq9qaoF6sC7SK255JcDfPDkD1X50usaC\r\nhovbibKrZgu+rNmBBUJRAZ1W1/cnCAZrrE0=\r\n=plxO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/density":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/focus-ring":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.dcfe49c98.0_1647888279454_0.5965158481112767","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/icon-button","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.f31a833fa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d0248c2667d893291dc70cb21b6a3f7b0ec938","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.f31a833fa.0.tgz","fileCount":40,"integrity":"sha512-FOOJ86OlPJI0gsu5W3BNAsf5jSg8ststI0R+AGjD+fqeZTGQi6oTN5P4QZTF8vmKzi9bnHktQ1bs47TWOOgRkQ==","signatures":[{"sig":"MEUCIQCKqWNPnrjnY1+JNIslGqOh4XamJKBISAnp0sPUlw4fSQIgFCE8pL5yJ9C5AQM7CKt2EZbQie1ZJH+6fhD0278kUr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Zg/8C+C+QiixJ9qY0UXOcG6s1Vf8Le4PTTFYgkUOb2knRfh3FJad\r\nOPUAzbWAjzOiyV1jJkK5w2L9wzHIE8VcH8VGK6OvSSaxGul0YsdZbq9KzDf9\r\nUnzqYWO91YrPaskpQyI1+lqjYNmQZGdfzuoUDjYNmVqAgE/ruVbpDlAglZ1r\r\nyFwszu5Y0E3LubHEqnF/hwYd9m6HeJ3mnO7DT0UWVE5tmUkXrobOIT/clrAc\r\nBiGqn6LNIOzHOe25bwi/+niJJ5/RFz28yaBUqtKAWVb0e05DpQqB2+Q2DZgb\r\nY8VGoffXS0v/mFLnAK9BUJOGVvvXRMeEg227lYxm+3qaUaTDGMPyhKIehCci\r\nK2kB90WOSPYOH8gypRNki/0XBRHufcoJ1fb9uS7Nw5v8cC3wgV/MdZabxF5Z\r\n6nqHVRkH18p7FsxFc6PTylBZBLnJp9keRS153Fd+bWjxNXL30M9GcsHPyOX7\r\nNkkXEsFh+4uxN7RQiIRdE/A9nOeDhXTeZg7kIantpslXOeyBFsAe+MeQ+bD/\r\ny00G8tO+M8AA9hsEuwoD00QwqOf1zkbXSuNHiovR7aTsRH4iBzxVcAqChbMv\r\nf62P30v4mttpZcVP5bKCkx50PZj0Gqijlxd3I3ylDGDq6lTEhHu90EaQm8ft\r\nTF8eknMUX1oyk81htLhg7/H3xhuJ6gN9r1E=\r\n=KRfr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/density":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"14.0.0-canary.f31a833fa.0","@material/touch-target":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.f31a833fa.0_1647996682239_0.5948064051688253","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/icon-button","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.4b92e210a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47762cb5aa76254d8a2b9f993f513ab690c480b1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.4b92e210a.0.tgz","fileCount":40,"integrity":"sha512-X2dW0t2T+6emUcNgcll5XPK8UltIduIgRnpvudOcR33NMeLJuN5oMXeMLd9yMrN9ZJOe2TuCIA36HfvHCa+U6A==","signatures":[{"sig":"MEUCIEr1JmVhEC+3rXGiG6orQqnM4RdFZUWA/t1HvZ0vFmcWAiEA64yzQkkKoMLAXIjOF+onesVPryBiwnRRWTnR7OnkLuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNI8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroEA/6ApTmTlZyFjzSv8K6E8MBin0Ol9wb0kMD3Ai/tdO6uJTg3XuF\r\nv9zB60FSld4FjlUxM1ovC5EuYLwBh16/gnEQrAbN5g5GF86fHnnPB0JGwind\r\n0IzQ/kLgbHZ+EBjdREJKgV9ylToBjLbKVzP7I/osJedlcbFtu9r/jbMcopRD\r\nUc7FQ7JouoD3HeebIvxKayZ51abQj9I5HfFPbD7Byuck/+qhWbjRtobJGu64\r\nERPjixOhzjUJRdLLps+PrXejteqQQqZ2uvJE0gdk/HGl5zwi+qikb28nPDJ1\r\n+jhQ4gICpcf5r+pk1yeQIXoWsV98OIRra3ZidNn21dKttOiIIMh7+En+k2xE\r\nVQe47N0RkU3fIIyx2kATGbnOI+zw5WR8eop7JiaoN3gUWCFQ7hQLCSQWELQd\r\nNCEqn4C0clEMskNctwxz7WnjU+tZrVK60z1oAKc+j+X5vEKAfC68HMGIBCgQ\r\n3NfKfBfgUCelsf94byYy/n+ByGxNxpdofolq7FoTBYSK+98cXCfsxL+1C4ls\r\nJyBBx6dehwZX9h/Fylcp2R/Ig4HpSwwfsmjq3YfB1DKwFRTDjhXa3wB5RTr1\r\nHnxn59ip/+UaUtapiRGtx0OnoCwfMtiPuASICUdKS8YZ60QTvOWN+66LlEWU\r\n6YKMMEnTZhRgMr9n6Cba9RiNu1gFilgKhWk=\r\n=doPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/density":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"14.0.0-canary.4b92e210a.0","@material/touch-target":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.4b92e210a.0_1648153148645_0.9831726097588191","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/icon-button","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.a657abb61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f839b2c6490cf942bede3338d781589e2f97ee99","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.a657abb61.0.tgz","fileCount":40,"integrity":"sha512-Nyqpny1iZfqdKPAz3myOOwdZ2zFYAbK/jwisATcd5TJ3lLsUQN144KR5vv8fBEHtRdw+TTV1NMJvzeBZg5ttQQ==","signatures":[{"sig":"MEYCIQD3rI4PHZncphwf/c8wsu11Ww7Gf1It8xMW1+Y8K2X5sQIhAOL1txn3jNUdZQAzC1O5Yrc0F4M186LLD3dNCrgdw/Yj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNc+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqSg//WxY3+r49HY6pcFhQXfVvse7vvGS0gLJnmVzxMr7LWp7yV/aJ\r\nJTjPSGJ267uP2qEzyIACCtADhIuBskQkCoHy+l3krbOzMqb8tzGCDtN5aeBR\r\nB57hOanT/Yt+kb+zXHVdMpPb53N3Xb0PVVmgfuiX4XZe3pznZoe5/YFAD6ON\r\n/THwI7Swm795fWgALkjKojH8EUhbROwzmzY9TpweNsvAnlMrVYXUtSzPue0E\r\nj2idlcmPHg+NsbOAU7M75vt4HsN7/9RthaG4UOFEm9dY60RD+LUXKBtdV6LW\r\n37nQqLlLIZ+LuMk7j7fCx7YT/bnbPQ4g3dAQ5ysgorxmywpIUm1xN3Ghlmdm\r\n4LpenVxLnOF6olcSct7PRMbRYRXocw19Pv0RecMMba73gKOzYBJozqcwfVsr\r\nUkaDbAzImgi2pY72Qfjn+J97QJHI6VokB1MMgWNR8r7AJOHvWwoLR7IH+ZuT\r\nSeHgIxQwIJH+oH50ruNPiKT2KQ6pklCvHbWgomWviMyKVrqpiTHO+cx+pJBY\r\nWAsOA0Hk+fB5wPSIMvJLyrDMXAnA0bSrBSb+Z04rvjv61PlmXP8EqwiD7olP\r\n+UE3XeUdMHIpH2N5bu8bQj8LPyIZxGOwDtDShbMi9OyWmdZ/iVy83pYbYd3N\r\nFoPuMjswqvOnmNNZb5cao6InbaVYa+vH1CA=\r\n=IJFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/density":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"14.0.0-canary.a657abb61.0","@material/touch-target":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.a657abb61.0_1648154430258_0.9675804354750706","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/icon-button","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.443f63f50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bbafa37979231f791502c74006324292d3a3f63","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.443f63f50.0.tgz","fileCount":40,"integrity":"sha512-95zdeb4DfTMbTxXfeOrZotCc/B71f5fvg86CGWhYjKWqOnKqYqzCtJvDW1LxG2cOom4HDPKEABIc1WuAmouCSg==","signatures":[{"sig":"MEUCIEyxD+bPsD4jOMjX4PlQ8Dhxfl6oVdxre9q6967412dGAiEA9whONsBb+s026O3Ae0n+428uBupkWzxFycATwbaFNs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWyA/+K/0Wkhd1uger9BLeSmx+9ULbT4ZF+3jMSKrhiE5aG5UEx8Fp\r\norac8AqiByhlp/0a2wppwu6wUMAsRYYnfk8/bqZ7C6PnQdUWHPCXSqEMjCsh\r\n6YoLlE0YKcWgLT49Zb0YSJGLybuElg3zap7GiqEm4mZHEkeq4maPnJCTLViG\r\nRJzbXC9CK6Nd0TuoocghmmxDidtcT862ogWfFudKEG7H2YlJfvwoivnXy3Cz\r\nMwMJUI4voahE8tY+tJEYg+HSeFI55wIGP1spaxbjEXlEEQrciz76FFsbIyxN\r\ncBCpFhwrEZaVMqTz7+7VjJ80wbGkE721utCZ8/+XzeHO6LapSyYjJaVfrOlD\r\nz48xzRT+8PXG+aHtPiXRL8iRNGODqHLHf+JDl3EI/GkOW9yQzjYL1sUPMriR\r\nX3losvTg0oMuhkfv2TRX7Sx6L+vSpbrX5UcWqUoaLL9uUJiAtw3GduF/YfpE\r\nmUgBLa91VraioyhNsKcRUPp5uGDx7imHnk+4Y7lH0aaWLsuxITUIuSeM8k9y\r\nuTz+coNacY9/Ph2PsDIWNfzY7rxcdS/NatNO1oF2/A7zR5WvHs1p3fvqx1TA\r\nO2Zd5kLB394hCdrYceMEnFT+sWv3dcfc6WSAJlixbw2YRYKPfICoUILb47iG\r\ns8kZCH4QB/NLwdbS2Cc9WBouGe/e9ti7tR0=\r\n=v2Qo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/density":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"14.0.0-canary.443f63f50.0","@material/touch-target":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.443f63f50.0_1648249510440_0.9915898781534178","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/icon-button","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.eb382f318.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc8de6251c56f25cec3177be71af1d5f319b4797","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.eb382f318.0.tgz","fileCount":40,"integrity":"sha512-eVJiJALVGcLRcc/KwafVmSiBZaX8pXEBuZjrNvd4CT00KVMR1Vbmjk9ECa4Q78Y5d3eN1qYQO15frneE8ahd0g==","signatures":[{"sig":"MEUCIQDGVghdzCekBjbL9ycXFRNoJAD9cTlKwdKgVZXYQLuYPAIgRU7RlojtVi62+e/tUfqmbKUqHqRb//tTN4XzH48bQEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKPg/8CXAMMO+zLNYobMovfegXhcHQXW3iGy645MGFii+7xAhhp8T2\r\nteY95gLMRGlb1prtoACKsHt/a7dXfBvY3oGPG/pNDAilBmRaCryPkJPZcbcl\r\nhHDaSAEoMmb60qTkN2y2NXdyDfaEh+6mjU2j2Hoyqi0SDnIVJPUw9HuD6Pm/\r\nS6FMNSGcZfXBl9rqueojkfvMadDje83Am7d88SronF3pspAAbKuH8hbDVMPC\r\n8FGW5f8A1Azd+WtHpqTf89dj+1I1pogtEd4sQfEnePPTw6u1NQgiWDxgDQpE\r\nb17fVFBmeCOSJNxv1ppdNQCrbwu6upRzfodFSBlCd9DV0xHgcyQ/QV/meNIa\r\nSRtHNz7DzTsLFGA6PDXn2/eRRbvPgHGHuPJXqQRgzEGBHcf7DOb+KPks+ivn\r\nQNDXMlJTwfv9utsdC0nJc1wPPdTTiNnvdFzM8dGNQ0wMhrJE0uOhO5aMkjsC\r\naMg0I4nywFm0SqRjS1060ENlpKK53si03NSi1weYabbl/YXoQZ0M8ZVIyL8D\r\nO3s1u+BmilLG1NguJyF0uJf8a1czxx2AguroHOY99rZ1GKlEpRq8N3Sy8rp6\r\nYRg/LngXkt0uo6zByeg8q+gQ4bq+N5tUg/Qn+s/UNMK1i6MOZqSndHhOMF27\r\n0Eb6vd77TFRcYbFqEJnbXucugWVbKV/3GQo=\r\n=/H5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/density":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"14.0.0-canary.eb382f318.0","@material/touch-target":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.eb382f318.0_1648575331897_0.18755596750790815","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/icon-button","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.344d52823.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"542062fede835577fcd46ab8dc7281466cc57e4c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.344d52823.0.tgz","fileCount":40,"integrity":"sha512-ElO3eq/DOpJcNflhfqXqqvRDVg75iyt1AVSLHaWOYyc2NPE324Ii+FDCq/uPrleQQqf/2SMEZPH2RnhZVELtRQ==","signatures":[{"sig":"MEUCIQDWVL8pajBD6ISRi3zfCTLzZDp0StwwHywHINzJrlvJCwIgIj6EeBfqsWowfoWXixDbPTI6PJBbU2ne8DidsAjwEzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOiA/+PCqdJZiVu8ctoExIGZq4gEGvsXZLdyeV1jOP8ZPSuZ+dxxU2\r\niUaZ6pPTLjv9jlXGhL+Nu7kjFIc0CNA9zMn2oDB1ThEQDSLMvHicbmVbOA41\r\n4Mqbd8i0CfBh4FdUREtZM3Sa/bqADjfuUijM6ZNSLE30w9c3yrWa83vYc3x+\r\n6POxhbG66f+4Rirkw98QK8Ga9NxCPYG/lL8FW427jcveO9WRtxlq3WUFadNv\r\nCQV/yYHk/SVlL1IUEA6me6xhb3tvT6UoPPPLoM4KSak8Ksea6ysvFkkQ8Ts5\r\n9iCewt0SoSGSNUr8ahjpzNIqdc22xuuSV2i/xuOk4Ot4rruOR4Mad4pXOaMi\r\nuAIjFAbCw2a5WijKVxU1ZGPwLXCZP4QA8qyGep729+X3HsAzYJ67OZkb2Zmj\r\nNjOgIZZ+tMCRbQw0cOV/fHQA1anAfeX/cI+c4luC/Ch67j85VuhMT/f82GpJ\r\n59EQeEWmV6eAo/iHB+Cba/AUxo7kETcvnIJKn66w61KPeykji4NXg7693DEi\r\nKNwhYU0N95WdIUEDd0B5toLVjZDj/JYRuUiasdVN2I6DyFVVY3fcllFZhrdE\r\n34q72dRjfEtuxCoD71lgQsRU1KNAps2HDxYJeC5X/zfl37DI2/wQb6vvahbL\r\nm9mzotL3kAGe1jzwGoN3kiCSfBVE01DX28o=\r\n=bAzg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/density":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/focus-ring":"14.0.0-canary.344d52823.0","@material/touch-target":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.344d52823.0_1648579431609_0.8475716546510732","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/icon-button","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.4e372fb49.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf780e0b6cd771c42b3166f2c64581e9e41302c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.4e372fb49.0.tgz","fileCount":40,"integrity":"sha512-dyQzDJC/QCe286UGZ/zslRuhu6awYJR/MVZWw1R6xzS1oqM5Q1wCI9hUf9Is121FiEpFHmR+aGU8VfIPJFhUYA==","signatures":[{"sig":"MEUCIQCE00YSemZA3sYjGT7oJEHrzdWfPXr450PiOZilY2CJlwIgODpUGpdCRqOhoMGj9hzOIhB0xbgj44GoPuZWpIfxv0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4nA//YbiteigL4tC3KlJr9WU+mUkZUpfNF2u6iBpxzimoUlD05uhL\r\nEOu8UUslNuM7PQtXJVze7t8js5w/6m6zJtR9mJapb7tkKJ+a7Ev+fN239EJX\r\nEFN86S65xw5Y0l1XnFgHvqGX4Dm/aZ3qpuUqDyfnQrco2eU2kZWIyvSnFG8V\r\nniJ7+bQ028EOdvXUT15RWGLH9HcAlt8CVwAiN3wLZvyIzVNpnN42KGYWJ2H6\r\nbCKX1avQ6x8z0RISzGbpS98TgtFRAzwgE50wIYg58S48O5bWB0D/45lpTodr\r\nDr743yf8PO3h9+LSt1Pn3S7uYtYRPyguyTqxDrCrfQq2J9s+3LH+W05RntC6\r\nOnGlUaYFPBAuzAhEiht0tRMxBhE72H5qRc5OWdcoqyq7AB/gn8ChSF5lHMCh\r\nkoSNSDpGaUuj2uIrGTXjgLuL69Ka9MlchGc8bMZ6xwFrI51eAFWbwZbLfqXR\r\nxM7TjOU31hYmbBhX+i+SdVrOg6i5puHIOzX+nnwlShnHwqbtKNFa7l7nrVYN\r\nEKXYEI6T/w6YfcCBKCmP5j9reH2Hq3qUq70raR4RvNljtm1MGgdEdMfeY6mO\r\n9fSAo9dkdtsyA3E0P2geT+kiHFwifkAqJ7Su5KGzZ+vmcLKgGMEAkEIr4QDN\r\neAdtetoPRZYnouiJlpxJxZtBylkhmH+tO3Y=\r\n=C0sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/density":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"14.0.0-canary.4e372fb49.0","@material/touch-target":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.4e372fb49.0_1649363611705_0.3973961893853135","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/icon-button","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3e30054fb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52df3c275d81cad19d33790195707f75329dd21b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3e30054fb.0.tgz","fileCount":40,"integrity":"sha512-/1IDf0bLzzTlGDPaMFuR54V3ey1qx1IQjuluBOtyFImnaX8p80uNCNxxejlNCB6/4f2M79qHLrOwPhh06XURlA==","signatures":[{"sig":"MEUCIQCl0vhKBUwHGPEu1JSlF3DJISoPJzuM0Ku2tBFID9PIOgIgMT1nxhGCcWtAjqGwTFMVyznrV9MGCBlc8YJ2/1Tmedw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0taACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrQhAAjjmHX4xu6Plss2pmevAuti0KxT2oj6Z2CEs2TN7RvZwDBSLj\r\nRJ8FYyLfbQ6l/poUXZCykjIf9HnuMF3D4tKOR/cVWDESgfwVqW4mV15I8Isu\r\nxro5ugAKMc+dB/RO7PTxAgsUltvtCUzE7NSX7wi+l8lizxFBDhItsljyiZQg\r\nR1rs1e8K0QpL2v2Sg7WL7CuYNWNT2qf9QDI3DJSnpt+Tyqud+FBcc7vylxsO\r\ndEaedE2+XXcsPh9/u1t8ld/Two43RlZtj254jF2VfKXtqzlR5CVx8tJKaViL\r\nb9KJciYxjSNRROx6Hrc37SV7nf2LAAhdJsa3LzuoyjLzd0fAgVm4ZhIvn2zL\r\nHA1EW6Q77VAyDBm2BSd/KrezbusUjjLnZcvYP8g9aWa06ohRT3xBt7mTljo9\r\nOrb86mIbC+i9tjU3SUne6e9jWHyVUQuG9yH1Eiox3Bwn1l7a5a1yl5NkIOM5\r\nVK+JuYBtKSOstnBWoMvCo4BtnffFe5ZYLMN/dpohU3HoSUxdZuKUEkgrapkI\r\nVrT5xQfRdaWe+eVvBNHrJi6r1P7/ONg7uhUmjQt1ksn+QwNGAUVZzreeI5Yc\r\nmMfHXIoLtpn8PmWxLJIE0FdEwrG4OssNIy7GO6iHOe5NFOUn+jWz7sEiCLgd\r\niY96IJsoC8j/WJsOishC74EpTlRZnjZZ4lo=\r\n=iKYW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/density":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"14.0.0-canary.3e30054fb.0","@material/touch-target":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3e30054fb.0_1649888090689_0.9782195478008373","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/icon-button","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.8c4da223a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66dc5c81e81b3ec9896269017fb57dc2e7e2e8e4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.8c4da223a.0.tgz","fileCount":40,"integrity":"sha512-30L8eunWmObX0dTAK2B1oO+qQX/SZNZN+FkhiT4a6so95KTztEEU8BWGp8wN4FMuaWhsNT+yi+vprgtcqEkX/w==","signatures":[{"sig":"MEUCIQCk1aUuJcD7K6YAvNmBwdTxOoYSlV4YAuMt6XmEWrD6sAIgStScza7D4GhStZYkoX9AfvbkTQAL3X3D1/Kcks2aK0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP8Q/9GB40Xk6bwZUPLKsEDbkdxpkQ0dHJWuLR+0zXnAQtOsr3/oYv\r\nUKScC+78bHJ8LCu09N5zwmwtwgNM02aUwjlsJVHT/D07TxVd/KV5maukAtCw\r\nC/epz7TF3nlqjev7mSpWMYzWWZcGqY2mVg3+Du3rGgWoUrZo2sSE50Oi7Iio\r\nrKvVyDbEDQdY7/6GVDOgeoE2fTUtH2xtlWEUyNGwzxuo9CjZ2SUzgZV3SEHP\r\nePk2/g/1LOzjA5Yi/GDNj6dfoWIdh1o0zeJjwbrB/f9xredDNI3YWopuiUy3\r\nRZQbRwAXBUZCYYkghFjY2pIRWJNBm//o5iDame7TTbGZPczuODYDzrsjFYCu\r\nFrRmnyIj7Wv/7GhAoAIxIw9CSa5Hdu2MDzjgCPUKzo4NG35cHFCCkoBJDVwa\r\nAwHkzh9xmIr/Cc3K9IbTmunI4B+mO6txxLsyRWnlqS7bu5ZvXSqfwDcNj4ir\r\nq/aYDyc+hD6YT/taR7K6GEzkMGc7TvF93QGGjO8H7rHIcqqwrMV1iUlfoN3k\r\nmBB1ZNAOFtQRU+qZiiwgEeIA7B/mdCktb1h/8echPUsKaGLYTKWvBTwiTkCG\r\n6k5tBB+05Qnv4hmPJTA7qRk7LI5HDUZOOsTG4SMvRqxdP4niJe8GduamuLpQ\r\nR0d3M251OrPPbDlbvr53ET3zPsxpBh4mpCA=\r\n=2JFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/density":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"14.0.0-canary.8c4da223a.0","@material/touch-target":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.8c4da223a.0_1650381887986_0.2677453146853843","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/icon-button","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.7de8965cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15944b68528a8a2f0fe3b044ab6f1d03817dd811","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.7de8965cc.0.tgz","fileCount":40,"integrity":"sha512-E1UXdfMihuo0q/3YaqjTZEosCapu+GcAz2plRy5Dqxqz/7vjO7rQ/ZuG9jmxOvZ3yKlwoa+tn1+ZPQ9ViX9g2w==","signatures":[{"sig":"MEUCIQDiR9v4mG5xlGdHc3zLYv5O8WobDrnF+FxkuPQ1Mo3r6AIgbVjE0yogi8Nd6uV5/9qccejz0Hoenb9ujjR6TjEQipc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJNQ//QxRphGAukixYy3iHejiiZd4RVj/dep+d8oyg7xwbnE9cqyJY\r\n93rV+R3xk+Tbbv/7HzZi5/lBfjLQjofEtM2iV7ZvT0o++jlRoxa6fZYAavoM\r\nZteCGPN0orvkIzZB+5jGZty8nL6uyJ0V7wOf2lxvDbXgexw5l26MhOv3SQ18\r\nWNorIkWTJKUSES0nN9Twewcv7v/JuGyp+JWA1S/s2+gdqVVdcyHlDu/v1TaR\r\n9ZcLRh0FxlJ7BGBPFYLlaJul5bxagDN/Bmd8VrhBYr+JodONsoubjR5mueUz\r\nyjoXSiaQhEjDyjIScMlmjfABil+QHfSwCKXO6Ou60FWApdtZ9LvURkpuqF0a\r\nI4SajeXZS1WKKSrLFETl+Qt+ldDw6GvDC3QdrZQAyIEBQXQWvKGZ7zTg6taA\r\nqjWrjxQ0ofp4697aCKFDBwKKEleuexDO5JvTgnpttj6MfP04VocnwIOsDfTj\r\nlsi8zq8YHsUbgGM/yQF7NCUDBjPtwbaOuF2S9mg31ZNlylvunf+drDpJFRo+\r\ntLFa2Fq10bOVsWa2qJ3GbMLXX9UB/UnCZPcsoWOjSIy5lQkbbL8cKDS45Ngy\r\n95vJtu78PX0v6QtXf6czV+VGrWT6CF5rGsFYuOH8V+0KDGENGx6VBvmms84d\r\nhLJ/jAx0QnSrgPrIPiPMdPQ2aNgZpa12x0w=\r\n=ljbX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/density":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"14.0.0-canary.7de8965cc.0","@material/touch-target":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.7de8965cc.0_1650399838684_0.355239407907616","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/icon-button","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.641ed0851.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"283fcc49b03b7948c328e0c6b27e728f953906eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.641ed0851.0.tgz","fileCount":40,"integrity":"sha512-aI+iD7zF61JrZoHN8+K7L/VMlj7CqqP+O46f69oIjnNIALn7VoDoS4bA+Zf2jKcgk7Twsg2RZO1f6zhskA5J0Q==","signatures":[{"sig":"MEUCIQCprTYYHk7wNcjIbHJqMNWhCAwi5+sX47uD0eQjsQw5YQIgDPkYXB7OvfOzPBr9XBwaiPSv69Zdq9QIi54CMddGcNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUCQ//TxWaLH7fzRdRWSomd/IP1eR0RkGuI8ePbhdf632X/dLULYnf\r\n3QoDuKAytvxgLvsF/4FO5dyh3bc0PSdU4JNwIN1t2yJbdsvnLyDESuAfixF3\r\n31wAYTi1vJYeRnxUWiIJHM3X2Q3VAvADWZWxEukUNcx6B4rpkz6RmnXfulAR\r\n1r8wE/MZOlEGHgxQ70RgwlXNK22BT6+MUSBQMkiSwMUeb4EfmgTz7bc7jrSy\r\nAILvkfIh9U12Ky+F+Xb/tzrNJi2lehedw1lkzehctas25uTAkuM5t/L/b8++\r\nkVMngKLIkIeNDKXbixdp78e0vLvb8LcnSwlQpygU38fhaGlHye02OGB/5A98\r\nm64Qt74VPSFkXWRi3+/ACRogS1pA6AlQrZYKAd6uPGdkR/aTAeUY7rkAa7dT\r\nIKb5Qe08ehMncndKeyDEEp+yOmhuUl1UqaiCEw5K/TZYwJ4K5/xawA46tPat\r\nwsIWHxmWA/s15qKzwOHZReOd8rNSNRXt6was/FVpJZb8biUsPjd7tGCLBh2H\r\nkr4Luw5INnI1SDgW8V7k+aCoepu7mwxhLDjMM1bLZ5C95XG/VI8g9mgswdVa\r\n2VZ5cdOR7SUZXE473zcTzjUO6NGEWbMO50dO/74zm9v07ezumvoK71V8xETC\r\nRo8D844Jr3DUTZXPQGBvNzuPGG3h9/DHN3I=\r\n=WTAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/density":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"14.0.0-canary.641ed0851.0","@material/touch-target":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.641ed0851.0_1650470778966_0.3302405295330415","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/icon-button","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.e88f83024.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"697d012c0196688211e28de27d8b6b305ca1b28d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.e88f83024.0.tgz","fileCount":40,"integrity":"sha512-3Ga34nSBL/IWEOsJ/gfctsBGa0RwnLdF/zvNnWy4UT8EmjGX5UJ1SJvaTHxgrwslOy2FgUPIFNm7cBArXNdZ/g==","signatures":[{"sig":"MEUCIQD9OPlsYfuJOK5rtc4gjqLzk+FQAFx1sAWSo31siR8r0QIgWfVCy6US0ZbGu/z4KRamYYGV3o7vKRl71wB5pJaUSBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBeA//ZO/fojU2b5GmnXPntWpDEt9+ereNwdp3UPvTxkWxfK/wzSCb\r\nnFvLQPzBZYEZ6gepMPoAOkI+SbYvblFyZ1RfErSFitbQz5mYDa8MS3GXiQBP\r\nxHigWiB8kAHHMsHq5KjaHzUCtmVdsnzdUCDnyURd/jxlBN8r1Sh3HV+HER+D\r\nq5+Wx8FNET6rrWyeWdLc/mlLHAldoqihe1Syj1NNTSTUST5tErso+COlRK3U\r\nE0GNrTJBSIzaW+rzztNwPkv/EmCItMB4YQ+av2gxOlAkJbqnwglVBEmYNnDK\r\n0I5RbybwxlnkqFJtDKgCYdvvFvwCOzctJSX9M4c1E4CzgBXQqnV9RKGwFU4o\r\nj4lshnYX4t3upb7e/vkSMTrohIwawYk70pDnFPUkXALhgIkxkDzSR0dc1e2E\r\ntQ6RJaajtx1WxFFqv+1YOuGY4h/iXSDIuO8NbCzl3z3OOGIgOAxmsC0m74Ob\r\nXg3hLuOLhJdHlJY2SooeBrp22LuHhlv80B7y/32VZpMlnJqb3JAFI65J6Bgn\r\nP3GUY6LUpIdvn85pfnJrkUMhuS3/+dUvd5UgyvlEcshCkp4yCxSzs3hjjqYb\r\nK2b20PCfN0hoM08htGo18ej13tA84qsaDR4b/9WS+/giQ5uE1FGdOnCjlDDi\r\nxt+y38YqTfTnuwIDMK9qUM4zf+W9nj1kIWc=\r\n=skKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/density":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"14.0.0-canary.e88f83024.0","@material/touch-target":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.e88f83024.0_1650476897953_0.8508340176229816","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/icon-button","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.7321d6254.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6b43c80f54bfb9db5f0a8bceeede65a54942991","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.7321d6254.0.tgz","fileCount":40,"integrity":"sha512-nr2wZv4Rti8bb6cbbHjXmzIxWLJhZ9htpnBnLwFQKow/jbfPi4lc1Lb1yTQT2B/WdGHdScQMcPH6y0bQvuvE8Q==","signatures":[{"sig":"MEQCIAKh9dw+wXGK3E2xadhYchbpMBvHPCnnhl7c0bwpRLR6AiA64/LPWAbC53XNf4l58HJNe7DLvOgyumDaRknukeDXaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot3g/7BIfWpqXn/z77EreGhlVpz1Lgp25SIAmaKPoRcmxatY29xBex\r\nkWDBIqCqeb+aMwoULNMN4jgDPoCX2FvW+uTIABjQyVkSajWO6SpdQEO4pMEl\r\n9JjtYoUDe3aGDr/t7GkOYVbE2NZXNFgBZLYoJ9A7ZXt68ZbgCye/9a+1odsX\r\nnpRs+1TIHpSrlvNI6db/Fv7oS/qA9tMlEoCBwgAfE1iwLfOOzMv5TLPgVhaG\r\nXTvuL1g1ueuJ1gbSeUV3InoMFC+BcrsycUzP0wZGw9bxJBHCCTvL5Lv75Zub\r\nZ/LhUEdo6+EBwMWqDu1j2eORNhHuhJwjfl7sWafBdRB1OKFXZN9cj+2aONvZ\r\nscq6PKB0ClPlGD6laGQ6KO2KE+2SHQzSWwSEq3z4a5/Xv53BXH1kbTBm7K8d\r\n3uxr1w9xXJWJJptIcEXaUBlVaYmg6tF5LYr4FOx7wk+U4/3s3UqsJne8sGlv\r\nc+99k7c5ZI3o3eWODcyOTOFsTtwHjjm2X1lHD+sJs060FzNczlzSn5Qczx2A\r\n173eEaf+Wm2/sAwP2W63b/2c4cEHU1gCRtmpsjDOfdHRO/G8UqzylxN+mvTp\r\nBybzzOCirh5DpSEtQp7QH4O/pYvuZK8RNm3pa9Wz/gOzMnBP9p/Gk1ZPtCrn\r\nfA68N+azxjXURzKv8IVFhQyJcOQrfW60Ndg=\r\n=uoER\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/density":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"14.0.0-canary.7321d6254.0","@material/touch-target":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.7321d6254.0_1650485514887_0.3981869733947818","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/icon-button","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.3ab956515.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16ff9906ef0e3e8bde6d94a71bf2f87fd596f582","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.3ab956515.0.tgz","fileCount":40,"integrity":"sha512-+5RGvfpo6nPoWVKbH790gTWx/aXk+7zcPJPEPYiYhh2EMFYAdDWhYJdvr/miHpLsijzatk2an+FleIzHORtkcw==","signatures":[{"sig":"MEQCIHLBmQPQ5L96eNHKn5KpqCzqNai89bLr9DF41GLWSl+nAiAt2BDD404pPGGg+Fp2KI1MzaYCuTp8UV1UfGYwzkt2OQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjDw/9GbLELq8JwmezbomhbdruuodS85gMQuo+heiDcnUOMoZIL1h6\r\nhIwz26vSjp87qlzLbipznY0kNtDQYQkjTEgzPuw8rxcBo7WQxswaCNLk0e8i\r\n7rQFojxGgA+LN6hPbqHhe9MkFvIFXD5G8WZFRjwo56BuHcQ2QBw4bkLx4KfM\r\nbbK3MPlwkbSB7Qm4zNivEPqfJ+QEPuVw3A6sGGBah2vLG6lvSSIsTYThr+GM\r\nOmbyxHrLTg9AASea/3FdFSaO9SbYAg6qeQfrIedQ30q+TEBrBJ4A+Vw0dRmX\r\nodbn0n1Wd3qd2JyZ5falbnJSgh7hK4IE0g/p6DwifjZhz3H+GlOMc5PrWBtQ\r\nnhzgkurW9NZDUyVYoYvrOFxea4KD0eUxU9OmiXF6qTKAjjP1E2dKTVxO+Qfg\r\np66/NCQVQxfybCKRXzc66x5HbdhkPQsPSZAk32J1KqP+wD1nA6e0c85RUtIX\r\nIHbTY8CnjQ2cBhO6tiX5XCGR9oRzDVaybWh+qC2m6Iw+9T+8pA73OLYOeIEo\r\nQfINYSZDENF/0VU8gllDo5PQddCNg4GyFDAVrpCARIhHgPdrkhivVd5q4V+W\r\n/CVM7Nf/Uqf/eIHyhP/wydVS53Bm7iFN0qSkdFvYv671ZIourEXw+zJggDfq\r\nHEGXM/X7X/TOtXZZVugszxrKmeMgtvE2hXs=\r\n=rDBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/density":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"14.0.0-canary.3ab956515.0","@material/touch-target":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.3ab956515.0_1650898950157_0.7285208330425474","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/icon-button","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0-canary.53b3cad2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"396e91458530676da8e320cea7b1e15cfa65715e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0-canary.53b3cad2f.0.tgz","fileCount":40,"integrity":"sha512-BFdj3CP0JXHC/F2bDmpmzWhum4fkzIDgCCavvnpE/KcCbr0AaoSULRde+LtqvbdLIYW20cXhvjinIOlRhSOshA==","signatures":[{"sig":"MEYCIQDaXxlMX16373Urxv1J3If6s6BX4JtUBOUTpVZVZDVdrQIhAM9BFFTUNgaulW+IJfwN9kbN8VAuooqA0jMZlItJoqA+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRjQ/+O8FzrtO+38tv6uBa55UswA6/PUPY7SdtMLaX+oRdl7Z31g/N\r\nKrFWpQnLCO6HzeaGIAnkH0QCp6PdduDWItyBmD6Nka9/9Pbc1UusWa0HOaYA\r\niaxMgNjRb+mDfsR3uL9zi1lCXSYP3oYgLajJzuS99PHuj6yf8HRIMHWAt5tm\r\nNkTeFJcSqoILD36cvmfoiO0U8TAfdWxBIvqP01MkIfnHIw0fMTPZxB2Iuz23\r\n0IH+N76iu/uz69bkaFOChHMnfUoIAuKCwDl9oZzq98llvSVJ9JVcA6AiCrLs\r\ndm+bGl4+0yed3LGmXhrnJL/pyecWjOtdqyrJ+LT4Oh/MWjuX8ZQW8qzbSbom\r\nNM4GCc1raRlqdp9oYkR9EFqBUsq10N29GiB8SxkyjjDzk/D4l25wZ2dkdmsU\r\nKH9bSfgkFiMNAMewVB/QT/JH7T42bnY6kohCWtxJUUTVC16JgyWhz8ptWYTf\r\nSsZqD7WhnZAbIT6ZZ+4m3zboHTTHR2Pksp22b6sA7Y/7kPubSb31KHoMS7If\r\niaEzIbg/4uXGJauADjlxD6hmwrkjO4VK+Pig8TkdP1+GiHksa4iRDoUZzITF\r\nziSUBGCnQjGsmCtTJxCiC2I1ijFcD720Re0dxr00IsD+2F/VSSbacvvOfEdA\r\nZBQqJOVZMHMXbOXTEolmKs8egj8cUVfRruA=\r\n=gxoy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/density":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0-canary.53b3cad2f.0_1651063558577_0.8063342832683553","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/icon-button","version":"14.0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@14.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdfc7e7b967abe81d537fd7db916c9113c3a09b7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0.tgz","fileCount":39,"integrity":"sha512-wHMqzm7Q/UwbWLoWv32Li1r2iVYxadIrwTNxT0+p+7NdfI3lEwMN3NoB0CvoJnHTljjXDzce0KJ3nZloa0P0gA==","signatures":[{"sig":"MEYCIQDpJabn/UDA5pF48tjG37yRo9obS8iGCF9OXdv1encORAIhAI5p6/7Nmb1cNco2jlb8KDOfEmlWu0tzio+5qi1uUqm0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqdg//TPjGa2dGDaUiFOQA/L6K6XuFblxXg2MJUjcHMk2Z80shBPTW\r\nzlh7dhQMcKsVt+MCdvfSeoI0LegcMURlwGVcCdKp5jmhtn8QhcfRxXquav5r\r\ncrE09p+lANMeW26ETK6ykAHjuXPw33kIQULGtThQQ4QU3KKOWNUHabeomj41\r\nIhTUvxZVYEcX+0Q42Ws/NSQ1/uU/NRWvf5TjfQTrKSFgQuBSVk0C8LV1El8q\r\nB/xgWWJm1iyBoeoMkPOSm0eVn+nDEF/Ot6gdv+8GutcRjZ+uSI778QbxZ5Zc\r\nIJnLpdSPrtf9n/V0z5SFhSZ0NTlF6O8p1l8trBvu1ZO8uomdkOZhTEO+03kP\r\n9ucnrQdAiIDgtpPg9G302hMmlVQhGgs86YH9wGgPECdlWBZa3xItbkyMupT1\r\ngJsN0ldfhiALIDIq3G3it35t7hfYG7v44zNxYT5O+bTNTz4y75SSEPxWy1CM\r\nkz9dH/A+6V9h48WkHi/EQj8yflJRtVXgqsxmDkbSVNbhGKAtAjsT5DjYkLJa\r\njNXlaTjtRPfGt3k5Sc6hjunoxoa2PDCkO0ItvuOZ9HFv3/Qtu1HEhDWj7ozX\r\nqNVP9tITpYYbf/mEJSD3Wbsx24JAQ+hYbCJTbIeZS4+cgkIDmPK4mmelrCLH\r\nLKcARWvz3iOmy1MTacFlPv1cunhrj1GFTms=\r\n=ydYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/density":"^14.0.0","@material/elevation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icon-button_14.0.0_1651164993996_0.9292550261632571","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/icon-button","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.432c815e5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d00ae10526c5cfc8a0c2a87b4594c041f0a21b5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.432c815e5.0.tgz","fileCount":40,"integrity":"sha512-TquzWSphU7sf530LhwtFYMow40wFz374D59cYeP3P7sIaJkZkGFx+sdovZTXSDLc7DpJp2outglU3mablNIJSQ==","signatures":[{"sig":"MEYCIQCWrMONX7hHEB+j8hpYOWADzNLGrSkvxOipPf+sEi7ozgIhAOCve0he6NeErTHwKqEyPoealJHBFd8l2L5tE4lm3SHn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":429023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgeQ//Wm+0teItlY0thR4rL0ffuU6CLISR8zAgdhgdfF3q/VYzjZyp\r\nx/ini9D64icbb9gYQ88+1XBj/c9BnZhNltmWFxj83HaZKigAOfndjyrp5ZWb\r\naQp9+dAvR3/7/kOj1fPgIgdSVIf1S20LyVrrjR64vREVwjwvNzTT/kcfMTga\r\nKwAaPQ8L2byjS564YLIBaWpO0mW59i9ME8O5Ta72M6l6m471aeg4RQ02eo2q\r\nLZdbuJ9g8VEISdOqqjBH3qWF/RI/qfCTWlAur5CP/k6wZMHABVy4+KniHoCl\r\n/LIiCrS/ITAgwx2eMcpLXhHna+DvkmPWW2dG+bAgdKqOVWsRM4JCBOeZnzu5\r\nZboj563QbuWnb4WEXRqoCLqhJz+JyO2Xtn14VJ234Bdom1zL554fA8bmCyPI\r\nBHAJNYYajslEqqV1u9gnCfmz+MV0hLy9d/NlNRLBnzjv9xSgR+qR/BVUR9XK\r\n23Z0D/huwBLp7Q/GlEvknopRs8a7f09u85rfrizMthkYNufY0dFlSkF8qwIg\r\nI2OE88SXyZX4zlTzWaex0XlmBsnGGS6eEa2ndxRC5+FJ5zh/coQc0JFOxytc\r\nOhmD9vAhbOlMLUJpcsPc8fBmTlk8nGU5vygZUstqPHnvkYKDmGpaUWNhCLXQ\r\nq9pXBWHevI/IWNhibHLQ4EERxjiGPHNlARI=\r\n=2wQp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/density":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"15.0.0-canary.432c815e5.0","@material/touch-target":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.432c815e5.0_1651165058248_0.10872765066451695","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/icon-button","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a0f01f669.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75af81ea8ea07a3b9c683b26462843b80efb5423","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a0f01f669.0.tgz","fileCount":40,"integrity":"sha512-lUwcF4+1qBKdM+DvUhvXsSNIt7nUJuK51Qo5faN5uUNxbPodiaxc4QgMZ/ZyHj6AVfaaCQ2J6LkU8UbpYGIsjg==","signatures":[{"sig":"MEUCIQC5OlFLTE3c6HDYE7vEd5wYvmY0G4CcqyQFxz3u9xlp0gIgNSEVSXxG9NbNrh9RpxNZJ9l1YVTacsWYRXHjELDusyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEqg/8CR5Ic3aaKSuGCaG2JhgPAEni4sERxNTcwSriDibAKgd6wfhQ\r\n3sbVVHFBZ8aLaXovOdcqBL5EejSVn5U0LLFhC+0ONMSGrkK4uAPTZ5di9kM+\r\nXfpN0NzRacf3zN2ItErdLBj0vFbvxGcBMl513M8DBAVBGH/GWD5A25p9ETwk\r\nQgqYgPQaQE35wP/LXhG1vMFiHf+OGS0CxBky4ROlud4HnQaKckQl4WBeHwZ+\r\nY0pjbS7M0rFHjEw/fpECctgUzYI9guNiQax8qLkPHLDSFZdFfuKqZAIN3x7b\r\nOL9rg0f+sMdiiRfga9tZvbU+6ZTF6JvDOARcPcTqXYwY4CuRvFj61me8pVg3\r\npokIicgfWX4oYx0iPA6AGhUIv6RwlCLQi+gmegLvYSPuLsmACCEWTa1sgzf3\r\nHeyXJkjHcieLoxzSAwqU9PCBVvRUOZY0fwB+fyjmsZI6lVsxA7tb71+8t63o\r\nQswMhwqlq1oe5gWodvWCuUV03j32h9H7HgtDyR4wEnMJA9z09HIGRL9FAvqE\r\nvDPZvP2IFKqt+YnUR6WPumYBme49zhc2P+k5eIWea/t/AXXxi9Yj9m2fq6SX\r\nqVDIGB70irHoDSQ4BxyGgE4LISIO+5QTrUEDeisbmNjdAWqZoJbiZ36nzfxh\r\niF/6JvcQ7xeRwGpKs6v+1QpF6ijEEk0fBrk=\r\n=zAQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/density":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"15.0.0-canary.a0f01f669.0","@material/touch-target":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a0f01f669.0_1651868116719_0.22555954342838636","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/icon-button","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.276cb39a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65d36e8ab37430f441edb0664a2e6818589ccbb2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.276cb39a4.0.tgz","fileCount":40,"integrity":"sha512-SCPd7cp4FXFOXWNLuWl0hIrcTBCRp54EumsiZliopFBw20gTqJFLQjpQtLNpZx/NTn4LIllUdOaBl/bU1vbmgg==","signatures":[{"sig":"MEQCIHUip9CaOW/7lF5oSivwpjwDMga3a7nwCmVIjxa/WbKLAiARwA3q5rVHQecRcK3ccDLo2e/CNhIgRaz1Mk4ADL2WsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcoQ/+K9nhGMCoo798SUOaUCWoO04OMbNAoUuls6zduSs51e6OONzo\r\nBRdUl2VJs+MJZAg+9PftNrz2n8BbTKeebx6KieQtWVdPdvqAxSKjPKmLyZgm\r\nSkxGVZoM/2UsGEHorMduomtjC0wXfoKEMWUrETIHmRWox+qQKno0Iy53QzBn\r\n04KgpmRDFIfQt8e7HxsFqz4d5lTQJCTyyOwnSduUURn/S8q0+/EAQoztURVf\r\nqNpO25xpOsaz7YSA3q68WjETgFoDeUPtLsULjRuK10Sxha0PkOPujY0I7gGw\r\nFOtyWQvW9HnIxmRxD5yqQdyUdVBuTqihvZn0HZjbQpsTKL86rihTOkPiD3KO\r\nOWbAOk0/AGMV6KrWUzOmIN4RjdlwXsfLKE/SRmeFb+tml349lXw5TTGVyteI\r\n3D+sYS6cQmhq2KpP8WiGbL7ecU4QUmewidOmXJcu5WT0WZlZGKSLMI8QS59Z\r\nV8pGcT/WpmCaW6P73+kgfD0BlAIGawYw1CtsVF43PItndNja7bxN3J+S52Sv\r\nRRMcjyoH8JnBA88v2tkt/wZ28PTPl0YkSsmn1MsUBrAczyOKBVxiKlVPVfl7\r\nhW8voj/b/KjqZjs1HLcuv7X2Rd3bPkp3qJxd1XiSyQINH0cXP51Oozk9fiyD\r\nL1UDP6iCga89xDGdPHSGaUov2YogCeKVe/E=\r\n=23zm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/density":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"15.0.0-canary.276cb39a4.0","@material/touch-target":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.276cb39a4.0_1651872727860_0.42516089243358457","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/icon-button","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4fe98ed70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63ebd5723333f843b536586fcc60cb0446620b49","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4fe98ed70.0.tgz","fileCount":40,"integrity":"sha512-XG2e3AzpAUe/lFfLLrjrAMknT4NGABDraGKQrk/iuMPLg/mx81j3aprKSHQIFAF/vHQIrVHqBmzYSq+axwNIpA==","signatures":[{"sig":"MEQCIDROuRFHTYYpPIRaeC/LRLEYKwE4CEe2qazCg1nLuY91AiA6l0WA3kqtty3dNZSoYK2J3zkSZ2Yhy4eurI03evtIKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiDxAAo80oRbg8hPLVmuBiDOVQqEgKe48Vnga81VvmdTIyjfkWsmNe\r\n+gufoREvzi9mFOKo2/+CzzOsTpbiaPGqh+sIF+HZ/YuTotuv/z80nB/VtSu8\r\nhqih93ODMJQCuREp/fiufJt4ECw83fM3vpRsCqYkXcFce5rcWNkHAB5Ag8Uh\r\nY2AmZYiOWIIF5F/OgPNu27MRH7Po1k4NnG4icV3YXQIIRw+ln85ljr3h7xJy\r\nTp5xUQbibL3NDB1turHgCEdtXvZzgmcU3nf0hN4+d7D8cxGMOoMBvnYyuxBG\r\n0DygJM/TkTzAc+JTOHM/Ae3XjncCR8iyEXihD5S3Cy2qQaCLCTpbb/s3tvxb\r\nICz3RXDcxu+ztW+XIj3Nzh4kQQXswl3XZ4m6HzmFrrAZFy21PfrT6EuzhYCe\r\nueKlVeknJnsFJg506aqNC75iSgEOb6v1o/ca/eUh3xRy15FZI6urFHyWrLv5\r\n9QJHg4pYj410tfPyrYwD7bVfqXDnA6+sBG1RWnzi7poFp+MDjNZJETUYeYox\r\ntmRZSrfawcPrx6XeA2suF5+piZtRqQ5UIE+XByTpGhgKUmhal2jgmI5YlivQ\r\n4GWqzlt5teNhGrcvgwt9NQtd1tWURubWa49CLu/SlL65cXRCTnFQc12MLpae\r\nW8Wu5ClDFsuqZNBpxEQgGxHFndIa45zFzhg=\r\n=nB5p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/density":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4fe98ed70.0_1651874198510_0.17843302648875992","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/icon-button","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.58b130a3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4da0f1dc3ff31b983f6c3ba0f72eed80325ed933","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.58b130a3d.0.tgz","fileCount":40,"integrity":"sha512-/mFxyRodM0PmrCM3nCPn660Rh7sPYcmjRoR9PB6E8I7MAtl8g4B6EZRT9x02SWqOBLjtBgRkJglJaozPAN1rbg==","signatures":[{"sig":"MEQCIGjajSaC8L2+3ZutT1+E5dIdx4xc0YWXoQ8wNRaiF2I7AiAscMEnzoZ55idkoT+GpK9nDG16X1TY7AT5Bjn8zkLJ8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv+xAAlwKRqJp5pHd7JVbKQqcJNoYLj7Xsz+DxZrhrASVjacpMQHf9\r\nSjrCjhw0eM9XkTNGzWIOqMduT41ctl6UTpgPPrHYqKVGlIm1d9kMWPw1GKA0\r\ns2NjkPWAd/A183e8el5W58BNX3+wcqNKK2Q8Me9xyqXOfYWI6CulEAt1XW3t\r\noVZkWRwu2g0DaK8VsQ/lWLj7mqYDL75wpAd2Vel1367UdePPY5xbuEpV6GyD\r\nHk/8zzC8zTMdli4nsXyBkxvhYS/d/gH2G+3Dgcd6KsNeQKToluoYd/fjINeI\r\n3vW5Qchz4zP3w03WQGZaRxEdmESz9w6xWsQw6JyfDmz+8KyKHNl7DzegOapS\r\nX4QXKGaXCNfwpBMTecHdoodtZGnXaJQnEdfaAaDZR1Ox5o/1iPnPNduDeuAL\r\nYESBE7Bm85B0+YJMXp+s2v+eBzLaAEveV7p/PTbegjdrrpsEUSLLJ6/piLZs\r\nE0momNQsZq4RolE7mj5t8uKrby+8U+lZdQUopPZP3CZb9d0mXZ+rT9lTKKRt\r\nTxJ6bYSkyF69EdxEY418INjN+AQRA2b2vaPTo9ijpCnuSDDp903jltl/fG0v\r\nwaVmlDVMPCqDLgySZNQbSN5rsqFGzixmir+Hqyc/IWOXitfUJGTa7Gvro18y\r\nZXubmAIA6+U+iX5RRX4pU2zY9o0s1tHupBY=\r\n=W1mZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/density":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"15.0.0-canary.58b130a3d.0","@material/touch-target":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.58b130a3d.0_1651874336525_0.7368818708767995","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/icon-button","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ae278a2fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae70f09f323fcaec9be3ba4ee940b8c7336158ea","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ae278a2fe.0.tgz","fileCount":40,"integrity":"sha512-Cb3GuF/pheSqos99A2Y7XSRZdeoVbcCw+qJ8vm6QBzAeaiNro46GimSiAQau3FFEBceTA+KV/1j11l+YnbLjEA==","signatures":[{"sig":"MEUCIQCQlTDp5J39ACY8qMv0iyiHsENatzmjczXQqcf4TbO04AIgBc8cwD1mQQlFZH0OlzZAYvOqDxktR8lx7bPX0Pjvg5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTVg//WhpbyYi+HF+/y9it2aDBQXcTA+Aw+X4zD8h/tVRx52djvteI\r\nJOUI1BlJ+GfbPDkC8s3ekanq+pqeGi12hoU+jmQblDZbYILJOLI8k/7i29MS\r\nGXwqf2sZVvEHyrH66+MgWmxgrTkatesdlePkTN9PQTxBXVrZGUw186kggCib\r\nlTHHhGeEAora2MkTgQcv6SxxDeWzmVxFsUTsoC/TPC0kymEpYOLPtf+5AyAw\r\nSOuSoPtTd+3AXppgI/1cczvio8iUZstbft2qd25p3B2r3CBkCfrWWKTlksC9\r\nvon7SiUozdVQp7erB6Zo/1V+ajjFEmDLO8Nrb81nCf7VebmDhOr2t1Vx9Bjs\r\nSC1cT7KpzR+hVRgbBVuahEPBMOODBq5ycGpULbz/EEMKZkC3bN2lF2XvkWLO\r\nG5gOSbKwToYByEqIRTnWAfMXW3XtCKNXoXlu/v9SvLVC9L5WClrBxmoHlP39\r\n/JvCAgWHcprmF5OdwrdmfJpkhGig41WRHo3VFLUWObcAQLLQuI8VhWyLUPb2\r\nUOizrXI/xr1QTezNPVeCp9ZneriuW0qEiNNKTeDU0+5XAncn+s7ZHpAaHwjC\r\nslR2CbmwQkfPkFoLpMsjD8aCEAyIuE/tVYDeBsbhvpv60L+pnN88lEqWN7kS\r\nWVvS6NZTo3sUdB8ZnQCHGa9PgK386FvkfTI=\r\n=W/6o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/density":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ae278a2fe.0_1652109927896_0.8663979879154327","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/icon-button","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bebf5bfdf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"184709b9bd42b32a3b35ffd2e8456a580785431b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":40,"integrity":"sha512-I3XOdZV3IHogAgwIKhfOg2XLHM3AxKoWv8rak+CVfL4EBlx21xPEWBwuR6R7XRplh2zEg+5eM8iJZu+4YWm1Zw==","signatures":[{"sig":"MEQCIAzsNsdduRc0dHC1jA+34wL78t65uPFXl5WlqDNG/Qt9AiB2qO28k6PKUP7+fvp9Pn1+F7Gq+ihKlm9qD954an9YGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Yw/7BgbTHShK2R5cgbGUQK5ydEA7ssRcQz7J3+NHeD6CL7an6uUR\r\nvRzKVXvCNdbkBZHhHeCabxcp4GkHzSGjxVXCfVpI5KrzC10QtB1cPuOljn9M\r\nVKik6ZwFAAerof03V9/hE3sZqiA3u0QGGqtkjXJZxy2xY5LHCJW3I2+sMr/F\r\nugzAZGWDCpYvGvJQTS8rjinu0KSGemDxWo2dlmqaxoN/IvTrjUV3y/Q9b3Rb\r\n0OwjSBFr0nKiElGmLaClO8XByusNk5K5Y7YNlNqEPOZQ/SPUhcNXJQzZsh1b\r\nT8GzHHgpdcnvaIdO9RuGb79POS2rNIMEmBZlxnFLt1q4Bw009H93M5yPetee\r\nn1QgGoUGJ46VBPrXV5zplksgcnxR+4QJuPDlxmg3WmLUsz/xRvHYZGLSDlz1\r\nwRU+rlQGCkujPJw9Rx6egOJWLDorwq8yOuRQUCI1hrmlLvefarCUT1dyRiDI\r\nBiH4pIvm3LQyupoVQqMbAeTL3KX4xwP3QpjxTjSgohTn37W0Iw5KApjSIiX2\r\nLhB04E7v0K5AoPT0O8pWyeb6UrGS4VBThwu7QZJaxLhG7hOXO4OKTJTNFYQf\r\nPJCvK0x8GzftX2IOQt2Vf3GaYd5JXkryppTNQycTqvv0Q1Akr9QgQXy2/gwk\r\nxhADo8n7hjLfFhh/ojzti6AsZavLSXoQEO4=\r\n=TKJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/density":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bebf5bfdf.0_1652236857510_0.5510556621119138","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/icon-button","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e6072cd6a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"839658163259eb3882afc36b8341c17ee3214318","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e6072cd6a.0.tgz","fileCount":40,"integrity":"sha512-AQX+9zVqmavU76uoOSQ4pTBc+cnmovA/bqNhkpYvAk/CC8ho27qGbB1AYanqOtlkbi4MfUIFwLLn1h7g1eJuEw==","signatures":[{"sig":"MEUCIQD2RMs4cEFLEv0I1C1cbcIbzxzKG9LBoiq54/Ev6NmLVAIgdj/WWD8ORImGZxmRdP4cP3tLZmjiR8V4B5IrbE6Olig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhIA/+N5AkrDcRol32LzwFYCSLDdKgShGpeKGwfrXQatsqDBxxmUL0\r\nx/qQvx3LmREyfp46QHFxqYr4Y9oq1c2AKcg1fN2ouQwsuR0dminwKnN9hks0\r\n80qg5SglqudlBttCGl5AiZ3RQmsla8ejs9vy1B7cJFdjMXJjWnC8QEB6Xx9N\r\ndspZCEokp7fp1bLeE/xF54EF3tZ836rlEGkIDR+Vj6k5tmOYdkmn9vECPjjg\r\n5UYMYogKJEvmrWldtfvUHewkFG4mrknWi0BTbUBst2oKJRdi7NAjmZaFrgoF\r\nK2U0MCUgl3L/pg4SE6tjypmpFbdDtyqxrHBC4RTk1r8NDJgZlHizNvm4zMsz\r\nEEHq7ky77U3LXhEQIS9OZp7zssvwNIHjITVGj6wjS/GtyVxG56Bje4fu9av/\r\nr+qEzNc90LwUD3oMhenByMdUXuRU2rtX5fQF1tjzJ0lbhKdC9+FbHSB78Tix\r\nrH/7EjVOKSvtAhOHMTuG9LSPsgCmMVXtkN8VKq7JYrdWKGUF6tCTdpHZW8V0\r\nFhT8uY98HQbGE65SllPZV1qtJnDleu3ISHZ+ez6/kTEbLuXDBu7C3t9jfOoI\r\nHp8IyPikk5wIxWV+d3U7VlktLZ1f+R6L4G7VikcU/Cbzvw068ZWB56yKmV5o\r\nty8mcnwL+R+mbt+H+ixrHLbcymQdcR0Qy6o=\r\n=4zjS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/density":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e6072cd6a.0_1652300345302_0.10118541474111331","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/icon-button","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5b40eb988.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af7b2e860b87dab102fa5b4e16a65020b04888c1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5b40eb988.0.tgz","fileCount":40,"integrity":"sha512-hdeXJesZf1e3NktqNJRF0tCUA2IoIce1ofyNQQyNjdv+BtwnNFbAdpSwAb/EZ3Rso5q3+3xjixBSHt31Z7nGXA==","signatures":[{"sig":"MEQCIF653yMbvwfhhXWX5zFTfw99jBeo7zj0ZCeEpQ9yDFmTAiA4npONpUdt3m1jQLG0ERfgxUpfihhkoiRFlRB/YtfKYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1dw/7B4TyGiy3O4GGrmpwyyzhJKolQ3QuFcOjrAMtPrQvtlsxJvby\r\nZmUSDm0f8n+NgnjpSP6rT6NDOpi7Dzlao6xyx3W/f6c5swZHA/ZPmQuqxRzH\r\nLAR4hZ0ZzeK+rp5fQjsXbKZp6lrRUHqw/Fk6asO9lCxlNJkAKt3Jh1g9u7wd\r\nuHCacO2Ed72MRAIqb4QZVbENU9JbOqAP81avy7eJLWr4MnzlZDhsFRXmhlMf\r\nA68JeFSP7HNo5mVWL4RW1s52WDE7r1NxUQScBD0i34eQ+X384h6ZJGibNfbn\r\nqmH84I6T2R2uXuartYjeUHhrDDqKgI5xbOHFh2Vx6Uzilt4ytT43OP8wFcua\r\nVdQFxHUWGr5ZBhINTf9t7xSxTdolsqc4ssrU7iwGNrcwDL4wcPwbidfoNQmO\r\nWO5Df0SaRJID+rXkYdoSAhveKcjw5veyeyvgdqOllV7J1IRGI5snNKPgex2t\r\n/ALWHyKkA//Wnc9/+9wbhp5PWWjiw5MaWuxIezeEUMlOUTnChlmem3P6EJRE\r\nX+XlX85Rh+jHM6hSG5lXwYQNyprryobkCgUi2kLU7xPX/FXEtEQpagtEUlue\r\nCDYlnUsN2jhAi2SKLaRYkvnxR3QvXkSyDsAu2vp2jDcUf0IJIuGeqgqmv2yH\r\nKGsiU1NjUenhPTQtMZYOLnfNR/WnDyygK84=\r\n=EOro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/density":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"15.0.0-canary.5b40eb988.0","@material/touch-target":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5b40eb988.0_1652323490893_0.2647992421140266","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/icon-button","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6a61d62f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda0f376db4d47cfc0ad91827a5e9d4e87df9699","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6a61d62f6.0.tgz","fileCount":40,"integrity":"sha512-9bKMcqZzvT+VeUBWOfiUoHtGTiTN29A1gLXd3TbUVWrte5fUXS9Qk091b5VAnL9Xk+zDgmuYKKPBO0rTrQ1tKw==","signatures":[{"sig":"MEUCIQC9zPfJnebDX6SXi+801BTOy3oCxn8n/cd0vMhmFd9PlAIgSSRJ3Mx2f6xmV8byryC6XDtmaWg6Br8a7ddNV0QecNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUaQ//ePY6nD/bb5uJyUCXSohBot9rk5rdpqa2smzQX0SuGHVcqyf0\r\nzB2LzKaIFHmgC3GgKoedVoJ5R5F2y2Zw28YHwUvbRtBj5XlMPIf789PozlpA\r\n4rl3bUZRUwt3zqGVbvldc7WBt4UiLhWcOSHhxc5biK/6zUzP0cUAmDkK/k2J\r\nZ/cX7QUk65XZLUt3umTkhjQuwizHdSLgQTAHd4qZP2y4es8sbuMbtVxKIR1z\r\ny4582DYWmCUDfnBLbBLDqk6h9NoEg0ishYTVvAwtw1JaYrjgOwoXs1v2pRGc\r\nCZYGceFdhKOxNQe9BSIztJyD2SGx9MXPRZYW38xyhDIfbV5EuLk+cM7GUlno\r\nQwSUNjcEfRhx2lEPRoW0OGYzVsBAJCJUuq2NdKzeeVVm85ltD+tNx90QqtYk\r\n+K+mJk0ABpLcubqoYgkKai62HWoc5jze5I1e2NfFT/20A8fxkDkDVzRMiSfO\r\nJkK0JQ6KN0tRzTzqubLjjBLUkSVvbU4oLLB5jDSNPnY7BHoltG22ytrQiYnV\r\nyghgYPvsgknU1vB/YXcdTuK+b9mhItAPV9+5dtXPTjGUvMu7/aHb4eJDujou\r\n+tjlhpZkDIdZkdQpF3Dzw8+Kg3eij6fmWn8Alctpufo9rlW1havzhT1WfJBV\r\nxwJgsQNOyABv/gnoXttyrEJ+uRXee/mSLaw=\r\n=N4vG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/density":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6a61d62f6.0_1652387250604_0.35136411283799696","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/icon-button","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.05930a453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb2e868baa49c2632f2283e9417bde419662b0ae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.05930a453.0.tgz","fileCount":40,"integrity":"sha512-aiILrengZmkrJR3p6u6OLhnEKglf9ek1RYWPKjLvXTPWvjVARybWy3jYYSVQ2jYdiw+/74NHNeS6mgqaRv5mng==","signatures":[{"sig":"MEUCIEHW9RwMj3IrFOTXGeh3fyo9rW10FGxwiCISjKiguo2BAiEArlljw8UMgC7bj2gG1wjjTm2y7kvOGjY9hS54thKUWwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUHw/+PskD7l/kbb4cxgnzT88pK4d09HIPwfIg1+9pZuUwtDdFaZRX\r\nI+Cs/ss+yZALG+LpW3OuJkufsDX+B8jZm5mtF+gOvLgWvRFm/AebPbZ8QCBw\r\n7/yTLIHMXpAxUCh0mvmnHJkm+0GJ9uANkAVcEXU26sVQY0qNeBTVF/AxyC8z\r\nyma+3fHDXT3C//lPi/gUTpBCTES3BV9myoXfyIIAoPGVeAOQ4mMMzeMm8c3w\r\nsdvDwOeFinVMYvYwG0s9Jgou7izxc8hHH5qhnhP379JGxmaCgBmwXpZA3oga\r\nFXYyG7NKQ3kkPMAkZCVc8sxfb829mgxYoqQtyCvFhdTT/tRwsk8ue6rxGw0s\r\n4aehfCxIRrEqZGnRINTAF8moRKYapH0z1yIuWqUu1nUlNDYyWXpgZp3QTuNS\r\nGUsib7LZKQa0aDsexC5UXtgOOH3tBp9bhODMqa7XCBJ4KURjrcPRfNTCGAFA\r\n+7f6U9SuR991ouCXZiAbo5ObmR4mo1O6zvTMfSAEy1M6MkurW93sPl/mp8Mz\r\nUABRocjdlUpZ4SFJJIx7KEBDZ6TaMVTXttZqR9XiuP5UYCDKIP/vEDqQ+6pH\r\n5yUenm130yTFG+fU2YCaCcyyboTmHSfwjITkVG+sg7TsjRnlrLTIuIazRwhx\r\n1A9h+m60rbFNjVJNZbZxSvvj0h1N4GTP7Eg=\r\n=SIHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/density":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/focus-ring":"15.0.0-canary.05930a453.0","@material/touch-target":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.05930a453.0_1652467686142_0.0722951638574667","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/icon-button","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c0a11ef0d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed7a6ca4acd893214c6d3e2edcf52df2b5a898af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":40,"integrity":"sha512-GjWO6h0iWYiHJbMnW6bFpNqALA+yHS1q8PW++E2hRPWefcvStD3ChsZ+gfpG8ipNouD/vbEaXpH22RrTRR+Usg==","signatures":[{"sig":"MEYCIQDSmBYq/5MtomcrGQJosCX6YAQS82037DAtCUY/RYjIhgIhAIwXXjHQTvvJ4GfrtdguQ/lMLuHkiGxoJ38JxaveNb0I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWaQ/+JrUw2umOlzmSRzT1uNle4hwUA5N6MbgvU6dP6orFSAGa6Afh\r\nhAlJ9xaQpCYCw0VA9q0u4Pybn3kDnKL8bfyQHGalJEN8S8DxIdoyqlRfzI8g\r\navSmLWGtSOZZhBI6+aK7zy02PQ7bSRiUjboy6CXguFZ9jyMOmKdCgoItobT5\r\ncCYnuaFuuPSrP7czrV6584Xdeo0pGDnVxZdllkJkd24yyle6AffTsGcOMOFr\r\nI43aRMpelI1AIGrM7JpoeDn3Ff6BYaVV0j7CUN2f+o/H3Tx7T1G2Nls5KGz9\r\n2tSdmwfs8nqCf0G1rnPjhxe7V+4HnsVZ+ODGEzUXIBoD0mCMzUOXVSUHZqVY\r\nA2bRRqyZEx+jWYNBBzg0g0594IEkqJU2TeCLOBcf4NXYA20t9bjNSLFzOtD3\r\n+nC38mtiPdQ8mDarKPID7RADAAQjYEd/0rbjJBnb/ad4jEMmsFq6qFZsuADA\r\npKqzI5k5AH8sTpNG5cBaHPT/fIA1i3EQF13xn+MAWj9le/l7j/c5gv32nuMr\r\n6rfOcn2X52+xBmhFx/QCs08XGXniCmA8UKlBperCFVNu+eQFBrwwHikuCwRP\r\nJDlwnDHBr06bUGHWsWVr36kx2nIc5qMyjMoQIkNGENoxD4G1w5sfDvv83nCI\r\n0heBa9qo+0jSw13uiE8n7sdMWyScMw+VSb4=\r\n=3T99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/density":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c0a11ef0d.0_1652911297647_0.20830758150062412","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/icon-button","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2f9b268c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e914f8fb61cea045219e8a9ea0d41c7f40e28d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2f9b268c0.0.tgz","fileCount":40,"integrity":"sha512-/CRVH28JnX0ldzjQpjnFPYxDdThdar5kHs8mBRjmEPFXEfYrNIE+scwGEAtoApQx1BZyZJfPGzzq6ZiziY9IRA==","signatures":[{"sig":"MEYCIQDvjXChFfKpHTcQeAaJR0Ddcnl6g2UjnLQ+FxoHXY0cWAIhAOTZj0kABaz0XlY1lBbf059MO1F7sizOSP06UvlrYRrZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+z/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+ag//fHSyr9TVqjjf0o5gqo+/acPgy3sPTZbUpdFpQd5NnR4FFr+i\r\ngmcSlfg0L4XUVg564tMgUjWZR71wRXbDIdkg1Al03MgaE3fHxzTjs5Vczl+a\r\n+pSdjcRdD2MgG6dr21hbzu+qI7NC73RcGvCZeRrrgDkCpFDjMX+7HLUg3F87\r\nged1/Xvtb9hwdIHoiXGdPGkVHT9S8oJHnTHdLnXKvSr9q8nl6htKIdcU4NDE\r\nTW6aawrP/uIm8kLD495XII18red8n+dtu8lT7CRVxu5upMhRZNAQQPmwkfWL\r\nWiKAPwKSSxdcnUrMOXtV7wGta/FVVgptWROBLnSlr05NqPl//C7s5j2/kAGj\r\nIpWf9cwK4m2WOpFNgLnW3XWm++qVCX6oLsrDsFqywfdzIH9jY/BStshbs9Fg\r\nWvSExoDKgP0Vqnil4WesUMB3skuGjXfQBVMWkhbSL26bQoQYF7h1PRA8pyr9\r\nJoCFpfx6UJsLzwoykSLNk9vaYVDim81LKWAkHYssrpr4U6IQ56qU4yBdoo3M\r\nSEmqXV1EFh9h2iPmTSj3YvaTHPKaM+WB2T8zfFHx+X2C2jI80dHJ7qjQ93Tx\r\nekbr4ZcpB25wYD5mH6x/9BF0cCGvSHB3wttFQ62ohhuhoOHnfiZhfnbW1FpU\r\nwQd3SnAuim0jNyEjuaiEkA+qOaIELrDAo44=\r\n=QmOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/density":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2f9b268c0.0_1653075199627_0.001617614641040932","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/icon-button","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7741345b8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02f66563b2910632e5c19bb46f2dea8284c1f90c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7741345b8.0.tgz","fileCount":40,"integrity":"sha512-XFVhNGJ7e5UuGHtDuBeuL0yKXBqdAdrWkSEckDmn7uhD7Ec8VmDK3pLPbtL2lSJV2WlRo4Re78b8iWX5xUJSgw==","signatures":[{"sig":"MEUCIQD1GWP8hnBnP47M1b4qRf/2loVpUhe0tMNywconOFBrKAIgJVZB9GsIhBjrlxABx92bKbJoZwqkADOxFQQlPuTZgz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAxg//TjX5mk1pDC7elV3xl5daqnxh4NWvrCw2YK0i61dWQ1yJ/ScZ\r\nSMrqSI8h6zBUlquXAUAWXpvW9JWnmdwfALe5fuO8K/S5nx6w7O6rYQb8LJJi\r\nzF1ThqguKoz+T5YNotEQdnvbyM8JqLBTGww6b/xZXH7Nq58Rdl3wGx3TX+Op\r\nLn8WY/HHh/PrqHfdwJ49w3ABlc9/tj7BAMFUeROM61dJiNq/IQiWelZ2oWH/\r\nkx8+9s/kM653MmG0gwn4YRJ++36zE4+U2c7DqLnu5gL1Ziu3sLy277i3yCWN\r\n4UhFP28P2ZO/Qu0rrW3QFeuC4Gz87mmxfnhC8VE6kgG2cc2UYXcaPPZI5Sgn\r\nwGWCvc/Ziihpx4WlUIdj6TPzOXB3dO0dyoh9J0mgj9M7JhTHCoN+QrAFYmIH\r\neIbop+l5VQM0LuHtuvyzIDqWmy0Ol3E3mfnVSPnhg1M6SfTLAbiiMoAabte6\r\n0XdCYo1V3sZOOoKHYYXwmw3FrGUu4ElBgW7ySURFgfH2MNK1pOBFIE9wqLCp\r\ndDYM8JSBK2N2btvKAeFSoufKSA7YtcifHscO01+Y67pCYfiez0GQKkM4d+Gf\r\n/j/DMeb99hWG0W7J8vbjwK7b2I43VXyJ+QYjng5yTbBh4nOZaaYnz1ljm7Bi\r\n5Jqt9MskO0bWiPA4je7fYkd4BmUc1cdi/XM=\r\n=Ryhd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/density":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"15.0.0-canary.7741345b8.0","@material/touch-target":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7741345b8.0_1653077002873_0.5791709781392376","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/icon-button","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f807e793f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88fa567e26565e7e1711f7569ce25a2db896ee8d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f807e793f.0.tgz","fileCount":40,"integrity":"sha512-RcNe64XNXafPqCug7Ci3FAk3Fi4ivh0hf1gn26CGYrz1Bwl8S57GQwXLj3ie6UPwKeyDAswcz+vA5OnRBdQe+A==","signatures":[{"sig":"MEYCIQCRkBxjkGWVYA/d+rtGl2sHuWV4XlbVpF//9fRKtql1pgIhAOr8rNomRrCGLGd+398+jFbWeaWH45P35rVps49mQuVx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnhg//UEzTADpXj+du6v71dqKFhe6sgZCvs4MUZ25FIQtZukn493+5\r\nIzxZZrV/NGYWS4YArqvWJJ7YcEVFzw1Z5J0ijY8CglRcuMuDOcSwroTpVddI\r\njNtxDYQsy8a5YgTshpkSeybykewUft4tPAraJ12BC2n67s5giebB/b9SXOnO\r\nAnB99IrIoK6DRBhmkZTQ8MyCMhf1Qo+DxDu/FlBOpa2m77odFlD2bcPTOFP0\r\npyQXGkkzEf+9hxWS6mWGlcRfSmprE7bT2gd/jbwF7C5qDdwgqqMnGP4fKV/t\r\nqh9R61oqszUH91jLONacGXbBImsGaJUJ/PcY//hneBG6QkUnJIgOI9K8UGEj\r\nZqDHng/+POo58EwNz0QM7nAiz8OF3bTwiWSv6QHn5zf9TgzG+nq5OSGCkPgL\r\nkEfb6M6JqLOm+bUhXqQ4xrS296Mtgm/XqyJNghaMJLzyXs/DU94v4yExRJT5\r\nq1q1kTvPIfBrRGhHVMdtRaMUgTOQlDMU/G2SaJDaKDLEaflHcciy5VENdnlI\r\nALLUMQdyijQFpcgNn9DIWCNa/02IGMcNZyyYDpb1GGE6+qT4rwvfpj55J+kA\r\nR70pFbteXChDB57MbKPk405rDoiKAY8TfOVTgNdgh4XU1kVpoqvH5vmnQbxo\r\npggF7eE8/SKEksOPFL+LccCOB3IPLU/uWFg=\r\n=3s9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/density":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"15.0.0-canary.f807e793f.0","@material/touch-target":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f807e793f.0_1653085348182_0.14781052102972736","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/icon-button","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9f53d4a8a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb0c2fb7898a81b6da2484a91c86362bbe3f9255","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":40,"integrity":"sha512-NMOh5NBQ/xX/J4bAzMHYGDrsgLs98DkysXL/dEHRCy+2yCWFobmsTHBSpqdTFTJT7uVLSaQcagSX+Hsu7NltgA==","signatures":[{"sig":"MEYCIQCLjdXQ/HDPADFEgbQTWwHnbyoW87rdicTXsKZqXEJ54gIhAM/y1l0JV+ZZrxO6plK2+aZVs2OAYzgtCbEY8kPONq6R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQsQ/9Hs/bhxNZAIbMwJK3rtRQuapf1qlijNbhcCGQUnFRS4mUtfKl\r\nThYKtBtZnSMDi7IZ4JaENy6mNbbwq4HWHfrgJmx9gv6D1UtTH8FwSsd0iGtg\r\nLnz7gKlQ1uK8SWZLCZcUA9xBm3CUr50KFvhNg46GT1LsNM4JGNkmFdm6rPBU\r\nlo4eKh5rHYSKbJKkALS6LDBCFeug2UFfDtbAQDTH8if3Vaxx8nw6VbRmNf+u\r\nEKexM1XsceNlYi6ER3ued57W/JzMVk/VXQGJ4MObLQK169HghN8yCRmZcsEz\r\n0FYGrU/dchQ8EYCN9zwbRGBFdHL6IWzu5DW/LDugCN5VrF/YYxP6VG4+uPqq\r\npuo5h9u7LWR41E1XJ5Bipq0f5CK/Qo6IBnsDutu922eIdFhnwIvPqiN9aC0Z\r\nBRi3XaUwV5+tQ8b+jNSQW6iKzAC8CRm/pJ+mkwU7KFIBYk7BhKbg/xQD8Qpy\r\nB8uOkAt28yYxBS4U+QcS85UhBsKKdC4h+UfwYsE6Gjuxk0YNa5Gne8YNkoxE\r\n8SmSx6tDY7W2NLJzECtM/TOGg08OXGW3gZfOI1xyHRxUCqkIn4fH2dLVyd9h\r\noxqL8O2A5+urTMVmys18CDAL8IuXiATI7+smjzLChHRMx6tqPgOZBaj0bPvI\r\nswsbNbRBm1bQSwGGvX9fp2Mv9QrIThfEN4g=\r\n=cq7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/density":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9f53d4a8a.0_1653317904280_0.05940794972301866","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/icon-button","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.77cf00e37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999b51a0e57791883de4eae7935b1b5dd8bcd207","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.77cf00e37.0.tgz","fileCount":40,"integrity":"sha512-sgmA2FRpseh9Gm8jHvqznxpY0534eGbDGBU7hjDv0RSrACK5sNYyFImyWQdGQTZhwqrXEyg9KfaxcdfZp1N4JA==","signatures":[{"sig":"MEQCIDq7mw1NxyJkwZCN/6AYIVxaFeoK0xDsQkCeth2HiDHmAiBgFEmv46QMbTcVMzxIn4zaBx/GaFgzK6yM0g8s0bTz/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1tg//TcHln9IOHS2eVzMorchy1kL7NYMLpU3iDHvqx21AL/s3LMwS\r\nDTLaOXfbzTtjMJ0s5L/4EZvaNyJdfZnlFy1imLy1wFOMKcoF+zQuZp8l9bFh\r\nodGv5T211vgCWZ9gSFpd4smdP/dRjqlskcFPeqFk/SuPueUfW9gj11/NVGWt\r\nCfFsfPfyusTUfT+GXNs+n0hS412H8jQS3qkoUXRFtCpyzqcRJNpPs6Tazxx/\r\nGBqSCZ4E4pTZ3OhND80W1suV5wWLIQP2W/+aZdqHetsI1gagIfmrtjweLToj\r\nNkBk0J/axGPfYVqodxwemWkPtCyxgWGclWS8IujwyIkQu1XmFX6jgz1Rqwpo\r\n94Qoa7WeHW7ISBVZ9cOfRekcYrkP6PvKz1pfR3SfYxCk1Jp5okihECDEPHtH\r\npQWkVeZJ42uMfaFum1uk1mMeFd5maDpjTTJOLpNyUG2sZ3KIdkKciMCwYvyR\r\nzhNKJitfT1QNx46gx46MEA94bCt23kSz7r2oX0LCXdeYkQpDXzSDjvV1/b28\r\nOHdzcI4Lla+tK8f5Iu8m35z616dpKc2jYdYY/n6RY6uTG38o/kcQ1Wt3d1AS\r\n7Hrl23fqYXgAHR7ry18BZZ1f7pC95DUut9vHt2vF2xNJaIlNj17hhCChYzcl\r\npM/a/rj8/xHXOi6OpAlSYMYKQ+kuhU6ADKc=\r\n=YZB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/density":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"15.0.0-canary.77cf00e37.0","@material/touch-target":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.77cf00e37.0_1654018844067_0.3543157495191005","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/icon-button","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3c7b844c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b9c8484b66500da3ed58e118c9919ebbd35581a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3c7b844c2.0.tgz","fileCount":40,"integrity":"sha512-hFLGqaTA5dF0R4abWTq+Z2BEhaYS8GpolPRH8l49HPyyYhRfgup06IeTlBzT84ACOFAEzWjY/SKf/zBH2VNBWQ==","signatures":[{"sig":"MEYCIQDWuKhXhAMi6U9Fi3Ix2856ss8ooGxa/vOli1VCpOPIwAIhANi+GwsqUvvvcYJKaZaFBysrXx1Ry2FJgzNJNoMlhRc6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin893ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSLRAAjdZsj1ut7MkqUf4piZG2ywRxYWPJCuAnRmeMqtwNtWCuSIBt\r\nlU3jhU/eQcGLZ1IWsn9zI6kgVGJq1c3AKc2ylatjYrrNHuL1QyGMY9b4D1Vb\r\nxzMUVNMRtiraadA6HbWxlNTi8OfQvbqfC4fYvj2zXcOFJ3UXlmzyE8CqYO5n\r\n0dohd6JF4QId/tUdh/9DKgyg21aTKQwEXyAbArzo8dq+GoBQwRThhZLGu8HZ\r\nKHr7+Pb9FiZxG+yrqXqZsj7CAg1f2GNLMR70DiPFsPcVV2JmYL+YVvH5GAuB\r\n7Cfwcw42WIPVcGYmwijy3h0Mjk3NjOfCBx+BqTA/yZK7rrs+JlOl02cogdP8\r\n9vyk8c1b9L2/oJxcbpNdPS6gjkJ/S4s/aG9l8NOnh5xYVhUi5lqY15H+XGe3\r\nJWJ3FOiuD479HxBk3kh0tv3/W28WATm6LIP/j/iIPr3lW8IQhZGPAAxj9pdU\r\ntcxKXfRNiiz2VeflTrBwwe66ylDPKTcwrqNM4lF7DC4hSuFBJnm6wvDyimNk\r\nib7n/f/LrrZMr/IQRJ6NQ33AWyixUtxMReWTPcA6GCM9HorwuWWyiSTEi8dW\r\nYbjd3rY/9c8vPltEPziyN6U7k6QPvUUdncqPc8qpkhXZXxb/yC/6GkhTU2Vs\r\nlpW7THdXmAr4NUDmbWpPoGCLKxDU8up7Uhg=\r\n=+tJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/density":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3c7b844c2.0_1654640503745_0.10335209181662286","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/icon-button","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.df47894db.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4579ce5428065a25dfbfcd2a5f658ab8569b99cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.df47894db.0.tgz","fileCount":40,"integrity":"sha512-5y0T1rCz/cCTRNMODiScU6aR6zy0KhnFO6BLrrDQ5qa6wGVUpUVT7Fmg223k68LggclL4AstKWi78d9yBmIS9A==","signatures":[{"sig":"MEQCIEbrstd/spGpDXxrTJ/ef2yftpE4G/z2NjYFQyIex6QXAiAkHQHsdI9nW5J5rLon2nFeXqsPW+8UV+xq/UlCzqTXpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip282ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXMQ//Xf7EyYqVpj+ykJCEaL0ME4YnOqBizaS97y3J1DOONqYux1ae\r\nBZeXHLj47Pa5cwaRARtGFk4lsarT2h/F1If8yCWfX7NHiSac0kPM/w0OL3Mh\r\nVRq7fInEhTi+QkH+t6w7yJcuhaUvS4SdRM6E6E/A0qB3DGxpt1GToZk+Pbun\r\nOvptytmJWOFVxUXgzdpR9c42GRNd0oxzkvLpiUBUJufkRzj354BbaW8WwZPZ\r\nHk6JBYk868s4hbV4l3oW3s+rcLOfEl/oKULIcSFAOFdXhvs9uP0IjiVq11V8\r\nVcUMUxbzdw2zr+0/vHlo7RSTFBAL5N1sTP/kZydl5r8DlASqzw/UA0gRdQ+t\r\nfjMOqq/4Bh4H68YqTvcwMPqtOyLdHh5+Jz954a/WbTk5j0aEisqdomFZThdS\r\nc2Wd421lgKMce2zomB70zjtlsUnlspKNU9oeGDDUzJ4lLWqPfhy+ObPBV+a2\r\nlzF4Mcv1tlnLCGxExyBPWKW+PHTHysAG4PXKpzP/Upq7Ck1LwfBTXbIHM8nb\r\njcXbJqR5icNc6tiaaFQxhLeTgsc8rFSiSyXg4Am0Mo8UOfkMW+xiKq8WlYTX\r\nR1pZsGkLDMB51fqUqguBUbEqy4VjAQmlu4KPLvKHODKzcxwPmaZpTokHFjjQ\r\nDglurIUSlOAbEIsSUX6EDQxUhKxH/MZda3M=\r\n=Wt1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/density":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/focus-ring":"15.0.0-canary.df47894db.0","@material/touch-target":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.df47894db.0_1655140150569_0.5925019371695628","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/icon-button","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b18a873dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e95084d6620aa512b4c49e9d5339c591d8787586","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b18a873dc.0.tgz","fileCount":40,"integrity":"sha512-YIo21Q5M9TTqdF83C0XlspDTRjNwIKZTktbQvp53+JZtvJAS7JxEW3u/Gq6aTt8HLXP0b+hGkyD6XULeWisGKw==","signatures":[{"sig":"MEQCIDjYacY3RPLy9+3ZMQQuoJiNN374F0o9+Xb+M0QuzoLdAiBPA/3aqSC7NHQfIFxKtUhliWygHm6M890+kIP1UKkURQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCr+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5WQ/9GDhyXNRZk3gsYMCYQ9/WxH6HFe4zcjmRLn0CWavZH1W30+cj\r\nxYs1txXNBohmHZFilq8mbauJsPoqHcI0/xnb5ZkmkV4InHF2ZPbq6DaFIm9d\r\nUMnofFkDROxW9eH5mD7Tz0am0RFeEH0O7gCDfmRDKscJNz6bH+7WVl/lGtV/\r\nUCZ3SLP0BNNIsFTdGNAuFW8o8R59NFYVlhLiNmoRF8dV+jqdcAsJQxjk/IqR\r\nJ9bRwrE0R3VfKJ90brGx0pplgrBx/77qwiV4ZWFLksg6tX3CqD3OLpOkh5CL\r\nuS7kdxVv87aqyEbaqzskderEcSwWXVxu3zzqXKFJNFzC8KceoXv/ibc6UjBM\r\nsjeM4xveBCAWINUqMtTzzFrZ28MVNdfzr8c8UDM58c2J//kelOi3JjAKI2JG\r\nYds/wI5XFPOmgscxGYzTwQgligxCseA9MtkndC8iwkTa3eQTbWBx0BjreY7k\r\n2uYuszuY+n4UdFYjJefhMf6pjEV/IKqQUoaMpZggM5yM22ONw9QKW2eqYhK1\r\n3UaQK2yTy/2WqJO73nazRItOuspWdm3F3O5aM4xDeB/qiKfF53ItN3Zqz671\r\n9op6yjRDw3X3JTO5nIex80u+bOrLV4ImMdQ0uiaIvqTCIpXG5ZFQWXj+bNPw\r\nbk58Z584+19cld4Bq9V802H1ObsqOV/Tyno=\r\n=v/1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/density":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"15.0.0-canary.b18a873dc.0","@material/touch-target":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b18a873dc.0_1655188221984_0.7092849164406549","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/icon-button","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ba9c29637.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777b707d882bf6e78883300f4655419efa8d59bb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ba9c29637.0.tgz","fileCount":40,"integrity":"sha512-RHvEZko4r5W2p1JvJJVSiBNuESMr+Rqu++P6dg+CqLwTmyMx1ASD1nrlZqiN5cD/4SU6ChzsMDKX4I1rMCabkw==","signatures":[{"sig":"MEUCIGNKwA0ks1y8pLshBCW3TVNR7Btep5OALBozZtBNr0cfAiEAnuWJK8f/Kcw//0GCOJM8Juj2RSUoWFDd+IzIefMT6C8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZkxAAmuK+e+Esv5QkX0LQk/lLxnsPWG8DLsUmPgXjPgTsUmnfAO+k\r\nAsjBPIK29yZIPDS3qzRaoGnFOEpPnnhjCvtNGqK/5IUSjNwhZ3im0pJEEM4/\r\nVNcxEVeFmv2/twDwOqASlXU+ufBJyKoa3H9op2KrpXarKG9RmAbL26wWtLrD\r\nGg9AbSetReK1m3xuWTKSnsDI8nJcOPq8maDvqTK4SpusDqhDtz5HoqKe2j11\r\nCvNisN90XFaQmPLLy/5Gun6qJ8IgXHqSJG+e1rgDSgV/4FfFIrQ/TVegPXMY\r\nm53JmSEvEG8e4xUCleKmi3HzrW2N9h3utURQf1K79IRos8Fzbd1oAuTMWymK\r\n8+bMxVB9a4HQEQYbzD47OIMwc+ZgeARI0ktm1xPm9b7BqAL3L+oeh22mPfvX\r\n96LJKeKuiBmOGPFFYKFg0o/l3vW8dz0S46bHZwYYPlAK8Jv0xZfead83YUIp\r\nxLo4AWnQGGqlASWFuFmJy+V38cwHQ23TAUX4NtWs0CXq0x1+uJIltOuRbdot\r\nrZ3RCVeJNi5YNVaWi29bob2FATgU8CsYHvNKgRDg92RGxH4rzVg/LYzLDtxX\r\nVBvBYJN9ouKalCgU69bj7HrPlD5szqmuTR5aufub9z4p1CaIKLvZZHtoW0Ku\r\nlYpVSg0iwUY1li8UBzbG2H7Wb48Xtk+pkyI=\r\n=LenH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/density":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"15.0.0-canary.ba9c29637.0","@material/touch-target":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ba9c29637.0_1655233079773_0.61146006937394","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/icon-button","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9bfd12f01.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72076db563a3adc25b0ba0780a1d0e85e5a83dc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9bfd12f01.0.tgz","fileCount":40,"integrity":"sha512-13x9AyEUMMMNfAMYxKlfIV5kLNrW5E/lUfUsSWaR6EexaKYSiNFR9Zn6/xtCSNJHZvOmmlETA7rkFlwRM4I5fQ==","signatures":[{"sig":"MEUCIQC199FZEitL3AG6cZ+zuYW+VRzG/1s9gN7JA8iweK+zgAIgP3NGA6Vd5f6tNXga0myR5mSdG0Lk9K6/K0zrY9b2MEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmlw//X/IBTqvfTYPhTyILm5LZlTixfkdlOpqMvKXTdZkpe02DT3Rv\r\n8XWMRX2KJBh4gYVRRPIZeoXdsLA7Jf/tjtZ62R49K6ml3BcET7DyQjiTR0Bo\r\nONMC147TSjv81uQAH0+NXyTBiqKUgp0b5GmG0QEPXr6FLJ8086zpnDzxh7ZP\r\nUdRDvAsqdJEOJHp5SQidy8cezBfrz3Ld7yXjAJgTDoNZoaH56zI1p30ZgADS\r\nl3mfX/06SpG5dVDBLn8fHFrG4eTB6196sfkXzqPHSxsKupwdJVzLMcTpQBd7\r\nN388Di/zRUH4IwS8YplWDCcTM0YOm+1H3rXaTs6SoIhuTx0g8Rz3PxQPBQvm\r\nGzSIA0rFEGc/qsjQgwIBqeIBxONVq4n1kbUB+QnsyHrRYA8nh63xKR7eJ92S\r\nVTsjOJe79iLiaJHNzTV5wSF8EEPAWgrJLRY8i21DHfYYPueGMVWv5e0YvJod\r\nqdqg7EuB+871TUYWkeEeUhoZjbTHuTfYsJVsE5kvOYb+FNkHLKizTixlHH4c\r\nLIdhs5RtTYzhdMEO+gWoN/ENBrHkBoA72XkRqSwdr1cnRSPwu6oN8aT5UBPx\r\n+qwSZrceMtuo9gR+1PlCy0vE1AFnDOvm4sFFWdnVponsSsKDFswL46H6IE9+\r\ndqGrrw08NkT22TwcpSF9EbZyJHG3i2Bj5YA=\r\n=1Z4e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/density":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9bfd12f01.0_1655925788574_0.5797874056126167","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/icon-button","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.764de225d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6de179f4abcbd6c5231e421931bfb0d1eee20cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.764de225d.0.tgz","fileCount":40,"integrity":"sha512-gx5EZgebEF5aPPfqzkeh7I3je7EviOBTWfvhKJx/l4R7FX4SzrQdH2RyMMxt1SWkhxvnH7YXQl66BulHTSL27A==","signatures":[{"sig":"MEQCIFQlINDIjJx6W1M0prLzTp4jtna5fdG4d5zlalDFuiDXAiBFUmJD3JkagpQbMWi3zj8KRjEC0xzh6zYdO0KptioBNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH18ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb1BAAiKJKky86iXj9HDT7V+frQIn9fD2bmVC1VBqCcTTqYn68cmfY\r\n/CWViXiK5tfh5fomtmuLv810wKhGNpbUkrEnNFe6WPBPQgaoKNA8mhTt6Zis\r\n7yvlOfLqX88W2D3O7wsCLElB4rCZBLPJAo626LqxzvMrwBxwq+Mf1wJ6zih1\r\nMLiq0W/6vdV4RsW2zPEtCFVf03FnUgv/mCYO5TjVBC9okWwMPPlTDpa498UL\r\nIAOLzUdd1rPchdKmZdQZ0mYqJPRXhyDC5AVsOsmZNU6Bxj43kV3oD8au7sn0\r\nP3je3fH367yYxqftY6K1Wo94AqWjUZMW6keJw5hRj9FmI0z/Hf5Z1IRW33nG\r\naUFlXvMWcitDbnsVqn+Qaeqkj+Bnv6BGnNqnGiMWQOcPO3ONa65QM5OmA6He\r\nytQLmlg9RIiBf/1baswq/jht2FBrqds6LMf9G+sJ91/OMq9du0+bJp0NtpBU\r\nIxLGr7WHf9sCpeE94hghtgR8haZVKpp2PORF6eUW8vIgnuXV4D/twiBTpLHD\r\nTII6PkQrRfOOpfLv87Kj8+DfDhjhRt3dpyIwqF4c/5IeGR8xxygdQU5LMvE7\r\nVLclbaO6ugo5XHFqBrKu8CaedN12yiekFK9zSrKWsOrkGE6Q+dFSfLmGrApt\r\npl022hsLFhE/cUMaPnFRvwFjn62k74vtqZQ=\r\n=wupd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/density":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/focus-ring":"15.0.0-canary.764de225d.0","@material/touch-target":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.764de225d.0_1656520060006_0.9088636314262195","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/icon-button","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.31e517cea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"413fcabcf75ec7caf107b50c1c0452c03d765df9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.31e517cea.0.tgz","fileCount":40,"integrity":"sha512-JnOJt6dzDINyt0Gg/QwbNARp4IdabGD6EjFHfFpBkx58ozXRMdS/lgPcHOR+lHpuppmw+ziL2segQ+pXhKfk1g==","signatures":[{"sig":"MEYCIQCcsv2TfjlEZOuVVy0DbfyPndubN3EMl19fx+lhqZ07kwIhAOWgd5/rCQGfQm4nG0TEi/Lh5X76bLf1k2Xl7z4p7YkK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi7A//Z6Z3nx/zinWRkI693Ey5dHQUua/yHDTQ1e4mxBRAj8Bugpkz\r\n+sdVrKtIc8apuN76509GBreO01nlt2j3SPGCiso+NBgZMzwIdLJrq5PbF4OT\r\nVJvdtOavrdCiWdmduCvfiOlpVpNx/sTwSzhlJeNxdRLW5/POoEf1KIXECFm3\r\n5LHaS6JLHLLcd8XQawo+Hn1kydh+PpeqpM5PuZlcXhZuja0eHo7aIzsyP92A\r\njm9p4FlRcN3dKpaObrEFzF4AhlMw5lWcG76SPSiZJf1F+sswOdZS60zJINEq\r\nGNGR8KqmwqctsXjxO5PL/NwxmuaIGWjQUQ2H4k6F/hJXTPet1+/S96cZl2Tj\r\ntn5cp57hTkIr5w7EWzvDngujoVSGwkhEFN2c7vJoaoIGvWqTErRVQF/yG9cA\r\nC+E565wFVYYm2cWUeslb6KYJCbtl4HTDVOHOettZJNbjejRpDsvbwyhctRbl\r\n/ngwUntzHUhUtBxM7CA/uTiq4e6Lpl+IIjj7NwHV8yxPncc284MVBK85lUTq\r\n5ortsEXT/w6WdURFuOFT7xnWVLcG41fHK9TdvubtYrsgJH+lFxiIeEi08PzB\r\nYqxBqo6Ktelnfb+zokA3LCrXaIz3SGMZ7Z60gCJ+ycsnN0t/neKXrsMGYWti\r\n/3ujVvHNTPBNqAPJmHqeLBa2plM5H8z5Js0=\r\n=t3+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/density":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"15.0.0-canary.31e517cea.0","@material/touch-target":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.31e517cea.0_1656700140597_0.15454862198208974","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/icon-button","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9ea4e8e9c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cb62d03401f3969bbb445313430b99e6ffd8d24","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":40,"integrity":"sha512-9pDbcgpyOFC5l5CCn5OpE0xJh6RziyOczVKGet9pbimf+3Dcn80tN6XcK9jqZwY0n8xWJsZ5GesUWJzpOEbBUQ==","signatures":[{"sig":"MEQCIHwpcTLN3Z7ZoLL3RjbPWm8AdeR2d8YD6d7qv+FM9hW8AiBVpqzB/4AOT8tOLzrzIC358V+fiTtFTeYp7yP2DOT8Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqokw/+Mnr5alQQ2rQXDLynnd7X0K7yZwWYUR7U66KJ1LjTvrNbnDwn\r\nHSRvRxRqUhceHXRb6lA3HUx5zgifSSXIkC/S4M0WId2NFIznRI7Gy1CktrRW\r\n/nDKd7z1UQPTLOHjRrZPP8C2wdXpYcVS/eDGqDci11EmVLC0OUbrup2PWcG1\r\nVD8uqK+peAGZx18kgiTLs0slgAtCJI+9DWv2vnSgKXSnf7m3XRIjDXS1Nqq1\r\nYxLd6rOyvg/bv/uTua9D1NeuPQsSh0ZiNHPFLTmBSLTk6Zl2x9he4i5ZCIqr\r\nUEmkCglEpa0HmkbRCHcW6M8Sb6C/iJcU4NFLuijrRXuphJn6ecaSLZM+jIWR\r\nPaJ43U7+oFcoWmW266UdC8t2kjAq/Rq2nFjWvCmDAvIrI5f7x+apr0YQbY9K\r\nadKTSkIU4SFiZUpEmIbViwmgNSHOq8s0b6BvBHf9AxdNCwm/YT612BDvYJEe\r\nIW+h/5MtPjZVlNiQXQR9W5uB8082z1Y+SOHF0/jzR6Zdg4om7wVnyJ76vx9U\r\nMgjfmECZDInYk7ks4D9vKQDQjqV693JAo758DLxEBHxe/zw3xDz6Mg2AJQOI\r\nXZTKDvh5OGpgVTFz+l5VckLKNoCg17Q/7sGmB9QIfs5fHfJqo13/IudnW3KF\r\nJbJ4iuKD8651Y4xfqDXyGDJhs8YvrUnGGEI=\r\n=5hUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/density":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9ea4e8e9c.0_1656716134399_0.20848938415924034","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/icon-button","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cd5bafabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745c654eab7d8343031ded54f344706d41896fc0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cd5bafabb.0.tgz","fileCount":40,"integrity":"sha512-TELT0060q6vSLHrGvnWUhn2umEfnF689MjyjTm96pJ3J/9Wbb9icwNJ4oXDbGuDhZddvcwENi8GE7Ys+VkCwSQ==","signatures":[{"sig":"MEUCIQDHPNfmZtn3+WlEMImfrRXslXRYed9omn+OrHFPadTYoQIgPxaE0hDeJdi6zSYp77cwYkEQZh28CxrU8DYMn+Gncto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcx5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFNA//VMjFB9k/DwaOa1PfWM5T3NK1wh77PiQYZ0xLNajfMPiXjW+s\r\nBax+lA/cF7xVo2stnDrxmqszmuUv9N4iXg3vZfzRJp0NL0ZhpngfI8aVbXXg\r\nRfAQgigR9aw3sK+rzk1EbFaUaamj4O85J3GIOtkc2BHSTtu6hxibGAvZg4QA\r\n6RxObyhvLNzCbAYymxIdMJ1Bq1ijy8/wFNR4TeEDZy7l8jplnspbaq9AJ0Ag\r\nxS+ThhBdTl5JqfAtyVLETRlRqO5L4h1+asY9FClSxF8+X4rqEe6ouCFeYQRc\r\ncykYA5VIadm284VDdl1KpmFzdmCH2nvqWiHQdVAmlV66EYjVnoOJmERi8DAg\r\ncVv4+01RLmHJmH+QFNpOR5fF6mrv9WR7JImgCDx684MivksIo25ipjft1h8F\r\nhIV0GHfjt7I5hM68A8ZapdPZhCkNAcIgFOrMyqiOGXIFSX0BEo+MXm1Hwg/o\r\n5wO/EBfAyHISWIWzTdd3N8eED/+BNvDaS425StsZVbNUOw/W97Lfe2jT/cho\r\nAt3cpnDoS7HEpqoltl7XfqDYSSQqn3JjXGVHMkL0p0ZJfYj7E40a1CIglDaT\r\nU8EofIj7L+IxBSnMQ8NsTqeLJLrD/SMICuSCP22jEQQzesuK1L2R/TsQXu7W\r\nEjpXFSx9sLeVUn3kxa3WsRR26HOwC6PIRvg=\r\n=QLWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/density":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cd5bafabb.0_1657130104763_0.35269273260510325","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/icon-button","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a02fe49d3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb4ee38edfe51f701f7fe095dbe9ae1393197894","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a02fe49d3.0.tgz","fileCount":40,"integrity":"sha512-CXRKDRMbbFAltmcrSgkKtwFPWIdn1PVBk4PMmjiC9HLKdc+A4o4+cGpP1qFqV/Fix3Dii2ndLckN0FyzzmDEVg==","signatures":[{"sig":"MEUCIQDbqu/ic4AZwy7+Gyp6yNFCXgqTZkeBtFhtk3J9dkfkBAIgSxSvTs+nZnMwkrmJ36IFXspN67gmW86oHYsncmTC53g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdm8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+/g/+LT1BbJ4r5OrM+0XUHTR+XPLXrvop88PBBlVKlUTu8t3jaZmH\r\ni4o866zHP0KlLM21gY2upqG7642aPhL9ncr9exIcO3rE4Uvq2ArHjlnSAv8v\r\nNhDK4a+8AirKTZAYvzoGyCszMi6VCqdA+ri1J8ylS6M1gznfRANyGgJyiJEr\r\nQ1lXQSgyuR1maHuTsU7/COvWmAPvK5SNrTW/PohbeuS7BasHM1sD5ZbXs7yI\r\n2MSdA9LJpXQTtyKRI7rMXafZiWURRHh1WsPYZ1Jb21HNd8YOazrkjgAtYaCr\r\nSdT2lExuxFHULAW9gYse/y9Dqnubr9xJeuN5xnZGNXu1ZvDRlQJPJU5lao0F\r\nSTDjN+i2bR7gJsZoOyqBm+hIyUCvD6GnCk6/B8Q7NvHsNsVtEmDTutJlCOzD\r\nPgupUFkpBwmqyR0AM0SsmFp1yPgrEXcp4ymE0Gux8YLW0qmB+zb0oWQctICo\r\n4vYoFKpfYYbeCkEiDvo5e0u7stMISt+v3MGk+7Vj6OdUINelrAIqtd0dXz79\r\nB1J0t1QErmiTm6LwQLuIMhnM/Bfaq+0ktI/L6uCA3n8E70WkDZSkVO4gyqqa\r\n7fixWAWKQe7SyEgj/gG6H6lKjjmtKZoRipk1qlMX68hNvYWST+yOiA3A1DXZ\r\nIXzS/8UvYNuGWxHIc8NH0hvFooS4EU5pm0E=\r\n=spX8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/density":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a02fe49d3.0_1657133500062_0.4914149058535171","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/icon-button","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.826a3d8be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c05eca1233bfb098dde5e3d33d93b95263b5ae9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.826a3d8be.0.tgz","fileCount":40,"integrity":"sha512-GQt7EgwCFzF/r5cMyezBtdbVzuE0Vy6gxxVBvw2rdA58LoZyRJb7wdCl0nacNBevsRU92WLZ20nwzuXfuhIRyg==","signatures":[{"sig":"MEUCIQC1u9r+vbHM/7NCwPD3u25jUVTV0G4VIN/OkQk3xaQo1QIgBiK0RuGBNzxaC6o1l31HtoJPJzUJIquXrhExbdJSUHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8bxAAoW8XLFrQIIigLJnb14DXuLZWqBvefeUKO8K1PjXAQ/vGkI/C\r\ntIy1FyijyxE/2bJhZscJkGDUB5H0WGj/hk8aDOXJFDnDI3errlrgO1w6TpwB\r\nrzt/A+6GcjXpqafOc7Ix1MTcSwxfKLnX/8UcPARD2MGRSgtKIEDaujM2So8T\r\ntdz2Eb0W8nS6ImCQRYWb0vnV/Hl4NEjK5dQPPcmvIXxY4JLhkNknuEyKGKjn\r\nFmi7Gv0PbdbW0bFsaNIFQ1nez6xkYcKEcw9R2VkhI1qoRWl+s7aCgbm7Gh6X\r\n8ju0FNfQN5c1TqdX5msiip0cvXN9oa/GEzPUSnDVUBu0qgGL8qiWzwp1PdqI\r\nJVKMj0cujVDBqf3BTge2E6BPbt5GfsGh331VE7vgWqnm7IFpRgg+2T7+uqLU\r\nFtvDE91m3H5Q3Kc6eT7EKFDy8ZDZPHzBZaFn+k6hwMyOrdqQyTzM5/72cr5y\r\nse80uNrqI5IVTeMKcWxoocnJF33cm+AIfS2pa7tLCbEzJksxu+cv3w1Wj4C/\r\nuD945oh5fFVQoc7h/Y6U375gChO21FozeojPe+VUfaFdGC6lGcIZbbmMqnB/\r\nsMlKvnxC4a6JQJb5TyCFNPoxmdSjY9OUX8yNaH9iLdTuk0B2T1RBZakRrBhK\r\n8AIeJAeLOjjYdhlPbDLEgSHCttoVdiMTcdk=\r\n=b6H8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/density":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"15.0.0-canary.826a3d8be.0","@material/touch-target":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.826a3d8be.0_1657135898410_0.22894217710356513","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/icon-button","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ef276aa93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d7c712e3fa8b390bfec4a50f8a9b746944e2ff4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ef276aa93.0.tgz","fileCount":40,"integrity":"sha512-mwQD3cwOrEWvCS2OTvqtVHQAybFWomyyzNlZdUhYYtcXUTVwjsG1b+dWmhHEQXsrdY+/AQbFlByjiWjXlRJDpw==","signatures":[{"sig":"MEUCIQCr48MM25X7+rXerSyyApoP7XqhebBg1vs2I2I5ZOJUjAIgGlsAfmnwpaiAvDVA3U2YwcZom7b+PgnpiaR4PFWlNt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp31g/9FRtssmL3AtK5zs6S2jT89L1BdCNoj31cVudbZgZG0CsVQyqy\r\nijhDfyOUoff1xSVDveUuQN3gJQZTY74r5vcNt1jMBcQxcHdO5aSQ3msCFMWm\r\nkzw+IyFt4mCu4meTGJKwtYPuOy21ZLlqBKmdCpgxl90zt7M8fpn+/exABEUK\r\nWdgZ/i47e9hmyFWEi6OvRvxPCAUnQLskHJJJP3NqjvOI+QmnwTdZEmpaFryC\r\nDckFsBtvBYrjSAz3fjV/V3awIoeXPBHqqtdZ1gflPhHQHu97ijlcw5JEBFc1\r\nQW7VY+I2t+niwdK8b3EvI9dUDm2T1M/3c4qBVgtv9LUMUbGnQ9p8oQfokjzY\r\n2Vm3BhYy1uHI3UBOnE7vjADwszWXSa9XizvuuPHcrWsO45odAFr/QkTBC0XF\r\n//GAYH/VtDehnRZebfGeWVs5lu2LTiZzhngzFTIOk5or/GVBNdvgVE3j9uPF\r\nT+fkB5gO69L6zYdvjARKmYHmAF6xpbb1XMlWwkWXZDeoChBIciX1orRrMlSJ\r\n+sBZUk/PqWcFKUNttfq5uUBCmaPBsuSO5m69Y4wX0bgvl+rv81fFcGYU5z0j\r\nzvWZIxuWZdeOYsm3sXtKibspspWCLhDcDXDJwOgJoQ0x3Qjdhfzza10FHA2W\r\nkgYrsHFd6/94qnsNvt87b/x7zyuzmxhriDk=\r\n=mwAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/density":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"15.0.0-canary.ef276aa93.0","@material/touch-target":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ef276aa93.0_1657213396018_0.44306939582990146","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/icon-button","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.59cf61d6b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a19f913b8c8af51cfd90b0662a867b894eb6d0f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.59cf61d6b.0.tgz","fileCount":40,"integrity":"sha512-sEsWtsJdBfq69wpviFjwM2cRM0XcxhP9iv8McLaUOUEHU0LbxpP9Zelt/ore+i/6hS+2uJlAkdY3SXYGlmYqRw==","signatures":[{"sig":"MEQCIAQoaKwXTR9NWgPz9P0F4rnk6BeQ3XeH1U0MA6kl/wINAiBomkV6PeJEnR7sW0ouahF2BFpOOegyaHTl6Mx/3Mj7jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYEw/8CQlvCXn0PiTpX4yEQBVZb3tnG7zohgx2AAo5NncePjtlLIdr\r\nv+wpCywUKI4pXUyTh7u+IBjYe7okKn9KX+V3Y+ne2Nhf0jYS/zhrV8R0ClVA\r\nJu3cPleYx6ExBBWlsZhbYxlv2a67+UNdSrPbvE1K7eA8aGCjLCMkVSDyOLeV\r\nTeRDOOclfzyPdEc7hJ8x1l3bxNSQ0wl+GX0ZhJFuESP227fhD+Z+u41shpuf\r\naqd0yFPIDl4FM3Zr2ldGPyaWcYwI0FoXgpxj7XCl4TKCt/DiA1ImjAZE1Ufg\r\n+RYTILacoveR2VpwRb70R/7cSgkQ0oajMAI8EMZVkpJVQQd5Ui7wwbX9t9rn\r\nG2/NxD15BUzFXb/MtaXEAh6iVJSxdPMzTxJadcFVEsFI8qW018vGEFvE/1kY\r\nLFB+l08Z+mhKI1lNN3H2YVuWtI9wnobadsPaMpvbZcC1E1xWEAnyxYn86YeT\r\nW5AqgRKIKMCG1C4Z0A1pu6bHgGi0nlz8UNYxukWOzd8NKAfZzSA3IbBWLGcA\r\n/SfOkg1gX9QP+zUwhGNMEAg7Kq8Q4XZDuqxYfqfTyTNeEoyjDDpsq8EMR2bJ\r\nEpwNFiIcfWJOaNggmlUqSMWF+lea/D4/9YDNJZiyYCd8eWNPCIl1OXb1nBSZ\r\n7O44ZmmHF4ZDMHTcmC8jEZwXCdH5rY8jvp8=\r\n=5VLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/density":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.59cf61d6b.0_1657215122158_0.6619518746026087","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/icon-button","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8647092f7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d1dd78b4471a57b93ccd97e3618fc627a8e7c0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8647092f7.0.tgz","fileCount":40,"integrity":"sha512-qzSjQTxYTZQjW/XgUXOmXGEqAaTB2GqzXYlIWbemtpWkRf+jscNJhDK1NweiJwBc7Qun54wEiV6pqIsemnJhEA==","signatures":[{"sig":"MEUCIFIFB33YHfCyYJp8SUT1fKiOwKJCcyZrltVFPvsElXHuAiEAprR/b0Yc8jT0amJ6ilAkCxvxsv37OjXBC7iIuX3TaQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0RzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/WQ/+JNHxO+1eIrRiFb+BQkQsiPhy8lyo+d0LYZUuwb23h4fbDKA5\r\nPq0IKNgBai+RF7S3ESiRgnJ8j1PoqK/FpGo1Be/m5ar0BH7NU5D3DuEQWPzT\r\nTlkD5IAVW7nMVxA6xDJ5euhDdJJgKZIh6iYQh+q1zEwmJbnNlajvOLP8zjL8\r\npQBFVUzG97Rzj6QqyeKepqVAUen9qBLzs1igR7Bca3/1cNH+NgJoaDRaYjfi\r\nx/9oerxDmxosA0hZg/d+Wh6gwcJMmuAmqt1GJKL7nIosqihMdt3JwOLce+4c\r\neICKHKyxJBXVa6tEi+JKyvwShv81OOqFl8Ey+mfMkJMqo9CrDZaxWlxBqE24\r\netvcogiBURYyQdDgScaxd/p94Z6fwed43mU5ICo9mtWDaPNn1L2srVjimYFu\r\ntqFoHGvBVwBjs3QUDSK09z0kvzFdCU5zjKCXIRjQEiEIIqT6mylBk61XFc1Q\r\nEZZE+2BphteTfqPHdrMGqK0lKUyHM9RveqKreyacncD8SXGlwE5NGciW3+wD\r\njS5hk90Uit0eMZRCiHnzh4j922X0itBunL6F+3VvOc3KChVHWiSBnzDaMbsF\r\n88hSsrtEY0VYOkCMoO3H0w+6TPAT7kyOIaQEGp6rjQUuIqIhEgt+udAqWF3e\r\npkmezU6uCduaW2ZGPcvenOWqE2J7pU18/Hs=\r\n=yC2F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/density":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"15.0.0-canary.8647092f7.0","@material/touch-target":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8647092f7.0_1657226355391_0.04721505750271349","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/icon-button","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.02ecd4d85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"812a59442f1055f83de49dccf9dd910c283d7772","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.02ecd4d85.0.tgz","fileCount":40,"integrity":"sha512-Wg1kviUQJHhNGqTZH5GgGnv+EAuQvSXixmKPU+Wkc7gszOaM2h1VKUxyBCqxiBwaOtm002acGLA4d2XQDWTNqw==","signatures":[{"sig":"MEUCIFmFtGZ2XRpBPHrgbHg3DohvTt2kLctIlUDSKiXA1+s5AiEAld9jr7TNcNlfuJnPNFqPaLC2IU5YO5lU3zrJmwj7q2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLyxAAgHeQ8H/sbuM2yhYyWXpQJGWLrapViUJugr72jEEBtkHWQMaO\r\n6WoYPHM/8ZDD8YG7RXx6F3Fjx04Nkx0ni/A+hJCQDZzMeFs2NeU5aW5sy7Ks\r\ngNFaCH4DZMNdFMn68sxT/XQUqHQcBDUplc79YC7unzL/a1ZnsFMfqYKMExGa\r\n3Anwk1qhBStf2BcLmEuX1HU2fOHVavAA0IVN+hQQ64q50bXoaKqIh1vzibzc\r\nznH9st05gyclclL9FP64ACAu3SRT9dfFq1OKhhUCoDURqt3vo4k8ferq6BP/\r\nIvxOAzRndsIT0Rs8Dd2XQVSOxrMndUh0QivrRQlAuPJ/+AXS2P4K4Ddp64s0\r\n/eUTd+QtcKFFQfQtPXnHHr3cDKv0crJ2mOya/ThF6GmPFQ73P5adbdDpHpp8\r\n91IGsS9IBpwu+vVsxgw3rx2IAg1dxYQ7/Wgx3bUzEjlun3raJnKgUKo1xLiI\r\n+AMBUUQrPMzsNXLZXFsc8Tz+WRh499j0864XAq8rf9tJMpe34qm5BTaBEM/t\r\n8biLvjEN00Yw9Fx3b/3YKo1BbGYGuuyKDboWfGhaFx80QWgwVopPdJqUNXzA\r\nAHbWImPwL0FFmaFOkzvQ16f2OArS+/N2fi4JT8A0Y8mUzGNmYV9Qz8uwBuZU\r\n5qHSEzcOjiuTMbhEzyji2dcHhKho4Ub6IEo=\r\n=zU0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/density":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.02ecd4d85.0_1657557593967_0.2664973755461344","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/icon-button","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.63d3a146e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d98b777d0ff6c07e978dd9f520ea52a4981202d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.63d3a146e.0.tgz","fileCount":40,"integrity":"sha512-vlaPSvNs7GkydSQOvUNt6OYu/vITvvzQu9o0Br1E8hiQcpzXEpy8wZ4FtZAeAUlHmHuZ1ULFs1jc/cdNt467EA==","signatures":[{"sig":"MEQCIErRlBpyUxvUSnZe8F0L7Iki0EueeE/oQDEz7iKXKC6SAiBnj1EhM1YFDu/EqFhfGiLDbz7FgZmX3N2ebp9JIR4CLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxkw//alUklickkrFwuULlms4x9U6W7F4ykhmFOQmUwTD93VvV8GBE\r\nUZ+7Q6wB3R9rGtVh0pYFFu7YAKm27i24BOq+fopkMpsA9Rj9Uu3bbji9jco5\r\n3mqT4st4HxpT/wBS7otnhkDaOMpSk5q9RdQG6khTwdagG/+Y5G7Zx770jtPY\r\niv88gBWpZrZDlMOB+0hpRyb6U1tVDlHAUYTy+bLKiBDVE4pBi6gn+beZ9SAg\r\nZM6tYDur/2JcOfZrKs5DOjaOIY6bafpo2gAWDYyqLd3dXI64vY7PbT3M5jGf\r\n5la0VUWFdvx3uRytw5W36jXcaF5/5cxdWTzJ9MD81427+vD7b2j869j9YhyY\r\ntguKZeSfITtxaCGlZ+5VpYqWDNSTM4jRPoX4tT6RyQZQB+Hfj+kywW4Tv/9U\r\n87ROR+odsNypUSZ+UUhhoJGZB2S2WQsBx4JR2Wf2Qb0nNVyERgENI0MczVr5\r\n1yQHal30BPBJmficsQwjDbWm7Ju0dsiez8mfm/VT5K+Lts+wSjxWEMliNP36\r\nRAbxx4MY141zICFGBuxEwCJWusyIC4nX5wQH4KWkiRN/gINP6LiQSNQnmiYK\r\nhLSTEzhVKcFgMSl0j5cX2B2wT3axkWM5hduQXAYJYEWHqM82NMxlNCL2QRRx\r\nqV/tOpVwUZb1XI8KaM3kYy4cy4KNSWHnP5k=\r\n=TADW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/density":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"15.0.0-canary.63d3a146e.0","@material/touch-target":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.63d3a146e.0_1657625859957_0.258629929174752","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/icon-button","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.88db01990.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9db2ac88520e60d99bf88d260286d5daf698209b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.88db01990.0.tgz","fileCount":40,"integrity":"sha512-aeFX2R7AwG8h3VWh66IdSKwiVUBbXDfQHPMtYWADi2FfqZcRZj3Q/1xgACpBchwNPBQ4ITFc3GmuSX6IAzqNIg==","signatures":[{"sig":"MEUCIDQBrHGMPm9usTTsJrMogGzU2/6jWwigHeqbdfpfy3ogAiEAph/QPGHRBmPOPUThfqMp3rqE4cfnxfMzXyQ9kT1ppE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPvw/9FJzWTDxxHzqQk5hsRJ0P9wQ9qkDBhEKgd5ROlRqnSNFbk4w/\r\nWbgZ2KS3RJjwYX1i7YQkjSZCjTqQg8KCslAnh3wOp/SePwNGYgZIzUnluOSF\r\nzmoL/8f/Z090r3zsXaryzFCu6Fyg+wpJspBTM1HBXEyrLg31VBCDejT+4W/Z\r\nqPzw9KxNPe2b61Vll6s00MDZXHX3HPx/2Nb8Gd+oUdjj482Btnc2BZZIn++b\r\nzwfEiSmoUfveEuk/8GTWXLHHpB0kQI99TBQYeAo9ZviwNGbWLSzQhC/aCcFg\r\npejjxCDuxuJ9xUxWI3dOV12L41B5kPvFB7j/NBV4MBMwJDiurjzMYAQlFTff\r\nITK9XqH4Zshf3YVZv10C0KPYEFVLBdmb/MTwFumTRUlPjMgiw9j06YMwWOp9\r\nB5eL3O91LnUoYVa2DRXcfjEDEPQ34w4dzi6YnFJ/KuExxWkaCv2p51+9STfw\r\nV3RKXBScsmsffFgZrClwwG4ULo6t0bK5TmXZHLeSau4LnsI3mYsa3NcXE0WX\r\nSkZHoOfIw14yywzWDLA+8Kn6wb0rCdinbZ2LrCZIrqH/BlCi6rv1rsWymwD6\r\nqVNUdZpAlVBN4Gd7iAzXhCV4Y4dYrU1X/NdaM80zmkz4Qm7buTC4GDXqylnL\r\nG0/tOsIAlNu9QsUV4gwwmsj9ecniP8xoL7I=\r\n=eYeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/density":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/focus-ring":"15.0.0-canary.88db01990.0","@material/touch-target":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.88db01990.0_1657626040826_0.8568281053021864","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/icon-button","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6432d8fd7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e62332ee9f4263cd73c122450e866d026c462af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6432d8fd7.0.tgz","fileCount":40,"integrity":"sha512-q0leVvKXmfDWkTAZWT0/gC6J7PLxxpDlqiNtqa5TJuB2WlQpVsF0xn6YBXjorxM3Sli1sknbNHE8oFuZLBgxOw==","signatures":[{"sig":"MEQCIGqZ1KlDZ0HjdJm+x4bQl998aEvA5g56/VhpF2pfnXP7AiBEZX9XSIZoebEdjZfwfptHnElRwsAUwkBnKcNqf94x5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT9w/9HMRjRtq9WrBE+EElwB8K2kBFaCoNCmWinUkoiKN69ErSmoNQ\r\nDYcGSMkHJIKfwkM8mEIbgMqzlK2p8IvFkimILsLbensSyTUiPEuJfHqGfOWq\r\nc3OM9sZ4wOE+TIZm7ZatSBOFHV8yP72chJJgKyaCD2MGLVadCPsk++sZDZYw\r\nKfZH82tHXuaRGj7Q7e5OjY05sq2Gr3p/olIqRUaLHGKqx4cVH0b2NKWz9jpR\r\nCXrdxpiHwHUY5ddOqMa1y2L2H2j94RZGvq0L+yZSqHUS5c9xht7321lqzNJA\r\nFHtpXJ4U8RhgSa+lN8cEu9MMbGaAdMv59nu81Cey4cKWRw/kd/cpLbrotFEs\r\nYaCK+v6ntNTkPa3wLRNIup8SIskrA1F1bZflX5bo7nf2bvuf6BmUk8WaxKfP\r\nMIknG9yPkMcVRcLirXEeBWoRTXesxXDkTzzR2j3KVuPv+sEFyw3A5zj6TBzz\r\nP7tkSFfQ+1atnVpvL+TjAtCwNtp1yxZxXYl6lRZyZ+AzTckioepJ/MmzMuiO\r\nyChkcA4wt7wgWtFN3bbyPkBgT2Q3SdEiEE+HOmbQ9Twiu6YvjtoxSaWcJ8kf\r\nTtIGAbH+9LN+T8E6oU1IXAMwZ+7B1wcsYqW3rRFEI6DM/KMUP3JbQIfguJel\r\nQHYxq0gcAocwo7KQtD6UUHFr7O324GLCrhE=\r\n=aCA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/density":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6432d8fd7.0_1657783773160_0.35333575401491424","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/icon-button","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.085f9b25c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5595b44369eb52bbf43e068747358f0c50c5d25b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.085f9b25c.0.tgz","fileCount":40,"integrity":"sha512-AgVFKVEMmG59il7sjj2RTAbJtctBQ6KRKTCzzpn+7e2IpgocEq2SIyFEWTJZ/+KvNeCfuw+ALAnkWrIExp3d2g==","signatures":[{"sig":"MEUCIEg2X4CJQq9Zt+TnpIrWv+LtD/FkIoLNyrG+2EYOsdp/AiEAnu5uMPmHswatTyFBGr5jz0kQPDFBK5hBVw0bJIbp/1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTIA/+LvbGT2tpOhvK+Xqh6ObDyH/TshYRQWj14IiZfytFnu/eWwKp\r\nEfJ7lfJBta40cvLG+6NTZjERS7IPJ4BzDEuGlNQW0UlXr/A6XVRaBRMeXVPH\r\nTpfkl/gH3CfmHE71ygH8QY7xTUrh/UwDqO8ldyHN7LMqQOQI83sqymU0mS7y\r\nReljTDKxKhiu6xq9Z7N3c4P5meIGm6Ycx8wpPJu4qXnXIpj+TWJTduYFivEz\r\nszRpuoSxGHx9CvNwvO1aSaJ5ohS6Q5FL/8Mnhfqgly1Yc0nYqbQ3ypm9hDz8\r\nkrck9LvDuLrCJijaA7IRPSg3y+ld/8qr+ZSDJGKMztdOHQca+Vk0ypf74um1\r\n7aaGMCgByhSBDq+11XbyH6twDchD2PvbffjfVVtqCmFMlJqZLxu+kuxIEZsa\r\npmtTgDIpEcBhWM5pS5qz8p9C6SyZRiOTv+49kr/IyVxuUtMd+nvHc+aS/LYc\r\nVaCQGJXRc2et7Oiet3HbeYRZDB/0a4AvIyka0iZME/Ghx+Yj31ilaC+8+qSs\r\nGFtz+wc5qsCeBFSKFOyAjHjSJoviALb6BwRdYH/eC43K+V3409H/dEUIc39q\r\nQlgu7SY9hXCVkl3SJHRoa/pmtDWBWE0ySeusbmwpZw89ypcB0gWCXnxAPcUs\r\n1WCFROF3ZJzZDAYcb7qN2sqe1veTQPPWWRo=\r\n=6ACM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/density":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"15.0.0-canary.085f9b25c.0","@material/touch-target":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.085f9b25c.0_1657816535068_0.4409056506785669","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/icon-button","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.39f9424b3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e772949e955d5bebcc635bb64d19ce92ef87be49","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.39f9424b3.0.tgz","fileCount":40,"integrity":"sha512-7y3JEGh6DiQqUYUo65bJhklq76StmzjOjZhuCHcuKKsAFiy6pN2SZheUbNRDiR7EoJowB8aBSO2K4wfBoNOr3Q==","signatures":[{"sig":"MEQCID+C2zZxmc6Kkdp4+WrxRl6nneEzFSgusP9E/ic4Q0pdAiAtTqwsc4ibSCyLcTQ6nVsAtvad1KT8NmYFPxKh52mclw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsaRAAkMgd+08E2BJ/iruwRM0bF0PQH5dHKFEEkAbYj9WwEzwD1poq\r\nRZpjmChifnKOYSfnzlROdD/8UwNatb2iEtCjSo67gaGlpr4Ph9NgoeW7Oo/k\r\nlRasbsct/X9xTl9CTAsVRGAaCA4UJdAkOWp5XaLN6/TDAawC0oZOxJWmIe7O\r\nnSvPEAsVLECZ0PShP4ISP6Xa/QPVsji0qNg2IYqN4tJIJnzXJ39CtqgwvE7s\r\nFs12zWp0qK3BjJ4H7JLom62u32oQ/T5Ype9b7H9/Um/SIrs4bq5+qDuxihM6\r\nFyk0J5SHl3bBOM0Qa999uffZ8FNlOe1/3debRdABguMReWj4MjyFvf8rCjxH\r\nDa+sHBMXhLU0ZFnR5ZJK89uqkJVEmjl5865czdeyIpSlsoNzpDhdWnjJdxA4\r\nsJcl7Cx1ug/knpn41mY+VaaWdzPSQL2d/a8bw9ZAn9cCqXNrAJwyA3iediJt\r\nDxJwfz77hyJSqvH8fQsqV0omRklINmX/WFaHOk+eEs4J1GQF8WZCcAGhgumo\r\nZ5g2Jbmij1TPy4FOiL3GYYq67fsQc8VmoviXHfEN4vMycq9roTHTBX5WyFs/\r\nxofOX5L++LK9MGj5VhoXb6d9qHCZg5cXr+CJcDbOmIR+muIrypd1PlETXlH8\r\nVeA4lUhFFxv4m/e5Ml8wN/TTa6QCVTnF7Mw=\r\n=C/BS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/density":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"15.0.0-canary.39f9424b3.0","@material/touch-target":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.39f9424b3.0_1657818352624_0.9568923229005393","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/icon-button","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ae9fce587.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db597cef752378da47a80830cfd982e5e5c6cb78","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ae9fce587.0.tgz","fileCount":40,"integrity":"sha512-gP/45toS5qQp7eEhqHGTQ2Icch1eY5D/YU9dRjZnqkdbWeSClBdevm8/lD1HIimVw9Gx9IyRTQjZ+Sc5ogfF+A==","signatures":[{"sig":"MEYCIQCU/7dh741o7lnXHNcDwAjBxFAKXkrHj4mlB6FRXDPMGAIhAK+KbsaOBdt+SeQ1RnsItFhtNCDkOND3rL5lDMNfaT84","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FurACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobcBAAjAw9IthPXRbB08xgDM2PLW0h9Q3ljVJDiICqShzEpwL9NeoJ\r\nbxWehRiK4oDRYj5SIZcYVT03DcN8OPamJ318zeZwBy+ThmclkJ2rM7BHjQmy\r\n3vR/X/BopHmcJfPKKpdWiGdsZAbOuCYkgZPfp1tJ4Gxeu54ah+pwF/vW3HfD\r\n3vsKtbUaOS1ScefEF78rexZ6kaGpgVJ96gm1ShJoH8zqgBtVnBAIxYBQALz/\r\nQ01dwmEjiNKYU96qmemVAY8AmicArqEb844vjsxcld7gyBqTtDJEJTjXkjv5\r\nU3F95IsCYMbWrdfk4fpvoYlwdtVdKeSd1X63cVSX7SgViuXfvjGMF7l8CfKZ\r\nEQlCfC0n5v/HzTSVJ7Scn7SFLQWdg/zOTFWoLAagomICVHXgpe62YkF24jw2\r\n+37qOW8tsl7BPIxTamXuZiBZqE7hH70g9KkUHR9TKm5Pp+UdiRzQkyu8AbVi\r\nP3J662q0WE+N0jUfVBbZb6jM9pwrqSRXSi98XlaEaeVgaNF0L/wlOXd4POEg\r\nj1SaLpqFU+KnwVnHiPEnggalROKvadQzS8vOrLEI1+lGa6E3qi3futuX/zfu\r\nOyqUs/gaYtQ8aIqqro+rReyaSj5AycrET1BWa0BtGPOtdwswo7FWBgFppph9\r\nxeE668wjJBs/MCtJ00LTNrzR6DLQ6xlgrzo=\r\n=OTIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/density":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"15.0.0-canary.ae9fce587.0","@material/touch-target":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ae9fce587.0_1657822123022_0.707463080596838","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/icon-button","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1ebddc343.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec6b27f4b9f32e600bdd43cc5a518b1889624a69","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1ebddc343.0.tgz","fileCount":40,"integrity":"sha512-ZIKkbj/TDLQO8DGjnV+PLgaFARq/RzhjAsX9RfSO2nk5e59f1tlEnWRe8i+Gdxd2LRHSi4cFX8o3Glr+Ckwo4Q==","signatures":[{"sig":"MEUCIEquu24pxkPuFiXYGwLn7QRSt1mPIqQYv2iv0EscQsQPAiEAlqdWmSEvMf753uympblQDUZFbSUW7J1HqWZabPr4gFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0So1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlhRAAn+8YflGiC8NIuSByzEOLP2KnZgk/IXYyEXDeITDmdLZ6iHrp\r\nUe9WfPkMj6Ju/2AOpgI2lXmk7sqecb1J4SU6e2y0rmGwCvF2TNOdN6OuLpjL\r\nsb/5TImeLSMLouJl6Pnva9khFcjwsWSff4jRP8iYLSLmXaoG6fJiVTZHb+aK\r\nBx6vz1/AxjF5pDI1g3XvdX2CgT58/WiaL63wVi79S6kPX4e971uzl0AG7XXo\r\nRQgbulgAo9gS81Y7w2YqBD82NFbRekJhSty88rnr0VONUGjo5MIoLwPRJfdv\r\nErO4ycBkqipjWsDq0/LcwkHmQA2S080VUOLTnsfiU//SUdUL13MxDn4EDoIH\r\nUkRqQWngkdmz+QiQ0KrCItctkT64Ywz30AB/Nk6s84v+2QnGYEb9gtRQlRdq\r\nyNO5Xono86IJvAjkaiMcAtWt/RU+3/CU5d1omZOZUPvmcVIOJIBQKjlrnk10\r\nE3FFKS7+ICH7C/pRCF1mXb+1UYMmF5DkIW6QkUbgszwqEI5YwVEdwqrCx98F\r\nlemHVp0uS0li/LbsZDMJCxHeLF6g0S4Mk9HBsjCK77JnbYidx72GqfpBklG2\r\nA42B8Gyl//laXBvtL+3BHV1VEZuJY0BHqNm4yJr+cIlPqyrc8O4AYWw0noAa\r\nzIgoRn3bCzRQ59wztNRi1bSFARn/jgFw8CA=\r\n=0Xnl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/density":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"15.0.0-canary.1ebddc343.0","@material/touch-target":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1ebddc343.0_1657874997659_0.5499870720673419","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/icon-button","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c5018840c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a2e16c8e698da133d3ebc659ec6ff61af50fff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c5018840c.0.tgz","fileCount":40,"integrity":"sha512-4pSg+CpAMQDnbcKOj5JT9m6/wTqMCd/mcy5ACFopT4JQYy648tiAdDdrLdqNFENdQ5A0r0Sm5fkq52+Ta9sWHA==","signatures":[{"sig":"MEYCIQDyCHnOvyC/QLMns5xng6q8uIvJREG8GGD0khbr6+b9gwIhAMlkaMfmQczJE3qKHSKKBieyW13GxufSR/D1mj/aQ7c8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVOg/+IdA6fXVvXbnBUMbTdYq1BUlWHMeagfbdvZjIe9YoSiHqdBL1\r\n4B39zptryONj6o4S29MPWaTv7cBSWlgvsd3OHahYMkY+v0n5og1S4wQ9LLtD\r\nha01KBc8mUHQ69TG0Ixw1NjSXpfCfdEOvrQ4kXkBQ/+Lh7OOiuaFp+P8T8H9\r\nTewoWBtE6+J8/oQjXd1ILk6jIfS+BjI4Vfgy54CeH9bqLEVpAIZU0v0QGBBe\r\n5nbODUlk7r9IR1TryN4wQlw4BzoGFeV9gxjHBs3tQ0tbNxn+B0hK50/qEmm5\r\nInAWLiTerwcEua49KiCu+xzhOU9p/xr2nRDzIPEuGf6xhthl1f1kZqSLoSEH\r\nylnOcAeNb6kl1e8toTeZKcTS6vEP2i1P5wjQ/lfGUKlgYd5196M7E8usTcJ8\r\nNIvXx5Pye/vBZnZh/Y60hev90m5I+idP1vqIeTNRi/+Q6AonfloFvxueYudt\r\ncQ0JiNri4JFcx4I7rUWfgB8lEiadFi91UX4o6/gPZiq6/N8mDmeCNGw2XBqi\r\nYmKuNh0Tk5Lai/MSjAbRDj5pUa7r6Lea9EAFw4D6XqjWTicF/CQPiVyd8ifp\r\nW7YgxvDaOEezd/J9EObxHAY3WfYExb2A1eeFJSZBmVbsTJPFPEm+TQGGChCD\r\nlauuzznVoronMwRTv3Pxc8YmWV9dg1PQT1M=\r\n=BcyL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/density":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"15.0.0-canary.c5018840c.0","@material/touch-target":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c5018840c.0_1658137426394_0.08057138378567652","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/icon-button","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.551b40d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcb5c9b03d49f31762aa71ae59212e59fc93535","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.551b40d18.0.tgz","fileCount":40,"integrity":"sha512-JbYv9OVdo9joSmOMvfyTyPLasNUbJxXd/yWOF61ZMVAmajnybhq/C0LGgvJHkG8b9uuiML0oahiTpQajyz3gcQ==","signatures":[{"sig":"MEUCIBLZHwqqOx7rWMHfx8eYUPxnihjibE0gBUxsdMfPJCisAiEA33ZG6zL7xvtlXKw7lVrXGqkynlBcEyry+HLquX1SwRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFdQ/9H9nuiOZf9AGkdwLBbT9fAIVCGvywFkJSxwFXjBv7lxW5Gk31\r\nKPmz72FSBYmosnVUAN5YJ6pz3ILsIiY+LLXKwbuOEaCTVpWdm935pFNg4VRY\r\npWAuNBYcYH4tBVYKlF918E2i0g8emKrKj19Hx++zKEso+UbOyzR6Xp6HXXMB\r\nOOzCJI4aOPUyQaCv4b1TjdbToCLwUXyDmU0T5wi1QFBSOqnCYF4gxYGse6ho\r\nziGgtC56TaxobTQy7UWNe4Xup5SRrwtX8n1YEr3Rk/SaiYpwYqkQGoRglOVI\r\nIxc1a9SUGABbmo6VgNZUfE6BS0EC6ulfQUnU73VKzTuiHBOpLLNp8Cd+xbr8\r\nVLFfrIgc0xSWhd5iVjm6UWg+BqHgdbBlSDjkQzkrxpSo1tzMUw7pqhcIONmb\r\nU3VLeoVvfbYrvpwDNseL8+8rmxrqP+LkTiI7yQipQ5pZZ6WkioT5u5aadz+I\r\nQL+EG8KIZ8Fkr/IThWvxlQC1WINOwhw1O5dnBp7jA6beTvO3PD733b+hPUxd\r\nM3JNMHvPfOT2iLZnhAALXbwt1R9hoef0SWTsr/fitE+p5CKy+rZj4iqFcOnR\r\nt8t+qlWkG40YA2w0m7lVqOMicCVRJuzPlWtBhaxv1saN6Bg8SA+ckeMb77F4\r\n1D/MTJVIBgoxZiXzcRD7Q+V3IFUzKDOyjp0=\r\n=gyiS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/density":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"15.0.0-canary.551b40d18.0","@material/touch-target":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.551b40d18.0_1658138503375_0.05526575052340821","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/icon-button","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cf9f12371.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"078f397103c439d430bafc3002e7add0ac01884e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cf9f12371.0.tgz","fileCount":40,"integrity":"sha512-u/Y71ic0ZHQltjj+zB5QL5w/t1YeQegmnCBIG7WpG5ktX7OIO6M9rXbsie7tjEuuscrPQnhSr/059U1nX3NB7Q==","signatures":[{"sig":"MEQCIHz3mSBC23/7YbyiSC0vhr5iz6eFNawVC2WnUOH7jiaRAiAgGEss0Q/S3UZul/byUA+GPO2f5gkC/T4Y6xghTcuSpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5VA//WCtLKaCYgLk+j6xMuce+qK5eHJHm5+u2sikn0ozlHOEB4i23\r\nDYt5a1zv4NTuspnB/drKyA5sSMvpyAdD/1oTBIcJiu3/Ho/30OrD8sfVpIqT\r\nc0EkT7+Bj2O64s/B8p61TnB+r3gDfJWAVjVc6siswLtve8Oyb4WrDp2xpXkh\r\nIy/B/6lutcXm1JZBBT1BfSX1lctJecZ4fPuu2b7sMlMNp+BlRdgQfvqtWdJV\r\nKTSKOFU5ds5oQuxhd7RNkqIcf1vhf+CqYdEJJFMA//uo+YD5zW9f6il79DzX\r\nG73j6y+k4mEZmokQEQW0cmSmj7msC+T3qAGHU5wmmra9RZgLhF+6Exq28BIP\r\nZOw5fjFep3u6S7Y6hjqBIpKiqkfiaOsFqssGSn6jopD47lfIxdeTGZO3Aug5\r\nS6SL25Ae5+0IF15DJjb+FFph2dBzgwYYdQm1maMa9o98R++eqbqHuzBHrWrr\r\njr6hMSRGrt/U2/HJLrTxSvUhVWo5kJ7iguHIaPckm9Ze4TFEBuhOVl+aQ8Yv\r\nWcU3HkU0r0yRcj/saYKqcRB8oUCCHiRyN1GpBMw90kjUt1Nzui5/c3VHUr3p\r\n5L5pdzkofOQEbcIx438B8PhnHiajoOsTYwsO6hN9ZK51ehKrvWCiYB96IyvI\r\nSJHntHw+Xt+mGRCVZxJty06yBjl2Nb9tSN8=\r\n=8rK0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/density":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"15.0.0-canary.cf9f12371.0","@material/touch-target":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cf9f12371.0_1658138741884_0.3121860348943011","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/icon-button","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2797ff8b6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe6927b57d7e3fb45bfeeb86dfc8d55127540125","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2797ff8b6.0.tgz","fileCount":40,"integrity":"sha512-Ua91xRCdcAe9iZMIWK8QgHdvWKXVyTBZJse4zY//5ff3ZXFvrHZSUMQlOYMoFcLkd4djvbrIr9BBdQaahvmgRQ==","signatures":[{"sig":"MEYCIQDlDVdZsFWQoTZqSu3IzYcZOjyjwsS7UQN2LMzTtrb/sQIhAIkt6C9U8v+tTx975dG+pTEvlhsUMn0i/91h53/KbYMT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+hw//TeFVai49PDWn6cYWE1YLiTfqdKiQjkXlz7WwkVLUxEFqeZ3o\r\nrlGQPQdVKkDjrma830VfqjtpWtmAcO5Ac/LJXloyPg5iULVulC1SrtC4hfW6\r\nkcb3O66NH2iW9vpPNE7NJBrQkDj2ikbMTCwELWs0zzH7WpcBAK8/t85KfvIH\r\nkMxGydIAquofwdTlk+rAfQttpRfqhg1iW1CLog80laYOTlGkDvevURxVudnP\r\nJeutOkLdMZuHk5pmW6iGKwPt7ijfga3lxw2Wyp959IgFu25u7r0/BQrehdF0\r\n84hWPXQ75EzTiAEHDsugtZJEOE/TVEvQyJ84JI5lucEhghNNLSkoLy3ZLHSv\r\nfi6RSVPLVW0VH1tQiAEH5ga4h6d+4Kg2wQeebbUs/5t8U3e63rX5wQ+IWgrZ\r\nw/2BtprRtXibyb9S1Nweq4KOVePlgtigHatLYEA6n7d8GQztsg8vrtGPnQj/\r\nrbGOfRFAUF9sc1tIB6v9bTNmFG8UFYLLojNzoIuKFo/jJGHCKjzOZR3dhlBK\r\nPzKU8W9SqCXWCvNKahGbp+QtaFeIHhYAmrBrd0SbMnXslMbfzbZXgIwq/20x\r\n60bxbjuVMovZRbH3yHE9Vx46B6D62at/X7F1K96hYgtCdjJSqD67E1v1H3Ac\r\npZaXmitvXsIEugFFBdV0hQr9GBAvAV/LQBE=\r\n=a3Op\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/density":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2797ff8b6.0_1658190286630_0.48403444056243017","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/icon-button","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.110fafa17.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b75c984de8260e470641e0c57dead5df7a834166","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.110fafa17.0.tgz","fileCount":40,"integrity":"sha512-xiC1BAPAzELs4XVysdyL/VHsWux4nXxJ0vWzVrkI43fM+HVR9/P8UpjlUh6fHiaTXQ4/rUvC+95LKFU8ZTuntg==","signatures":[{"sig":"MEUCIQDrmUsD/+cEo+pJXlP8q10yglbjkVmDmjOkIhMybEdM3gIgLZ1FZbiUReEXmSgffbwpHmB3Ix9s09jjFiKRtOeVgMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgkBAAky0NGGehFlP7tVKRc3aVEftma7ZKaNo46Ai4kWg2uDw8LKKi\r\nlqc3ch5an9LOg5S0SCouCbE7i2FumIQUHpqr46LIjNiDNpmAxQd7Xcxnz1Yo\r\n2OTY5Wk+/5M58xXK7fOfVRD3lV8/d8STtMph47heI6B4sGbfdXFV2PAH7V41\r\naN9ldhtVj3+Owhbz4Rd3R8yNBfCGMGZPsCkkgGlfmnae+rhBVXaMAGbuU4og\r\nPphyyV9O5OiRlS/q5xqG8Ty4CB8K4KYI90jQUNRJcFmHLkFMa0fovwY7P1n+\r\noNuznaArZMf5ukXEeDHyvdJPcctsMteSHi7I3b03a8n4HdUpHcFZx4TytdFc\r\nqQYvH8J+GAvFQxbxl4h0MYqtRV3+j28G+8ckRzfG1BdM4HgAm1SNaheUZ3+8\r\nwO+GGsBkwVGST6267VcySsATCcyn/f0JISH7238xm/nsXSBxB9viobphejji\r\n0bVLAgXxHuBXlvIBb6wCwvwOVEDP74pooTOdiw3yZk2DXuEvcBlve42PZzIp\r\neGqjeaXLiuOBnpd95jynggVF7SPQzAfpfqlfj4JYqmrwgt8b4kK52gzMC+66\r\nL6sFy6NbuJTa71Y+1/yz7Z5CfMDQeZ3ydW5kFSNpaFT0y9zKppf3sho1iJ8T\r\nVB3ypt3MxQtBqc3wW0QlFnJVWB4Zqsq/YRU=\r\n=btCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/density":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"15.0.0-canary.110fafa17.0","@material/touch-target":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.110fafa17.0_1658303238419_0.054195954477523456","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/icon-button","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.386ef1d2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68bc4933a3342b35d880f6cd1452f0e94d4a13cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.386ef1d2f.0.tgz","fileCount":40,"integrity":"sha512-0jJxMfdTCM7oA5vtniIt5gdKdUw7rB9IdMLPbAvqEkudecq1E0mJx3b8qKetaQlJ6AXs5UNgJiH+I4E6jcvnMg==","signatures":[{"sig":"MEQCIGHCcU37tNRxuSfyXtOKzR/rdgbR/DFQ7SjbNxlnSJMnAiBVhAvcCatLSWNDNpTWRLQAHWHt/7O/yhRTi5Dp6fhxLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU4A//XfTAoFYnwNtOk9+L2KUcGrBLZK3WRa1PG9sL1eDPnbuIdQqx\r\nDIyh9PwzDKC9Dt6WKl5G+ThJeRKLgemA7WhUZ+kD1lwsT5MwscdbH4nLPUU8\r\n1ymuTCcAOi8AHaSNBZbURpkBlE16dxvznvhFb2z9bOanbI6Jvy4J1TwvadR1\r\nCIIDKV8upHJBXu15UGwcTkavRwOapbQgsanVEYaFEq4PIzPZEGN81FRkV+mR\r\nlg05w85rHrzp39+jtRnwjB76PX/gSJ6eqwvpYXmPHiweqnCSPNZ0Z19vZHcY\r\nNagAlkAfUn7FOFzFiyVWre/2afiBhHnyvmZ4FUpYm+8gaz81SaYr3dXBLSa/\r\nUYQzVydjakCgX8Do2954r0/6oBt7Uw3aoqoD3Un1uusdXCEKsMDY9YM0tJ+R\r\nvWApb4ORLw7mGP4nlg43YjzrsDIyLov+k7OVoRdXyMBu2Uijg2XuF6NAPcSs\r\nvgl2290wkiEXGx9YXeUMqjq/2KxmegvVP7fg59UvA3inUMods2iGnxJfUM1T\r\nnWgSK53faXuycQvlCGyzW0ee5/bugPxSWXNgOWrlm2pSWp3o8tv2bxrosLAI\r\nvzkWuB2v8c31cAYCGHTqXdhcNLVCRN0Vtozs/9Lk7shI7xHxM5gdEP9gQRvV\r\niAXRFKaB9QhbIO4U9v8Qo1nCA7LjIMZu6eM=\r\n=WaO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/density":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.386ef1d2f.0_1658341223935_0.05883084587360887","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/icon-button","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c3924efef.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee968f12d1e41513dcd8539d3c5bbd5f904e03b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c3924efef.0.tgz","fileCount":40,"integrity":"sha512-0WmD62C1JQ+BLfhFjQyo/NUVWC5r/ZorbzFbyZBQbN2JCHbbiJQ0FZgQfLKN4XDoCxRXSh1gh+8MmIvuRd4ipQ==","signatures":[{"sig":"MEYCIQDV3VJdbEob1wcfM+yS2E9WBS6hJEQfL1hyeTgiQ1t6UQIhAPzRqi9ll15NaQSaO1pQLk45S+pQuqcR0D+OiMPePygN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Em7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVNQ/+L1QWP9w45uyCMkUdW1oe903puylHuoG2GkVzPKBm/x/Ve98b\r\ntQROcsCBh+aW2RCOSXqTcb2/YmH78SbY8w6+AXzoZ/VdC3NDRwIUfJil0LWb\r\n7yaRNnbC6PfV4DQ+lTsY1oN7PbjtSSxWUVkzDJjn4l8BL70IhQ62jsL9S8SA\r\nBhUo6+sTdmBaK/8fbC9KgcA0kgi5vH1867eeWU6rHU/M0sKsjSyfw9zKx/RS\r\n5W9pKI8g9z8THIYEI0HnUmN5nRGgR9iCAh2of2yb23bfyhZWNK/qPvSVothR\r\neEsC0uyLFc+kwM+RUQovH1T13+nFTihPKz+52ajhh1LDqgzIcBmSHISNDvpm\r\nuHiGs+EcQgWcRwqn1lyGm58xES6HgbRdbVF61gKYqdPP9Qs9F1ga73xKmz1c\r\nHdV42ZyXCrzyeo/Lgi12yRU6VS84MYKBf7adpRWnImEFIpt+2xjuc2uhJFZz\r\nOz/EwYtGeOVZlAiOUal8tPdT1z+9XZzBGoHbFe2XTLEaVUjK4VfYmGeMSNWM\r\notyv17hAULwXH3aNqe21aNi73R4RlB2bxl5wo7oym8y3E87ZSF4eaeVQ7wdB\r\nwXrcc6aneuusat7i2uk/wnOyxPaX9zfGAyondh7YhWI+/9NXn9x442sFzJPN\r\n0S0wWrnKr+SXc/haMuqF6K3ps6G6xSESmNE=\r\n=YaSi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/density":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"15.0.0-canary.c3924efef.0","@material/touch-target":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c3924efef.0_1658341819067_0.41902047081263016","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/icon-button","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cf5c5907c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b20df7c570754c64af809346d631393b94b5ac61","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cf5c5907c.0.tgz","fileCount":40,"integrity":"sha512-O7hMFVfZQE7IF7LcVZV+bW+j/YUVRTY37B9xadbXOwLrOCrUuGlktkQSeiQGrORlEoIYkthIX+1VSHdItPJhbA==","signatures":[{"sig":"MEUCIQDwjVDm1YulpGUot54t2lYEcOy+O9Au3XqHMVi8GSW32QIgMf7ElG0ZgZfVWK5DxhTmqYVx5LFLvHjUuVH0kM0JLws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQmQ//fUPUdCNiLicg6tB/550uMn+RVDY6MuJsvkng1/XniGcYyVn1\r\nbPGbwjXzDM31wK2V0W98/PE3uvXWG8ZifPyfOQnc5CBENGu7Tj8skI1SKR1J\r\nsge1mmj+a2kmHBJrnjwP5m/T2JrseipZn9F9TNlKtLXmJsPk86x3I0QdOkAz\r\nsH3GdyqC+UK76+ryrhlCW7rsn9/MtlZFGrIjJjXsuhMPCYZTDfab/a44CO1X\r\no7rhFdPXNrScQnfBaV5qSB9DJcuz36OYtlph+pmDmMAJQIXFMmCoc29TC8+a\r\nKOj1iwNIatI/CqNPHxrUek4jgpWt9Vlj4H/gaHmVNZ39ge99OA+nSdIn7So7\r\nb5iQCTHKM/69xMZKR23+YZLDWNhX/RX78n+yo8MPRRPv7wn7wpIJY0Vp1Z3R\r\nVwtDlz5sEtcee6vjUm2eWCfhKBm6VsJAqof+gxa9G7gBv88OK/StN3R16voO\r\nYoINjVdUz43yk+fU/LKdKdL+ZDnKSe1e308CdgXqNgqD31Xgjm1A+BIC3il6\r\nZ9XgM3fp55y+N3qtSpSRTxUlYSmHvx392XBR38voSA+MqNe6qHTLg1u8HA4X\r\nAZwT3ADFHljp3VSolgh58R5bEIpVpkBaq4Pq2JcS0pCjkQ0WFwr9auN2xZ39\r\nPST2PccCc+RqwW6TAHZTzjVuqrAF+umsDyo=\r\n=jGK9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/density":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cf5c5907c.0_1658352145306_0.5844392481865621","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/icon-button","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0617e2319.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6919019bab08e3be0654ee6b6dd137cdebd77ae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0617e2319.0.tgz","fileCount":40,"integrity":"sha512-oku3vG8sS+O0NqaX0ojAo68FG8HwyIUch+YAhQcvtlG/82zq4MUbrrvV/alDhlKS/ksyOcr/hD1JsUXqWUiolg==","signatures":[{"sig":"MEUCIQDJP+bhHtVh0Dh/9ez2qEcMy4N4motfwGCRFurTrvPNPAIgHqkgMkJxAhO4MOrCgivASrt3HgMe5KUQsZS7SY3DUAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG0hAAgnI2Ys5mMmNzLbuFhAJLfkJe0Nery3mI3hr+gdnMy1AxAJVM\r\n1A84sL+XTCLC+KbActJzZBK8LTRRvtmytozJSOokY3t519M4Ju/RPhlfRoEB\r\nNPoTilorRm+YGveFXd41v5RV6XYO9T2SoFv20ebfeblPp9maGhGE1CgiH0/N\r\nAxaXKVXI3r8umXGVy4+T+fOCXhL+/IWBPPOQeyeGLa3Az8qGbCvInJJ5oqFt\r\naoc5Xjt3PfwktWIGIwo45alHMR3czXp0c1CMFGWQkuqHRuDNtjWeTaaO+Jne\r\nPoFKxSB+CCq771QPeSNAWTb8KASYIHQzM3p9kCWMv08KOpQkCbU5ykCzzB7Y\r\nc1QmHbrr3XrotgkIdtl6Kh1i4ymITJKaT10wpCa+VOBttYdLXuZh9v06NLVI\r\n/LWWfhGErWA42xKENtQYvtBFf+uN4422eo57Cm0ay5WEvK0EBoevGUxvmcg5\r\njpk1fJ/lRRaOWHiQ/7iqJHrpjlXh4Bx6aacVhMfxdEKZNENfZjdPl9D9bNvi\r\n3Xu5V5dYZrMqF+smVurv+SliFyQtuqF5P+1WiGJm4Wh3WO7oqljcNIedsaLj\r\n0oRrO9M0X5vdpDgiTSwMDm4CSlu6PvQ+gYCJIrP2ra0bufWlh2miLjXdGE9L\r\nadrREGvKqRXlRXgBKD6CJEt6t7LkTslV6bA=\r\n=zxES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/density":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"15.0.0-canary.0617e2319.0","@material/touch-target":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0617e2319.0_1658353240569_0.37628020560859543","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/icon-button","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a743b7967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7758933c6ba0e788ec65dda01ef566f66c229ded","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a743b7967.0.tgz","fileCount":40,"integrity":"sha512-5Wt2kIdnQVOOAN9gqsVyDz5BUTLs2Vh68IIXNQG7eTMBFzOxDWJuhosQH1P81gr4cLTggJyKWSS42j58C+zhew==","signatures":[{"sig":"MEUCIQC9Ef6O3XMz0MRH6Us7t4oYUQ06fRFBfJ/S0wc1J3zZnAIgYpQlLV4y7JLYfc7QYR2ibNzsYum/yyidSNULMOxOiMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQxg//Y2eVTt5/VxPgSBO50/G+oU7ZgAxcYnZiFNTKKtWaZXl9ixO/\r\nF2S6w//ua1b2xasLCppqTiSgL4elpAFO84dhUlFTBfeQbGSRaFDG92Zs1a3a\r\n9rdZt9Ot+b8PDFAS7Cz26aVCMkYo90XHEgxj7wfDwxyDH8M90Qr8ycCun6Ge\r\nYuaGu3Y3g3jZ6y+hMohkOyOa4EwhC+YspOWwo97XMvGhPpj1LvfKhJGasjTJ\r\nOmpkM0Gp5JxKt79tfGda9Wt+CNrmoPQrIehM1F1AQcmoUIowyaaDwtnFJ5tk\r\nZLZmdc+/UkXlhIkGcagfeX2f/FL0s/+yRuLYj7QA3Jl39cFsXv6SI338BpqS\r\nbTcEY5IqyV0OYb036K03Y2IiuFef+zroWHxrX97OdeP4Pzs1QoRawKPa8Lox\r\nRRVlOfrqpK254I98AaDjV+kpXuKLNZWKkcQPHlPwjRz+ZV+ZiUy4wrKdE4wl\r\nFgFKaxAJzUMjbnfBmwdWtYNigLcs4SIs6telFBQrXSG8z0nMoNoIeU+BKP25\r\nsArfWIvujgscMbi7VDcE8zpQZD+F4blmgH/V1fFDfCG9Rb6h/lIpANOZjDmr\r\nT2l2DCkzE29bGcA6OyCpCmG2TTLMZ0Z9mzcCdy9P7gy+4u0uONos2Y5I+f8C\r\ndnlvXLUBBlKK01YGRaeyG8T2JoXIMjcVbnE=\r\n=5HQH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/density":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"15.0.0-canary.a743b7967.0","@material/touch-target":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a743b7967.0_1658354260942_0.8225496655951514","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/icon-button","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.69fd619d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86898eb5551535b4a9b8d831b2a7c7df1be71e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.69fd619d0.0.tgz","fileCount":40,"integrity":"sha512-zTIrc61YW63TV3Dj6H614necpvwSq118FGL6ktDlg51jpQ1nD1k1oVtUDrKb01AlkVdzo7kOJiw7jxiS0+Eqqg==","signatures":[{"sig":"MEQCID/5kBkrsiKLbt0m8N6laOjma7QFu3TJSXNz/CkAEE2xAiAJhwI0DDdEpP4SuaozPrvDXhhq+VZmch0z7ipwgoiXtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+jBAAmnV2RgylswfLSyn7YQDMMCb7UWyvUkpuuOAN9SSNEzxmCrpR\r\nIsJZMud3W5edX9wWAXFxkOxBo+nPxk/wILZ8n9qpZGQZ7os55HBHA93mk7Xd\r\nbP1iuDj1KwtopGRJC74rzRHsAYQb969J6jPA7FdCKUhMloDes2ORzsM3xVp1\r\nGTMXlJldLrWFaHOBbx+jsUcEUbZaOovoNy9wB/HlO7v2PXROJNnqKGddNYt3\r\nrqvImjCap3A10vW4OjGSAvS+qPd7ITjgTPPJ60aZosF+yYb0MLZZHRPhyjQg\r\ni8jgDGK8A56d6KsjbN56Luobl2DJVOU1ANzbb8RMZnfgkDgBQNhO61mLx25I\r\nsvWlUNZa6wqIoyWeoK3c/oI9egnUY4SWBsdY1YJdOk5kwU2hHk9dGYgWb5w/\r\nanEfWj5JgfUG9R8rGgy8F8aZhFauM36juzq1ROEEtfonRs3YEzn5PIVNw/ju\r\nHoZgtAzPi6KdHDyS3rUC6/ni9wf9HyUi+zOTBmx9prwoUPR2y8DriIInaB4k\r\nnb27edgJRXDO6CvxKwj3iQtaUhD/9aDUKUdA+VDctoYELgsyulm4iSlZEgyz\r\n+rf4oxFCNhRtak3OiWjlGqmBqEGjVhmOveS4n9/FPbMqwSxXburzFEpaoQ/F\r\nTxi7Kpskg/kpaRJ0N9apVIYVPFwTmvjtKqk=\r\n=cYyo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/density":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"15.0.0-canary.69fd619d0.0","@material/touch-target":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.69fd619d0.0_1658354989158_0.862936801901308","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/icon-button","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2a6ddc1cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7feea564f75a921bbb1d8915399731148f5ca47","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":40,"integrity":"sha512-ZeDjk5PeDT7oENgNtAyYe+q6TkBM8WZVwz6hulPl6RabJUmh+byPFZVMMGp2SgwlrMvoIn96KORQUFJmRtHuZg==","signatures":[{"sig":"MEUCIBsmrkX+rSQDht3atEXppINC22IUD5JvYRDmsO8j6ZRYAiEAlz99oW4vvHh5L57fsRb7Nw5ohIYLWeMBWi9QqNe/mz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIsw/+L5JiMKWTkI6M59RiKZOkmzy6Xlyg3E+QRTLvKmjNmOBnsIjo\r\nB4YZQ9T+Iz5FLtLsHzhKdyMqtQQRr1G4usajmGphmfv94OuitDz1ukg9f3ly\r\nt03Zn29z5ldnhS3hKB+aKSCFJUa4U6kKlXO/L+bnkGMK/M9iZEIKiXkOuRAk\r\nHQrmGKrjuCRQbrCBrF4MkIHmeeS2h5CTdqDcSIwRr9iA8MHsfrWSZUxKczbT\r\nmkcn4FcBY5sTPIVMyH9PN/kFNcSU7IUO/SUZda1NBxmu+LrBb3wOOI/tUrNo\r\nXj/gpgc74mrTIVXKVOfi2vJhhcrtlGJ8YDI6ckImwAWEbsHire2KFxqLNeDD\r\neb11MMHmIcE0Ni1Zjy2+NurFRnnOtCDaCfEoxFHUeZnFWgWAoEGbwqpzOl5d\r\nqjuMFLdY5BU1upfqXAdKppWwriMKGKUKJSmkEx9PM15p7R9RSYVd6KBvP6hv\r\nZe8gw03xdNz5PXBKpzZNhmloC4QHpevRbdL+6mhNsEGdv8WTdrg7VvjNDqb9\r\nONcHWqIZfXWbCjOCq1wXzo+LwzSzNtzBix25i3JOJWIhRNGa3Ri5JXPLka0O\r\n7Cdz6M1+gT4jpQ6K1lNgqzveqWvERC1GVczefFQUbAZP0GxEd2hughli8pDD\r\n0i1nK9MA1zQ0Y4XwCot99YBmsu+LV55vMUc=\r\n=VYHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/density":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2a6ddc1cf.0_1659110712563_0.9200579184867272","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/icon-button","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.86efd56f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66290699f83662328603e7637aa0aaa24d407c97","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.86efd56f6.0.tgz","fileCount":40,"integrity":"sha512-yG4rNekOCQ+DarIBjv9CnYN2uHvXupzk6+Ljj1DuxIgxjDFZkK5C1Vtndsk0Kv5y4YMLH7ncGGYQYlsWkCrm2Q==","signatures":[{"sig":"MEUCIHNTP9lz0k/9YYPlJMTCi3Bhy9J3TGkEQKT9acUQmUvPAiEApHg5hJxEetZbzc4xZ02CSVls1gb78SKkk4IBLzacXio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH9g/8CYyGB1Zx8PwaXCtOD2nfa2Scfp7crETN6Xh3oGLZkmajXmMU\r\ny8hcfRNPDuRoL12BvFXwr13jnVl1aCnjieugdei5FhXgnEb9hYkI3TlmCGz4\r\nilVN8I5awqCXy5z7Lm/8AvNC7SwHeW6qxqJbShRcJQbaOdoXzEW3L8ar+XZ8\r\n1Nm3o6WdD/uL7I+2AMVK1WGjP2ZUbulRzTgCrJXZbpPfoHHnfYgfr0M/4/9j\r\nIpVOTdVNpmCCUUwFaTrEYuNfnH3KKyy0ygXJJWPHoynCOlX8IeGKlh4oVQ1L\r\nljFxRhKTNWieYPsB9dPuyGTaPfW/1W1uJ4MZCI/lPAg9KgbRLiGdxaYe2CMP\r\n7LiSlRIqpg2gziLB2JTG6MAizTxOZjXvgh2B3T7WwQ0VwXn/Bq7UDeKWsEAF\r\ndHqayLNy3tvVdcYzlUcTha8m6lhs+KaSR5jVRwcwAVR5HhTWbyD7/kxA4tN3\r\nU4hXRpYrM7W5feCCL++DmQPILll5YqX8n9Qqc9eqgSHynCa16B9dhzQBBigY\r\ndwRjlOVE9G0FwX+/xNcvUgNOSl57P5DYlXxIF7VS6hFwk/nH1QSTJnJyAPzo\r\nCWclTJe9+I6g9BKXu7cIyPDAe4aRGrbkqM304/SlupD0/ED198CBghP6z4tw\r\nMi5LQj6TH193CT4BCgdWPzjPW/MZcjXKjz4=\r\n=MqrH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/density":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"15.0.0-canary.86efd56f6.0","@material/touch-target":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.86efd56f6.0_1659451569774_0.1544870100144098","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/icon-button","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ccfc24d19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ce025cccc2bc58299b8148bdc19f837830ebee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ccfc24d19.0.tgz","fileCount":40,"integrity":"sha512-VyoZaeveAtBhiEy69K/dP7E7z4YqCutyG2ZJwkq3hx345WR1Md6xDrfMQEmP2qcfSGJMzqoIfO9sN9yQOwqnfg==","signatures":[{"sig":"MEYCIQCpVozXd5LDv0lxr92oKBpzPtD9rbUUHt1/ygaLnnBd0gIhAMXkVDgPYyqeEHQRaFvCFE3OdmX6iMshCLxDyoJnN9nH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rrvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrecQ//fw6bBO+TfiGabqCn9SGAOTfLqhWYCRjA0DMuapAMtDZbD+Va\r\ns+pK50TMtRwStYzAH6/pMXbhHOQA5hggaL4IOEeeKTjXvsfhk7ocJ6VK3lDw\r\nanZVdyy+mIs+G5/rmaKEVd14fQaCKEQGEwAFe2Yl05SrnYjqR/NK22Fcy1IB\r\n85gtwIP3edaIqFy9qVQoj8/CKQ2972GpNFiciIkZhXdyPRWFMN88X3MVsciU\r\n1Vl8T8nCaLvXz6YQXC1g6owRLI38EKmfDGlO+bqcZDKKr93Fz1UtOzHk3Qm2\r\nF/F9fST+ryC5ZwE8XT0y+/NIcj5Dsr5G4rE9dQHy4DRammAoo8W3LBU0FIPa\r\nRsYFDhqrSW9ZWnI7DFxyB/ZvD2YJbEOphuRI4x7vhDdX46zT5Z1FaELAVuI3\r\nNIDIzznLbUqiyw4Ic6uHnehQ9aS0kOFZB64/RDHZRWzqXfP7hWWpr1cXnYsw\r\nYJ4ViWund4eroSr0WUOAJO+VwJCMz7NO+WRUW20iEFLRXtdhf2qEXhb1Nn0T\r\neOGss+0hPawU31d2IwX1bX2KKhOemmmaZwLGLZv+AkdvGHVL74jk7BkKIJDN\r\naIt/TOUHtqSzM6HVk2e1RpqnnS/8SoKPinTAykNuLPblLS/jlJ+Wwc8KMJ+t\r\nVrocDeIH7Lcn/1DzB5LRV6i3FekQfY6vpG0=\r\n=/9kM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/density":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ccfc24d19.0_1659550447001_0.08709107457940468","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/icon-button","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e4570146f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e00b0623afa2330d93dd87413d88d741e8bc0f30","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e4570146f.0.tgz","fileCount":40,"integrity":"sha512-732SEGCkBRKGaFVkMoVGdzLqDppbOWp6UbCg2T8jMmIlqQIaF+8zfLYBI1fdbBJrENey3/3g1W1/v9UZ6IYGzg==","signatures":[{"sig":"MEYCIQDYT92Q2yFC6eF0pjJOuv0TAeOB06q9bsrs1XosLk66YwIhANrZmZn1ZaQICVM+tZddqwleV093bzKuVb2Hybu9BCo1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhcA//STrDMFR1dYnaQJAXLBnOvOOdGTFRHFlUZUmAvTBHZgnryfmk\r\nbQQkqNxc9VnMij0+/3I86uo4y3y6m+u+3a6C5Nus1Zoc7U9p7EEgh27voYaW\r\ncb7nwivKVIxsY/N0aGg5+WXV1i1MKHvwGZr5hAllE8I0AbXZA+H0KZjxNzDW\r\nAEmG8wCpefozHDjF6kkNzI9dj5H4CPOLuBFIhzay6wBfplD6R7R9dNNW+BK4\r\n/DhvULJPFMe8qIGWV2TI7LqdYUE4o1zbJMvwKYXvAmitrJeaSPm0z9khES1D\r\nyPOsi/LoNkj7h8L2O3o9zAs5SPLbVjKeCusxovNFTBnbJJZXil/pGRABDs6C\r\nP+J9naIPHmFvzbO4rgZAqctDlCMr4qf+Vw6BpQLiiJIXrtlUgJi+M6XcSags\r\nD5spVrZO4rMqXn1OSmawDeFhyixNENPdJcmsBM4Fr21S4utOiXEI+VWGckzT\r\nYO7qWHEPbtlIPsg0bqvDBUvHiuaIfSS6mJwcVkLsuOqLLKEvc56YqKBjHIxh\r\nGbZTrgk4loj11Yqz6WgP5l015eXtGwmxm1Sd9im0boBqLX+Ly3CJYf2ekpO8\r\nIzl+VWa6FgSdKmGCDFGgVBhMr+xkxS7SNzFl8zfUD7WYFlaR3Wud4lxaQc80\r\n15FyDIjEqxKC5crwM/mFzvPwPYI6z/Bi6jI=\r\n=xut1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/density":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"15.0.0-canary.e4570146f.0","@material/touch-target":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e4570146f.0_1659552078513_0.24084611307824932","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/icon-button","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6683a36cb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05d202511c2a955f65bb874e1eaf5ade4e1e4fce","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6683a36cb.0.tgz","fileCount":40,"integrity":"sha512-wDAkW9FzyspI+wxqIZTZJVWGvoA3a89nV0eRNG6lI3Twkj7mgpXOTb5I/bwpS6emcrcHWUviKxX+lEE2MMJnng==","signatures":[{"sig":"MEQCIBCQHXmaFQhssYzMJfAxlSdqjFPmXpiRQxgqb2w9rpyIAiB/wN+2hOJB7Py8loK32ruib5obNXol2gdLiSlx0AlUgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosVQ/+NfuX9nLUhf4tazUFOTpFclxPMz5lR6rflF9aX8qimKrrE0Pi\r\nWAA6nX6iLeRmQxaJJRBtSkLtNDmyjHjLB2P+BkdPAFFroH+qKrHrBjeegAr3\r\nH3XuISj9MmCJn3DI/z4vZ6m1l3WkDNR6foa1wo7MQumUZrDPK4acyyXO7s8P\r\nQf0LQS0afCyzCuirlfXssBlQ1BYYcjuLGTmxns0ZYphYpdNRHvSqkjWTcMaZ\r\nztitnQ/fDGa88e0whm+LYiS2C8vrQNBffzCozl0oXTOYHAIJEYtf7Y2Thafc\r\nzE3uAGlm9MGnCNgRxkFVPzk+4v+4Dv3Esu59Pcw9uC4qrPPJMKd71fDA+8uD\r\n9CpOOiwUusA7G+ER6OhfSidXIgK8q7TFEJMQ8X0HwIXM1sPiCl4yyPYTujDl\r\n3WUyN16vOiaF0lmLOlrpMps060dBEC5w23r8VP3z7PKnbn3ZuAysvvjux/gP\r\nujkmya9aRpzlzu2fvAg1ramsCg+IDOTKvvC9+iqjwVMtNFV+VLL6loGvXhtP\r\nSfcqQYtfF+S5mg/SNfN6LqAvPhwQp78yksRLc8k0WcG5a9AmRaZFU735aLYI\r\n6HQYrxfMzwwN2W9+K34ghPOH45tRlX6gyJIUGokJrZB+EN1OErOrXyPR3Twq\r\nS8gvpgnUuFaGWNoVIJKwg8ZSijrIytq5z4M=\r\n=8c1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/density":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"15.0.0-canary.6683a36cb.0","@material/touch-target":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6683a36cb.0_1659554482227_0.06001499916345865","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/icon-button","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.10196647d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2272c3c2ea293b162cf3b57eda8146dbd2bf1f52","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.10196647d.0.tgz","fileCount":40,"integrity":"sha512-3O30AYcQdHw2YtVf1MJvNfKpmHSS9GHYxd6eXO9gmJfFaHvH34OcrVHySQ7jha1wX4bBlx4JgCfL9j1KgSg9Pg==","signatures":[{"sig":"MEYCIQCKKs0rO6JQ5e1r29VZIRSAIgCs5cVO/E69df8z5KvaiwIhAKKnM+Lf3+FZ67b45Ji62Fc69NdbG9kDTNmqLyOP8063","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqyg//SJdNLUKZJy6m6eQE9OA/2ziWrO2ItlegtkbI7l8cwkbaoqg0\r\nSukMaFfLVOvvK7bi3/LCTZ6DXX1F9bm29Lau9seMGrRkAWBAyHJ1a6n6y+UO\r\nI/15ZfLTPXzgspPAvQBkPTwo7Ky96IipoOnopBsldDWd2RrT56+FKl2cuKQr\r\nbZgGWcn/G+9C8EapNmx3wlRl1PSTwnGXUirsnw5RNx3OjCk455rB34KHxCfH\r\nQFNj1EJ3anmp2sCuxIM3z2eKqyJXKn3kRgE6xbvCwFYWDDFYCv54i+ujWSon\r\nXo+7AmluclMaelDKGOazYSUznh6uhnoIbjFwAFFEU19z3Ns7Nqt1otlhYBqI\r\nb8BvGiaGpr1JkWRDZYXSLzmYxIadujZx7gK9M7vvASLSruqSXWccTEsvOasL\r\nyArYlbciMFB75ld/BNkxcwGqhmXIu+cwQspsm1eZeWssFgKGr72SlccGXepx\r\nLLfL69hXhu0GHqCDoJ2ZNqL3DrEQGEmaxLJppDSzQxiXn5ie/68xryLyr1L/\r\nSgTQIsvk+MT47FD2A4SzXw4O+EFjQrUB7dJy9EWzycxkxWf1vmdh3aQUJsoS\r\ntDITSxAXD+nsZhDpE0ua/jrbdWEtguQAGglskya78+ojBPz+BbhkN2fyTsqB\r\nOTY65PxwUNvdbE3NIOFkYPBRwjVx1KN0C2Q=\r\n=JLLk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/density":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/focus-ring":"15.0.0-canary.10196647d.0","@material/touch-target":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.10196647d.0_1659563657160_0.015665736443628564","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/icon-button","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b20d3d73c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59678c461b2447427b44044a33aa84870516f21a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b20d3d73c.0.tgz","fileCount":40,"integrity":"sha512-ZVcRzl3FvQzAlgOOb0SKF7R4KD26E/GE/NOEDiFN9gxJbfilezFcRHFyJWOvsIPriyNTdFOvMrm1iGYisqMmMw==","signatures":[{"sig":"MEUCIQC3GoK1fJZrnl4V/acn/j6oX+g7nuR10cs3HnO1dQYULgIgAv7V+1AYhlTSAMX9ch8DHSvjg985Y8EHH079lRcIbq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIWhAAnj2qFJxAjm6uEDpuFWTUfqmSEhUbGa3PBlIwYP/tM8t0UV4E\r\n4oPzeZP9MIqQmfH5FeeDeQmOXuIQmgYqiQjfsMZhaik9RJ6RkTNPIVOsPIeo\r\nfjEXeybmuFcoOGHhhg5EhKdZjs3406cJ3mgvgxIlH691zwr5UW1cSiboI8FU\r\n9jE/bN78nCzYBSzpPnSf5cSVXNRuyo3wOcV1xkfv1H9bNdybReOLmeF1GAqM\r\nvGLPsuXOVUuhiBdKhau1b/91UPQqJJhQRss3DABfZjDK0qkI93dUQD8YeuNM\r\n2LD1NO1cXD7tkzqo+TtlctZnpIiCYxBhF/frE2HwbBldz0GVLy55aEcbi12m\r\nlU/crcaZB8izGhJ9lchnxgB15yg5nD6Q8eLVslgVPlk1pOor8dDIsmQ4M7hk\r\nO04T0p9wJBMYYgCeiDjFW2/AMMCgdBy1ZwKDaveg0aRmIGf3PIqdUKsYMUc9\r\n97rwppoRbS/f+jPpRDkTf4nQ3vliJhsTDFU8iGq3li/gi0elED4mew9fKGiw\r\noMz0a8GGmmxc66sbOvdrFFFcxfgjppNXrHWjwZdRLA8Cq75N5o+gw0qvO6ko\r\ny3u3effb/keVbrWu8fWw4wv6w6iTAxBP2tO03DPSigluRE/mzOaIlYBo4RWI\r\nDQqlWQGoxuJ1VffMQk986sxbNhDU9p14ZDM=\r\n=Bjvx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/density":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b20d3d73c.0_1659653009103_0.04506389606504313","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/icon-button","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.47c0c6b1e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2fd41d59ea7e6f01e92be154153e7f2e543fb63","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":40,"integrity":"sha512-Pykqaij0UcvOnu58y34Ddhp3jhVoECZV0/f1k64PCTcIS0HO8rU0QMP+oG8Hq1/j/3kzBa4Vn2uy8z4Ggb7EDQ==","signatures":[{"sig":"MEYCIQCNLN90jsJNSSHZeoi33k3uXl/wmGoE27EWUzObokJHPwIhALVE/v/VLJ870/nbJoFvkBUyITItdnFAdVNFiV8BuauB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO7Q//fg/HArDOLUn1xOWC4AI3OUBbMeNVc88NU1uBW+lm1HlCyKZJ\r\ndD6uIIQdAYa7jpxFgIdD5JaLdAyZkgdWpDckkFa5gOGe+k6ifgmpps3MLogF\r\nFq5gjqejb75QYv6/U1cObwUbRnRMdHyAlptpfxFOcvZldId+S/JD90FD8TVG\r\nDxm5ZiTVOa4nhE6f+1EoPehcqkFr/tqq8tE8OVZ33dPteX3v7KOrd5KALC8z\r\n0XkcITYMFB/okQnn1/bgr6+1KoNJ4sTx6kDNwcoFpdW7T7p4BcOVXz6RJuRY\r\n+aXmbOzIkT3nrrafACS08oU/uhFSPv1I3ISikdwwFRCUQRdw4C0Nj++WVtVY\r\nh1N5oxpQbsUQvkpc1c/322FlqGl0FUZNQxFuzATzSHz+dQqihP44x4RZrvOb\r\nqjk3ObNv9+/b9pZAcC5xKXuFfgxvGsO9+EUuI5oSbNbWTI17wd0+8+tjT2Hy\r\nNlZz9yh78JGquGq8srKMEEloPgbjwK/6VEUlae+VArVx9rT/3ziP89XM3nMz\r\nls09siTBJk6kUoO3xluZKAHTlu5AT3o2AHyeR+37iJOlbej/V4lK4+V2zaFN\r\nclzB+6zKKmwN2gGaY74FX4qfoSp5vnGctvc9WASxg7uEO4OcPgftAn0mgUJN\r\n4k/9rKOjR/nbGypM3AnexG+N4jGRod6lwlA=\r\n=smHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/density":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.47c0c6b1e.0_1660058467554_0.9939882082386731","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/icon-button","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0e3dc8e38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3543a4c92976f18eced968b30022953f5291b991","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":40,"integrity":"sha512-yUV0hBsRZqCcThpq/iWQBQjB3hKzMClB2Tt8XyoLMoeUv7+ALXR8ASKxl6yG1OTChK1v5fg0cRA6QWP0bGOLMw==","signatures":[{"sig":"MEQCIFSszRt5s2BWF40tJS/E87mzPIodb2SWqKKLv7Kzo3+nAiBQTWd8GPjazc8YqSUzppbym8BqBWx9ICE8ezW6Uf0G8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLRhAAlbbDKC1xiykhyMVhJz4jYFo4gZAb4hINzC9E9O86TxCV2B0e\r\nEgBSK41K6SYsEgnVzMGw4TvcJf02nG9QJ27Z3+KC4c+ZcZh9pcMGxDgREuI9\r\nPmW9+JJgbroUHAvVVlM5WnhlQGSRAqwvUw+tJhHbIWEWKwxKnOsGhrr+KcqK\r\n7s8s7ymIRyInEFzxMI+6EoBZRXGyKj8Ve1NvLwrhd1UE+EHFLkgzALoA1i+I\r\nXYR2jukhpcfPc7obHIbXl1FcHGivupoYdHZ+wirIq9ev3QKltF45Gb0XIusz\r\nrEpc5YD496s7RPBmjknL90zo8TQEPJvWjad8IfE0yekZrE1UTwnfBMl/4R1D\r\neMk4tbydqvrv7G1XfJHRKat4sOtJOQdpuxsRpT+R+aPpSY/3AUY7KhVcFucl\r\nnZ4/wK15fOmWjCLZGKceSjsGQkZNeaoW9KCtnBfLH62nEwlKY8durxK/P8W9\r\nV/nhE2LFK10FvD5KXmSBML1smHiWRgHNybqzqBEF6yw0ybYbMWp4BRBYSxhb\r\nnSPzvlkAyI0Cdm2Ug+KMtg86Hr/ciEl554gF2gNGSVmL6BBxDOZRbSdyCWKU\r\nkJnuoBW/McWhTovVePeLotYHxMOZe38vWXST+KrDofHvlwiQcuT3R3m6Gqmp\r\nYw/bIrHaz1rBkI7lvAhVRfj7s8NPO0dfJsM=\r\n=6yYZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/density":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0e3dc8e38.0_1660243589901_0.6155304983736078","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/icon-button","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d5a11f1c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d05530125197addab819ed43a2ff8f549084308","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":40,"integrity":"sha512-p+KB/HWp6UY5GD9mqqx4uDBTwgenMbbRBo+vnz1ZFuq//aB3Z21xXqEMdhKxRo934A2pYTPLSBDs2cGBpUYd3A==","signatures":[{"sig":"MEUCIAf0jm7uzMzf/Ccwg/a+eJJaaqDsYiMDcpqkwO8yyjl2AiEA9YbJdKviik9S3KfDmRTcHbgGUkhzHE70koKWN2zWBWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp53g//YnDaTrXe+FoHdWKgVGzQBEz/z5l0ku0ctLRiqOh5hFk11msy\r\n9wWtFAnQEuwf5cg7yLpJVaPiLb1Z7HOOIHLwEwn+oNyZJxHOaeJaSUneY6/s\r\n5ferNGBciwhn+3a3eDakereyj0IRjiGxwRMnm+ALTozbji+VoP3q3IjAISv3\r\nADlc0PlER9dTUlvXTUseGZKUDVsvLNEe0ex6uyfK7qd2849W0P21HslIvzgF\r\nES8Gv8Pd0rwCQMjCzObIE25W5w8l1SQmzlhwrnudUUbbBwoGizQ6iLKeF/XB\r\nzFJBRyND/PvMkswnyfY3wrNVJy2LAqmd3LS7L2YRAAjz31PUzOFX5wbsDA8m\r\ngpoHx8lp0cqEyOHEVUbcP+mwTiSMO8OJDYbZVxoU0jqJ0ZX7SnRD9tith6VZ\r\nVaXxtIZF8LbvOK3C2opskVlV8+eDOvMX461dg+KLp74Bt38Z9Zl2i2BGzfIK\r\nVHvDZ062J3R2yfh2p/SP1KOZKJDI1kjKxhjckToy5ljhvZ5YLL0JQWqMP/ie\r\nPBXGAzDaeT2lo5rioJkiY1FOXjR0Y/wTsiu1DLQqJtX44v0eMoFgJ8Vq8LNF\r\nOvU6jANqjJtFXbwiMPDtYo4V4j5h2OPz5nE0z9ooe/V+CWwUenxc6/9bdUXU\r\nf4MH774IOqKiI0gNhSx9xBlGqagxcbDsikI=\r\n=1UIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/density":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d5a11f1c8.0_1661900511493_0.5175922278351737","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/icon-button","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bac992a95.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4ac6a5a08017ede8865f4638c6639e58fffea3d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bac992a95.0.tgz","fileCount":40,"integrity":"sha512-9eJP0WFS8SVXBRNUchLl2IlGP2Te6/lLGW5qsyjvgA9BA/24UNtjBRjBeMxuySdYqjOksIefiaJu/boW7Ruh0Q==","signatures":[{"sig":"MEQCIFdwjr2q4eqNf3/pZGyYYKYUZ+SlBQ/W5DIeaq8d0y2YAiBZas0etv4m7OMxIutBp2NGTa9vMrafEruscmOAzfDv1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFnkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVCA//Sr9jPkRLxfB3wliQtCna3T2CpYYYEGmo6Ox/KtBmJ9UQVuFf\r\nU6fKzJ81X5WBqW/BOn8oE7Hu0O0yIikgc7fIhA8PBzvHH4WIEhjrqBkK2Ptx\r\nRXBbcpxm8d1GEIUqY/mNvaqsXmPePscvfXCKz63hRaBCrY8+y9MXC0EMVL5t\r\njoWPKQ0Yb69CAeTWbuBOQV0h9aOrr5l0ToeDDi4jF5n01ZRkTq/M0GwrtBR/\r\nNOEwZ0B1t0PP/Ng5iKV2v4Q6sVXhJa5t1YgKObvXQBSJWEeAnempi+wyfFqM\r\nNk2eWDvJbUaiU+42fXj9akCGgoRA6XRbbzHSXo1VK/CBRX0kBiCva349d3DT\r\nIsHO58T1uaDu5KUvlIoAxN3l08tD3Shs5OJsJ2ShSMN40pfoKDAszmHLc+Et\r\n05mvU6dYl+8VdQd/DPINvdPQl1KuKyyUhjDV0R4v6zHY4kBziKYRb+Uydkc9\r\nB47BOjbIIDEQ/y8+pgF3YWfLydQkAp8PbX5kfSHt01ah3r8KdVpLg7A8xKML\r\nIzXXxPviSR0XNdlwjRBcsiMyFmMM0jn3Ks+a/zn06kO0Pc6lPfxF6Siz/Xv2\r\nqi5d0Dqi8if8dVrPxR5gxFEwk2dW+qbD3ZUaPRLRdNgC3bZ9dkzhBmCH1yGh\r\nacBgh/fKzJQkl52TIE+Ld/WN9cFnzhlCYNE=\r\n=n+jR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/density":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"15.0.0-canary.bac992a95.0","@material/touch-target":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bac992a95.0_1662015971862_0.3263366511996","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/icon-button","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d25f3404c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a2a0a2394461734aa5829e2834dac724cc3ede1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d25f3404c.0.tgz","fileCount":40,"integrity":"sha512-Fm0diFRfVWvnQYhGppS/YOhvF3Dipnb/3pzq0/BWvc8rBSRahOqO+ZtGD8zJFTvqSFEL5ZMdvW6s/bFmt0C9Rw==","signatures":[{"sig":"MEYCIQDLUfdK2YXORNhWc/BF9iiv8PCg5AY1kqxjYKZ4aydcFAIhAKQ62XGF8GV9aPL1Dj1KoSKehjZJbj3FH1wolm+dRM0h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofBBAAmzFwk+cbXL+7ODipTOxzsCdKNnybPNlT+AeD8fm2HoWluIXW\r\nY/J6/5ck3Q4zB+peZPc0yZaHWTJrqI1zs/PFgZUWlZ4qJK+0hSiZ3Y+8+ahd\r\nDtjGoJC5wjzqk7+Ii7qp1A7qxjwoB8MrHxh5ctlUVYfKcihn/Yxs4hIZwpGK\r\n/AIw63MqCk2RrQw9FIdQdm+lR+QvazDBQhxBRaemKlvY54sxOM//eOnknw1Y\r\ncneZzFxRubJH1Wqgd330ZZrpqELRJtkGfhFonoy6uGDe9fS3qVIgNTlRE0tN\r\nHd2r3IE+1rpP+zkz85xL74+gLdjy9oaFqGZb0uMsmcU7iupjdbWohkqk4oHd\r\n0FFIP04vWh8z4XoTn2ulhvKHHSWGKmKA9KWvV3fVz7V+g1QbNchxAp1Ghq1Y\r\nE5s1Iqsu1uoIycwW2eiOHk7VRYYQJ/nLGfnWe8q3VopltT7QNSUBGR/bKbqI\r\nRQHetqbuM9SHiGXVJvdBOo+6e+8h2Twqu3OaP9QPfMmtfkgcqQFtA5o8Gs9n\r\ndFIX37yAyPH2p+z8m46+7EKiydKbZKgfO3a/J1bdHhVpnDhGbVL0eBxE4e8y\r\nUM8xef7szuvvaNTmpaFifEmchTlJOzhcO+xD3/IMmu9/53+suhAjx3iKHIzr\r\ndCOcPZn6goX5XPS2cU9JGd9Vqohf+tIJf6I=\r\n=xhGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/density":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"15.0.0-canary.d25f3404c.0","@material/touch-target":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d25f3404c.0_1662025511442_0.3003119427557941","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/icon-button","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.920d8a79e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbdb3f3b56b43b5629469f611b8f9fafb126a2d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.920d8a79e.0.tgz","fileCount":40,"integrity":"sha512-5M+bqIUxfF4Zmnfgqz+bsiYy7so2BX2mXCgu/RSLhSFrQqvRP8Vy7ckVxppF/fSlXkBQWRY8YA+kEuF/LzBHug==","signatures":[{"sig":"MEUCIQCGa6eKwhrOKoLql0+zYgWG0QmBbFa7e0WKnU6taZjmeAIgALPxrIPOHhFp5ommeUoa/8uHqXuRZ4FAO8OQXkT4pYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLphAAhM4J4Y25dVIOOggHnO0jpJiLNJ6EY2bu40gk/SapxH8Bi5XU\r\n8brpkTFzNjyr3H5dPpEiOa3Y9JRQu+aTS99Wt5kWUpu6DfGUrmKw6KOtdeMf\r\nuSqIM2+1rvun8LkLuohoGUqXsiHvNDmeUiCf9ZnKksMqqPx8JsNwALNMLlto\r\nNeC6k2cdfX0oPX9k4kTQNg3B5l0h8GTD/lAJjedoLFaVpILEIMXdqVFMWaJe\r\n9hRABNZrcwxEEZXVL6c72bzaM1ZYOENqkjabIbYkevFo++uIoUhfmWrnPMDb\r\npvh0XKjKlxIQMTpjjDJEJR2IgbeO3HAjXBbmBouis4TuvXhYaeP2GScllvfl\r\n1+Yf75yOqVSKEGRo+bxuRlHVt/uiLSg53ZOZc7kCB2U1j1EtmFWEwq6x5rkL\r\nA77YRRI8Nxlt31OmjwU82JTmy0Ij7Xp6THa/QzriRYnMDATavBJfZETRjvkk\r\nU1LezrRWRvjbzjuHraHlIwkjlGmtzvmKt8DFVkqhiHeiRDL6hMW1CM50HCCC\r\n9wiMIZa8LPTUXnoJyf9nYkih9QQ8HRJkx1IHgbQMlj6BkdCjhHlohOO+W9Ga\r\nJoEUhMD37Lk4miTriZTlV2xt/qXYFR8E7n8y/Kj+kkhsKNj8Q5IQB2DA5Rcm\r\na5sLuKBz0pNP64JUZtSVFnEHIYKU3TccwRo=\r\n=LtMH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/density":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"15.0.0-canary.920d8a79e.0","@material/touch-target":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.920d8a79e.0_1662063692349_0.9700288347762118","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/icon-button","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c363f267b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e72ed072df6b62bf0f954f0b026d04791373b5bc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c363f267b.0.tgz","fileCount":40,"integrity":"sha512-i5i6T6CSinknoYk9Wd3X4hIOk+itPBnga6bXo7HxCRUqnSbeJB2NLj9DjGDLms1fXhaczUaHq5zBRTs0W40lbw==","signatures":[{"sig":"MEUCIADSCBsD+xVPr5jpMiUBl5m25d8wyYUL9pmTrsBKCj+GAiEAtJdh5myZUyv4/VpVHh8idiFb9ct58DKRQaoRSoBoMuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESG6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY9BAAlIuDRmegv/PgbaGIt/7tB3ebCshAa9BCP9B/9zdDZYTzt0Fp\r\nmtpP+PhQke6K3FBe4uP5m4AhOnFfcm/V4ZEJd2o3lSHVfnuLGLCZHWLZc/fp\r\nYj67ViAh6UKUNwFLKmL38Wsu7UJD7UEK3O4qEP9HqMJtOljV9TJueVdp3OKr\r\n5Oc0rwvKmSoJj4+7xQyIPhnKRNLk/PhNrl+ULNxn6OHP+Ht4YLqy6sEOJ6SW\r\niE3+s3y10FGPRXjnsidcInFEIDq39ZtRVkhsjPUNAhH3/ZpU0AOrRTBE1Rvv\r\n6xXDgKBBa7Q74sN9a2kAaM/AWQWbYYK0Sn0tRZMPstYCJzlzHXZ9sZ9DZTaa\r\nY6r8xR4zaURhFRNDqQkQZzGUKTGubo/4byh2cDLdp3TMDvWMhccTKUNtxX3U\r\naHxXy/hwQ94PrnuGfsHSE2KMoKPM2Hqy/6B+y9IN7O02jZCH28Syqpln24TF\r\neC29vvuADeny1yqe8ftiBQNE9Wlgx0a2X7TA8ZmMNMnQJKLsuLeHDlQ9Xi74\r\nlCW2bUZW8KArV0NLCX2yVXBDIzs8bKeYwdCPsvBDY9A9KHylSPi6BnODSAMg\r\ntYlE/efrkgbww1KSG/d6wZpi8itAEsXYhr/4I4O5q2vrzMy2cT3KTWMMjHOk\r\nHrWGOgXYb7vqhyfK1vHXR1Q3ICF2+ZU5El8=\r\n=97kA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/density":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"15.0.0-canary.c363f267b.0","@material/touch-target":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c363f267b.0_1662067130388_0.2077764117116947","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/icon-button","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a4eb4937a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b988b5703eeb0caa731769c722032d1e3429dfc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a4eb4937a.0.tgz","fileCount":40,"integrity":"sha512-aTCfAOiqv+En4sAoPNhANbbWM/7EWKj2hRs5xwX7XBsaz8mSgi5MbWneKbJQC5DIey/P1V4G2+wzu0b7P4W3xA==","signatures":[{"sig":"MEYCIQC9EgA2QRVVd2oBGIpomFMknaxhWzSpEsJNZwwK21JxIwIhALLRtY8wckAjn3dV7n6lW4ijqSMRVIm6R2CL/wQREHUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0RxAAhz8X3N5jhKXL/l+a0T9Yji8ysZTTcgkhhYitWSaL/t/fO7Mu\r\nMYdoRC2ZARxqn9T9+S9tF9OvLyd0f6fk5E77ieJ5DuC2wG/+/y2Ld7nGKmKh\r\nBcteGyjIV7mZlUCE/A7H3auGQ7e7d2jqoOgq9Grz2lzl48Y0qCIpyhvo8+fv\r\n/kqXOYYlTF7wtL3NQX1seytGKDA5n+SFMLsRYqGNnaG2RBLNZLVrTDtU7su/\r\nbJaFNGVPvyUExKUzKSCG0k8gVzxC+Oqn4tLhe8Sqqf4yJB9GItTS6uyT2H/4\r\nARvaBEVV/f/IxfNArECpc4B0my2y2zNuXt/7/YglxngOFDiU03SRD6Y2LwI9\r\nVY9QP9BeuPzrJ6VzTFH55hPzegAj6QKAzZj+LV9VTL174jPIPhh4a5XC2gFN\r\nOZWKDdqtEUY9weurhl4N3xZzfvozOaNpGYFMnH49O1iJyvF3B80lKG7SzISK\r\nZFQu5OFmv0V3v7vTaOYkPdRmk05aL/rKbCyez1QV7Y9IeXxSa2uNW3eLWCBz\r\nbJ7LB/ugOcEY7E7ziMNTbKMmQeQnRmPLY82m/bWxTf1vSeuh5Fgfjz2mYiW+\r\ne/CGNhYMAMR7OTuZWOnXFh6E/lH2rHIwDs+sXZ7731Ze1hB406ofeke4pu3K\r\nM03SuKsLlHhCoPUOZ5OEpULc4gsFu2oiXo0=\r\n=6J2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/density":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a4eb4937a.0_1662488418378_0.16139801223971895","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/icon-button","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4299717da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b685f1be58cab1231279a5dd61a79baa6467d36","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4299717da.0.tgz","fileCount":40,"integrity":"sha512-bVobZ0H/RWNRHDnyqxa4duR/AfcJE76bXddDpiIo9Gq9UlZ8Uf+rzrkkU+zWVopA45nhoy7qxCMgplCJDP9M1A==","signatures":[{"sig":"MEYCIQCXJwkOW8M9eTUp3BIA5NhS3A8QDoIL+x167q+CX26TWQIhAIKjGC9JKnQ+TR46eyxQZJF8McVMVWr7p78gBg4BJpnE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrJg//YwmMMPBnh3VFvklNai6d1aYudkCuBrVzaBAHgfWmnpTLo1zX\r\nmwLZupW2aAKIDdZiUPo9tQVcmf021Za3XN6ULLCp7gMqpjVb7SlqK5Z8N9bD\r\n0T8a8t5/QaG54x/lm06R8ZwheLsirY0oS/yh6nym+zZkOq9JZ5qdZ7RUoCOd\r\nx5Z5ut/iKgRkZWBNRIgJDpERzJ+d0cWcp1TOW57GBiUFSK5cYoZ3bD3H85lw\r\nPYEahdBgiw1Q0XhhS4LAnhB9n8OvRnJsAOpGk9VMXX9ces1Df+JzF8jh3Oah\r\nysDdNXZ5zNqSLdnVbGZ3+hh15s9qL01iU1jKOSXrzVZxrRkXqkdZBZEcJE+/\r\njwsmI2F+hakFuhYoFx+t3782AkrVCBg69x+DGIel6X/BCvojaevMZiadAnGB\r\nt4i7Jl9eLaBKVlb0QExrAfXWMUmaAlojxPiJOkPCceDCu0tdcovIBE30Dz1J\r\nl9to7dZ8zvSt9GlNWRokl83KiyEszG6C9yBf376dx6cxIgwIm9M9JhvoOV0l\r\nuhm0FY1cFKGAOpnyZXDjzsgKJhwVXJXl9Jt28ZtpXQhwEq2dLFp9/ifP7RoD\r\nboXgSmegOeTfTxojWL8FtPIA7vNna8UqeVBuzUa3PJPf6+/7z/G1mwVVbZC1\r\nmroJnqYVCGU09h74umOyTxLYeAYzmfvgujk=\r\n=Egfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/density":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/focus-ring":"15.0.0-canary.4299717da.0","@material/touch-target":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4299717da.0_1662567374812_0.8861484500869687","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/icon-button","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fa7d8d44b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9507d07e9117a58aea9530f74e02ed8ec91990d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":40,"integrity":"sha512-B6fMJjr6+khIjNla7MqRnY04aHVI0NT4mZK9hsZ+7zegVv70/26Nn1elzgLSWtwv/4bP5/1x5iQ/pd4UwPccow==","signatures":[{"sig":"MEUCIBJENgxo1KgBdmep3qcBTq5BEvtHAMLqmhsXLV9IlNQaAiEAiUSZKfaVfaxXUrfq0wyxy1gT5kDLNCUEBOFit/OIVMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Eg/+KFM1jyXfIpOENfEFnNgF9QNcXArHzIrgxk2G3eQXQ35hz/EI\r\nCTrQDpp3wWOTFuiy6wD6mDCOz90tL4wNkYUpiIqoH6MO+dGqPPaEGPjmMvcF\r\n12T3+prf61JvgewC5GWL0WIJ3OM63Nf3TkBYpSyeupaPGXL8/IpPUxwpGMYQ\r\nIwDw+GvWuYjjYR1kmrtMspGv8noCUwHdKq5Ifxr8Uq36DdCg0a2S9WaKcj+V\r\nuAM4C9wfX/AlvI+MwX3nRs1TDPM13vuA3kz0EHJreEF4mA68bofSlT+ct6kz\r\nATalSu8j36EjGbfjtBZWx/wDhLaBVrgreBFlEa76UbXi49xRLsMJkSEvGxQY\r\nY9HNmR9MZbBdelYZRtwKYzi2kCVso7TNq5QyT3HsRbYdUjoKUbFS+ys38S+L\r\nyl2gXGHdwZ+pxcgcRHW6/0UEHcK9UZb+jEOU0ZyIz5724jt7lq5x8be1S26q\r\nhyWDDFPY1y+GjzRnbXQbuJyph8J44JfLWP4ITxEEo/UdZfpfLMmN+RwmmjwH\r\nXf22A0qrGeJZQCKWcgWFE8b2RV4opmNzszY1LZs4AwiTckIpZKAWPiVyt7KA\r\nNxWti/khyX3jdhQWPy4B/V4Koa3VncE+IRNEPVWySXEpzhRpnfGJ2JhVlRIs\r\n5OcQ6QOmHVDxNitnGNwUOalmwblXo2WpxfE=\r\n=6TWG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/density":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fa7d8d44b.0_1662578369736_0.5457359888020714","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/icon-button","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a40e3c768.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fae28509191983e7eca198429557871f829ab6c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a40e3c768.0.tgz","fileCount":40,"integrity":"sha512-T/l+sRyW7E6U71mm6ha6Yu8Cf6+dlqg+FlsdcD0fVQjuOuzdTpzfZ68Fk6/UCV1sPtgC42BrOC/9H/u+nsCuHQ==","signatures":[{"sig":"MEYCIQCZXCW0+mmgNbQHqb0bsirvp9j2bNvtnXws+ZEuhTXspAIhAL1GMqgGf5eKslDF3+/LAdOHGFZzF5Mxi5cOII7bHA2Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreEQ//W6/R0w55pU/4E1xAseny1kfMco7lflm06V2Poy6vhq7QOnS1\r\neYiVFd7udzJlTyKhEA1as4kl1DuzvtkT69mCru6/9vAmaZtGE45dMTUs/rDB\r\ngGfOqZySDmxyGGMjz/KmTAbVermMj7uDUt+NxlCfX1nt/a03pMxOpClDPnE6\r\nQQu+epmcA5FhFe2VzNdyobqmgJcjSPKfcZLfcJrrZxN3irkgYEaBx09sgw3+\r\nPnSbdwAKU58Y3ImdXIuwEC1GTOIBxUy20aIpO8rXlu9XpW7d+bMx1RW3BCka\r\nHiQS6EuY3TIucJMR20tpycR3Qvw2IYONIKA0xhkcJIMQxejce/AEU5LtTXUv\r\ncwwy2JcuTb6FbzQnrsJ2kHb+XO0wp9Zy4Ys/uHxKsZBNrSHukH8YFFJrF1wo\r\nnFaxuehNAzxN7vB5jnGCclaLiWyRKErkoD/GLgiyOq8dYgVaZEC7X2o9+Tjh\r\n2npNtLT39WnQuGCNHJhYmkpK+KPQa+/GX3HQTlIte0ik0rNatvik3pOSy/nc\r\nbQ90x1Ov5BrjpjpqxUGLQbHJqC5fLX+ZbmGi4a8jeqx5Hb003l8vC2VZCmaK\r\nxr++ESqKQfnZormUGwH/8UjMheof5kr+n9PK9NoZEg5FFK/NQpDNUQOIII5q\r\nja0ewSwS38mnNwCgtfU+6LyWYOD+D3/iQJU=\r\n=HkGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/density":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"15.0.0-canary.a40e3c768.0","@material/touch-target":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a40e3c768.0_1662753867636_0.701048936726854","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/icon-button","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.18cdc9a00.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b872aeb5bccddc351324e7e028658e5dbc5e41f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.18cdc9a00.0.tgz","fileCount":40,"integrity":"sha512-dhPieAC9oxPu8TahgarraKXkbJEisNjuZWLHWRa0QZk+st6UYsNlMYM4iZYzvZLegDCfXmzeL0HU319gJwzSug==","signatures":[{"sig":"MEUCIQCCi7RhRyTxX62NgOC8DCr8HmbXsPl1+RAPuKx9msHURwIgeJnkKTF0Ez4wcUrjIQzakrTBGFObH4/6qr7+FXEeRro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTDA//Zk1Sk9oQNzbTpeVr+wtGH1IsGzixeGkPUmlF/pdGw5VF0R+w\r\nj6wn10Qrufc1xUEGjMzzw+C/or5WadIerZm8KFdCJx02djzvtGjPXAhDU2qU\r\n96s2WOgGazmRf2oHQrFQzxaeQHCWSFDCEhvcH8TGZEQRWa9yVaaiyJJSj7Bd\r\n4gjBYhbmdTIXU8n3eGc0fbrTJfvqq2w4a8eeCfg0szmZhnZoLuNtRZF1Ed0I\r\nNrxrfzxCTvcOkOXPigLd0/0J//qPeqFXM+M1XOJ68c4PQEvxOIYGgDX8ruY/\r\nPIsV3kZd90XOGsy6m5qQIEF4BjF+TUkk/jnwobP8V64l+FENARs/IfJ3Aflv\r\nRnY3U/NzzNVOrc4VTapnMMccGiXHqqCiytpGIuAcOlRTyZVmtK9z4+Wx0OO9\r\ncT7TjGprcbNAgUe0j5jrPH8gcEB53YgjcSJSOHvyUtRlI0pM5Hi7bdGlOXld\r\nmW971Y0BLCoKdXp53S7mVTRYpslo4VJzcEB4ze9rTjisdUE20zdXmvLY4q2A\r\n90xqmTfMM2US3SMk2omIfFShqIqsYBhXlG4uKbz9c6eSYTgI3TOnog9w3cOM\r\n0EkEvLDOH0ez0tCT0SsFL7+D2asgphovQet008GGv6xD+im+b6MlZiD/HpTx\r\nfypQTxNpcsj/kP6BEeVQNciJIUhR/WLCVOM=\r\n=qwj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/density":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.18cdc9a00.0_1663016611227_0.7363986174580659","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/icon-button","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7ab3cd3c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a8f907b4393dd987dd1f36a077bcc749b9da5cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":40,"integrity":"sha512-iHgnLqWED4n9N8TVQH9aiRem/QIfafPtidu96oz9w5lQjSaFrgVqqdFlcNmQXXtrtWfM1PG1IRTwrW019hkgPQ==","signatures":[{"sig":"MEUCIQCSNNJcTZ5PPXpuvF2Grg5e1AFdtSZuPFhsXXn2Wlm2eQIgELmqAs0dD8JNq315+AoilyMk3TfNNCpkCwRBIZMZzjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQawACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4cg//b6S0N6fsJZpmU+GV/2LF6q8OUWo9kxjwdeVP0fKdl5uuc0rc\r\n0HqvXncu6tJPunQt9Apn/bUgou0h1BgfdXYVAMBB6A3sdGrKwjuTms/iN2K2\r\nS3wCcNj7kYYrvrKjNuc1+a7noTCpKzQ+UY4qYVXZvfjL6aJmhgr1Ri5Sl1RI\r\ng2QFPojjr10jntc9FS/bA0rr8I/jtDxjCAVhzq6IXmMCHRxINjn88doNF35u\r\nbfoIye5U1WwYHMQ+AtBoW0Ed3y7Kjjx9cG/lYZgvOsPXzS84ZdhYCIFRpybo\r\nZ71NnUf0hooZT2+d1c9eVGjpLXnrLAc4BG0YQXZAIiJ80HCcv7c0v6B1Gbio\r\nSZ9R+yuaR+mHNwKNFjE4tmY7YY9J/1gv2qjvx1qtsYhh+sf1PH8GdCRlk/yh\r\nKu2i57Ikj8PcR4jxixrnKAhrwfGOEXXTfjYiom3suYyzjIRFRyPV+clU9xLQ\r\nfaXXooLc+k/mvdEfl+t3nPyiLgOLBXaHD5PcGQuVEiIFWPTmrE8Ve/yoYXb+\r\n2H2INCLgeyNM8TTSuc6acRcNnpZmJ5Nb1JY1cat9jTDt6LlWP3ued8i/hGVO\r\nywH1Jk8Hp7h8PJrFCxh7bf5aaAgb5RPUKGx9NnuYTJjQJ8PopNEA8hGnzuNp\r\nWSviPyJ46zeH3GA96po76RN0SYI/Lv81ySQ=\r\n=c4bn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/density":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7ab3cd3c8.0_1663108784111_0.1639639939255677","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/icon-button","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2860d244d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"334a096ef205715ce4d4b03b06f7f022586f05bd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2860d244d.0.tgz","fileCount":40,"integrity":"sha512-FoSFFZkaIS43StW50raULhdlDtRx3+DggpenxD6qlEVuVO4usyeTLLb8OqrXdZd1apv3MmDYLYp9N5XqpTb4ig==","signatures":[{"sig":"MEUCICDReFFIXqT9Ie5sZ80mlTAGV8CxUe+29/nLAelu9i7aAiEAwiShOvh3ce8rEMCQtN4hwjkU+meLzfQf6pznXG1/btM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjnQ//cQORCTKPxLSBLE22+iKf2JmUA5xwom472XxV+X8QQyVPiO9J\r\n3mef4BlNClevOVf3RfDIxnlUrYmPK+ybGxQm6gEtIXJPIwRJ+loqySKdu/rJ\r\nSTf6Wk/Vziil5zRQ4DSrLFCI8w6vFA31wJc798/liSab68inGxQCMLq07dSz\r\nw+uasPBLs95MFnO1S8Ix1w35heZvy/t8fjG+JBhaczKdlT/f4ow5DSMaVVQa\r\nj3ATfTWDh16tfkWi6G3na3q72keqYEmmpTFWFUNoNou8oQj/MXZJJM3IXJfO\r\nwG6xVRGbi8o+FzPa+M1kRF7l59MVjzYfxdaIbgo0eZOAHAeAn7dQjUMD8Gs3\r\nPJkZNrnVU5V3IKHPnE2TfzEF1p963rV6Hs2cVcv60yUoXCeXsXQRHYjpF91S\r\nWhZ6RjRkX6QevW5c+seWsoCAD3PcPwXInPbiphSOSG4h5vJJMotp8q8X3s74\r\nhRecqjlb9nxJxQ7JAGCjrFYoanFXYir4lvpxKUINHLxr1qygjAqBznYyiUOF\r\n47GeByYzE1rQ9UchHcFjYJZ1OlhNZsLzUvsNOLQ/c6/TewJNHtDc8yrPui8/\r\nF7uKiAtU12kQvKKAnMILz0QT+kjlL6BYKxGSRwyUsxanFOx3dI1MT7DN2kCT\r\nKxLbb6jSxVmABU5xUG2dl9tTpRemfiZ4eFA=\r\n=04pr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/density":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"15.0.0-canary.2860d244d.0","@material/touch-target":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2860d244d.0_1663368922287_0.6475807338675141","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/icon-button","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e8726533c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c8212b072f516b7fe368d885fde6bc89f3a7019","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e8726533c.0.tgz","fileCount":40,"integrity":"sha512-KeUeIPRmFzFYs+1f6R0ESfmI3BInm1IIl5c6s9WvWXmIK2NyNqjR+aBGbwbhFpdLi1aaEMVvgc4aph4jbD8xOg==","signatures":[{"sig":"MEYCIQClbJqmPaq0TGCo9baVYBggFBnYDijvX/ZTYhjNWO+wdwIhANweBG8fFnDPBghWJt6dFuKcQWoGasu2rrPZR8E4vq4y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqihw/+OM+HDOIQ/hbDkh3OHZX7Ygh6NRwu3d7poC/RyTsNpupmeiqk\r\nlvJZKIC3+sTnuR8czL8MIR88WaJj8aTujwkSSe92sAvGBBBit2YIs7T1BpFp\r\njWXWf5eCzb+qOtueczQDa/9Z/SQ+YBGdwsZE6RrIMgVheTEa9/3RwuXdlvfH\r\nqUv+nW+komgNes6Xk2VCxeIH+fsxwzNPLzlbpmRT3W+vLXYc/ZIOdGWUTNXs\r\npE4nnW7X5ROJEBd3aDeZrvWGxdk5FJ25QP8s3kQxgSdV6eMZH7vpNOCBPanB\r\nCfvRkYgsOCZEg5NBVVAzVo1lNCX7fs0BgnT31UsTtYKOto69mcKvkBZuxJaU\r\nG2+YzIIThhryZh5q0FhsuJAsYlpxSGKLPNlx45BUJVg3ViYpGPgEoJxVQuLd\r\ndja9hHQenDAZUFbXStxxwqv/9WOfqlzXSCyp4Ay0bhCiI8QgYStHog3KTsJi\r\nhqxwx8Usu1yumGUgiWddkGOxbSAVIjDVtpOg8Ld0Gs0zFGtzF/kQtc3DhOlh\r\nbE3RP3c1P1mFxqU8oKgmsBEuJr5VfAz3DCMz8xhhia+ETBP8n89/JEGC6+TM\r\nKrqZKyxvtjSA9RP+FDFK8PVE2zylPSYxB/lOMmhuE5SLaTHAwdQScyEiwZfW\r\nAvDWMCm5XxjRGBmSrda+Jp+aX5d6gSMhaWQ=\r\n=+NE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/density":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"15.0.0-canary.e8726533c.0","@material/touch-target":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e8726533c.0_1663705092976_0.018555085746095212","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/icon-button","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.00d8de0aa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acaf406719263889b17b37a09ee082ead14f2c4d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.00d8de0aa.0.tgz","fileCount":40,"integrity":"sha512-uaDd5b9drl4slxLC6RYMms+QihTHGN/s4ZmiINCtcx7MNDgWJLg0ILRZRCGZ88SMAjcvrbv8m2R4ALuPDJURCQ==","signatures":[{"sig":"MEUCIQDlL1OOOx27yqczoyaAfr71Qa8sjhJ71xPpqTGKMaCJdAIgIK9+xNMT9c9F+hiPTvbEngP72YD0ms27ibVVpgQnHdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCnQ/+N4dQZE7F354DWwhD8xexAyHo359EUjg1C+m+PgvBGh/TXkLW\r\nRhZ8gIivQ0OcUmk0m8IyjFKaWaqVDal+PgShAg3nIJGYatpVWy6/ebvpfBoT\r\nWKCDAj3OOU0lrlTaFX8BumfI5f+1eogq2ky7sBccoqmsUU0MvZvh1nRPgwyM\r\n4+uRC6zro6WxGBUq/dV7eqGkHqffmYniaecQHoirbbUMUjFW0d454omP7zNQ\r\nd/fyYspVXXMNrOLZd9MAApchCfYJNn/okAxyfFBqhTet8gL1RMRQWzAoBNxE\r\nRtTmZMzVR6RzZNAOrbkMTBO1IJbrbCigNKCfOVttIwmPxPQfSzd/Z8y4sxsn\r\nYzwQ0YODCX4eFg1McJMrnDZCc8a4NPjVBBVFko+uN460h4DqOBdQYG0q5KFv\r\nK05xHWf8exlqX1l20B5wtRfNdmF4Q70qH98k1crY2btxUFSG6KVL+LP71M/Z\r\neHYSsjG2RqxeYBkNJo4d2SFJrwTihRYJ8A1fxrcDsglCGKoRCNHALjingIo7\r\nd0oAsezjNGaGP0Bxa1CRFv4pwC+/v4Swcjc6vYc2yxZMTh5MCFs+Qx18Avxo\r\nbSmDaieh+878+w2CyjZAJ/+ilS9F9kvpTFDauSZ3P/unrhYnBAHiC8Yovkkx\r\nSHhHU/5u2pUa7w01gh+qWMx2aLWbcd08xQc=\r\n=FVpa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/density":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.00d8de0aa.0_1663773660109_0.758398802074463","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/icon-button","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.271aedc30.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c41160cfbd02e325b9803d377d01eff36b086ea","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.271aedc30.0.tgz","fileCount":40,"integrity":"sha512-4barotpucjBxJCHVYXoECx7JCxHIOQkKfT/SRjP0+r7m0ygUshcgTJ2xq0kjC1IbToV5YJjzmPI4sXAJP+P4UQ==","signatures":[{"sig":"MEYCIQDYeREHAc71Omb708OVyBeubAA578Ql72BClKeeS+iXdwIhANyxU7N9qgHEvPxE186vgOo9Bq3kPC/nxGBNM8vbwfmJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVpQ//QU5NZn7FEs1q2r85D6KrjL/ptqR7lVl+JiWEP5zODNMwpEIz\r\nwm29tCN+Rpe7XEp+JeiTdUofO+pWh4N/Ywww30onzciiutd7FuDkMYvm0PNO\r\nY1/1KApZh6x8yykmQX7ULhjBindQFA/QG0J+IyoMbSThTwa0/YNYtyF3WOeJ\r\n3aCJvEW4Mb+WfSWFN319cpf99Irj9U/jvmJwR2BmTN1Ucy4EjiQ8doS6Jsvb\r\nQUl8LXVioUTXIQ1pPUvusOlV2WPgIxkXlv2RdTIFAZkCVqztTC1Ux4KJVFNc\r\nPea3u4Ab9QMrF5AbX0/xj/jGF2TkUYpTS0n7Hz7D7B6BvZaFI5t2WNjtETrq\r\nL9+LU1LgT+g+lhRd81XEc5u77dyXeyobO6h96KI1ntM3AvXCoa6B8gYJOZ/M\r\nd563GXGdaHuo4zs/B/HDtSVYrrHIwcbi92/Q7mUF03H3VTis1wTLIUibZmax\r\nPOORsKflxE+eTuqFeaJ1DlNL0fNfHK/J4DveL3xEu8gmEwVldxiwWRx7HA/y\r\n5PE22Wm9ygGYXlCinPFpQM2pQWMS7c4bLrnrTaaut++nzl2iH8L92pqv1o8t\r\n8Ge4UjJEizLrpLSYPlHooFkG5Zetd6mrBW78o/7vQH9faWWq8SIViAahxH+3\r\njzvzYatZ1W5MbeqpnM2qJ76oxe8V36xxehQ=\r\n=YbrM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/density":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"15.0.0-canary.271aedc30.0","@material/touch-target":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.271aedc30.0_1663774593047_0.2308123272232503","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/icon-button","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d3344c16f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70478b0780680755cc485b3b5d6f55c19e11963b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d3344c16f.0.tgz","fileCount":40,"integrity":"sha512-vQzgSks3+KDchWTiZFve9Wx2Uc2n/63sku71acZUorDOHffBeoisCEOoONmmOEIMEExft2V8NaQRbD/CzE5GvQ==","signatures":[{"sig":"MEUCICFXD5hHpgV9rMpWcsdRzMdyj5Xr6jwyya5gtaTGWfBpAiEAv0eEATqeLRStckbwi0V9h+opRa8nFKF3iVd/bQQtCls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrouw/+JTdSzwK/9nYXRBPfLB4EpBmrgX2WWx+FV2tB1ApWFJCeQhq1\r\nCJvmO5hpj/+W+Fgmn3HC4ZRbFE0u2KfPhPlrhSKeekSppjSW7JKsq2yFHH0F\r\n5WTCNdkEae9e0TyC/t7ZEDnxpZ2rGsxmEto4yqVcfCzR3Foj51IjZow+76Oy\r\nmRuogVW9wOBm45niVET7KkVzPhqaqUmccghG7ruzOv3ozSKm6qs1bNR9OBYM\r\nXwVKCMYjAj+jXc3q5d0AFXQIFQm6a3EeQyr6UkIBq20qieNjT7QfzeQNiUo3\r\nWsp5vSLMPEL+53NTE4/vnEQVq1K2Vze14PvXwVr6nKrtCA/Rp64eXp/d01F6\r\nQz7sq9SjDT7lQq0rNwqTmeCKsz9UziNmWt+hWW6Gylo+iJkha6NYwoM82wpJ\r\n6giUoaVyyB+AhuOYxto5UNnrmaTWtsNuVKqtlOKzhcw9CQsCCH2Izgw7VYrQ\r\noBy0VuKpU0GrkwqX5GGXiZuB+xSg/W8ja7dDo9wn2MPEORsvY5jUGBXU5MVX\r\nBIm/BDUuXNULLKK4O1ukHp8AIkdL7iLh7LL87bhTGybiVAFQnxns4QSYWRNQ\r\nRc6Sd3dQrcZqFr9fPpQX/DZk25Pd9usEOtah2tG2d1k/oZgem7QHwIItX0dC\r\ntZGT9/3YMecdqeYU1uI/g1oSkYxldWqepSw=\r\n=igvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/density":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"15.0.0-canary.d3344c16f.0","@material/touch-target":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d3344c16f.0_1663838697499_0.31137903605507544","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/icon-button","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.94f20ccb8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61575fd0687bcf9229cd378988e5be8fc6e3f6bb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.94f20ccb8.0.tgz","fileCount":40,"integrity":"sha512-uCAswzhYWiPQPBmmUhbcYLJo7tVQ1xRwDfJcf9VjdnT0xLf61EIiwhFbydHkpmpPPLH1o9Nw5sy1CNrW4Jt/CQ==","signatures":[{"sig":"MEUCIExJ9msV60dwHqMSRE/Ydopg4jClf2FF8L4WDStLZsjFAiEAm99ij+jT2e+ROQjaaigM9hZJ9WZ/amSeOkKkhBCJvZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGKA//doKUgr4Ij2MaBNMpQXBu3rVIvdk9tANZuWw17lMhT+afFIKD\r\nS31JogESLO1iN58Y/jcXuaqNnwXsno0OAQMVnlu1Amdw5xoadHwjBcneMqpI\r\nJwUraWE+wRH78/i53SoTT2SS0Kd7MupE3SPShMZtM1QltAnUY/CTiPMuB3id\r\nOJP8YsRov4Ph6dsUIWSWM2U3n5fwgqjPsTX2ZpbFGTnOAbZcf8n6KephNsnL\r\ns+YdiNQZT7ojzmEw7jFGhSa9GGD93Cqgf7IzDa3PiKf0bpR3wH3h9BKHs8CC\r\njqNE8GcipqFjAnOGO7FSgG4DL1bk859TNqEwJwGfdGMWnXYYdY/hECPiD+gn\r\n4oOMMhkLTOdywDq/YV22i2PP5mK/oocbuTnRYEWiroyJaOwySadIX/P8EO9B\r\n01nJVpIwjgkt7eaRZThQ97LxeUOx6xS5WqP5dxJKswI8m0S61FfxHNcs846T\r\nLY+o4tK6fV3XhiBTkkISwjNeMvkojIip0wcWZgbNzeaOHVOShW4xUZ0uj3ig\r\nWS93/BNekWwoAqgtzZq+dBuTxkIH/EFkXVy9EYtxd3h4v6x/SocnwcvX9sgm\r\n/RIKYHh2907qt7xvQTIYBmfMENLjAUvwv3mIcHBDOrYiAN6tGYx/V/kX6tPs\r\nORN4iiEssZ323NWEuwwzSqlSn1QgKuXeIeM=\r\n=SWa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/density":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.94f20ccb8.0_1663879693485_0.45955579563013216","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/icon-button","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.81e4cb7b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87745de02bd98ebcff58380aa8542411c6554d0b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":40,"integrity":"sha512-SLdc7bvXZQYf0B1snp3jeok+9Jw/ju8hWE0fCaU8cqT21niDJAIHefSOqqjlxZdxFk7OIoZL+iuediRvWu/aPQ==","signatures":[{"sig":"MEYCIQDHdzi5mYnF3o6mMky5ghJr94JMi3ZljR2VMEcMOxzxfAIhALWLebm8iJ5zld1l2yCiuu8lXxmd6xQaE4J2qXX1hwgm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcv0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpviA//VwitcxQn4XQXL2YEgjBRQva4P931jOBtOwd77uSLJ9F0dBZi\r\nRywcVf8Hs/VYUbDVMowH69O6VNEVt32Q+hrCba0YRWyonQr2hZKvWoEA6F6W\r\ngmoxu0z35NqLwqfem9s9ysp9f1hdOdrY57cXkMKtpKaJ/vQj8oNn07QZnwS1\r\nz40Qvnd7qS2HmSF9NLRNy0RABoT+KGOb+Gezlyx7Rn0gBc5DqbeaXQPtu+9K\r\nW/u/Mpvx2kn2RXS8uP6mAezr9uHWUr3/G56mju/8PJXSOMRAk+4XzrNI59t8\r\nedGBPAEcXW9Trz1lBJyJe3O2oaNA3XemDxXxzwtMr/oCSEMCZpBfqmOkFSAh\r\n5vybHcxOjhmWUTYSOGzldqiF/f8wfRYLfPbXE2dkkRdbhgwH/rAuYp3j/D93\r\ni3HbDKIDYD7qnso4X2ywZ+iREHQfCxXCi/QHRF1mp6HCSspLNUwYWKnn0CtH\r\noSf2CvlLBnmPuefawiyrHqoo+mK8nhfg8m3lxWTLgWOG+kQQumTSDrfAgU5X\r\nrNvpbt23dSVPmEC8TIiv40giOt4dL5ro27L+BQRhyZrT19f8KxUmVPMyU7XW\r\n6gHvdaljFSWf2h2BdXlNq4pCPcjC4cG3VjKxAmUHmdicR2FZWxVHJaSXKZCP\r\nmgDpf/VpvI/uTiN2Ai+owBCe7Zi1S0NMKg4=\r\n=4L9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/density":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.81e4cb7b2.0_1663945715711_0.11233212468302023","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/icon-button","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.aa85f9413.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd8141f1e078461fa8eb19cf255e496ed6a44890","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.aa85f9413.0.tgz","fileCount":40,"integrity":"sha512-4k3PSbFAmECoBxQdbPKbS89/xNzpaFhP4OdVG7MsDgNG/LoY1MjIaWsOA/7Vdvtpjn/oBqL9TT19rqBZGoSehA==","signatures":[{"sig":"MEUCIQDpofNr7pBK8SVnvI6hopyBkPPoEt/g+eDUOtP/ViPkPwIgbWnUcEl84J3Ohxw6ZTTZ1Q1R7Sd+NpdAwae6LAX2tkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYWxAAlh0oRs5WVjCLJFbZd2BVN1nVpXgj+2rytlN7XepgWsVsOaDL\r\n+vr6QyUb5qZeks0zl4VUijGWHZmpr8NjPX8e6A9NG3sINd4DtPpmpOzWeUCU\r\n2u6zc82ohmYW57aVDPkn5lNL2X66UdDxclb7XwS+waPLvblVmro0BeNYq+Kq\r\ngCa/kXSSBSGgEfeVmPTuicfOyeDAkBNcpqrGPhJ+4ZddKotYPRqQPK7rF5ua\r\n+iFa13XrG0r6ROt8WcYAlLitpayWepr+P1urIvXhcVJBzaLKINxhbrXaPeWZ\r\nWekn2mn38UfwbcgRiL7z5eRP0VW2xMvrLQjTRV/E7jp5K3Mgc/RQMDfya5t0\r\n5YK0caz+RkqymZwYqXT3b94kSJqfhvncxubXMeRnxeJxSDwhrfowPFAUIXEp\r\nX3MfA8CyrnuFOJThxoXomnTy/RadhBpiwu7fik+oLNM/lB6eHsWj59jzpqPk\r\njv6kTXcKiqAa+3KhLFFgqejQ8/4BZ2asjyOEtUzarRJ9PpTl7q8FIsFLYelP\r\nY5rq6c5uRlr6znChRRewVQ3HGk/RClWDTeeSlfK9KkGpQIeHIIC7fARXi7v+\r\nS6LnrKdiLihdSxJP4shZmB9czgrKi69MrR3O/pghpP7IXN1iiOF38q90oMGj\r\n3fZ2qOOSpaSOpDBfgFDWXb0fmZ2lmBeEsMY=\r\n=2vDd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/density":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"15.0.0-canary.aa85f9413.0","@material/touch-target":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.aa85f9413.0_1664215009859_0.3296971471907171","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/icon-button","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7134a7752.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d0cea095185ee3085b08c2756401d2ad8f75d1c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7134a7752.0.tgz","fileCount":40,"integrity":"sha512-MYljSeqUTo/+GzJ+YPzyd/qz0rHWAF+0Tg4u2Z3/US6e82rDkw2ORmXQhub548gdaVF23so4v58wIbkrk9pWUQ==","signatures":[{"sig":"MEUCIQCiyezbq65oA/pwgSV3lMAdv87Kb6Ws9+PwAwB+xy6bLwIgPfPR0YafUj7JlESoKGN1Z1EsftVcfUuqiJE2aiizPZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ9Q/+LtjE7mvrY8HZNYPoFe95MRCpQ2zH/yH74uOAldbRKwdHyqfN\r\nlYy03vrvbv6muVsUO/hQpIBq3low9q8ISs3ZFG377tYhW2l0yCQaXFnHPepc\r\nPBfnyu7fBb6o7SeN1fx4m4LkjOKJbU8D9M84BQM+F1MQe6UlVaDzhSr4zhJW\r\nfAbN/d58+6J8f/WABL8gG27Vrl7DrXP+9HDN0csrmhdbKjn+8E1HnnlpZd1g\r\nEv4JGnJtyGTJUWf4vEIRPSxyTR953vlWhFLYJjOJfFTAItPqZIH7P47T+XM7\r\nS4j3P8ZDlE9wZyhl05+9nILrqJvAy6O0AZRI7JuJWmCR1aCBpPaultjGDXrI\r\n7VL8mDPJaX7uPbnmhx5L73yNlB/Std27nK4NZvJJi4vA168qwqzLO/bfDGr/\r\n/emkmnByxRBZqDtwyg6z4HGr4StumBpqVoLQGvMc4V+jtW+lovz/4LO4HiV7\r\nWjX2+phse1kEcm2ctzmyrO0fcthuRH7VgjI8magPcdHrbnx1fx9NeRdOYwgJ\r\nvY4beoebAty00jvrC1SwDbE9qBWtXYAGjm9uKl+p+DkTc98MEi6gsba0LU4K\r\n22bVVLYseE+baHXJjSPsdwacCCXH5sE2Qp6EtuLBw4hWszMSRjJkZJ74eqrS\r\npuuNnzLzILPnRjbBcROctmXnpAm0uPBoE7Q=\r\n=xZNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/density":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"15.0.0-canary.7134a7752.0","@material/touch-target":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7134a7752.0_1664229485144_0.9404698312789208","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/icon-button","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.70b8ac16e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0e442a613d5a3f0f36057d67d5f5ee52f6c5f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.70b8ac16e.0.tgz","fileCount":40,"integrity":"sha512-q/6uFj/f1e+lnfZ0YkUX9NreTuun13OpTosaK9allgPc5N628LSvD8BZVi4uBjZt/ewOpvQvrvZD3ZL+NxlS9A==","signatures":[{"sig":"MEQCIFtir5Ctro5NlNkakZ7q5pYet0mQf6M3/eIAPMrv6z3aAiAEyWAzZX63sBrgfVCxOx8ex7jiqOCD7tPpIsbG5tQ6pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3z9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKcg//UKbIX58M/q+sK2k084wN10M2gsfaxKaBn4JbyUE+/JkxVJlT\r\noHqaA5ys55UWQBJucIxlCPmZaItTsYyq2DrO7rjL0PGO2fIa2seU+NxUtFTv\r\nPHSPSivcMxx/TBi0w5o76QA3ZLn1XTqzz/3CvN5s0kLDSdKckHW8YVB3n10e\r\nEftW6oMhY2HXZ6cOfkS6bY2rliqfpTXq57iBf88RTECmZs7iPCUcvvf0jB/k\r\nlnzSEIetQ+ot7wGAuYTPzyvrgO9x7IvD+U/f8txEtzRi2egIX3/EeXmRtJ/q\r\n3V2RHDL0P/PNnqpZhVURaGdoLvbasYIyPIx0a7Cl+TwUrTaUVddqTfj2/LxW\r\nQxvbSQPfT6lrtjKp/ap8xv8uPo/fce4DHKsXykdMymf6Na4il9d+BBILZIPH\r\nRDAnamfpq7YtmuiVbzjhNJ7t0mMBUxmdu1oogDh1NgFyry4WaA4LV9vOgdI1\r\nw8nkzekKmzV8F0Rwx3ZgOPj4hPzGvlKhHvVjq43pVDAborBGPrhkudyZnnXZ\r\nyvCqtxjfrziXEPKecOw/clI/FmozCp2HzdV6cxUfplslPuRNZiWzclRzHPij\r\nm3pAXju7YG/QBX0Ch7RMv8Yvovau7EMUDkL077kQSM+Pog6ZyIDRgEPLI32g\r\nPJGfxEfw6EPGAogAkIsBkmHGdvPaCqhTwSI=\r\n=GzlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/density":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.70b8ac16e.0_1664318717207_0.8585628459957293","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/icon-button","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c20d74405.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96071cfb76aeccbaa3d59a998a7c3cd701bf014a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c20d74405.0.tgz","fileCount":40,"integrity":"sha512-u32oMGnSKLN2zWJm8ozXMA4IsSLi7Ciw/jdI/bckjqJNfmc6qXEJSBhex5UVdEOn1lF4ZxuF34SURvWcisesqQ==","signatures":[{"sig":"MEUCIBtVAsyeAC64ttwsVvjr2466isb3Q8lrxDrmiKv81j7zAiEAjM9wj20UYT9hYkLYAuBs94QlX4rKnpWnlFCkXIQu1eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4faACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1rQ//e5GLMCWGRRzm50ulEn9h/AcOozQldbshEeYu51isRf3nbLme\r\ncN+0uDdHHt2rbYsX0iPsAuNJ2xUPWkt2nBdo4ox5iUBdn+SF+dayFysY2bAJ\r\nqMBStWRkLWHBA3/Z1Z+QV/tdf6s1JCFoxDQmR2wrCIs4DJ009n3r5Os1jBDL\r\nbYUIRgcG8EgDLmonDdDRe+NY6tYhFulqcxEQXD5Vstc3enh+Q72vfDHfeQb5\r\nB7G3FWE+wpFFmBaoSl3smZdNik9WTCFu+4ulmH8d4wr88covAFEdJqE+3sca\r\nG4zJdsbGBvBUnlqMSYOu5pC1ZIpMLx61/WQb8ry9zvMrbD6hGtwE7tdZThya\r\nm2F2U6tfzi566stZ80pTwyTOPgQ7mkVRsv1YkNCciE3RWKz7yDSdC26H6K07\r\nyNX6O8qPmJ7qv352M4/qNgB9Y/YFgyqfF+woAj0VW3DJlhevQ+rmktbiP6MW\r\nejz+p0XBTyNMibOWuI2y3HeHw3CQWRZoXaBNCIhFSgedKbijdstWi+oRpuEi\r\ny7vp/o990DCz4STmb5QIEMccZlv3rZ9qWLags00Cp3mo7GWQMq/Dvb9f05b1\r\nBWn6yTcIrHTnOTwfaELaD0TvUoG6eu73bN+M9QTPo3RkNCwI0AZtYgYAAIYe\r\n9AyTyiBxQvqmTx0iipVmNYapiyOSYiIixWc=\r\n=IB7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/density":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"15.0.0-canary.c20d74405.0","@material/touch-target":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c20d74405.0_1664321498104_0.3011411321072044","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/icon-button","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f033fc8d1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"228db3e46c8154c30c6e18d77cb76b6049049336","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f033fc8d1.0.tgz","fileCount":40,"integrity":"sha512-xRc0pnlnu7pjeRYArqH/SZBS/U0ag/EuwP3n1tcCDl5+FxGuNjhIfcLTiP68to9Q1uGA5tTIb23AVGUsljh7Fw==","signatures":[{"sig":"MEUCIB5K39PuH67lgQ+zhd1xfBbLYo0wDOztkYjcrir8MsMtAiEAtF7cVtehK1vlNPoM+MIJ3CdlpQ7KaGa4tnocius0xwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM434ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLyRAAhldNumgXdsYwG205Y46d6pnga5yAiMVFM1iiHdq0yFUWZrv+\r\nsK+5OWnytbD3/ls34TDPI3U/i9lglGpSeCXFs9vQi+WEb3FpejXpQs7ZcEaY\r\nVp8BfHWahjVndfSlRMTs8+yrUvl9GZn4FREYE4P5xkvVQMwg9svVQjkED8Ye\r\nKetapWhyvRi6TGMbzKsPq8xvSkSTjM8Y+zvNxwkvqRZNRxxq6nXLXihinV+m\r\nZPPVZUMMSq/3F9kTBxloNaKPQIcA8ck8R6MfJ0/oYZk90qi/4/u/6MDF8Ui9\r\noneURPahtXrAR88qGMf3V7MtpxNviIQPdJUL7zRbD8EdqDoP+iHHHImzbR7t\r\nik/Oto4IOJQbf/Ti9b3xuX89I1meKAuKWv2wR0RPxKeeYf4lboLdgNYcYsHl\r\nFlml1GPwYgq6IPObfSjr2qgHyWVwNzXT/wOb8VuTqk5qv1eaIiihiO1dWk5C\r\n4YzCcG5T49AXcOxDX6Qe6AIn7DNZ3hLtaspBUqnr5lCUzQq/WS9HJOLuicDd\r\n1mnT/xsjyz4y2C/wtgnyKX2L7xAe1vMc+6Nn7TiSVp8TmiQc9XhT2SAmusqi\r\nkkTfl5jdVpSUGd6LpuRwcPM+BZdMUU2bZyL/oe9qcVvvoUFcOtBrV5kdsQMH\r\nirzIrDM014ZsqXzmFA0IOj7T0sOcfuYQ+fA=\r\n=Ko62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/density":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f033fc8d1.0_1664323064067_0.373592077489878","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/icon-button","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8d7ae912a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927d0ea62eb01498a22d57ea453a553990d555d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8d7ae912a.0.tgz","fileCount":40,"integrity":"sha512-chDw8q9H/fOwdrmqGPS5e6dK1VHOS+34wPcrYorf7ih6khAjjjgwFRcEIuzYL3xikocNECopja7GlK3VTZ23dA==","signatures":[{"sig":"MEUCIQCGstsEe14xmAGYA6aHfm1xL1CR15GVQP+y+O5OsHzsBgIgZ125LwyXJkNKysek1n8A4cloLg5FgMNRqlfSnPWk6bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+fxAAmdHi8O3j1HyQpqCdnu6Sxbdd1j0XQ2eHN+Fh+PMzvMNtgLGL\r\nTvgtd9pos8BSXN4bOlSZX1Omo6mGeFCk1ctw1znw+IladNpp87+DH8LEiaLA\r\nLVHCY8POwsCMNXHcy/HPSQ58hOEKijK8yboK5vk0Dt6bmbayl25gy/xL8vv2\r\nE+2IrPwjwr7tiQU09LKhU3vvkPXV+xpVDitr8zDTpo17tR/dDZolgek2mvNZ\r\npmkCR5JrfDz3RoyRoAmkBEel3Nq/qeXQvrcrLuNp08kg1bsuDPNeBa8UWbOB\r\nO+ZPPbztnXS/9dV+2Na1K1HK3KjfpYKy3xTy7hhG6ZYD+/yQsHjdI2/q0O+r\r\nScNOgAKOcbWpxhY3IIMx2Pl8QJzUvGinpF68mtHmSrrnkOUzglauxveWpIVF\r\n66pyEHhlKmX+eeFnPQYJnTVUxPfgp9w00/3OtvFnsGwgJRGRjuRSyGVMa62y\r\nI+k3RkRD7GeuU6hS4zwflzBSCvDA38V66YP18MScIqUQMsNK8IyxtfnZ+A+V\r\nMf0MAmjK8oTZsmRZ3XCLXmEW9+Dk3hEEdESVdRDehxwMZ+PnYN24taJxk+Qd\r\n79y25SY+CthAGw+4Tf3Ch1/ykJDMGILXAC8iBLZMgWXRuGybKFjFAAsdbYSh\r\n7n8pzIqSe1NhUPIa8p96P5CIcAYyeJkO4fw=\r\n=X0pM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/density":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8d7ae912a.0_1664351787818_0.1906123014388177","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/icon-button","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.db414b864.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af581ae5de812074750c777c3573e8e04873bd48","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.db414b864.0.tgz","fileCount":40,"integrity":"sha512-cX5GANJALAxgXOauYTrNSiqYjhJ5TLWzH2Bsvs6nB9Wz8X9jKko8uvsFLtDfmxGaGmQhLIIYUfaOHIrRBY0X5w==","signatures":[{"sig":"MEUCIQDt8B/7AdPlWzrG2oMy8uLh2BGT1h6sjJyv3RG5jk2yigIgTDRMWJS7/UyjJsVEIyVppDDP5q0ihfURQrOjVMth9hQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4pQ/+L3G3o0cnDkd941Xmwtxf6JF5lJ9OlGziWwIP5sGItuoBK+0y\r\njuPXGjJJgNCwrHx4w/qWIYktQed+GLwAGKwvHVfF4iuKtLMAf7KQomoq1Afs\r\npKrMXmD34BdagJMZl+vJADI7kFsD3nMq6SqxQUqSsFZCTvTatfQ9HOXb/eu8\r\ngCwjFqwRDzftCbassz3mkUZH1C1KKZ48wSG4SCTbXHqmfaVofGMgNcpjPB20\r\nKml7q2hnb1nJm94QeLy8Dx+nveFce398q00mwC9qmj0wAxrS+WgHz9fz9PJC\r\n6yr2t+pkckjmm4UnZYSiQVnd1sWJUw+vVbMPOzoYW8jZEWOrARv0Kt+AMEF/\r\nUU3MimSY+41oEGicAIi6f7/T4MQO0rSYX+9gUdflTKBIsfQUXC6HhvtmBAuR\r\nS1QraAirHtkv7MIJUuzeb/PUO88UhGWmgbl1SxwY0HqQMtjnp/HkmRzm3w7A\r\nhxCFvygfdzO4r/sTE41kIfry2Hakv+auBu9guOcLVqQw8YPvLtirHvfmWjLt\r\nGM5fBIWN3YEEgFKDt2bnDIZVkVmARnRT4eCDKMjSTfzY8ybN/tBt/3hB3sy6\r\nhAiKaK9c6Rxi88wPJx5mEC+nGCK4Ze2JrTDO3x/9Df6WqhPte7QOaMUY2AHv\r\nEnghXWIbQFMNMH22Bdoq/Y2BVf82D6PO7Nw=\r\n=/nw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/density":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/focus-ring":"15.0.0-canary.db414b864.0","@material/touch-target":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.db414b864.0_1664376786520_0.05561704517516164","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/icon-button","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.28cc6791f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35fcec087cf278b18552d1a63f7b0b5986ff9e09","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.28cc6791f.0.tgz","fileCount":40,"integrity":"sha512-aFg+ft91b7Hlk5pa+NbqvXdi0l8SLsCUZNUaHtof9pn4U+rF7UOWX/ehPPosqBL7vw7lBWSacwqaZviZirRHTQ==","signatures":[{"sig":"MEUCIHNs8q2U7h0d71Opr61Cb/7enTvIOxXggw21qb0KqidxAiEA+ZoOTC/LNZsOp2rZeeEukITAMIDqDoEckcTDqiQY1NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ+g/+N8bMLHPhHPqZQjyrbSkiXZMbYB3g8s3cdYZF6OuwaZbbeRmm\r\nzFomaB9pSheHIYgYncNRINNh1DLNo1uVW3AD3/ZGZGz7yR/ehGxEHK1AiWgR\r\nIWkyHjNhtGdJPAv8HzhZCgnNH1UTqj49lIPvFL2oG/t4jC0QY5hQOkpNQvmH\r\npsu4GkWGtB3q7/tCAN8XTGvcMF9bIZMJtNkHh7Eoj2YVTDsAXfFuE/4C3Tb2\r\njY0BQIVPWcNX6PnnkePoCulwdej/vncaCIs8EqEoxGXnnNkhlxUiwl7vAnH3\r\nwoMs6ih6vetog4sSb2vBmm+tUCMTmosWsErBBT9+E6Hgm6ta9xiz4qQkUIOk\r\nHRcVyNLhdK+9KuH6YLZhuJg8QCot6PaKEvSzcVogw5iWzLK5V7mIKrdxWa9x\r\nDLlVeNWrPYRMJLj8wh75qhwPQERGMPH6W99BS5oFauRmbwQFfDx5jg2H7gd0\r\naeM5wdkWz3O7g59GPBYNn+PFifciXfPNfK67xAMN3BGLSd10YflVJM1Siypr\r\nBg4dhEho5hBBs/5L+wEKg6pZoHSwuFFF38CGfKCQTIqdW7kPGKovAVEkVXlO\r\nSjADAA9fXDwt/1gEI9VgP9XDN5UZCTBhP8b7MkAnOcqtp0phcRUYy8oVD8+I\r\n43uwqDiwCEVaAwKHoSBcmSBUWJJBGgFtA+A=\r\n=GhEV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/density":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"15.0.0-canary.28cc6791f.0","@material/touch-target":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.28cc6791f.0_1664388439810_0.7302000957666286","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/icon-button","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a515a2d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52897f71cfb81a77a745e82dd8cd5edca7fd4405","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a515a2d18.0.tgz","fileCount":40,"integrity":"sha512-ounnLdtMInAAyoakNyXoa3UthZLng7tJqMOfphY5FkVIbplnLmyaoT0z+H5+8bDv/D/+YE3vG+6ZpFQaceaXVQ==","signatures":[{"sig":"MEUCICEEx/5awWWvVFu8Gnv5v+o5c91gAhS2OJxLjduvGJqmAiEAyEZQafKRLOzLvevi4k5oY8O9/BvtznVSIKEYt10JlFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoueg/+IQijkJuZ6+BIeOTG8nO7HS4NtrFMmmMd9SySHAbTT1Fdc3SJ\r\nLtwWR3l0CFhozvzJ4dYE+8AiYkEmq0gWDmcyv3IfPiw6kBmy2K/SGvHvWGwj\r\n1iWPlTxTV7psV3xlzw4oASzoixtRXHXWcWc6JZBZCFQ4in6eonIhk6vsoe3R\r\ntX77VtVVRpuoModjqP/RUaTHxswO4vYJTjyj6SBrWdDI5v8Yc8T5sJRpcnbz\r\ngjMgp9C5OJrHrWrMlp+FvVr4i3h57k/fs0rhLg0kM31AUPazjc3r486uhxFX\r\nQSnGdmYzTmGQCnNseoqz95qxLEhm/dVrdIRV/oKGfk69IrWiP31/SLEMAZWw\r\nwdBoBlmyYM02H5vQz6GkFtF1OSWS4MJSXxcJKAvghn6mGKbCCP/9RITcpbhZ\r\nHzgsOM2nAIhNwNJwGTZJFpHiA1oooAvL/9a7HQ5+lbdjOvjxJdcYsswZZNNt\r\n4am6INmTizFeicIshvpx/auMBC7BMrfCa6VBKU0EgeMOJwVWLXOY5h+MwTtq\r\nH5i1N9QCLmd9iv5gDRHR3OZq9mhldyVqEZ5V0dfRXz9d21kF8CFJRpe78F96\r\nxm2OiuNZ48LROZfuDklczlGzZVgaP/KvI2t3/XcdA4Ai/4fUwM05nDeMxfCs\r\nq+xoRtJ5qyeLHaqxqHG7rirXgkKHMRBHtmQ=\r\n=yCBw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/density":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"15.0.0-canary.a515a2d18.0","@material/touch-target":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a515a2d18.0_1664391370099_0.7985597646409397","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/icon-button","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ce9523167.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b54fe5716dc75d585ce6b5e41a507237f06a7e04","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ce9523167.0.tgz","fileCount":40,"integrity":"sha512-lLu5mbv4iUyaXx8/r9JXeYA7lUeznrqMC7mDsKZn67RpAC6xQcOpBeauX+rgNYKWcGZgWl71gIkUgJOmPizBLQ==","signatures":[{"sig":"MEUCIBsIQG9Jb/o4KHjMMX1AtgQU/2KF8gT3+2SMk2mrSdyOAiEAgvTFus0BP/kfc0BjmR33lCcpI+zLJ/GOOf5d5DTWbzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhiA//dvyw8S+7QRSjUpvCIn3C1iK4ZbC8myR7SiBkSO8wG1uoHkT4\r\nU5ychQ0RXE+Kq1C2OQoNPMfbytdDXON6g55iHbxV7I6CR/nFUtV5ULwPAMyx\r\n+Nnt0RSeGV6ADHotMhiDm8qcHFIQAm6fmdqsaC3onxmZ1g9OQPl1atNuY9na\r\nZlrUOT8MJgg/avdz6PY7X9vtYFo/uHkTOxLQE5eRvIoQftJAjfWNHHRIYmZe\r\nhB8GcxGmiKuGqjNG/tjoN3AsZwHFSQuUJnsV48M7J6NfHQJIKOc02Ryk3u1t\r\nvIdgcG0utGeK+3wlfwfuQMRy8LzuflJFYDYoFFPlpVi0OOG6+OleZS4unb4h\r\nIlCD9bLSaklPEwNIdTl+vbjwLaTcxsIj3u2ayuW/bMMh0yU48xQFA2cqUgyz\r\nVzz93iP0y125BiR+12ILfKR6tp85CgkSBsiXDvGGT7IMCXeYMRBVLjCn1Yd9\r\nSXFwjb4oTGhurMRdaFFVJC/XVBPjiB6JLO3ge56x1+xdHps4sAOSYH9A+ZGV\r\nl6euBE3BXoKK9+uph8o9THRi/W8XPUgXUh672tzTfpvWRTJ5ve+z+7WjHocH\r\nkxHGEMY96PUmTIzyLPk+O2KlgosazPxbhHm3vpSVr+9TtRLGGKdMEpXE0T6C\r\nKBerszWQhssY+blGpwNiQVZSyZcPt01y+ok=\r\n=vC3R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/density":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"15.0.0-canary.ce9523167.0","@material/touch-target":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ce9523167.0_1664483495859_0.9857660910205555","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/icon-button","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b2310f7dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512b9b6a160e6775a0a8f46be3bb9bb7eac47d86","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b2310f7dc.0.tgz","fileCount":40,"integrity":"sha512-x3jeSTbrb0HzeJMyb5YUqsgAGYBc3WYf7gHhqLIJBfG2/CfEQB0GczkJPh6V5gxPuRHTis7fCz2hjROlsFllaA==","signatures":[{"sig":"MEUCIQCkccWAx6KnKr6DXMM2fcGnIrgg+uU23UiIGadQa3Wq3wIgUl5xtDQHztA4j6hogRDcg+E4vqqgfYIB+FOq9/9e5a4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSOg//VWfWMNwlVk18qDEM/OiYpWBDqpdedQxeNCkT2bgmJkoxuVCd\r\nP5in3DKbkvaoS7gXymkCDpaOIPc3JsnMTeeGgPvg7xjKIMYdaFJ/CA4yUhVN\r\nTre/X9Dfv4HqHgWbymoZlQrsD6L8pqTmBgbU/lDQETinP12Rx6N4DrzRvi8+\r\nY5rX6LabTZJN6II+vBJxX5Y/g4T8mXrz2TpPVOzy+JcEJtOSuqJUvW9d2UBu\r\njNthk9mCaGRdCcobwSrGtDlxIPeg70gYqkbmsVLLfQYM9T2zCrn8gr1p78ip\r\n8xLTlUNyGbvjQBftPvIVPKuNGOZhOzG5XiodnMz53aK6XMnMu6SyR4VeyaEN\r\ndMFUeWIo/20JC3VMKLwBL5N4LT/fhr5uuFLCXwK9Rp0J+LelxIjCjXBZT1Q4\r\n8qi02JuOw0s4FeobXgpVzf/5TnQCyIliFKF9KkJh+BqTL4geB6YsHAxtDusI\r\n+thzk0LNvZhArhcnXei41ewnUyT6XNbZhm3dwQ35z9Hx/Zt+tO7CpkJE7nxb\r\n8NwTL34Hm3QSTmQDmxB4T12Dc+hnZd66xd8RmjEkOR74i6ixeV6qRDJoYXrF\r\nVBVdhjMYIkcOafKHZuznAFzI7ns5Gt0Z/7hzGJMAfZaFcNsIWoJHgLe306/W\r\n5JGecm2YuKoORs0dtOSoPBqBHEMPb1Lr33k=\r\n=HLfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/density":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b2310f7dc.0_1664496852454_0.21742512410111137","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/icon-button","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a44241e54.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a64627823365f61dba9af60e7ab5cf97f4161ce0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a44241e54.0.tgz","fileCount":40,"integrity":"sha512-C8hf7Zwj8L0fNQHByRP2SmSQUOaASwJW0IiryVn/P3XTJCDwo/uNQJTDv3dIOHAJUBAFlBmjtRZWeGUQsBKL8Q==","signatures":[{"sig":"MEYCIQDYX577M5vqw7br0d6DL2Pg9ua+3EZmWsa2eGjMGuCU8gIhAM2mkwHEc56spX0JiBvNoVjYCpBWEOsbnwNsmejIKHeB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHbQ//TIfNvZBtfpnuGresUby8rMfDDJ6R+S1G0KWVbobqnkS+j1aN\r\nNPwgnAZ9uAYvWw9s07gVCZuHQuW5Taz7HyeyLkAn6TNplJcyOsesMGLfzMP9\r\nUexNdDKZWqwhlewKmlofvFa8vxDWzfiPsF339WInIOeH5ycOFBqdQ3IsxISd\r\nsdodjksHuI4rEQNBvJNU3FcBA7sPvMFLZMuT5xzyrlmGo+spaXV7YI09Z4g8\r\n/dANZ29goZrmP/p8iWvQv/whcgsgh4SDiAwg2mt1ZaJFxBOXPbueTb1eq6XK\r\nTzpunKsxARmc5RodpcFEvRnW/f9XE3mWs2xQAY+DQjU4PTmJMxLchivAiWMe\r\nWt5I7GJ6Hf297ICJSjxSg4lR7VYEaqnrYTO1E9wK518isfmhvY/G5+sFFFXo\r\nolPWoM40PNYqOxUWdbxjiEdwISn21umU05jvfDgnx8UNqDO/y64fukRYZq/l\r\nlt9dfVLlRxH1F6S+CJ4cgEFDdCFOBd++O9NnHag/M7X+tePRmnWwfsidbZfK\r\nyOBjhDM5qHRjH5+dfY6+cGMAqx8oht/EYMEIvAWSOwJMU+SmjcWW4Bq+cg4t\r\nVmWNdkbDGW3jzM72my9J0o8CuAPiuMnSIJckKG9C7BTeU6PVil2srYDtGAR+\r\noJ0ww7vZKMEGqWGFv6hWsLC4trF1pIf/1qI=\r\n=8A/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/density":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"15.0.0-canary.a44241e54.0","@material/touch-target":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a44241e54.0_1664526088351_0.1564177629526362","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/icon-button","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0ce81e115.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef220dbad3eb379d0e3b17524984f6f600fdfb6d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0ce81e115.0.tgz","fileCount":40,"integrity":"sha512-+7m5+T1egVe2Ymib7TYfjhumSOoVR1ANfgQKyLiCinTqPprgSSYh+gWZPP1QkLRG07sDiIYxYbTHseF3T3ktOw==","signatures":[{"sig":"MEUCIQD5/kj1y3xEkupztwW5xU5guPp89DAr+kzk+Rc+jxNmCAIgUqPmEcdyXSq2e0lHfr9tNrhqnd+ErzM2bi5GraDlqvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzL6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEsQ//W9uofuYBQfcKSf7XUaZn2ZJZM2gxcJeenvq/vs15XweWdJI5\r\nM1NlIr/gPoEmizLAuM8TP+dti2DVwmkIU+R49D9AWXezS+zp92nflxShQHxF\r\nzIFpkfTQc0y4fUNhYzRkj1jYel3DMjcMMlJvVNMWRsYOxl9JrRrBw4mcdZH9\r\n8B+EekSXzCp9uADf37Ac2s/a2OIcqnVHRdJdUDtlBaMtptvxqYUtR7qcBGhc\r\no10ZlWKaBBMk3/SLqlbRY0Nv484lE9KC0cizVDrQNi5bZFZHXrEVdzeA3nG/\r\nUFw/U+ncnUZmnRoNu6bJvImKN22dDPPbJmnDIngz3ZsXo39h8U0hdXDNaNjn\r\n9f6F5r717LqMhJF+mn/lgZDrehQ9ifOdO1qfmDUl0MWjT22EJI+/duCQ3RPt\r\n6U0lGSAYYQi8FKkc+tVw0QOxSXhB7KchaJvxG5GycL61Fe/7/rRKkrI6d/jd\r\nol5dz6u6R0oCiHeqRaHqcgORdz0q2EPFOV8+5S+MPYyXBvieLFcrCjXZdauk\r\n8JXm5lTQcx8Egsy35+YBlrbbfrtMEL/9M8YUL+ICGpGWaLZh4TV6MTs3yfc/\r\nc4srzcpQyvGoY8uZBz3l00W0yz5WtEzBsvH1CVDA6vLGa1Pz0XyG6QEJAGr0\r\nZvAC/oGG2ds4Zrv9v+Ldpgl6f15PuoM2E18=\r\n=2L6E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/density":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"15.0.0-canary.0ce81e115.0","@material/touch-target":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0ce81e115.0_1664561914527_0.262753882235923","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/icon-button","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3cc30f6ad.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af1c825876ea14f5df1c47944ac954d5efc3ef8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":40,"integrity":"sha512-eGT/A0p9RXwx4scK3oJB5cVIJWFDFUVml2l6FD904GYC3l56fpUImmT2HqncWRfU217jltrSYZ4NQE15c2lDtA==","signatures":[{"sig":"MEQCIBL3x+l1Bb1rb+qd7gPGQc5ohpUYEOYdUD6EhCOzLhciAiA4kv3gHws/6ONFzl+n2N78bhpsmZn2DI0pawnstCs7Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGszACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4YA//Sr+rKwgsdoGw5D06QEkPAux/TTNqtnBSfFyJF3e3+YZ1bs99\r\nlq0UZ7Wx9IGFhMDQNyuX0fE3EwKuycn7f19JPR14V8TbZb1u8fnVFAVaQbrr\r\n8F7AHNFnT8oZzTQgI+1JAMV2ovtcuzsxX9b5lEblcQXtgp0TZDbCuPqZusaj\r\nOBCnnVhiCWhw6odA0L8oXOevFvvja9PIycBqIOOAeS2R7VAs8ppHqiyHuyQY\r\n6SD/d72pP5VJZXtAZmnB+Q2a1bIdJbrPBA9PLx1JbuKfgiO95asUCwBH7VTA\r\nMgbx2kTRWmEoS9RRusaQzOFGQg+vJDzpgxoJNzKjIyIT7lxCgHx052HboXIT\r\nbfWpK/0so+9OyMiXJ2CB/Z44SAlKk/4cZdD1o7aAnoRZ6c2dglV5zWYTNWzL\r\nhY76e8vTmWPdGtIz51zBc0/96pFmUKLHrJQj1m2HXts4/TpnUxVYeVOUc1KE\r\nU8Qw/IVhGebj16TiNyf1uUuHGyK1byIH5FnRu+Ma3gTHXVBPZzmxQewuowVw\r\nnLqMMPXKo4YoFH+unlygI8WVll074ZP4pqs4IqNjMFoFs0679Qht6k0iANeg\r\nfGQjBT0FjHqIr2sKM9pPox0ZE39f4sHS1c1qZHONwGI3ogdfkyyyMR7f1f+z\r\nhQWbkoakPZFcfp0GySQmCPWHQx2me+yYfsw=\r\n=YLuf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/density":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3cc30f6ad.0_1664903987122_0.1078085779998097","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/icon-button","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d9cf98e60.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33b2f165fa13200d0af5c6d22fcd35d8561a5869","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d9cf98e60.0.tgz","fileCount":40,"integrity":"sha512-geEZ/qKeODAiRfiMtYat+B9foUwBjSWD/GLpdW9yjbUCIJCLFsa/g2a8B7Gg7jTEBrelT0v4kE2hzYfqAwbJCA==","signatures":[{"sig":"MEUCIQCZv3Ert40LlCsBozk1IdajMERbGNlBe8kbm4l1H0dXEgIgVU1gZ/+IN4Yna/Azq4CrFBgX2oCuVXxMfrXxzy57EjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPjg//R+S6U3/PvR+Anuxbi4HAhsZghOf1HFhIX21jHAmyxindzAqT\r\nsCl9SkVt7ZzYB7jAClvQ9WtZU2qIAnUN9DRi8uhPIuNxgqj0Us2udDlaHeTS\r\nHtkFGE0fIkmSgloUkjPBctiIjvAPGE1xdPdJItk5A7UrdZrir0cDxU25thWU\r\nhHnA0p+MQJxIh3UsC3kckjkc4d55bvqH5a67wDl1FlbSRcwuUbal0aiErRYP\r\nUE2g7z/eRKtVFtrP7WnPdvteQYhpwtQ6mGWIs730qadu2f+TzltwvuVzcRsL\r\n48gUNHYJQl7Grv5uEY60T9Ho7jWV5d8avDuVSVRUB5tgQ4y44nIfHfO+KEBF\r\ndWkH47lsN7xey3PqDWtCtU4i4DGmVRWkzILuCoWin4+cuPv0+gmznjUzVgz7\r\nAxL7Y+KNEPe6uQcyXroOOsT0KgHCWr9X1DiC6tLfTtOl/MpFTZ1e635iugD+\r\nfNWcp6aeGlP36J+6Px4UJhKUoJqh3Qcrwuk6H771kk8xzv9/1Q3izAXk0dEL\r\nTdD9Wu6u+NOoWVwjGgQkpeS7Lgp6rGD3/GbNGHd0fIYe7XABtftElX6YSfU5\r\n39h8zD+zbA1/iUh9MA5mjzys+Z79FGAVw908lB+Z0iotWBuuMSeGopXSJmWF\r\nqYwwb9ujomnq6F/YeJ6E/GmNQOAIsVL/o7U=\r\n=Vq0F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/density":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d9cf98e60.0_1664910248685_0.1054855889606725","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/icon-button","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d71935c8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4acfd79543598fe8c4efe634f87f79faeb0d201f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d71935c8b.0.tgz","fileCount":40,"integrity":"sha512-EN8DwuSSgPJncLpCnCnsCNngFcA20MLySuNyuwyo/HemmufYETj3OaepSK690qzb23+STdiunJ//qOJM7D4Ucg==","signatures":[{"sig":"MEQCIGYt7Dsd+AXBPJFeDXk2nXCinr1rLa3PDt0Qdb4Vgp65AiB0nnr8Vq5O43hglcmrkhmkwAhSjuAZLWgailokennraQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF8A//Y/CT2h5drW1F6LWhquQdjhAPa/NoMPGjgmssmCWBkreVdusl\r\n4utgTL+/UgaT5bx+tgd6h1PxOm+8fmuwUHJm0XIo5o7ZLATZWb4VLs4Yx8Zm\r\n1zLrdo+lS0qwAsO7XCWVNJJmZhqF1UQ7fgbsU4WLQBctRG2Pqvj+UW/DXQM5\r\ne6Ke4hkQ2XgcsJvej0S1oNeUFp2ZiXlmmQuacZ+dCRVtLmC3cm3bXDOWDC3R\r\nU2YANfnQghY0NOGKMqQUVm/6xvzSHnKkFPcYn1z+dfv+WF4JHkxB5rOUx7+L\r\nFMQaF6kz4v4YCm5y1ZyaZ+jU2czasxhRUeNNklsg5+bPyojHcSNmEohzw1Gw\r\nQi7wtPNp95Jp+o83sHjdeQ6KjCoD3J73ws38DgFoRe0kVl6bxkIraQJ7bXmc\r\n89VhqEuSPWnbQU56TODBwAFHoaUD4FTli+eHdAx7kisHUSlDBp/dPI2kZvVW\r\nSOIIdMLx6sWwY/yTADP/HLdzd56QrzMddRZOkEYdQ7rJ76OHzkEIXDPmvXa7\r\nI+AxPHquIB0eRDb/+CL7lLuDEKm3UzLbllwVaO4uQM4y25kxCjALGpf9Cgut\r\nxSfWbmr3pTgcFYqvYRlxM8aZJIaagf3YBJJKKANB6LHvZFbm9Bo+pifUwqDk\r\n1Ou11tu7ir+aijmKAocT27U4dgxmlYEcWwA=\r\n=Ipwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/density":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"15.0.0-canary.d71935c8b.0","@material/touch-target":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d71935c8b.0_1665044116592_0.6797478941016781","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/icon-button","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.49c56a25d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f188dac03e52b53a9ca7a99fc006bfae1360fd7c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.49c56a25d.0.tgz","fileCount":40,"integrity":"sha512-6sR3pVIadFFakh9qebuW4ap43+Y221uIoSl6T0TH1daB+K8nWc7NM1LrjBpgIwVSWODvXP4vcj+R+gIfPEJo2w==","signatures":[{"sig":"MEYCIQDxlO/RMvzZuh+zBMNR5bvZl3IDL7ukZ+KEOGsMoexYTgIhAOFNYtYXKcKfzsUvLEiCF3v497JMqKYQVjDQcV3PmKb0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM5A/8CLs/uXJYoXMv+9GziCj0Qw5xHuE2mB0w2VbthELAogrkJ65T\r\nqx70iqwyxwNH+HoCP3HBESGmXJPGxMsnr/WwpCv3E5R0lxjjTSOaq4uQZrZA\r\n5jA9tUzGPqIp9NHRJSWU6ZlBOfKp+V9m26APF9Eagi2pVbqeMs6miUBrk33I\r\nYuahAZU2hC3RwXVa6qO2Dt1lEYAiPVUZILMKIqd7mpu6oBqqd3ngmB9sgLll\r\nMv7BS0rsGO81FyMEoqUAsRWTjPgHzlKh79938s41YS7LW7RKjfaipyxVuvlQ\r\nmWc/jNpmG+f+cYpaRkLeJIlBQsI/khQAhQDUCf9Hp8bFrm6tRhHfPm7Rtwus\r\nC0bT1ovJmmrXmA9qKiw7sXGHwPA1qWkQaOpPFH4I7JESkbMrMZT/MhyRFseS\r\nsyl0wMfdJxwhEzC5tjAsfv9x9aH+q/qaQNB/Y/BfVBuzAupp2HTbglck3PWO\r\nycN286TF5NDyVgrMQyc2UHFL0AVPIC7oCOgdPamDS7VEkxaejnc6J7/KqMqB\r\nx3tC4rqUZ6V+5CGlI7TxH5tmakimlDVJ2o9EoF+tzrLHIC8G+8vJZhLhOI5Y\r\noMQ7kFM+wfq/QtftuHzHmuEfBBbrXRWsZ6UOg6syibo6Di/EUaFZUExTSZnr\r\nVWT0l8PSR6BI6lQ7p7M3F2hLowMXM3VWwXY=\r\n=a0FY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/density":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"15.0.0-canary.49c56a25d.0","@material/touch-target":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.49c56a25d.0_1665082277415_0.9973139143334779","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/icon-button","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.07acddef3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13d8ce9b6b631e4d42a6e71b935f0b79de0d638b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.07acddef3.0.tgz","fileCount":40,"integrity":"sha512-wJtd47k+AJjpqseMdpEcsoXMkTB3E+JKcjI4AyKKQS8NAgpUhnkR1E3vcMAFTc5kqVZJvoPSKh87VdK3wicMpQ==","signatures":[{"sig":"MEQCIBVhOVIL6hcUlZ0tXgRam+f1mUT2ul1FWybVjzlgFPdNAiBpBvaIISi8A/c36gW6BeqTOh1LVBhVKmE3pMfxRnUBRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJw8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIhA//R4j27RHRcCs/dL1/Ev0RKZ9cDAmQxG/IYHjVAFkFA4CfGfnN\r\ncs4bb+GJlK3IFyFLFLKJ8y020WOx9xhDTPGNGDrSvimaeD97dGK/P4Utlg7x\r\nKk3HVUUkZl6+vfMl0vDvopka6/89PkfdPdewSzAt1FcbI7+rLxTv+qulLqED\r\nI7jMniRvr139yTEgaFdheftxzJTPYl0CcINdF0t+ZAj94v0FCpo5YlYa/zKZ\r\nuKE6F0PMqmPHyk0PUc3Zkuu4k/K4PWtvbQ1bj8zCsttDQd4J03jQoceB50tw\r\nsE/og7kNR/JgYMe9aRhP+Wz0P6LPRAXIjhfarg4sykne4mK2CeDDRYNj2mVa\r\n7tUGqYm6Lzr0esDh8Ffq+Qd8tlrQQRDm+ziGlMWQ0tyhXSZiRat+EHzrGydI\r\nXtowuaXTKUfod/TMNVTomYC8rR32bDFVosRj5ExUX1Qd1DNBX0VHtUjtrH6V\r\nJzhNA+udzmktDUXzANSs4pqMiQ2Do3unxfEWM1ou/Jfa7xVIPO1Euh3BAN2y\r\nDkW9LamnRTSxhzp0fTBkJN94cmwZPdvULfvfgX+thW+ZVKnlYYcfcs0s555n\r\nhGGS2a94h1/EHxJ72kCH3h21cw78EWzDvWivv40zhp3yI2pUmQPuxj8T3wx+\r\nKiUug0PLJ1ohq1K3TwwhVqlRJK5EVhIEwUM=\r\n=JH1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/density":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"15.0.0-canary.07acddef3.0","@material/touch-target":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.07acddef3.0_1665178684197_0.7200084862979996","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/icon-button","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1c74eb2c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"543e3d5b314f322a361192aefc1dd4822729f57e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":40,"integrity":"sha512-ff75F9slDmtjKFB+haZbbh5OzCp9cPDgPF9JBBWC9oVzj4dWk2JFTIIVjr7xbteTBxZllOIv3L/o8eeEPqzssA==","signatures":[{"sig":"MEQCIATGX0Z55mL3jwKKXTxCUojYlloR3FyANB53suD4ZvQoAiBsjGF3vTkIV+JJZTf6I/o/9eagfkgu29JZ0GJNENq6kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8zg//d1T+hwcl5X6PJ0c9lqZ+Qsf2qu+7OSYjHDdSpOwoJx6FMPIw\r\nBp8qYyNUK7QPmU8q9HuRSrp3HAHaPoVG5Wh6THEVHpEqLqyIWI6NdReixRUs\r\n5QOhHWaU/BuXhEgVjgjxt7lYVQok7UjmpzFg/ShpGhv8nuyO4ynvHiDlcINx\r\nPlU5FEEOPAloIlncEhNoroSb2G999opRy7z6AShaZ4gN9rZvhaWEzjFUw9iu\r\nTpAPJzKeZPldOOAeea16RgAwJtXnJe9eBmfzaq5hdsVVcW0GUQ/ncF+ka8hC\r\nDVNsy4KlbbF0YuGjXxPebnG58UXgnh8YKJP77WlGEacWnhtwd1gaP79kqQEN\r\nKiGRlAoTDYH47kW0wlrGaFw8lnkKN8Y0kRyxawf3X8EkDBQV6lxzTYjv8dUz\r\npkvPQ4gjk8h8qGgcL7DbDj0qYPTXLCaZPA3yPmR0eriGFcqQ27ZOMP2f05VK\r\nUs0LsRp2U4FjnASxFM01lms/HiX7FnvNnRx8Yq5MXZ8zX3NVm6qxBCxAT5lP\r\nLy4DsnK9zINjlq2Y5JE+rIql3T5TvpNZxac5THp3wiyCdl8ALr5gG7hm/o0Q\r\n7nUR9fQZnlC8AdQi6iLpcz4yzE9KJ9ZA+mDvUBN+cHXkkLMD4ERYrFTo5lc+\r\nHZQCwQAPB8qAczdQVVxyvGWozrvDpcQfSpc=\r\n=aIxO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/density":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1c74eb2c0.0_1665179743567_0.05941456384447874","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/icon-button","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.dadfb713e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0830695c2423aaafccc2caa59effbd1ad6b4694","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.dadfb713e.0.tgz","fileCount":40,"integrity":"sha512-AsL3g4L/iXUSmDmhkFe0EhXoRLpugDsoVQ6lk4IvhO8CZKdxCPuj3Mr6Cz8Uegoyhen4FxvLMiaQp2eVxTEVDQ==","signatures":[{"sig":"MEYCIQCh/oXmmJOPW64dn9RxWwPP+k32ij6NJd7ZO797rmXQOAIhAPz+lzcvUIg3SOHFxwtSPNfhExfro7sV03kcZK6bTWIu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9rg//S1/Nevk6YoHVClmyF/QzSzox5+9kQ240nsjc+3UlQmZwae2v\r\n7OicEkbsRLKn0pjHEvUZy2Z36hwJKBXOnPWsqT4OjSoHMDroYfZmdR3V8X0B\r\nAICUBXxKoxoXNrF5WM4Awn/ERzzH/sXrvYMqGU4en4A3fWNLsQhiUWXNqHPM\r\nhe/Nr5kGb4g4TzdiNEbX2c/VuTUOM/QsawR1eAv2MfLu/NrlyOR2byngLW4a\r\nbp39Z9l/Bao6eiFD9D8J9rBRIEjVF+zns+vTlsRbSeZK5FIVeZzsHW+xSZnw\r\n+wl1442qlQNvNHU9KVS/udQd9wgzSafaZJmcmJUjvYyFDhsJBOyqCD/SxptO\r\nUIOBhqpSdbPkSeggQlE4LhGEuAj8zeKC1xlvCWDl+GoZc4K3jkHzgKUv5r/b\r\nJtdL6h0E/Mdx0Lvd8Vlfl0HYhliixdNW1tvR4nZo2DFVpAi3ZQCc1cQvj3af\r\n0ZnnquLxwp9FZtw5YPydbgDhG84vtEdgVJGObsIGJGbfNVg9WCybAgK6zEmy\r\n7bZwMEAL/6UntkqmhiVPFhyfwRG3Rhq06PAvDL4o4qyn/7VO/9Dv+5H5OSEq\r\n3DZIt3sQR/zpVn9who4Z1rCLyH7c9NFPPo9ojhFbyJ8H+pd0av6viQ4dn280\r\nb0FRF3y6reVFQPBAjJqghQ3+UljxKZDJwR8=\r\n=xnaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/density":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"15.0.0-canary.dadfb713e.0","@material/touch-target":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.dadfb713e.0_1665205576818_0.9302144813169737","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/icon-button","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.395f1ce61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b3acb5fb22dc965de9f31ab50668e0ecc98491","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.395f1ce61.0.tgz","fileCount":40,"integrity":"sha512-rZeCaUXxfDoHI8rEIiKwv3qMYfgMUE+ER+uFyUYRO7tDOT0dL4HSXQmgPtvOPB+mY+9bSmcmVen4AIpOmjLpWw==","signatures":[{"sig":"MEYCIQD/49LpBvCElejcx79E7VtI2XMv+IblFDYKbLmQG6HkDAIhALnjYOU8HVKE1wjpRpj20upZGYvrfOviwAfw/i7/q6sy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnFw//f5vugI3vIiVGXIkWT+tT8erdPxQ2rINnDnhHYMdQyn3SvEx4\r\nl/XdDv266sB8B2WkqT/0mr3gAP8YYkNr3Pk0sn5MCU7W9rO9MWE54WLuAF10\r\nXz09n+i4+VlDLDyBUdMlc3ui7P6vKR6B4YXfFYDCTqqYzvyxRl5nOSqF8Qnd\r\nwQQG7kNebx19wKCbqSwsPPdQ1vetYre6M5IJDYw3kKcjlc0ycZtwvfl8DlA2\r\n3kCbOMafExKWDU9NwTopB3xLkwLEy5XEq3AL3D1XLsiN9LfZ4w9R4ruQEWNA\r\n4WIVBLwUz0fe8Nk0DIIEfFUIcLtcqAWPtsuS61RLNY5yJPzQO4CWPf5KI9Bz\r\np8ucZUW7R9Ke5IGr6lBu9GSTKbsPkE+q700lKBtF/OiFotWhJCmkFYdEbvm/\r\n1PyNlPxWc6T6cShtA1YK1SL1P8EedRteTf1gjX/H/EzbRfSUwCNJSwuMx80x\r\nUjxIn7Yzz7r/Zxs1xMQlWBFLLDPFC+nHBp+s2oI/p4TEihD8/ZoQQzbEP5EB\r\n5aRxIw7MYJ2ch/2Xkle5Mgvij6Bn465ON71rz9jUgoQnl7WLycg+esIBYMzG\r\n+9J73kiBbj9l7GBqBCZ2kUz8Lncy1x/wF2tdxjwZFstTIRi5OGGJ5DpHchof\r\nKrhV9eWu14vYtoeIDO6kG3LHlauJyrVZDJY=\r\n=9GjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/density":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"15.0.0-canary.395f1ce61.0","@material/touch-target":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.395f1ce61.0_1665205697525_0.5377790295104818","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/icon-button","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e741b5c82.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"645ce62993cc6ea0ad3bec4d296422db2180d37b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e741b5c82.0.tgz","fileCount":40,"integrity":"sha512-Fh7V6rWv0y4KIml+1u6FevUlveV3esCvPkzu59blMZYxFhO819A0WgnSXb5MzGE/7wNMo55u1jA+bkyiosDT4w==","signatures":[{"sig":"MEUCIENBvjLHpEBQdwdC0zZIj/zaH1RHzt0CxdJHFVxBbo7DAiEAkjep3FwOzV7Xb+9K7eKe0Qr3vKxDi4GPBOrXGOLMLOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFibACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqcg/9H5//J5mEwb23bur9sno/a52mLJUD+wg4eiH2F5fspwQpBM9I\r\nghTMdzUXi5cew/IVN9DLX14LxMSM37JWJP8Mc0WQwp1DxxxldfOrwPNdgF3Q\r\nzElSTlLq4Mc9GnUUpk1uHcEHhmaYI6IrjIcSr6C9fCGIrhWP9ZwVihnNJvYJ\r\n+3UoimvYZ215XpZ5bmwH0c6i/0xraEKq1gilZ8jSRFuInv5MnjdmAgtzraHA\r\nTFpQoKqZal06aXBllv4stWiuik4CmzIlMpH/P1bZw4+2fva+jxapx0UAwg2z\r\n4OdB1EiKwF/mc9vW5SACGHNA9kH9C+avv+F0PgmTXvDe3zpNCc2VDOqduBW1\r\n4sJbR/GmlXxSIj+5jUTf7VsuF8eWEW/cD6YSwTSRDgZSt2ZrsIK9pzeusHUR\r\ncYTTNxEw74wNhMkEYOFnEJtjm2ynGaXiVKR26UOsW6SzrC5OCvpkczaSgP6W\r\n9FOZ2bfhWRgqXjx483U26dtk7vqDYABQXUUsYC63gljddBrNBdJ2beO/Ttah\r\nsObjj3W2baoAh4D0tHQjFep/c+gPjOUuo2Qed2sXn3j5yQXrxf0I1cXE0q7P\r\nD/uXJZLkUeLrZl69kNEGOTeQTaPAL7T9PJQ2RS2XzHaBTgotopidNbReUjnj\r\nznE39eQjUbisZ9RU18c+ea+Keb/XOJ6YD2M=\r\n=QV66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/density":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"15.0.0-canary.e741b5c82.0","@material/touch-target":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e741b5c82.0_1665423514817_0.3581965387235453","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/icon-button","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.582f3cc1c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b713bba1b323932038f1322d8c6b78c945ef361","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.582f3cc1c.0.tgz","fileCount":40,"integrity":"sha512-lQvhcaWt8UVcTyCLKE94R26QI16MgWzTzzzJ7AkcFAt6Vn2bqbY58ZPLVxR7YJxT+3pkyGF+TY0ejc+7Cv0nng==","signatures":[{"sig":"MEQCIH/hA/vqkV8SzL9s73LHNtdiKE8/crpb17QIBKl9uCihAiBkunV8m2DJLUFKRwwrRuKxlfeIrFC5GGKFTIyPTUZOQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxFw/+KB+EUYR1iwyz8O1/obSNhnPAIHizK1DsqYnPmjMpPyMVarnu\r\nDU/YWYP4vUa/iGK2ZTYeAQbmLm+WkV7hmuKetZnDa0kCDewfGR95jk1G5mUT\r\nqpLAG9x2LIJAWZUJK6n/c7I35iUuA7EBEh0OmrVZnHMItIn7bSNgRLJTM8Iv\r\n7WtAViJsuuFEkcjStOr6y77z+nZc9GJYTYAdmly3GKTWFT5QtnvFNwRW6WAB\r\nCduMUYa+lfLWgzejZOwaNArSjs0q4bF6msTqEBLwoLp/O45LxGZDz7ppKa2V\r\nvxnBWAsdS7n9EjpS0OSw+JTcnD4LCEtN7OQZOQKPgIraPczGsGd3Eb+oZf2Q\r\nmREgD+GRX34SUaFF1RcFy1rEyo+JjI39pFy4zxgu7Kbp84Tw8X5I7kQnaBwn\r\n194bg4sxJ+OF45C7ZUu0Q4LFpbyLzsyTKuMBLZpBNHudAwrxKyrSY6bltqXL\r\nr0ZLROsoc5X6cvKwhOglasbebVCOaiL3E7mmaUhePWfa24THTRvkjAQ2SZLU\r\nTmvzxbKuncSM1MMK9fMhpOmE1F8DSGQWrOH6m2hhsmJLQd69+BSHLKhUgj5W\r\nEmDcDpHnCtMA3awmekDd9gFnYjvUw2eRzh1DdvPmXEdHq6O6q3bDOEor56GU\r\nb92xrpv8ixMq86s9rquIDC7tzUrsPpWMSjY=\r\n=NOwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/density":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.582f3cc1c.0_1665463772214_0.12411413477240774","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/icon-button","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b1a6e3e88.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358f16bb441feeac4b403602e94a1f272b024177","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":40,"integrity":"sha512-slClGxpMJ5WEZiINdpoE2iWBkYzbWc3n5kTlP2PmVVu15F5R5wGWgrhRGOk2PPG6jJypCDad/0q1PhzXaIYcog==","signatures":[{"sig":"MEUCIHBFnfhv8OTvk+Oj9PrM2FCfAZdbB4/psMBXjb2av7Q/AiEArd22UYiEHpK6fbHUekVUvh+F5gyrqiPqMfE+DJp/hOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjVhAAno5JTyOmVVPxWqWh2EoHOaEQOTwVjOGcQcf5aG7GtAFijehO\r\npKfhTQoCN+v8NxSsh3Lp5/j9OBgKxTm70EZZrRtHPRwWKZZRi76x3/DGZmZb\r\njKcwPd234G+mB4ujo9nYSef9de/bIupL4iA28VdOwN9dSViAYJtfU4MK0UEq\r\nzq7wMUYEsJmuMtinxQAFBILYS+UjqsvlU8Mwi84rscS1js9N3FaLlrg9Oot+\r\nwD/L2BOY1jDMOk6N3twlm64xn5ywTbhrfpdtelrRhyuLtzorPuhk7UhqnQ8F\r\nVx/exy6E8+iLf0en+YkYowNK68gYanw8RBLVdgO1Ys3skUCaS4r3GIBck6Xf\r\ngSfnoEO6TKQR0DUOPAqT6mpR6SZYqRUvFSK88A/V/+K5KKmcZHttmxVYxpoY\r\ngZam848nf2vbGYXn01SDxmB0vdQ8LpDkDDj1WBoNkCxFnmW+rUsiPTWxwIZR\r\ne31ha0e+BdJc22N0zcPBCYbOMCyNvrN2giSBzZb74L44pTdAd0sqxjvGeSel\r\n9IYDRyzpHbyVxdLkDJaEfipVkkaL2KGH/lQRowdDYkWzA14XH+obkE+KqJWW\r\n8o56MbR6abVVCMk36PrGxrkmPvj2VIKdJPAnn70ctLJ5obp8zv0lRNO7+kjK\r\nWzNRgmp9ItfbHwkalFur6LpYzMRPHHABJ+Y=\r\n=qnAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/density":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b1a6e3e88.0_1665576170505_0.1626571337550009","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/icon-button","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c9b1a31e4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"516eb524484ce57d16ec54ce0c4ea75832cd76e1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":40,"integrity":"sha512-a2XlBw7c6mgvz7l75fIiiY22WIdrVnBpS4qyqyEOhAtFB8+V17la9i5KgtnzBxOHMg23/pBBREF9DaHmtYyrDg==","signatures":[{"sig":"MEUCIFtThTmYrzDfHCoqQQgcn0Vvotl9NZFj9GYoDEAlQaMPAiEArroT1+XvHlkKQ8yaLDb45JS2btQU1c9TITaEHFOnzKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFwQ/7Bnp2nvvNeKWm3inpDAPw0d37FFJvsOUIb8VPzRdkKeWbg8sU\r\nUBt7hq3uS5xNbyvd4VcOP/paefmJ5nI1qF5MsmVq6XPEv5l4Od1bSCh71fNH\r\njKVJJiRcIbKWYYpB8WJeDMVTktduKMMtC5tJgGLT5Ug1wyWUdbf/ha9xlB+a\r\nMz4hGP9OPv5t9OvYVESQH43gLEB4MeGZrihNIGvLwhyopDpq8uBwWFfTy+6y\r\nmY1bKJiQRqneLvOEIfY8lcbRj4ZPQMxngyoi6NsKBMOXy6iOnD7FTBdBOpmm\r\nLQyieBfAdez29unjx9bhUNdcpteehWQJldfLZ12h5RIcjMhr+wZ4ioiQ3vZR\r\nVyLGE67NPUSt+ttrU1dXi/rKoK5TvgQy/dVpk3W/e7/8f1H+8WwVaWtkHBGg\r\ns580wVwnBQh7GP9W1DIfTzSVEeXSEllhfyDSbClx+MwAdXR/K7jaZR2L0zvV\r\nvZkFGl+GcvgCFxPrtMuVWjvpBlMb5pNoTW+97xi0g4f2JOCzoRCwDoa08IEL\r\nE0uJwrDi2FhXcQ54uzcFSt7ddjim6nLo7wsQMUyV2PHVNDQT2eOEttGHM9rI\r\nnFHi3154HfqgvhaiHyrG9p+1I9Nv19tHbKVWgOAVB1Fb9khU0DOlHDwNb31/\r\nx17gP8e+Vkbf4EB1DZJ1VHR9GwBoIAlom4M=\r\n=d4cQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/density":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c9b1a31e4.0_1665593944704_0.8705664110051787","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/icon-button","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.13e9b0d1f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c1ec74076509d141ee7e3871ec744a25d0ff73a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":40,"integrity":"sha512-7HQY7VsdCMXMUybWCH0jr/kwCkS0Hxx0LtdXG7F68jhod0wIqYbXyNPxGNIWyWP1DJF8xYQ61LzibQ9gt7/YYQ==","signatures":[{"sig":"MEUCIQCbolPjfZVMWnEg5gEp35hBV7w90hQYb40CGpF62jzn6AIgOmSyjcoCFPU1wcmjRue+0qWMN1nSCIW6OICxvqOG18Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxmw//RK6UlqTMBGMseQwgiCH1MMl/cSTjpVm67mNJ+BtFYg8/5Mpm\r\nWH/mQ6uBXQ51/5iA3zhmBw0PS8LCBWTFtajOzlYGel1dQhMXrir5lJGh4YnF\r\nKUyT7q08O+ONOoqjCJfbq5ZqPhMmidKH4aZA+z+90ginYqdAnZCpdAni1/lf\r\ni164bsb52CFyAwjedJyF2puMj+oX4P2I5ztEfeKuk+JsA3+dA3X8a+SwXNDd\r\ntngRr0M/xVuHrvAPK3eCwYh5Jv3xwLhpWiLfSKGEfgS2YBcTHtVzfxbnOzJv\r\nQXBVwq9MtDokyBw0w7U+sKKSw3jgVp0LaIKZzS4qMpS9m9yOGMp8pom49Uwa\r\nd04j3q5YDkNePElvMwDy+JpppCnVP+YD0Py7IlPZsFK0qZ81nlWU6dEsuzOb\r\nwM1YULOmW/fJx8U3n4SwiMxIAo9Vq3TORQ/AWlM1rs2fauWhccmYAAnXiUxh\r\nzT5t1f0Dg6ddCKZL74o+QhCnYBjad5LmKIJ96aTypjq4JO7cvmj9bMO2rPki\r\npA9HoSn6gPADv1bSCO4SITpvQ1/d8wu6uxfps8iYBuaTVA+tqIJp7f0FRFBk\r\nAQ0Kt3gy8gDATb/TgRhvNjqFrT6kUytfZB7RINe2HorvvQETHrh3G2Qn+pVF\r\nYCRezwszoH2nQYYsf/AsGBucj3v09IW95Fk=\r\n=++KO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/density":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.13e9b0d1f.0_1665602504103_0.30291861842516443","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/icon-button","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1dc797e7f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"829a45467c12737cdbfd33eff3e150d120f1cfc7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1dc797e7f.0.tgz","fileCount":40,"integrity":"sha512-m/6RZNEbaUz0WLJfccrIrygV+LQxmXDCgluEYjauOwjzlsG3jPimd/NFztgGGMJFnqdO/rU0Q23kNWxOyiBGRA==","signatures":[{"sig":"MEUCIFDVBxLu9wQavK5ipQWd5m/tvpN9QWXlluv9qMMuCHpHAiEA8CN7iDkWPgwcNVAUF1iNcirNpNOAVBTg46M+47ZSJk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2TxAAhRmhjxWQSWXSpzbd4S6F6DJo2RMarYLKX58hyaBEj5PkYGYB\r\njqhbLwbokZ3XakVuGtBHWR8BzQCwgup+VUotKZp4JaVyTz0y5zKOU0x/smKv\r\nM+YfrMtdDIEWR/cfeAeaT7Ym/L8C45Y7KnHdP3reLRSQxSZzyYwV75of5IRT\r\nDWE6qho2JdYCIXtaiVNX/gp5bmno5RmrkdGcSeQ6e1SSia82bbQJk/3yeYIZ\r\nIrfTncVNpPhoUDL21v2lQ7ulC3G0lA/ymrjj7ukjmKhyE4NCYuwV1+aZcX2R\r\nFW+VSex4QuTtMon9He0n293DQDxKZVmmviD6ymiavNh+rVqTd5D7Q0l4u1Kg\r\n+iKVw5C6uwWs4pQPUOl9A/zOQe53g+HvUoT+cWZwQLNG0DT4Fc74pYym1yff\r\ntre5o526s6ye9HAhIylVHgE/8ZAQSuiU+3DGMNIKZoZnCyXfpaVkYizOtZsY\r\nMZwU4Kj+81ZcB0ZT8VVBgtUEk/Kj+unf4xGSZ9K8TWZ78+TjmCkpldiLj0AC\r\nYSPnmbkWixFdm/4xkX0HsPwdoVJV8+RIP7MmXILFJkuBIorZ5VeohQZ1Kl9W\r\nDTib+ZUfQ8Cx/V3jCekqFxQUpisBYdSBxGxYhNi//WWE33rLoKIFGjKvQoMj\r\nCiPQK5yxekkC8cfk9sVQKu1Pu6gYgQ+g3kI=\r\n=jsLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/density":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1dc797e7f.0_1665740520703_0.825124909316209","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/icon-button","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ed4009397.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"456d31bc557467fdc3b99a0c1dc2b73f5a05c1f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ed4009397.0.tgz","fileCount":40,"integrity":"sha512-VChSX1yJsIoBuw9KtwbdUcY9LB/KIohkTuENdLcabs3WGqxPKe7raf/75quXW6q/zNBWvOCLzTGGAWYOKfSzzA==","signatures":[{"sig":"MEYCIQDUMTvn3BAbzsP3ZQydDMOiJHCGVWGKgNQggjAMhv6eYQIhAMKmInpc5hsAXpPEDpArSzIZZPBy5SeFVXbEAkjvbHTR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWOg//X3D+dDgop8JLiRCiMrL/LuA5jAZqNcK5ArzbOG7RSeF/qs/x\r\nCPZP7LgAK3AXLw1k+QGM/gb6zvvmgR5Iaag1ZqbMSEKouFEJfxsF1dbizQuG\r\nyh2SKWy7O8sfY9wIc9ctq2lesP61NP0s+J+2Oj2VfZY/5mMsN1kZvw+aQOzG\r\nTECJKHQ8YTgaDfFXw4NQaMQb7fWWUDeh6qUZ7ws/udu5FuYAb5kpceFsi8PY\r\ncZXja+z4noXzVhegq7PATnIH4dUVwLFqxfQxuPDRHZyBD+1D6XpFaKgdTfc3\r\nb5a7TZ7daMxl25eCr4WlVCo4DkeD2ArjkyDPaASazHpdpweV8A4pdpbncXgB\r\nn0767aICWEXVakZ5n6nNx9JuZEnY0h5InqCSv3h66Y/f4qZSHlQtV49XChQC\r\nNmAyI7rJegLn4sI5yWLWAAbMzd7Nd24kxzCNG+iozdFiX8xVGzJNmEXsRtbb\r\nnU1Yk7CDfRIbEjwDfVQ/J1cKqynj8hDZygiIpUHXlErYAvgJ7vIUdHtsrNOC\r\nnSKsTqFrvL9uQiR+T7jwY94Uxpw1Et7InzXgzHsgatXFLoAyMKxSgA74lAF6\r\n/ciGrhSUFZ1uMdrMc1wxfeVZz1vzIywIhgtqISHpzwMps4XORwu//IEaOUMm\r\nIZKW1lx2y/rLb5oYN7grDce+BMNFP8/Bef0=\r\n=tNAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/density":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"15.0.0-canary.ed4009397.0","@material/touch-target":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ed4009397.0_1665766302538_0.4214435711489952","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/icon-button","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.95ef196bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"649f04662f9a1f27d0a593a2d3d3b1a8a8f70985","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.95ef196bc.0.tgz","fileCount":40,"integrity":"sha512-JGQDiBRTC0x/tBO9cN4+Z7tOp6n6cF3tqdY7GVrte5wU7GVQFydlBO3cib7AoFFJICvKEe7Z/HeDLzOx6MhXLA==","signatures":[{"sig":"MEQCICtDtcv1LiOGqPEugElz45gVhOFtEfnQ+dp6yIlfkkjyAiBp2h+ZszXmY8SwKyOwfm/iRyMnL1ZINnP0Qt/izT8X0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOzBAAn3dJ/UxoGueEpU9MCqb+CwxVQG/NSN28PiuX4kZggM0POL5H\r\nP1BucBkjydy77OjL+vZDAdQ/deSwPut7dUVh8tV+SdJ5ouevYWUKnjl0BjGI\r\nIHlZT85el0g99td5lVscMmcpjzGkVcER2fXSTiko1nr2rg4/HxJ93J6afmdR\r\n3T7LJGjeRl2bNYO/cpjPfzeuzcJT8wVk6KVZrLKFuqQhY8D8SaxAPijZDGZX\r\nbMUT2MPFlYVP27LLb4t6v58t7xWRsSwkEglRb5rjFMNLLvmGQriMvJJ5BFfi\r\nBUusGw5SI2APLcauWBzxHLyH1KPmU/PiG4ac3Q9aYgNfgmLU/GofyTfe2KLf\r\nYZtmvkVWNhd07P/wacp9we9jAZD2v9OiTk5cHpHTGaVaKzC8qOPHSjUrcMl7\r\n1Y3d0hVD0nFOXrwSPtbJ4HPLC8ImFFE2fir0enkqq3JjRqF8URb28314pH9c\r\niPrRQkrvk3Kd9RZro0IJNz+tL1+HZGmbaqSd40Pb9aJa2Bkm3BSb52FQRq75\r\n71n+tKA28cuRgxzacaPHEg5qhiaQvyyNDAtydUi4YqzCfuCB9zBQ3nyNvG7+\r\nhWr5AlJWHoAEBG+PMdQYDmRfv6w5SPidmQktTRozhzlGzfKve6e/RaegOXZu\r\nJ4vlmoKEiiGdgq4Xu6vkY/yflTlEHDMIB7M=\r\n=r1bx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/density":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"15.0.0-canary.95ef196bc.0","@material/touch-target":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.95ef196bc.0_1665789260883_0.553549822773266","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/icon-button","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.13eea1b2d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e317e22c8192bcbd70a33a503175196fc8c04b71","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.13eea1b2d.0.tgz","fileCount":40,"integrity":"sha512-jbLIhHmm4iMCyh8Tcn68dg4JJsJ0oLOXgM7NYsUnfdgGHkDux1CGXdxZMckI9bckPBYDrqHPVW1fkHC/FooHgw==","signatures":[{"sig":"MEUCIQDccgFDLlv/U/so+7wLPRmH2Fuz466dkUiGB7pqkJCwIQIgMAhp8rfaAXK53+yJrFODXiYyy1J0EJ3wUNhUJnz61x0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuIA/7BBwuN/ymMQYh0sYdxVx90TUtPl/7jqNvBuxk93UHeDlwbXW0\r\ne2q09wL2E1TmCHw+mp/1UoOXQi45HNqmDt4vPUP1CMXFiji/PbGUwwwKiFTy\r\nKbLraXya0ElbVlbQ/FLpZ+Amd5L47c5W2xOEJFPkaFmGmdd1CCmd5F4o5rT1\r\nbltc4Wey9nLOZA8kUpCZuHJHP2A7RTJIpbyBKA0Hl1thsRkszPP+pR7nvQJh\r\n0OnUc9oKCCl6kY/Z4l4WjcMey743WxJRFSRY5bSzy0AnhXDjPgMe6tzqnLhW\r\n35gQS1C6ADQpWp1uiYsKGidVMOdH63g6x2tMyae+h4K+y7l9gJq2kTT54qL3\r\nusF088b36zP0AWTZTbIyfcpHsMMFRLuB2oq8evlv4mLvx/cB2FkO6HJ0mqkn\r\nvCMPFSy4vMa6mtUjp3xehSFyF9arBd5ZNkA4aVUs+0D/INkbF4g8gzb+2dXt\r\nyR68M9Oev0ziSGtVbFcxy+EyhAsW59oU98DRF2gL7D89gSEGsVwOGgMrVcav\r\n1DFWo/gIlilh5kVBGsFLwttIIrJjGxgdwP2XhlQ+Evtmm+vbw705huO6qooX\r\nYuA2DL8hN2XRUGGb65hyyXp+91+2BsSOyBV4v3Zvbq/BDE+lVzEPu+1ZVuPu\r\n6XMK40ul8rb0gxVmnWCeWlZtfBUPn4yrHD8=\r\n=RI3Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/density":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.13eea1b2d.0_1665978718852_0.7435730023505849","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/icon-button","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ef9b2babb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db6c2feb27855c0bfeebcfa860284c3ef88d7b4f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ef9b2babb.0.tgz","fileCount":40,"integrity":"sha512-epgQMKBucb2ZAVDoZfEqRpEbvy85t+dCZZptxKsclkH4SzxOqQinq1LKVoInDw3h2G1CJI2pWKnKgy8eSlOtIQ==","signatures":[{"sig":"MEUCIQD+ElM4cC0ppUpu/pTj3NQWPwHKrZNEwdF69+zzXFojjgIgQb9ceS8gRDbf1NM1l6HB5FIIh5LYniIGQb0KapAUaaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOMw//UHtLZShVUvnPhhCLtkjc7KLxeFFnk7wYERRavhmGXHkdoscM\r\nbT+3DOnGNqKhKgx7W4pLr+S2Iix2FcwZuTZUq4b8riKMCj5jrGCzw7+6FEbR\r\n4bRmXZyUyv1Vw+BpaxpJd2qEZTGjsshEMGKSsIJ1k2Gq6426CLuQ96Bx7xQn\r\nQ7a8gd1Yda6BCNACvgMQU2xPj0vj5FOyAiLn1yi2p3yOMWQC5NPXKekFhdOW\r\nY817ZkxesyM1LaFKeuwQl1ctwbjPF8wy8FrdHlb/MCrKb5zBG4Q0Mj1HBJ1N\r\nAfFea1DarhtCabE626DFJs7kUnjB79cUPpy+Z052FfCx3/ljxUvPH2IiBKJn\r\nMjHIz60j3VMATZN8G6tjRtsMsc6kn4aY7gti6sgF3rMa5NiIdyJGOQhnE623\r\nLqw4W1kXHOmojATxPJ77bVboUqlIjRfe/1iedkiKGJeg+BVrrWAIO+rPFfXW\r\nNRRX9W0jVDcI9f5dEkC1nPyHjupD5SzlE24i6Nb1fGuvA/3pdtf7u6oxbevb\r\n5tKOoZtFMf3ZV0bmkRJdaIMvMH4fNPo4VT5YpWv1Ezq1X3awLfAx8V/aZynm\r\n6IsAwkgmAVXcf+mIEe9w6XinYo3GxSxzcuHMTL7O9rQIzcrY31At8b4YfsBQ\r\nVu5XA4evt9JO3sVHtOhZZVm7wBGzk6PkVsI=\r\n=FXEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/density":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ef9b2babb.0_1665998304679_0.2510736003383096","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/icon-button","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cec7fb987.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f6c49cb07eee1400c0a36d38030e172b725863d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cec7fb987.0.tgz","fileCount":40,"integrity":"sha512-gPXMJLgtnHpt8qLpIw4cLhu0abF3stCVg/AnWS33y1l7mNQFWoRdC3Pix6R4ss58cpWaPzchJ7fSkxbIKxnOMg==","signatures":[{"sig":"MEUCICRe8TI8liHZ9nz1/Ps8Xhna9qCPLg5W4lh5lAGKvEYkAiEAygeTiAF6S0vthym5UnwUU6sfN164gY7/2zgaUkvkwwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0OBAAj8dbV2RiTKajR4SAlfVG5nK1qLULZVdPDeX2QddJqIVMb5P1\r\n6ZrwkdCBT6NoiheGu4lLB00CtBP+d+pqv4g+ZJwYZ1aGxw6I3T+J3rHrB11B\r\ndSFQ2mLlKknKvWdd6o3pWt1gTpY9pZn9Kwc+YrFXpUSRSdAKvYFT6vfjOKNA\r\ne2jZFHDV4bfbQHbNJtJIVBAOa/knbSvEKSlhSpTiFmC1PuToqb1vnoqvvP7h\r\n7KFbOlR3y//uDv/LdByKrc4DmbxW19l0SmjIXOljyM+rVgRcxssxMDVAD1IU\r\n3DNRxCBqXpPPpk3M5dx1hDbNKee1ASU6l8QraTwnC8GixtQxPwhEHbXbyjbL\r\ndpSppMtCCs4yIBGh8yD/UOtqGLeA5UaL3mE2BiNgA+EyOxy1L7uGSOs41o5t\r\nHgPP9KGW9IGJM6DsdnKGXAXTOIpwNQJbLbw7hyAifGs0MXgkex8PVdL1qJD2\r\nPk8/GzDu2o8+/BLftAM944aS2UfubpPGZrWw534pFaztQ3s3a2IQSfUdd0s1\r\nbiyOjjNvJUznU0icBGdiyNvXFfOI2rbzUOXZcA2le1Z2Gi0HhjABcYBxHAWT\r\nq1B4SlR4R19QlLkxRPct9DJhj6xtBL3to7z5127+xRDSrPo6sc9jFRFZFjdl\r\ncsZAwAr3F0B5BWF1doj2vmWkE9Qsd8mAeCA=\r\n=GF6i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/density":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"15.0.0-canary.cec7fb987.0","@material/touch-target":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cec7fb987.0_1666004206766_0.27136293169442327","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/icon-button","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4fff58b08.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5880cf1cd70b079de58c0086a9d97343139f7e70","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4fff58b08.0.tgz","fileCount":40,"integrity":"sha512-hqoif/nvtxNn2ZBhbT2JkoGpRoxEG6kBa+zzSSwDM13etjS5heVjafcYn4U11BL8VcmlDdx3NWR9dTf0p8blLg==","signatures":[{"sig":"MEQCIGZxQwxSZd61nLjs5AyEVA+/NHDvFOPpMoXx9fP+CPuDAiBzCNR+Tq8F5KjnjZVU537L553CLCV6VpTlJTEuZriSxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBAg/+JT9iOdsSFzqtc3TbQX1IyTBDvPJydmG/6vwqqNoWteTx/C+N\r\nPeWpKWb+sRT840fZjdjulOsL+i/hW0vG5zFZ9sRfreAiieGZ3ub0n2E+cot5\r\n6X0n03+RmPLf0UbTvk60/YtQYSD8RnI09WwsUGikWmC2UDSsSUTQc6mmWvjb\r\nQhQTBHEgp/GttIaSY5yC2Cv/616elH5BH9YZ4d+oUgrx3tew0ACagDzNvokq\r\nRysOTkpvfKqqkVT7dqvURwWXt6R2gAqhheohPN2Uuan7qYSFcHCza+7m2N6D\r\nJZO/VaU9VeeZtPp8oPJ3NBrYvb1LyGRTTV+BdfXt62n7RrDYfmH/rsDxNigJ\r\nJjwblTZjaipbL/qUU7utxq7vQJr/IbmCXm5FoSyReOZHMP0AVhSFJ1MKE/2a\r\nJDhnZAvaFsYmMgwA6XhDkeVeKMuPM3Ebcshzblod4uV4DFyOI2SyY5fbFiHk\r\nkz3J/PLwri9dUM79d0LUQbXYFpg43UXB9iD3WS0sskppDsZuofU8DabhFn3V\r\nPOrxQDzOEG86ec5SvzKwrIr+ZXcyen6LKKYOqRibm7ejxL496qexdA3SVzMb\r\nHRWtbKrlnvJlo50s1E2VDogYJEqCYPHz/LV/tqSlKI/ZOVLPwF/mGETOSDr5\r\nLh4bRpJi9y/nTUVfQiG8KrGGFc0E5mr4zVQ=\r\n=UCZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/density":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"15.0.0-canary.4fff58b08.0","@material/touch-target":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4fff58b08.0_1666020180950_0.7826458761133668","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/icon-button","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.587d8f871.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cab6ba084be416983f82336349272b84c5c73e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.587d8f871.0.tgz","fileCount":40,"integrity":"sha512-6fpDsI+/LuE3VW76rTlUeHBa1R9Dq5WKd8CkkypztTqL3u4tz1fLtwVyVVAGaP/Mrcw3FJrCmwglCAqnu57/Jg==","signatures":[{"sig":"MEUCIQCkFoZmJhIG4aW2T7uj7Reiryl9WG+fQZ3RZqfLcw//GgIgffMS03mJjDNvh2O2cCYqzwG6oNZOV16uiLYUP96GjYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooFg//QGFNjRPv2LoES5W+mqx7h3L+LGtjO9tH+lwoRnKia+VGIgIT\r\noMQdhWlTPsMmNy4Gn9sWVLoidavIq7NINnS3XKzScr9aTlx7BtSXN+TP377w\r\n5DCINhi2TAeyhPPK8JHyJ8wnDR4ed2IsxsU/gWRzc4y09bDhdyGPWG6eT2UB\r\n4V4Yc4Ks/j/49BA+ampj1Qm0r0MiMLjrQpZnQABbqAHRNLpCJnSBv5AHK6gS\r\n7BgitdD7GxrUt+xx5elIEJfDAEEquwmm6OG3P9FuuIVdZNJfHYTr9OZDYQ+Q\r\nZRyRt/h9FKXF+1oJKZn3SIluJ0m/j06Ooxbat6SGfO7+BLWxf3SnnlM/uiH0\r\nNJHUuxyTZCbu34Uu+n32U8oYqVBnzqnQqeRQgvaPJblryNho4HEyde114DPr\r\nfDnVenrketAELrMPxHcU2HGRB3iRkhDPiY34IVkUIhl3nRLLwfrUDF9z+guS\r\nsnTxIZl4FRrRwjbMTlVrGqfOXNWhM6xCMB4p7iFIFNNeC5ni1Uv39WfyZt0w\r\nynP7IMUhDQp2130gwgPVlSMGhkGG/5GAaKv6hGC+NcD5Z8xBGlS8JfQoMKO9\r\n/f8yAm91uicomrItj3yw+/TFrnTRm6pbhGUoktPOG8CSGol71JU9HPaxLviA\r\ncPhtRek+UD/tOa+mLoOTCmaRiTBjJsIC5I4=\r\n=87KL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/density":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"15.0.0-canary.587d8f871.0","@material/touch-target":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.587d8f871.0_1666022251830_0.9936340339305434","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/icon-button","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.edf4b98d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f942bfee3f073edb9555bbedd42f586b2098142f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.edf4b98d0.0.tgz","fileCount":40,"integrity":"sha512-zn4DXjHOot0s3sAA8fOBphaCjPGInynJF6FSAKu3Pm3Wzmc5pKW1SHw92dA0rc7FMMXWo+DzKlvN+mbTWUuqGg==","signatures":[{"sig":"MEUCIQDTqprTZHN1VTgpzefRWXKFjy+vy4da+1y7taNnVOzZQAIgbUZRF4s8gXKcFqCFtX6DgWkvNJAJxESU0Vzb99mGJUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/xxAAlmOEPgv5hb61k4qhYWSF5qiWYXkHM0ZhCYu5vTnUvP9T76tF\r\nvG76usPi6L745qJW+Ox/JQYxenV6DbdQwQ27lHHrKXrs3/BSFukhuDAPGfuR\r\nyaOd01wv0L/CFj1YS2MKoL9/IXR8iQ9CnovuyfYtYJEMVTs612sZ9FzXadIr\r\nERXh9Vs3XqWpA5Oq2xjxgQtPhGVx3zoZEqOjbi25Vg9VAuSXFD+9eZBB8Ajn\r\n3cZlfPWcTSfke7xVTSgps2OeooZkGnEPEn5WvcpWEVtFHcrQRDtEfWVaTSXs\r\nKQ80eUEthRFb+jm8hp1I/wdQdAxma0Hpj7YeEKTMIL+6rrUJU0hEDMBNc6rP\r\nap3Xft08aRwZU5acx8gQgtygjsDVY1LidBcviPt4ous8/Mvn6PbYLKKe3iNG\r\nLv0QBegymNEtBEqcXqR+3vzQ/pXCRpPdSzL93LdHCWU6tIOkr/D6crW+5Y0P\r\nE73K8ZPaN/BxBKEQH4EUsFfY046PehSjIaZDnkE2Yivl19qjcZBuUyeb3TVV\r\nEcTU4QilFpUP8uHPPd4Vq5SORRzMyq4XqTiNLu1JHr326B+uSnPyFYxM//7h\r\nBVGWAPdd723GN4J2h4gOVBkanFzXo3n4+C84TrOannla84ftc02VeP4s89eQ\r\ngF0axW3NSAUj6idDlqM7sW/6tr7Taai1mtI=\r\n=JxED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/density":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.edf4b98d0.0_1666024852809_0.4268849798092169","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/icon-button","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.024ac5f16.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85db2b31d34787262cb32a769d4e054cd0b1609f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.024ac5f16.0.tgz","fileCount":40,"integrity":"sha512-0P/vYvrcp1KOkQ2D6OSK1P9IIFbyY0Df3Jdzl7QiDExJib2RI0QaKdvpEKhwztaEc1m+/s5+NvOoKosXV7fJJg==","signatures":[{"sig":"MEQCIGtyFqV+JrFtHXaV1mxXh4REiqZYZYBFvvmdd87UEJ8DAiB2fJvbtpIFdO/2iALPrPgxppUCiFyhuyXA44W+BRESbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqiwg//arDGN5G12GwIO91LuSnRK0jVcZF9TsvXcJbC+0HsFjYhHVQ3\r\nMcdLuyRK8ibgMrqP+Z07VSWZwhXGytdVzQRRzY5dp/MqQQbEZMAUBirltVIN\r\nW6sGn/5qOS4jlCSuy/ts5Usf6g9PERr/vfSdqvCk3+ar09eFOwQ7hY8LzJNd\r\ncvp513Zd3hSZDXs0gFJ4FSniTwranklRK+63Cq8ospHzEaBNGN5ihpMoIYnG\r\nqqeiXjcJrgjzBu643/tmkJxO+R9VW3EapxKk7rcou597AeUc1e5XK+wDNYfJ\r\nf6i7s6o6rjBn1WCGCDjMxcgRML1+Xw8WSYTYVtAM9iu/qyYDCrSPDV0REPzu\r\nt41FxnYWFmAPxxf7aLejIaxFgUoh+amhMfv1FMq9Q5xeIYpI4chEVK+BzijW\r\nYG1YLsRBqoPKk0nU8O92P2wvCT3VS6JLyd+UBgWk9QhWPa5dIfNOvX1ONqMy\r\nd7+I0Q80EifGjUe2EghTe6l7k8PqVB95U1y9D0MnbDB9f0Essmqwo48ApLJ9\r\nRHHpkNeONTmWM6b7I4Hi6BaQ+L5FlXiSuzEAPJzKLOeuYB8byDRyP/uJFNud\r\neJ4i7sBq9YwUrjCXv1Fq425a67Or1cgDKEhJuU0A0C9P95BPZqOWtX2pwh3K\r\nk/YIrIUuH8WnHJLKEe73hx6o5s7bBmqQ01A=\r\n=Aver\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/density":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"15.0.0-canary.024ac5f16.0","@material/touch-target":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.024ac5f16.0_1666046566577_0.5566003751702586","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/icon-button","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c8bdf6144.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a704bc4742485c74374372959d0661ab3ded53a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c8bdf6144.0.tgz","fileCount":40,"integrity":"sha512-7eQZ/tox5bcPNwLMA5u6otoU7lajm6tk9A8RP+rXA9yRQDOmbpXKKJRixK+1VCZKRZXpPL9+iipNsAxQ4RctDQ==","signatures":[{"sig":"MEUCIQDboMWsiqUMbnh3ww5CzEzshFkO/yipJYGmY2bBHSVJ2AIgBgD9q9svCyNMOoyQP6Vf+BxsIy5XNXIOzLd91nCcEEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6lQ//R74gn+6g+rLRRF0e4CUzXVizPiy4UnKAMjhVsqDDBHA3k4DX\r\nKBj27PIsjXCbTdlraCNVp9oXz/UxxKRFheGD4geO15rurh4dBezYYeR6i/q3\r\ny55IqbUmLxzL8jYOtsc3uHCWt8sk2hALcv79ws1q9zMKdKXFIQ4rgJdCEOLr\r\n0KnVXL8ReruJ1SCyJm33M5aBtjTUIgUP+AiE4YsC81Ysk7gj9RYuLaayDV++\r\nxMNc12Kaf6v86/DvUHfpspBdTvAMtfw6Qvhe5DdrojuNCB7Ta70yYWGIqhhS\r\n37Y+/QAU/T/dQuHfnYFkM8UOfZOwEOph5vUb3QCkjLn4UTGmVgMg7yrA2Ovq\r\nAO6eS3y+K4QP+UhhQqKGk4iGwqKvc106XwW0KQP2bEyPRuCk24cUWBLPbSTr\r\nD5FxSkh9/sYsftR8TXzZie0CesDi7WgRcpUwHiCFzmh1L3bZD4Bwwh0cDDEt\r\nAhCJsJGzmBGi3/nBVBrmzyDTum+r7Ujx2XZzFcnl1GUiG5lVra4IKHd3xoTE\r\nZiBMJtaCaVZa2mVy5QEosRuHyZdZ/wJglt1YCIPkHdCoXT5Kqip2vnYR4EZw\r\n656M6+/ezSEHhr45H2mujWDUHcRnRYh8WY5q+708qxzlcyw1tLnewz4Dgm7t\r\npDTG13+eI9XzGP7aOvUryTME6frGfFIiLGI=\r\n=gIcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/density":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c8bdf6144.0_1666117428965_0.6333971280221757","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/icon-button","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bacda4885.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce3b7a03c88de1150025ca8f583b129ad74e9585","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bacda4885.0.tgz","fileCount":40,"integrity":"sha512-Jtpd0MtWOonF1u4n4tPCxzYGCMcl42vhNDsnZiTzMImZTZ1BOUpIs9/rru6CT5rErdJYSrtyTSHkytWDKAv78g==","signatures":[{"sig":"MEUCIDhGRAY8szzeF3zd0XcsrZdR+sku2UDOT0++OXzWBVX4AiEA6vXJb0XejP/53gK9RDdL8ic6PuWhlE2XuFyxbvbWj3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvO8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodxhAAkAX0BM/OAl3L4e0XkJymGfxd8oLFb9fzEqt5XUBxz0agCewo\r\ngVPN+l6YCrimoz81dIryJ8TIzD2j6kLvgzDNuEZb1twVfltxvZRJBd9n1g93\r\nVt6LHMy4miWdJYNKh+j+z4EnFkzGBq/OsJIR64B3iAWc2J1tkeYC7lnWp00Y\r\nzd61L6pb7cKB33FkQFtNWUzTv05O+GgrHnP1h5nlXsUthMk1/836DKwPU4nu\r\naXwl1DISa/6m/dv1Oh8a01Eaou9Kp67pLFqiqHAddG4taiaeQOSaFl7HQjc9\r\nZFK9kR6nrHw3uh9pu8k76Aep/hPh0TPMuI573C1QY1EA93Q/7K6CQ1mHa0aO\r\nx3/AtD+tPtLnZAqX1LWHLTCHwCSWxCygbCdbXJw1920CjDpuiR4HaBvyuJvE\r\nGtngN5SPcGwH0EB0rsh+vD9NcFWQXrnYbBz5Yq3UOVtmD9DkFxOWsk49WLkc\r\nD9tWWsqOfOX4EcsyVIssX+RyEcx0Dh/EHdmLovbf0OOaoFFv6fX5d4UJ5tNL\r\nvzWylq9607ABTcu37PIPLqgfyazAJzdSnYVH67ZC+ME3z+eu1fzhoAb5OcIx\r\n/YOzswE7LSlix9QYaFsiukfV71HU+4TxeYrWy5vgQNnT6/wFg+u+/YMdiQUI\r\nNBPpctT2J9IvMi8U8sIsJzDyJCDAoZwqdNg=\r\n=s2nh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/density":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"15.0.0-canary.bacda4885.0","@material/touch-target":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bacda4885.0_1666118588358_0.1304794843955026","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/icon-button","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.92b2556cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e3fe3d770a9ed728573375ae9de0fc9b80725d4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.92b2556cf.0.tgz","fileCount":40,"integrity":"sha512-vLft+dcQ/rxISaEj2MSc7xt02xE+8Su9L/fML1QltXvzT3EAW7B2/UkeZ5AyqaP5Hg1iJWux8R2QoL5bLyEW3g==","signatures":[{"sig":"MEUCIE3wLHx1zV5Oedvg1Uhu1jMvRk+BMIm+Nq36DHvYrK2jAiEAuJiGjZMJEzYiDxHkAT1OzC0S3mKepP9U2pF5QuIu/BQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQjA/+IVdKbf8YRb+teeE9W21NXFG77edtZ2q6KgxlGvyvXPsB7nf8\r\njCIF1yYgaireUcopsCzUsz0h9anu0+vW5kwvk89nPF1hPSE6Foli+AoeALc/\r\nGsPUJ6gRdKwBchXZ2fqPpkqjEWbnQT31OrcngqxjF1K1Hk+97EVr+tvpzTsm\r\nVUOASGEiKbaipNvV+K7MKyMRds31J8Cz3Y1a7GDd4fRi00R7HxUM1wVEoBiw\r\n49Uin0/o/Gqryl1JBH1Slh1QCPXgovartFlKv16sQKZHSt2GUl2MXJsatt72\r\n4o6cl0656Ko4aYDDalvTHFSSsREwgPiAdLwjY2zH5luqH3B68T5bbIrgWvNb\r\nxac6S+6tDEr05NT/5i+X4IaU5sVWcJ8J2Ej8klPogntpnY6BX7llYDopjvZh\r\ndDMzbyjPhCv55vQ57M+A+YjTY4cs7NlAAbyNxgnJeZgIbD6ZgtNN/POj0PLh\r\nR5Kzu57879TDkRVRKQhYBDrWl83vF3zMJMBDqtasYCp5jUCPCURElSJMyJv1\r\nLbAdVs1RICyfMu/tadVXJs/u+xQDzZ41+u5utbGqhDAOXrqcxStiZS3aZjEf\r\nrniT38rReBRJArr0520TnZ/e/ekHxsAkrK2lPuwxdDPf2GXnPDaJX9ltI+i4\r\nwVkSF7GxMZH5K/U5JXCUvo903KPb39BJ4G0=\r\n=kwE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/density":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"15.0.0-canary.92b2556cf.0","@material/touch-target":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.92b2556cf.0_1666142029117_0.34027017865090636","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/icon-button","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cc804509a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc3db0606c64f7299c4c34a44755e5d93f91c21","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cc804509a.0.tgz","fileCount":40,"integrity":"sha512-DPMxBTe4a+r5HVojMy5Hi6QYm9UNuiqL6BcBg6i5lJjoxSIVJVRXCTInR3f33Z+A8bY4zLFEBxI32roOZmX4ZA==","signatures":[{"sig":"MEUCIQC8mXcYn3D32ViCTdxQkC5vdrYyRsSHvLzHwr8OlgE2JwIgblt2Y+XWwhGw1KI+GSvEo9bW1/KW8B53b5f59mA7oWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXvg/8CljNlTMMFn/PqgSz5q8bHH6HI5ZTaZA8wtQAQNb40LMy4xpT\r\nLoYCQWRzyhmWto8HvjKDF5IhN7E6mpT+YoM8unkJAeZzc4BT1/U+s5PD08zI\r\nxNBYwCP7oIl8ThhKvc2MgDZQUz+UxWMdQ/k2Jkix5+1064Ipd+cKqTDqRRYn\r\nKoWjFHy+n/V4dUD2tea8Le4OriYhKesqLyF3v//nHlGoNL+cxXPRt/cHwEcs\r\nYZTgjorGkZDSY4/PR4ESNQWszWn3TeGVNjByOWlULh/DjzktvWcraBIhGjHb\r\njrlzQ9G5v6Xu6q/Bopner6naVrcZS2Kwhv4BXszjh+Px5OWSV0I6s50Vtz2P\r\nfk0s2Zk8I2t9L3o9PklGNGjUvpTSQ6cC3q3v7V/hjj+PPKK3JiSwLIsuDw/N\r\neho4KoYAxvzF+CcK00+GVRXDYyBTE3FmejNvUnxo07pj1kgvYipFZ12UQi7g\r\n/87/7DeegFYDtrUzjc2SpyjCcwh0ENHI7jUXglyH3UwLp+YUGBWVTRpG62HO\r\n6bO5kE8dTMw20ukd+NLkhx1DTDqLn2y3yd2mlMrBJFfSphL4t7iZR+aYRnoJ\r\neQch5ygt4X3TG7XO7Hd0ChJft4KYT2kPrm/cBB5I8VcP+S4Z8KHu2Ak+RYNu\r\nCPhPZ7B9dUosWcSMRU4pQrCjN5XM83ZgONM=\r\n=pfhm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/density":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"15.0.0-canary.cc804509a.0","@material/touch-target":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cc804509a.0_1666142256066_0.3272597923124738","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/icon-button","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.982bedae9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b417db15af91d33efd8e6d9fa4e79a9003ab26c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.982bedae9.0.tgz","fileCount":40,"integrity":"sha512-PlVktYxQthOyzJsah3C8OiLTDVc0cupCVE5N0QCOCEAY3mU7HyDRu7KRBJHRrpaaehsoDdIZXFxtpScpzQhjOw==","signatures":[{"sig":"MEQCIEdWkEKVfDKYoTMdujNnJ4AmsE3eq0smN9lq0tse2dcaAiAlJp5d38fRcBiOIWrnqB2OYKXcDRbiJZUzNVpxW+mkpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR+w//QfA8Qj98dtNiL1davffqI1gE30bUdNR1SVsyFYOAx2OorZ0V\r\noTdsh2dTVXvXJBn5aaqUy6CAXv8RAvO8nmno8CtfJGkkA5zQ9J7ttZok2LFq\r\nfY/BLUWJwEHceclESG1jMCI8l6OY/wJfRK/pQKuM/yFpQSHGvpxTh/rSrK2t\r\nesqeD9+ukR4sLortpg/WkR6EDCwua3P9r/xTElk5dhzP8MRhV+G7XYylJH18\r\nLjdh93K/szqh5qnitwfVwHuRce4PyajuySIWOAEkBoEQbj+PoRcPJj5FdYVa\r\n33zROBxWVSWUxQZfZEtNQHjoE3p+sesXuEJyA2P35sgU61dAwBjl5nPidumW\r\nFTyhH5dzAgLaKYhU3sGl8U+i/YlIUZNzuASaER32EE+tNIe6vzO26MJ2ydD5\r\nme6I7xeYsA02hRHuAYQXKcDGUtPzStkzXjrWfN5UA0a5uUGz6FP3kO/ZpePu\r\njJtl6oNArS45L9djZAtLHx1M7l2O0tCcmi2Wruk+oAmpjx3VUAbVkhVm6aZA\r\n+w4g6YJ+l/a/nTIt/x8+9JK68VTmW9Kmw9GS2WK1/9+xqh1hKAc/8NaNdAuw\r\n30r3a55BPuQVBfdWR//gdu4ggldtKkh+N3yXu9s10kReul8Gq+vBpoHxLv5r\r\nnvz+IdPwwwrDxQX7gW3kacvdbzg5swmLpms=\r\n=iMPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/density":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"15.0.0-canary.982bedae9.0","@material/touch-target":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.982bedae9.0_1666143455339_0.9571618251991578","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/icon-button","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ee40081f4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"378b5fc7d5ab8991a066395468bf732f0b870ad3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ee40081f4.0.tgz","fileCount":40,"integrity":"sha512-DSx/3oxjBYvg+6ap3FQj+bbQ+Ij4yZ9UhD57tj+y/FA1nlbfjl381k5uwY9zU3XCcnrLwHACuH1t13qB7Wxgeg==","signatures":[{"sig":"MEUCIQD+3W+Q1lyne/fUkbY4iVHUhmUfJVgN2xxCLj57t+UDwwIgA05phr0p3ApEAk15uV7hEC84Br47EzbW4YQZb68Y/aI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVfg//TRoal3ihLxcH7tWhkIex+8FBG8+BVqc+e6v8XtYv+V3ArY/4\r\n2ZrIT1OlUWTd6nWidpJqusH1O2X2fCNDmtrN72AavGIjWTU7+oR9y05e94Ko\r\n2FEtFVXVMpgQogNCqgVgDNJS9v4lSAlK+GpAO4oZpBd8GIvSDqozLfN6Rbdj\r\nV+rBgDiNieJ2sDCoc58KyrGnMi4N/rGkgyQxhC6Mdna/Fd7VcU/VUYRHqukN\r\nz5tmqof46E5gYmm37pF/IShCioGE9vG2oFuZEAE89KrWEiZXSKkpKBwbnIO3\r\nB3TySpKkQe+6NMCIkCTuyHtkpq12ZSkCkQOwgwwc/lAc47Do9gZLE7I0GqVR\r\nl7uCBTQcJu7TTkZTKXdCxjsFAO7XtRk1HVnZncGTXV9GFlfcOpiYm48GlWXb\r\n5K8rOn55jpOhpXc/5eDQjru0tBcPf2c9gAkQb9IJqLHWPqfdcpq8b/sYL9lc\r\nT+UrmJG17IE4oMdoVHabUZn7/bQOBXPklLOEqdQ+NnbBsK1v1HhIoBs9sDmw\r\nPR1f1yZwWzpMLv+3TMIETWdnnHrReACJJTtDgw2mIGCRS786M+rcUSgEcXz5\r\nkwCs2dpQv71K7Zsnge6qp7Qey2ltY9msiIxA61Bkc9D8BmhTtTsrrip+QjV8\r\nLzJcpe4fx13SvG5DEVcgiRtZNdPrvxWFd+c=\r\n=wi/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/density":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"15.0.0-canary.ee40081f4.0","@material/touch-target":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ee40081f4.0_1666210339753_0.7888360611411243","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/icon-button","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.98f1b54e2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29b9c290e2bb30855d537f828664fe99b82843a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.98f1b54e2.0.tgz","fileCount":40,"integrity":"sha512-TVgBa7xnk65NSPYNB2b46yYBuq5GPL+8smK8sgNOIlluLqZ42LyAV7kaua5rVwpX+e/mBQ4jTyMPpy59TiqgXw==","signatures":[{"sig":"MEQCIDGO7sF2Ao4pa5x3nYbrSLAOQmcRAfrJPIzz2xS9DyoQAiB5gDmV5U63SQtEWtmsZpU8hq/h4yrOA8KuftOFftifwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMIA//UvKCv5y413rCFMX5nqa4BrIBTTsxh+hUFpEg2sq/dZ1fcDzC\r\n9105R39Bb+78u7bpkkkNYf9TO0+CamvQsGyTbijSLuSQv+khF5K3atZWDlwI\r\nx3aqWBUTmGaGfAmSt1fai20OZVWv/skss/QVYv+Gl4vqaVfWWWkcEwwGG11Y\r\nABEZRNwb7iT2ZCsu6evZ+F6g9Pv0JgQoX2/S41k+Rk5ZnAut4gXeCbJDeHCb\r\nk8uwbhEzbRjLmFgzJv7xYpiI/dk5VTMdHJU6lFP/0tnOe91U2Yji/8mpFy3W\r\nPzptYWQ+8DtYJw9wG/M1mmI+1c31B69oi+H6d+OGN3loRvvKTt45CT6RRhY1\r\n+lk+KzRzJnyuyX5uISHGQfjSioueuARcETZk+H5M5n40Ze2NpDBP3VTexd8Z\r\nixOqKv3lWfFjDpFA/cIZuVTxwXHb9EC1L/9FK00jvvr8sziYjMNXRew7R7zs\r\nyxq9/8Q8bYtEQAV2f70LN65yFz6K1xGsdEZqcXaHknMd/9o+E5hAkAkhJQJS\r\nRaGc9QpkGuSNr5X0r2WodjdcGKKBuc3T16nsH08eEy6RN8IpjdhbHcrA2t6q\r\n75HMr4dkKH7yosfpUxoKdchz40I5ZPtA0AWpohHeGPGfuNvfYcaS7N7NfCIk\r\niQlueFHZcVLEwEaBL4+0Bid29GOPUO6Dsug=\r\n=yXmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/density":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.98f1b54e2.0_1666306628880_0.27905909921285743","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/icon-button","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e74b7ba7e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a3acadcce88a411bfcfdefc9ea2e6042f8234de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":40,"integrity":"sha512-530Z6v4FUOLO7rQ8GV7ZUFMPV7fRkPVRBCOmobv1REa+KW9Rn/k76+NKk1/4TFmSAT4tNOEKrZf+qZEGi/Fe0A==","signatures":[{"sig":"MEYCIQCLr0h0L8bg7QaYTCqBk7FzqPBnanqEfdaVgYGsJqow9wIhAI3msVEpgUa+mboeuwph4Z9hEZfixu5Rz0PEngm/hK1j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrfsg//Z/ljjbZsO6PMPoHmwDE/Diu7vozCExyaWxB1ge5izFFiz4U8\r\nXSBrG3iEOQbDLOFT6/DfCvYXtOf2MMuOAbGOBJRm82nSjAOU6etggqMWFnUM\r\nkE+QUEFTPrrKk63pCtcIdkmlfuEqBGO865hl1v37amPR1IUk1QIf1Gurv7Gw\r\nq/mGemC/y5pHQmttvwsKCHKp/p2FqhVgxJAT8+v8w5tt7qDrZ+7+slHYdabK\r\nsmavKVTYcMesRRrUqRwu/9i9Gz1YKmAnNEU//CBDmb3xrJjd4tV54AhG93mr\r\nDveQcO9CwKWLRVk6FT/CtCWAACGhp4Bjxo2ZrORP/Be5+jcJGRkp8NpeBksR\r\nhloS66GQsfl+CiqbN7CkDnPzgVoWl7CZ6MxomUXPRxTca1ISetsX+vHe8uSz\r\nbrLRZD7x0EaoAyCd+rq98Pr/heD8LT4MfsSRROu/bibo/ODILWIIpV8I7EeQ\r\nfv0LKPKcWN8P6l6Dk7vi0ZqrKnqV29cwS4cmhqz/2IHGG2bJ9TBDCZ83aGv3\r\nnt+4T0G/VapeBYxO6I9P6ls/JcyXVB2r4TCekZX0i6sSTms/BABnpzi6o+aD\r\nws1Tigl3iS671nin4Gc+aujAJG7MeI/m0J73NxIHLK2uM+UrZclPDAPWJcOg\r\nk4PBmXZwJaWDfdWsuHSFRgbX1Iya1mP9dCg=\r\n=Qlji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/density":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e74b7ba7e.0_1666371973302_0.7953663186703894","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/icon-button","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ab55c07d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00496cb9641463a4426b73da045e5db5c5166fd8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ab55c07d2.0.tgz","fileCount":40,"integrity":"sha512-HQIdte0sYvcK1k0G7qMlrPKMsCvvDS9pPVwtRxuP/sJmXOwQmZuhsL4dQel67juZeRlOf2dMJOcFIWzqPaS2zA==","signatures":[{"sig":"MEUCIALWOw/3F+l1vMXDjmFYuTTAr77Odx2KTK1ANFM7tMw7AiEA/T1oqyfgBD5s4+P4l0UbMSfnTe8OX0s3yk2Uk3D9JgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqExA//VHy6f7wOXCpcYMiRF50n9ZAkcTlpzAvhkckQn9Nig0aZ1k3f\r\nw+gQWsuhuxnUcqImAXzmAdFAhnAOM+k+OJd5BBufvnER3JEehgpdYkLDPpqo\r\nrDFT3/612ErwhlHrC52qQh7S9PZWUNbnBxM1fxXgaio0sezudwIGVgk+u+Wg\r\nGzKyeQ2uiLhrZXErsUEhRZSxLkIQ+Xjbgw74P4qOGDgEIicpIgVY94P1ylPJ\r\nOj7HFm1HNT4Q5nBo2uYFLfQTVpwkuZ61YshfW/Rhh96HZPl/Ki0Z0oRbMXMb\r\n57+j5DjbYMHgNryDL4KCGRkmBZ8isXhO3yqzn1Ye+P7TDY7/k98S81tAfclj\r\nW3O22edMWxam9nW1SFNj8+UpHH4DAwDdzcUilKOpmi0EqRtlgXAYAhnTBgqz\r\nhDBk/OwkWV0nWamaHIxatvpCamr9DrNUZHxiebEQ9jXBFoRrsYbWTUHCwK4f\r\n0Y2BmB/ssKECANsJ3AACe4yHXSvxt+DSztJJNEEJScpwSsFdepncz2i3ur5H\r\nc0cuNctx31WTq73ipXqxt2gFQTxepbf6FcB3GXk3Z+fTB4RNSkLkif1FVEsk\r\nVcQhgYGjKG27Uhp0tG6VLCtAx3bG/mFOx6Fw26PxwSzBYqWSvL3QoGhQmJPF\r\ncilOoDMhrZJmkCJ9lTc7w7+y4thmZI3SINE=\r\n=8i5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/density":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ab55c07d2.0_1666462775479_0.9846387223590596","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/icon-button","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fc539db34.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d45e61060de3cc25bec2e53c43069164dc96ad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fc539db34.0.tgz","fileCount":40,"integrity":"sha512-SQCSwFbvUlfIvgu7+LUVXPKBOCltWL0hSkEb07A1oYvCHis+AmB5WMuH8LLwYKMQroRqZPIV3infZoryXmVazQ==","signatures":[{"sig":"MEQCID8BA5A4myXHPltbDfEfYCFO4IxyJNOZn9zMFHgnHi3mAiAUztGW0CM34BRt3JRURc6BDYQCdph6lPz6JQroLVMjQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdEg//VmLAhjxys4NVyTOle6k3TDtgjtdaUpCOsXCzAidO9ed3RG1M\r\nW22/3jnGw4bsasHp4vcywT1hEM/WJbyelGQNmrnc3q+LtEMT6HDONbTR+5vp\r\nQQwDYMhq+qhtlYW204wsC7PKIX0MtB/K9GtuhkCfWeawF8zFr0vHM/8Q+Jho\r\nKc7UgnHQGlWKlh7JR1k4vJRxSn2SEsTauOH6FWixBdzXS2qMxNQoVS9TVtKF\r\nJbyo4o+0Ms5Q5zsk9mjeduDRJBTf0KItRbaOcFOinPjGgXBHmsB8hYkJz1rQ\r\nnWNShQp4MFHfRVPwrq3jmy0H0RteN2dbmzrnQYDUHWA+z/CBZ3KezZZ7UHxY\r\nF8Io+4rc4OQC496icPp8TLrKAhDkowrDyXSITlzZS2KpNfR05FAfMyKZujLu\r\n7UxLXvt1WzwrBSPeoupZljF9uLTcSrOgqcQ2vzYF1yJlXKJL4heGHx3AM+RL\r\nATXUsByIkYx7TDk0+ZzEX6urPq9wOJwz0u9XHjh307bFyA8NNNWvB1ssEOef\r\nTXYsm32Ta7CNBw/zxUwHUPa4FXOennCTePW3V/PEFziEFVNGUoB4cBjjG/bh\r\n8cZkPK7fqwSgNI2Ka58MLR3UDDzFPoi5DU0ipFRRtZSeM0ibSlkAsuuhuvbC\r\nVovgbOI2Fp/66oX1LYe+iHkbxr4sZyc0nrc=\r\n=TxZu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/density":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"15.0.0-canary.fc539db34.0","@material/touch-target":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fc539db34.0_1666637974845_0.7715534230602119","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/icon-button","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e340b04c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"191c8815bd3c582c4b752ebd9ed26813d88a06cf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e340b04c5.0.tgz","fileCount":40,"integrity":"sha512-WzQO6W6Dlh22QyEJTpccWVG6AH58RyEh8C+bxZiznkGzxh0d43lTcr+EXsj/lkgRPlQibNFvTZl5qThtdNST1g==","signatures":[{"sig":"MEYCIQC+a+KMKJsW11BKsgSHrWxnmZZjfcnv6HKYqi9mPZ9jJwIhAP2edR0aXgu8qe2P1dXn6Kl4VceN9i5oYnBlT29X/cVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy6g/9F+X7F0vapuSrMrMr7kPmZjq2/SLlGbdxmGZLJgXH66s96aqb\r\nEDg0QLZzX5Q9cdmNv7c3s9rNt4EX6jJ+Hrr/gL9OJM4uwG0Zcbwdu4tLvArl\r\nRCGtWbv4xSn3vZDf6T3FECXgt7jDLqFKO9Xg+rLzgzktazRX2LVOCX3hoMlx\r\nqMdUWw9rKRKYTkQ10xLEaobDF5UFHzViCh9dYVjLxmNgVTMD6gZUh+SusOBa\r\nsb2tUfKXiDMNobM+coo1AdA8uLnX/y1lAtdM6l3u9R5w4Au6Td+qoeW2Voj5\r\n/xUQLXt4d6rW+n9vHAGEvToAALA31slXb40lzXSP5k059DoWeobY0+quL1WB\r\nlygw8Y3j3OA50bGCoFL5oRQrLrqKPv6KWBx4osNblKw0Vuv1MfbkdHX3fK5U\r\nLjH/NsWPc0FK9BxxbBoDNLNDXQ6mcu9+ZuHgVzeIKJ0c409Bd3d512pVbd7x\r\nLv4vVGr58o13Zq2nIfKQRn0AuxldFVkzJr20ugLbgfXM3pwwsYCg8lTSQJzn\r\nUQjPpJA6/kMoiYlqxHrzPVjrDY59akU9kXqCSUUUVh9CS0jkTcQuNGFoVkor\r\nQNpg+lbrjuxXKdAnRbbC0RbGNG93hIXAWOHgUAhHcm8c6LTPdei1kNDq09WL\r\nJ6BhpEPUtqw693I4Is+q+E9dnjf9uk48QHg=\r\n=5QOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/density":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"15.0.0-canary.e340b04c5.0","@material/touch-target":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e340b04c5.0_1666741528671_0.5307267311041102","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/icon-button","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2c1a8f8fd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a0b17393c76cbd928ab44d90622b89ba802c9c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":40,"integrity":"sha512-WAriJF6jR2fG1G8BiMi+YnznpC9ytuHrchH+NzyX6EHVJ+jheYkBz6cdt0O7FjEDn0951agbCpYHNDS6FhBxUg==","signatures":[{"sig":"MEQCIBXTYODpSXNkuws7UEruWBVyaFNFaQNdM/iZxYiY/nRBAiArBFt0Or7TW6zwxQKqm6QXR52GzBJbRDFx9i6ixdoMMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7HRAAg2NjvBx4lXKKnEh/CLcVQj9fJdLzLogSR95oaCJjSM2k5+J9\r\nGtXKj0a50hJTk6SR9genf0pjF/q/yZxpNZiXWFllETnBMgiOIZG4SSl2QPNt\r\nsuBZbcwc20Af/jbRSR8Kb4W2DNqZmXlmSfrVHiRHu0dETDOpA6OpiaYlxQxV\r\ndTRqRCABnAWRyatwwdbgUQQpbOFGVpkYZ/bIgF5M2KePCCxeQIAcAgcIm2SV\r\nk/01Rt66sxtxu2UUOOOgllk8aGXdoywr2M7vZyIWJUskauUhMtjJuWUf2Woa\r\nWwxLc/ZxgK7tWD28/fAUVe5ULDtZB0LQG4d833OteIrRUZDyK5b90XFaXOQw\r\nvTNm0t/ne7N7E9wR+nrAjgnLRu6DZYZ4vwCXStNxhyIanlQD39cNoEpCq//Q\r\nWROLtB5NNfOy6h+al0mtgjHoA6WG3TIqbUPdDpn4McwjiGjVo6D+lD9rnAoP\r\nt341q6uNRUb1PPjlsVaJlvmuTMJXgdCGCOxp8asiE5ZMOmVnP0N7K6r+zgVj\r\noChRlzcAEmy3dcf2Qs+yKHWbTVsK/sMDIC1GhuPq8s2cmwLHfnL/PdREAldX\r\nolKv1CZpIalbSdbNaAN59jhY4TLeIP48lCtdOTB8DptEoensz+es5ZivGfhP\r\nkjC8xy+n4idasxt1fJPb588I2B4ySsWU1wQ=\r\n=6fUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/density":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2c1a8f8fd.0_1666805462234_0.4446573942055463","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/icon-button","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ecfee946f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a190e2278fac415e9fcc0e8bcdf412ab5b92bee","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ecfee946f.0.tgz","fileCount":40,"integrity":"sha512-3RxjLPrDEFWPW2GinoaTx4Hc4jy842h8j8+2OsY1AqWm4Ejp+NblyBsRSBdZC4APs0GDXQcOskY2y1FYeA+fbQ==","signatures":[{"sig":"MEYCIQDONkO8vXwitAXgYupNt/vwTtUV70E/GNwJhHkH12wtwAIhAOXt1UAjIRZ6HRwfIxQQBaRdAoDSNuiycpHZC2RwFdWn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopnA/9ED6XTrhAJWTDOl1auf2pn0KRtcILZkD1CQQH2eGHTwxK5QOy\r\nGpAQgU1jDR+vYwD+9mCjNpxG3gVjJ2PFfmrlLop6TTQy8AMZaGRW30Veqvr3\r\nflRZO5K/3QGHQ1zJlE0uylh0mnOxhRwDK2SrAiJ3TVZjDjdio89hVnO/HrCz\r\nSYLaY5Q98LTPWLc5L61nLcmbeV+yBYsqGdpZ2MrcOT/owa7wVBogHvNsfvkT\r\niIrRA0+cOJROXqL68N3hJWynLzkZZINH1Z18JBqa2rlO9v2IHzK0DA5mY0Oy\r\nA2/bFr0BhhnyoCVWeDwl30aqOEeCjkeKD6laCQMpx3pqd0YB9WOGX37OSG8x\r\neWNC1EjcJBwt7EesXTvXaaTRsRSt3CnF/uB/fs4J7qO0xx2TdrJj2scmdsF6\r\n+17dlxTyZGf5bRp7hW795f7H9Y2LqYOOijNog+zPzp5WsHweAm8mQcanpxhH\r\n5qmWDYHj+rhxnC4v5AT+Nv52ebOsppxjWqCyvoVvq1sBQxbn1apA+FSDPMDX\r\nRnXIjw6hqqdmWlU0y+uSiupDOLsDKmrWbCKgdaReQ7ZHNlsYYXBZt5IwWZVI\r\nceanJRXCsSdywchrDq1LtlOy81UIH7Z88YzuaQk05GuBQKGwvx8Su+y71yXO\r\nAyJm0yyhGGD+mFTtRPzYmwVz7d/SA8YYKx4=\r\n=a8aE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/density":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"15.0.0-canary.ecfee946f.0","@material/touch-target":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ecfee946f.0_1666815342523_0.35699441772121543","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/icon-button","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.73ca9dbb0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26669c6fb32e2efda5eccea22adbd0bf268070ac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":40,"integrity":"sha512-JQusQ3ocJ3St+YWHUnOiBRYlVx4zy+rD0PDTbSjAjlLUgn5mnofJz1RA5YC6vNY7sMrhX0q/smJZbefRz7SpVg==","signatures":[{"sig":"MEUCIEuzpS/u2Vrs2W93MM2CG/gI0JFWPA1yIe9YW/k6L0tfAiEAzI6z4/tljvG8KhNOqDt2gPZHx88N5begKJJ/dW9z3KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozsA//RZ4x2fjcSl4U2TZGw4JQkGq2tnrq4YRWQ/+Df5GhTfbvbljc\r\n6hiqyEMcLka9xmaGhUKESK5UHSJP3kgp7hgeQTA/RYVB02BlRurFau+kP2Nz\r\nB39MRAKrmZRlkUQZDxaD0dC8n6azvoDBgh85M+l9Uk3HxSocMWEgFNAeFPdq\r\n/Iq2eZ2XGQnJn0AZJ1G6OVe0+XD7wSyNNSRy3WrkhvC3q9QW3A+j15ALE58b\r\nW32Ql0fiunlkOo8T+qKC5etnS1AHxXQOCAI+d50cB/PfSsaBoDGw2UM1D6yt\r\nYNku6np4yJxzSs3epTmrasYGFQ7MmUlVvwnT/uBo4MaHh0aikpXxgTZ/V6cg\r\niJrdxK49lO0SnB6iiqt6sCO9h6x6X7oYWFmoYqf4AAUg+APmf4uIGCcqHrY7\r\nFQej2ChWukhQu0Rmwu1HRY4xQTPUicLFBqiyD/PaSPUY8Gn9qBNlvSORx85E\r\ni1yZEBnmP0zUkSO6Ms2iE0ApbiTJgY11nyCHuu+eJZYr0ZwKY1BO7bz1pbaT\r\n9LgPStfs8a3eL0tu7lcsZOG/pQhBR8WFkNc47H3+3dZPsuJRlSk/hSe08za7\r\nZ8M3GdL5/BF5ZhSpEsL1tqryxXWEd0e0mkkp2cklNxiePJs+7HYfXGw1PnBF\r\nskRoyKY1YFlZyA/+wDzsIf/K0/st8v7uG4M=\r\n=djub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/density":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.73ca9dbb0.0_1667237574295_0.049404190030132744","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/icon-button","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.357f2e5f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2784d5fd49a2244b194adff9ff47c445d6533de0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.357f2e5f1.0.tgz","fileCount":40,"integrity":"sha512-oDHVyO2JPx8A6L+4tFN19z921ewhyeJ3rQNb1ibxUOPgEDdIlouvBypNodQip2rjWIHp7+P8EPcswlWGGKJ9Qg==","signatures":[{"sig":"MEUCIQDLWCCDVh9/HfHdtK35pPuwP5GxGmkMEl8Pu6p/O75CAAIgDstTbk5HcYLGDUkM4svJMo9hy4WhuKz4RSK0mpRc6Zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf0g/+OLK03Y6db1TPYi72Udp59We9z1u4mLeCgIKgVH+6ftBsV7mS\r\nh7xowY7I02ibH7XNq/L9hFHr/HTJFuuXy40PyxGqsvK2JDeLhoSsb8zl4I0N\r\ne31XDztN/w2tD0dE7r0EZC9qAdIhCegJk8W8cXqmUMaFVV4Yy7ouFNMKB327\r\nNb5CsMr27WyL8nE7sYiJrA/bSroEmPIgYl2xP8ctR/+KRmY6yolw+RkD62dd\r\n9cihE3nnIZD5VfT/t+KDPPZXsVbk7pqEmhh9B7jHRLrzIlBsnHcVWHGu+Atz\r\nX91mJp01huzduNMYyEnXK5z99MQqrj3Yd1Mdkmt/a/XlXdbRuXne4X3iuTsw\r\nOD+bYioCaAgSd+6brDIiXg0yYOqmcDU70aj7h/+MJohMqZgzJorP1c0Ykih6\r\n3oIH0yONbbHh6dnq0EfPrYJEW9BbOpGbyIEleU8h16eEZ9zG4Vr/ctf3zXlS\r\nMmdFW4AwJAyMci5RAou/IINLbUfTAYVaAkyokeUeFW7dSWADY2ZENkbgydDK\r\nZJCjKrPp/QjdCiOFYcsU3VBm1TEV6xfzJOFAvMaRRkruk8uGsuHzL3xb4GVr\r\nLbY4Ed5hpeHFvNgJ8CwI/Fxy89v1q1DPGTFPkJUwmXa3ZcQIOzZKlum0PlPl\r\nRw/QMeb+yYLsv+Z4XfGL4SbdUxkf63jHW2o=\r\n=zX+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/density":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.357f2e5f1.0_1667242197534_0.48234604793923097","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/icon-button","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.eb103d4b5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4dbe88acd3fab544887433ce2a240b92d48b812","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.eb103d4b5.0.tgz","fileCount":40,"integrity":"sha512-OUT85Kgpuy2YsNOBJG/nNiaNpDbKxBuZKyitbVQASjkZou9798elNbxKWEZxGcWxgzPR3iFpuSHZuSRYvpWWWA==","signatures":[{"sig":"MEYCIQDY/AbHO+1fScNVgZ513BIx94ScCD1tvlxIEvkF3vkC2AIhAPHcbgZAYFEaZQMz+7KR5Ev3OwBdmiYT9ubOmxmm01Hp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCiDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7FBAAi3udz2dViu+qgWNZSe1cgl1nH6+G/B2tFTt4kpKg1hEbWQ8j\r\nwT2VmN4pK9G4p9ue8x8zHY8lhEKT2Xe0dtXXWH6dYEYwZGuHgf1arJOycucy\r\n4ILF9V+uYtl2LVBikh0ADkcs57qo9xyu60bDa9c6Q7/IKDzXefqr4jX+RGAi\r\nLx/S+Bj2/y5fQv7yxkydt8fq5R4EHrBgqzztZKJGNy4Uuh2H2VengaFxf24z\r\nqr1VMmD1uzTUPaUnAz2Vk67nJmut8yLNIMDsId9xuguJVuWrw/qdVCq6hsRm\r\ncHgKBLgY9orckNxAlYPR47kShKW5B7F4ENKfmkV88vScWJttwESwBv7tdZ3/\r\nhteohvcc68e1/S1kHXxTlYe84iv6i84l824kOEo+PeFLwlPVrj3WV/BsCnk2\r\n/XMITnW0KMKRDdTOYYIUl45NCZsmpogsxk3MIQtF9ja3pIvaLjmFXWwyblbS\r\n/FqR5tlMZ9G5powGOkFK+STQLvj71z+oRSri5SsQC2HZC88EucKYVSFUKKDf\r\niLML7V+Ql4mrJmW4DDnc4I6nm6ZXhOmwIU8bP7nR1T3R7Mg9mZnCXiFR72N1\r\n69HlUpkCr4gbhRc5b2vg5U2z0FA2kwmBeXnRFIsOlmRCj099ie/A5turr1Qr\r\nf63Rl3XUDRMhoyMmt+wAgIJcQWWl8GbOT4o=\r\n=649f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/density":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.eb103d4b5.0_1667246211469_0.5622067475384691","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/icon-button","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.af5f01223.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2873a1fc3aef0454d69966964574ec125359214","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.af5f01223.0.tgz","fileCount":40,"integrity":"sha512-qjnf/fLq98qWfILLzGindMZxP9ogf+uK5XE8XFg6nhGTKCRfbJdkSvBnXJ+8ywSvj40XOlhQKhzVqoOey1/SyQ==","signatures":[{"sig":"MEUCIDUujMTRSZBLIsUs3XvcfFFQDbNtQ3e8l6moONI2GrgIAiEAwlu8BlZE+s5CPpXEMXZX7L+GGs+Hj1moCq2KVW0Wmok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrBA/+K4Omo+sw9xxkBQN4kUPxDHfzQvOiACRYxA8ITFphl1+bgcRL\r\nwVC138ji9xuSo8WetY+ph0gMYml2VTIMf+NJITRdkYmcNBaJqwfpbK4eMN8u\r\nG2kJkohrw3gmGGeQQFn3FC5XZK00wETXQmaZ3lqvNwC4l9bN087reTAEDsjh\r\n0Yo7AfRUvh0gD1B+JpevYsOCRgjzB5TyVXYH7IPkOszFmoNTewrBagJmMqeg\r\nHaeK2Pj4mz493A5RfL63+TMiCpRfEMPLHrev/jcKw7iisNaBfgIErkDZTMnn\r\nzrSyVDDfselTNOaGpVbqmIGquLZwGL7nBiQ7188lGKXyuvszCFib+K8eoZNq\r\nublAihZghKAgUuvxFhjMc/gj0DZj7KMdbu+i14HUpdxe76JzvQ6AEkYopd4U\r\nkDiRKCEGy2FeV5sXOaCt0vyQkfq9smHGQAy1ZL3YNSjG36TldKMlaWiGL8RY\r\nz0YgzGJ7dthABFUo6H7G3RhsisOsy3gssaQ22ZxxL+I2nNvGhMqwcSuSWokG\r\nug5qr26BrShwFbK8d/3c+TrJ0Zj9ZbHWO6DwLLn1es3LuAE79dgA46BOELk5\r\n3OaX/9W64E30nDfDeeH6eIjqRlKD03cfxstYOalq3FaS2f+CIUobWX1p/jAa\r\n3VHjVRSvo/jDIxafuZbP7mGLx8gB8qqJnsA=\r\n=b/h1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/density":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"15.0.0-canary.af5f01223.0","@material/touch-target":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.af5f01223.0_1667327838544_0.569205350097227","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/icon-button","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.58733ef41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b54323900eebb099829de3a7ffdc9bc28e9abc84","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.58733ef41.0.tgz","fileCount":40,"integrity":"sha512-d+y5ar7kZ5wOA+Sl77Rxz6QU7w3VkhnCI26m9PtXoBSgNkIofvDiKbtVGi7tjvdhKyEjHWUogR/PnL6JNtguig==","signatures":[{"sig":"MEYCIQCaAyxnaAEwi40z1yI9rGnv93EcqlP8PgyTBqzegSHdUwIhAJf2fR027QL9npw4I9FZLTP74JRQSkOnvLGU5Ti19+wG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrK+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFmhAAmBm2Aw4Qula3MevAooOsGAPjCwc7zy6q9Xf7N4T4OG2vN01o\r\nPRhdS6V+04ltrvvR0oD61+ZA7TDyiniRyJN2U0P74lYasnZfoYdjvZxIhjeA\r\nZxyIdtdxwBlSl7l5Zx9u61kcym6QlkFzHzyhF405LQe7qfISIxxYt0rzXsFP\r\nzHnOhAQMSZn1l2b3mF6WqT4uDorKKTA3PjIFbDVMhm8BLeXAI0GMwoBatKf7\r\nFIhBZnXYoYdznBIrMwFl/d3v1Eiqph4x+Wl7E06BjYICfD6EunG/TCZKEcYy\r\nfQoPsvh+BVJmgO8ABWTvJ/TSdPpfDqoYf9tGd8ChDG8jbTPlANfgymV/bVD7\r\ni4EwgP5r7DKaxFpbYftYNWG3/dduLasoJmcSsrwcv+XgifF4JCwFpXfWTb9W\r\nHQHll4z7d1t54LS5uCN8PoagcLVcLJAT8nTcVPQmjJlsLtnYeHsyb3uigF6o\r\nzxxgZj7Qfp8IFvnMTXUf1hNkWACBUNNvOpIlemP+SZAjlgPl4BrwPd9iGruK\r\nzajYJobStQCmqNVjxQb4rCF6xNtVkDacRkN2SHwkBVvBqyhxEVeLs7dAr9bV\r\nsRZijCDCpHJpFSNqAqLqbORdqQqHEv+M+jMbinCv2Y3A0El5hrJ68MP3nx98\r\nBgVhcd+rTg6AZ7Nsw4OEu7yg9gZfdT4yuUA=\r\n=c9dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/density":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"15.0.0-canary.58733ef41.0","@material/touch-target":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.58733ef41.0_1667412670307_0.4441779695146997","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/icon-button","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.909b48215.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5fe61c86b95f64c5ad9c9699e5c0859310947af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.909b48215.0.tgz","fileCount":40,"integrity":"sha512-ic7/wAJcq7l9DxxN2gsE2M+928imcxoRRIRA8JYeyKso3pQDLAqD3vWaXsEGnK7Hmo4S6Z2mvfDbikQGpeiMiQ==","signatures":[{"sig":"MEQCIEQZHJMx5y8fxcovQXprd/TZpDRpHWQhsA3CDrYfGHxXAiB6Tl4JiAuwIMsV7q9AOvkHsBYempgL5BBhQwwpnXgMEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCXBAAhf6oy4Zu8hxEBuIT69bVawvj5hI0/GZw58uOz70xHX9viYQU\r\ntxHmv7jzNmdhVDRr5NmUvUepPtX+nlIj+yXfvQR4opGC6G9/lKOVGVid1jvv\r\nFLmA4knIbpEvIPgqSOLCxbQ0if4VI3LCcGnQC05nDIQH+Hu/92mYKGYbFCY+\r\n/ZmsaprIuUFtOu3lXEekqbrQ4vU1iPbX4lBtdzjJsJ5Y/cjfNIN9QT3lymth\r\ntH2ZhAAE1uqeQlDCzfyxWYTr7/mJZgwXE4zDuvdYkdSKka7frpPR9/AdAe13\r\ngz7mO7lyizxM7zo//g6HPoQTlurY3phHVxsxrTlVGDyZP1ey2mj8qc9aUWbd\r\nLwoZlxd1Ajiu8KXPgAsMcToa4P4Jx96d9Rt06d20DDdLSQ2SQkMbkb1KcE3K\r\nkvNUvQI/yqe8GDN8k536ln36XZJbTfh/xdPBHFGZlzsV2vjHbvoJVDut0MRC\r\nkBBjaOcZZT/BI3SfNAMzFDhOhF51JoS8hQhmsQzdtcK45Qe4jC+SFZQ2AEPN\r\nv2NdshLJWJESFlLetf8jvrZaGKSTE8sFQkOq++bUvC4buGCyzOY8Q24QIQRV\r\nh8IHmFDccHKhT2CCHicdGbs6FabeeG6KkFdP7McBHXZ14kqVyrGFoFL+L+LF\r\nNGOCkR/+t1ehgTOG6GjHI6r9d+XXdEQzgyE=\r\n=Hvh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/density":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/focus-ring":"15.0.0-canary.909b48215.0","@material/touch-target":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.909b48215.0_1667448499642_0.898874770763374","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/icon-button","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7f17127d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b83d9d7bf359dc527933bb149c53841c0d8ac6b4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7f17127d5.0.tgz","fileCount":40,"integrity":"sha512-ol68hejz9srL9TdQE/EwNxZ/sjnMOWd0W2ita1HPupmPZQEFZReBWKE+7a34/PZweNze6ZMTbdJvIqJcBB/Ksg==","signatures":[{"sig":"MEYCIQC34ytUyogDhHwfphjtHKi5k3AzPrw3TKJ4KZiy53R+awIhANYtgyHDhHF7Fh9elYeVn8rC1uISI+RnedK5gUyRzDjQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAY6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqllhAAlOzKhl2+0HPAFBdAf+lAEJH4sWAPS50Ox6L6Owd3nqzW16Kq\r\nyYXxmcjSqwUZav5Xyt+lof/8LNgEoV0NZyFsgS9FdUfCQTSSZvm43erKexmH\r\nY4Xsm4ktvZsJZGELH9Djo5aXAaQ+DIkXlBzHjKEIlvu6XmH4QFNL1bP+bYD/\r\nuHXzk++ZEkuHfOZC694MW3j2gqkJsxzPaSmPWFoHkKWi5zLl2zDlrGgt+eOT\r\nMusw+pwTpUCCGSyZ39zs5mQSd/c37t2ZdhjLKPkiL5spcmdV3EmuSs4aHlOD\r\nFmrxyrLtrXGcPg58cgCza03q2OyILwSoU2mRVkMZx8mn0sSYcU99hGIysIvs\r\nwEz67wPXVv5UUE3Gha36P8/pTF07xWusWvp7c5F3iM+G2dpmL4UcGGSXirRW\r\nSpAy9TRPM1btS7fWhCrS+FCqNdkXBYtBcSI4HFFAKxib4VQ8BaIVZbsWvCnD\r\nBj1jGPk3UBGnjLn7m587EsiAJZNxzrait2aJqw9XzPPTs1INUpzSxXlUbjrU\r\n+DAiDUDI9I1aiTd1cRFR0eKzUYPr4YoPwPH0kvqJEf4/HTQ9h6WyJb6HKEbm\r\ngarSoaQ1XpHrYOUhbRhYeA11av7DGxnZnGvFJmG2QHcH2dH+cR25/Nmc6zth\r\neo4AFK0p+brfJ7yopQKPPuMePBmqIEzuKjQ=\r\n=CkH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/density":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"15.0.0-canary.7f17127d5.0","@material/touch-target":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7f17127d5.0_1667499578095_0.6740821016607395","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/icon-button","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.da95e2a05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65e7f52fb2e991af0d85fbf2a37b6fe0a12b433","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.da95e2a05.0.tgz","fileCount":40,"integrity":"sha512-RzQf4l/KM+Smy1w7HLHZHBwlY0TqydGG/h7F58P3u31SxSXb3bQeDTDWiuXSTH/QEOB+sgB2EMF+oymc/GKGFg==","signatures":[{"sig":"MEQCIH3lpk83JEzx8/7N+9huuL1e8/2bY+LEnv5hQjg81LUTAiB4Bz9o4wtInANv0ToYiJXm2IKxPFE0/XYUd9vQvcOeXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUT0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqejg/+Ien58FygUDLkX7fG5UGvO9SdNewHr9mI8dJAgRroEJz42Syj\r\nWtAse3PmI8nD8sBRy+po97loUlq16SVmoxq5xIDHX36SgiBRso/+BxQJj3A+\r\nXirIK0ycqvB1jXzKa3wn34Nfl7238GSrHy3clreSLlq8FLv0kOTFob3+CkR4\r\nXBdmOXtidR6tMVyt+ucEf9NNZm2ASDYGYofwis2qUOGqPnqhNqsc9/eq8jmq\r\naIgJ2cut9uhrfwMeKlpaK3BZ3DHjBmrP5+bDN6n5hjFL+qpepy+4VRzfQX1T\r\n+FjnMC5KoqTGddh0HsDuITYSSdpTLycIux1hCoI29IKR7vSUZ5g5DUvaVa2m\r\nWIYCay68oa2VbSNp+UJR01m8Mnv5iJcd06+8qjpjCDp7VMZxjkVeViIew+EW\r\nPeo9BCyn1T4Gyi/64NYXo8PeepfijEBNAVyKyxSGG/2QyotCpOCVAR99COKg\r\nD+BRws1QsEge+1sge+/raj0T6FvqouMLSJskYUoBchM1GQ9RXaMBi4Z8KAG2\r\n4e7+mLYNTUl4+k5YEjxgBANY6Nx7f++L/poJDsKMh9EW5l5TYPYIboFNVQhD\r\nz1Nm/uqNjV4slX3qGGZ2vg2/OAkoCX0SQmL8WZhrp0/KUJmO0cMpPmKpqRra\r\np/ouKhvzY9RDbY2HXGIZmC7fHSlDNdZ29yg=\r\n=cuBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/density":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"15.0.0-canary.da95e2a05.0","@material/touch-target":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.da95e2a05.0_1667581172079_0.2467549499058599","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/icon-button","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4832e2750.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"839859b5ba4e88f33ce684ca8d18fd491874eee4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4832e2750.0.tgz","fileCount":40,"integrity":"sha512-/wJ+hqfvZhQo2aL6Q8XL3XhWn+4iAlBZs/pcWGVuV11ONMD6QAvinVq1qjHP7jVO7MXs/FKS+BZExl/+HhLyGw==","signatures":[{"sig":"MEQCIF90VPWrbPxK5yJgRvpgVorUo04NVrh21hrDl2vjY13TAiBn/Zvnmjkwza3++Df8wQHfKDXHFrNeyaSmvgK19Zibdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXy6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0KA//eNw9pD0dKVkPCxHkk0rP+CRyHMqrQC08lv8oREWKrYkfJPlG\r\nXvhV/ss7bXAE+7JcmgiSPQL+NXLOZ8ANx5TRIMENGFJvpMfCsx3/F6hIxf+Y\r\nyY8EXRe2fpBTZfs1IuUn0LeRw8iLJfp0x21zjiuJyY7NyCEsHLmt/Jqr/hmY\r\nye/1XVX8ao6pfsPbQwAmhkg6ewsXlehkeIhK5y/YI1GdVFdieqSerb1Qfl8G\r\nk8jSP/fwmTnbo8pbhF8HZbil2XtmVR7qL6Pynfo3/erQJwHJm+IEJMJj/Hdm\r\nf6tD2MAxzwC1pWqXb7QvOCVyL/M9DShhaVy5P6WoL9dQmKy2bSpskOkLI4xq\r\nHuxAdGmm5KBv8e2+kK8jWkiEwuF/iE4ieE8ymQi1eQ/y9hRCeGCov5rsRWJF\r\nBTsAAbFGHB1toeTi1X1VIG3/DvK1JMn9qKj81WxfG3RICT+xJ/iDNgfl6fQ3\r\np4WCSfQbSmtntXUzaPVlQu3AtIed5NPkTw1f5zp5Op0BV97X5DFmgdB+1/iS\r\nyuZvxz4v98rLz68+hAzdxGYFaj/kEDor9LP0Ia+73CWETjI5NbjUXo7F0L/l\r\n5vWPvaThpjroNpVq02LmIfVrFM6Iurt4TQ5b0spDAeGpKYIfIHIOcpnoBN3F\r\n8yZtflqFWwtfBn+s/KscEsvIjsNlKR9/WPI=\r\n=pumL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/density":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"15.0.0-canary.4832e2750.0","@material/touch-target":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4832e2750.0_1667595450024_0.8964495251618472","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/icon-button","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.215506426.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db6e448e453006e9a8552c2827ec2c0db8dad699","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.215506426.0.tgz","fileCount":40,"integrity":"sha512-/KNwfVe36ufW7cTVJze3vyvA6rcH4sA/FZL+AjHn0CDx2CHcZscwKYMnS2HDkSpNmbYh53r2ojx2lkdV+n/iCg==","signatures":[{"sig":"MEYCIQCbYhsyeISyXkK4Xn2RMsSoLLHGi5xTbJ70gc8YKh9YYgIhAOYrK8V5Z0IWR+9KQ8EkQjdvDzbAwGPI2RKgrG3dRSrr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY2w//XM+DFEQu4yFrBDE2HmQu+67Zad1wZimJojb/3LBuVH1EoPWm\r\nCn9hvl5MJ4s5e3EteztOP39fOK3zxqf7zjAiHQfEwjTDeOfNCvuTe44boi40\r\nMXtqkILC1cHNAPnRUxc3rI0bshAVJOgGZ1r5aiZz4xLfGXGpGmjU9qlFIGqz\r\n5BzqaAExhjC8dBSpe+yfRRmiIXybV1QoJNzYcihfkJwSbsxuSpwTZ1sPnGOF\r\niCMX8fvhn3e9T0rC0aIGAMKXwf0FUmZUIqNB7Nv35qjO99VjtSWtl+rDX1Zc\r\nPolBhCwD1tbdRfmJJ9a87oKNlaMzTQn7tRLSeuF5wElmf5Zm51abkJSnm+SK\r\n6eXAaRcu9aM2PP5YNqkyK2ynCq64OkZyrJPjqasOadWGgsK3f8fK95Dn7bC8\r\nhxGWduNR34pJyOHQlfC/w7PQ4sqlThWJSWkBBjc3IaIGjTo+S7R4vH0B3dBh\r\nltocLLc8FsPIErFJ9G0t4Gj2EAd78A03eZuQiOpMRtDYEDTwrxbbPtuQGEFD\r\nMq1sXu09OG76V93lyqA52S2B/gFG2b7RdfnmzrRerWQ9W+j8Zilg8hChK0dv\r\niffH7tDfQ5fOlWUeJeRkX/HFu5LfkuwDZQAh+4/WTughFml9+nbcIpsIzlUi\r\nZXXiUnDQcsqATkXDIYLnHA1jvtD0oEJSPug=\r\n=b74x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/density":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/focus-ring":"15.0.0-canary.215506426.0","@material/touch-target":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.215506426.0_1667610385120_0.06826948960531887","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/icon-button","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4cf917476.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb305452767a178d5de2e02f099f98e54fc58109","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4cf917476.0.tgz","fileCount":40,"integrity":"sha512-SPrLu3X9dB8xLEz9abhRVVkihVih7sTRfLbMEgIPoZb2qE0rqPMeNsPeP+TaEymJq/KNwN7qWdNUH1Hwl1ukDQ==","signatures":[{"sig":"MEYCIQDiZJYlS0XaXTI3noNKkm/ZrS1R27zF1cPYbd2Qjr3hGgIhAM84S0Vs6RYyTEXfZJKLQCKiLk2gPjqdljGvEiTxeQZr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogDg//dXlpsL4oXN7/zaArfRgpyb19TirulbzyUIWwhopBO9KYt/Zw\r\n7v53EVt3ea/qBij3cKWJxN7/903uDNPX0Wp7j64FERsccTfDz5L3FlmkVgip\r\ngobdg9bvoV3omRVMz5BY+AwGYoC0b8M/drUYVqw2e/qIVfX6tQ3Vvm0UKRV9\r\n3ExlAN6hV+37/qD08TBt8xU8/HuVKZEms6+TOuLfyRl8SLLs4R21kFeEMFfG\r\nQN/1nGW5nqmQO9/alv096V7YyDMth7fDfENlNfms/Rp0yX8l4ze+9/1AchZ4\r\nKlIrrpVsnHEGIh1hStb0Xj69FaGiMJhQD+5urfDV0PiAMwyp8TiUbGBgZP4n\r\nxRIckktrYdHmyk1Ur0p/Ux2t5p1oTU/hAKkwCh9hnPYZFtYk4nms4Z45xCxh\r\nqn59jmd97IsW1Syeauv63g4RkmmfwnxiRMN0VED0/4g907oePQ+0Wz2JdfBK\r\ndQ3agRKL6lXt0kvsqFYv2T9MilU/LyCy7jayBoVZDGyzwnY0U9ltbIroYErc\r\n4l1rSBdX/E+d4dSI9pDAPOsyEjnCWLnwWyTVMaQKGuViPMXbDbJZX6iPZtgq\r\n3J3KKyFh+1fWharDp3MGcGpVmv0GnhxGUtJ/i5ensMoPezW3q1oYPFFlATF2\r\nT8vJp8jcsseyqg2zbu7V4YrCzHej0h2pUTo=\r\n=2Kee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/density":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"15.0.0-canary.4cf917476.0","@material/touch-target":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4cf917476.0_1667671470229_0.09369752707059131","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/icon-button","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.eef14bd32.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d083209b6da502bdae0bcdcc59a8d689d3c77e6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.eef14bd32.0.tgz","fileCount":40,"integrity":"sha512-tdM6/SLfd9zTcLPv8wXIpIRMrtJaYbGL7nEiI7InfhfVCg1ykNso7/UxuLbMmBK7dQfksAThgYhApgyDuKZXAQ==","signatures":[{"sig":"MEYCIQDyJGAUT9/S+fYgpyS7u7ZHqXIo/t/p/8jFnHhfQyFZCAIhAOxdgF2pxKQAWtCz6QuVZ0y0jTWKGFsRoBqtW4bRmtX5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2kg/9F28i3PO3Oh+ouznWTd0fFlizf7KC0xRJLVYxfrW12i3ATIzS\r\n+SVrlKBq+bc1rYgSMV+nZHtVP6/F+VXcjdQXlMu0FGRkFoNGiXSAItl4FZMq\r\nYKvthU+V6l6bRHRGSS3Rpr2Z92l9P9IMRsZQOOkCu8+MH+jUr43h0nh+kDZU\r\nFVhp3845zjYgrM6OHZFnVrv2v2f3SNXOOK/0WAfR7hTxgnJQZ3mOEIhaY1bs\r\nA6cSMvToAYhwb4X2p7PWbKD7Pdv26aAil16Jp0XpjxSz9TQEVf1fnwgLKcGP\r\nYWWqgjh4obzft8lOSdqg3tmvOi6vl/8SRIs2OZXlYwKlszhIEDOHFJ8anbSW\r\n8N2c++G2BGf4r84BR63TlrwS1g5iunKOdwF98ttzj6M9jwO0DAT6lauwbREI\r\nA0L4QSKrJesJZ8VgityudzpPS/bnFUGDo1JYyo9I1e8ifqSudA8UqNyB9xQ0\r\nv2SaBy6+2GYKeU0MWYy9CWD4/X4yZ0SH4SqRnsiCbhTaXHhiGMdSHJPhIEaj\r\nwB9z4CjTtW/D2GyxEhk1B6Z7XKDGjjfqZzTPtqjf2zjD277mSVp6JUMySQMZ\r\nzJ2cxPhuu+sV+fjgiAd4buNAt/Ew/AvL8RoPxyzSQqcsvjk1Xr/nVsLb1GNM\r\ngBqvJ9QDoOzl8YRn63P2fVi+L5w4+ACEYLI=\r\n=Mhul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/density":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"15.0.0-canary.eef14bd32.0","@material/touch-target":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.eef14bd32.0_1667755501228_0.7417469874447631","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/icon-button","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6faa29fe9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f771ea0f85cd84c38c02cd6658dfd22f41d4557","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6faa29fe9.0.tgz","fileCount":40,"integrity":"sha512-GjVOnOv0iAhivruiXcX+TxgDNGOgQKcep4V5MeuWr2JanmxK7gYqCZPVMTZBD/+kcn8TOTavfZtlXlOm3z3iqw==","signatures":[{"sig":"MEQCIDuI/wapBv005qDyVgeDbBF7ZtfYazfrEjLRfVVsJ4dAAiB8jsDDuzV8jlHRth6g6C6Y4ePWY5TygP9kdP8I/EQIKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYjg/+Lv2NFKIwzjj1yBmoNWJjkJbjzgjYSeuE26lgBmTsB/3p6U3d\r\ne/BQ+S7hPg9yWWF5fzBokFC5JV/i/N8XWN7Z3GPmBPKwYXHEpkbFRuThQvsf\r\n2AwLMHgGhzZa6SS5URdD22zssBGPtQv2j82OGzizvAQ5k6UY7CZBUKHkp3W5\r\nlkPj3WNNOYdodK/KZSrEVKvcJ4o9uuW6rY1UPrivxwUoee/lbNLNZUaAr+63\r\nkvzCOpdQOQu8sxXnH8cylGa6jMbs45OrB7cvsOweQnedOPmtZTugXMOOH7U2\r\ng5H00yiXGH/IUDQO/KQZZQKSupkCDa78k6ISsvEwFq7D0ppKW6yD89dzeMHL\r\njKHPDiERQw81YEo+ATYJq0Zvkm4HqSoEMeIa8235ZQ2wpU+lM4vE6tnVOOG0\r\nk8BdzGrTHZl8s4MmWHDajTnFDqk3neCn9Q+SKLxJrbVVKpNsDSDkSn/uoF+f\r\nYAYvKc5YWjO6Ag1V4mks+EWfkcCwGFOzfOkBwW5Yv4EP5IR3zx+USHZrHNAP\r\n7uFE7Nn+nAwYn0cea9AlN2ZU427nzJ2IB7Hr9dbrp/eYAeWOS5XrtRVSrkih\r\nXN/K2JNOseb7MA61J3tJjko/E6k5p/CdrHzcHhjfRQmDSw5DzgtvuTenTKD2\r\nF5/qV0Zwtop8N67vwWlsrrxrqZRMI1NW+no=\r\n=+6Q9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/density":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6faa29fe9.0_1667790829868_0.2581372828759134","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/icon-button","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9af09b967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc22cd57efc4c57e8acdf7941e3dc577d1747e40","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9af09b967.0.tgz","fileCount":40,"integrity":"sha512-7vFvTGHKmMoHwiBgmER7WMZfQm3jWwtc191Df6wu7QHuI4SfUZ6A3GEF0Zh0LzLXDUnMmcYc6WnpMIzyQOSI2Q==","signatures":[{"sig":"MEUCIQC6dDC22oMpjCpnztCQNUVkX2nelwJmPObCmybFuORSswIgQtvG1p+NFJR+Ucci1fS2/br3T3eS1PxXhhuy7hcxPyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU5FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNYBAAmoraJlGb4ZPpAYs3rxyvFTum/EWcrIMSndAcf5f7PCSx/eSN\r\nv7t78IfK5nu8hgjGEcnv3GoZhdnunu/MK1Zvtbet++Y+xjR/J9DjrDHF55Gg\r\nYJcw7/4x6zQwsdrpyzkNMs9XECNSOYRjnDdjUhcR1wDq5AcVTFFDUoq0XThH\r\nPKJLmpOWsbFqfwn+7xaG5E4sn7Rumzdie1pWo8xBGgpBxrVcZ19CwdJP4+YR\r\nN9HedF/aZBiZ24eblVTLjEQzK6nFnWLL6J/g45LPjEm0YuC4OdRWBvG/wOUm\r\ng2aTT9P0fksgRwD4fAUV5DC8sqfA1ST3Oit11GdejPMd2p+Xr+t0tML4DXCh\r\niCwONfEEwfoshmeF4k4TT0lqKoLnnuaeIFZ20ZQPP+9TXbxifO9tWqUmC+oE\r\nkoBVnZcLZyjytuhJ2uYjhBgxX1MJv7xd9SuRZS1qyAbSByEIzw4WrBxQbW/j\r\n4T8v/W6M3/WEOlA2HVtEkC2xaj47qitMyuHSUDDI2LGGhdAuLdL9AC1QuS7i\r\nr70MDr/W++gbcKr1rDjQE01ydCKXskk2nC3be77SIoaqgW90nZhIqod0mPMF\r\nyWZ0cyHyrYYu0n55LofhasTftg7hnImuCDNxsV2NcP2KhmgTyOHgEJHjM3M3\r\nh+p2XqF7ZmH0dN4h2VvhYv9nn/IS2+48DPA=\r\n=tW5o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/density":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"15.0.0-canary.9af09b967.0","@material/touch-target":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9af09b967.0_1667845700836_0.34072458802616534","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/icon-button","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0f54fbb93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5c3a70447ae760ad6965fdb0b02c1954dd9e80","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0f54fbb93.0.tgz","fileCount":40,"integrity":"sha512-PfWD6BUGzztiuWlid4q2A5d8tpEeeV+hED5KdZEBm687UtRaFCDoURooHW5w57FLcERh9pVDY2r6QptoIgBaSw==","signatures":[{"sig":"MEYCIQCKpyCx/lzgmyVAB/JHIdsEZ4JLdVM0eNsFjps1sfNiqgIhAJYmml6ksVU1VFZ7cq/dKlTOKGbpUu2QQXV988BVOOL4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrjxAAipcIi3qFilMZNco2Rff2mRZnhl5AzBP9GAyyrUer+jfb22SQ\r\n31P5AREklsglzst/iOqZrK36HZC6Mv8HbWIzoFlsaeLSdE9FCdxPjBVekVNR\r\nRdOq7ErckcvhY16Tea7hjnT8H98gksW0XMLN3Mi0xYG5cRqN/HMCl2m2EHEN\r\n3fTDIEEmE2n3vHADa7LMGG2ck4dM21mALFm81WRqAyQxF6ngTwoU7aw51MiP\r\nkx8fyOq+dcgqoFmKvm7Ul1xOnQnW4Qmi9797Pg3sVLuxyLsqx1/qZNM1+xdS\r\n8XaijCznD1hvyq8dMh9E8MwTyXqhmDL1wHHe4fopstMc02NT4SWrnCvnN1qh\r\n9QZ7r4hKSSL+/QWLxBNOxop5bvgV8gVsW6eED6X/wWfBZbSwsakIMTx+yK45\r\nngqX5ipjpg/CEf9SPmbb2fZG5MrsgFdWeYlBrznlwL6XeVWyXnKHbyYm0QNI\r\nm8f3LJ5csV3cbByPcJGzL4eJRAV1gCNEzEIIfB5Ge4iihWxmHInhfTNwiBmA\r\nfaiqV+BfvseafYj4HqFINFnanG4RjZgNmtOeHITyWVWJEIAmEQ0tlaNFHgUx\r\nfQtO3GOZYdC/giAOqt76XhJMTcPpK/F8ZnpQ6adE1+8ggsogIFyerEC/afc6\r\nJdPTuYDkoXqOX9vSNaN3tL0kGC7+jlEAHrA=\r\n=rTiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/density":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0f54fbb93.0_1667944620467_0.49841116365965","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/icon-button","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a8d47f9fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892e235252a147c11f986d9375f3c04d53a01cf4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":40,"integrity":"sha512-YUFj5Hkh34AdHLdDchkAk6zYgtNZ/PsSvfVYo4D8sJJANCXp8PqjPhcwdN2n5YBh8WFZrKv0X8CUqD/ERgMnhg==","signatures":[{"sig":"MEUCIQDD2ISyPl88saB8kbnkmNsIKlAP92Xk7TdOsg9e7Ou2YAIgEsbUGsXH1wrutHoNCD7BevSk3klbNQpqJP+GNcmVXBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayoRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfpBAAooapXDdWSl8zCMnitV1wnw62SHhxiFGimuHZDVcKPnU4TwqU\r\n1IOkNaHLKq8mRI+r+JTy4vNGSpk2q/jTOUZ0Ui75uHWPlj985woaX2o+GJw2\r\nKW8sKqn+H4dXDBD8k1/4PNaUJaqTNGgSGYTfwrH84TBYZSrdDZ1pu+/D2OX9\r\ntmcieWq6d0x6ZVhcmZt9zJ9RXKQh/q+rO4SYvzSZwsE4V8hFXb4TpyJYhGmO\r\n0T8kdm3kBho9IOCdL8l2WJmXMpptCelEdLGR6PXOoi2IEMCVnxRaGzInfAbH\r\nhS4QsQR0TxpQb6zCfteGQ1rn+j/LMK2mcxusLU/VDMMn8IFHfFMyWJ1FbLVr\r\nVLrSA9qdP95Lx5Kxul2E/OaB0x8vDAIhvsYWIsxZDnlM8Ae6FeNqkXSUKIZL\r\nBS+GHTLvXFz95tyvog37y8TGtsnuyMlYB2EtUcuzQRx5OJ4QBtanSjWP3SVc\r\nWwmBkDAS2Ck4jpUSaRyUEqN+BuofZs4Yxu6C/2prHbRwD4Qwu49ZxIbgT+Nk\r\n3ecYEK8JcIG2gx1zl3c1p8us+U58vx+uLk75zz6HypTk9pfpCgDXFPSt94E8\r\n/fG/clwI3fMFBcpTPxU4M3b7dogCN3d6PILmV7UNh1qvjyZG1XBB7M8ydXRy\r\n5l0Rh5JLUpUUeTBaR2JVTTsihSx8xpBbUIM=\r\n=pP4h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/density":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a8d47f9fe.0_1667967504792_0.7501160901611497","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/icon-button","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.66a1e75e6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f13b587a838df866936eba01734a3b2b54975fc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.66a1e75e6.0.tgz","fileCount":40,"integrity":"sha512-WeC/LMuB9qgjbfJq5AxQZLnIm/WKyDIkI4ldYzOE7FOYibO2Bo+ndpqUa8mFAaGXlygcHFG0nO5W/OLqjI9dgQ==","signatures":[{"sig":"MEUCIH2R7Q/3GS1WlnU1XVpI8E3u4xD9YgwGW9oi/eap9gpDAiEAy9al0G2MTA4Myre9cdpe91uskrC8h7yWQxitQlF2pbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqhpg//Vsqltc73qcpVddQUrG83aE4LhVft1i407S53hmyOwKx8MCpQ\r\n1DxCy+R5MTMFMWPdcxUj15a02k08y/FHJMqcm5JJgMZwyNIucrdoOrPphp9C\r\nLsVHGbOFcCjlBkmklkNBWdraZEQB1aeaD9o8a6Lsqq13lw55sUvP9M8H60QV\r\nJ9EwqfMViOw0TZ0HGiFeHRF19CdN8J4DEHJn5crivplcBgYfA5OBUhsxWsab\r\nUzSYgz8GuaTiFT5cp+02XHy33n+bYhGuii0H/09H9PYVRYHYafy9epFE4Z6w\r\naRlZVQVdKQthZmdyPlNPacleNQU5NTMSavVYhVorX8tO+JyFpyvCivzMpYua\r\n2LFqia2Xo5JCF47euq5V/SGte+eP/DDZe0+xN4FvWEGvDE4GH0Bejd2jvWDe\r\nPUH97dYppezO7y2JpliQjTBFbFt2iUeKHVRismmh/c/iGTrn9s+ThIzvnC3W\r\n/Lc7aDKcP7UhOsiViSGexicUtDiB12hBy7NOHGBwjNs2XZymu29Y0wijqR/N\r\nHFw/eYIrBKmIl1qKsqvuTz1BBR38ptUVQl/Qg7l9EU1dTSaPTQGu5OQgDCPR\r\ngIHnjWu7jnx5nzjQHI4nKElDDPpl2qChURPlax2Bjr3F3uJO987tr9rpHLou\r\n7GevkFaRJ4lLC5nPwaQipC394jVcDcAkfBI=\r\n=EVgl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/density":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.66a1e75e6.0_1667986559897_0.06978860956501287","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/icon-button","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5e5c2afc0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936aeca1714940b7c991099e1ff6a7577271d452","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":40,"integrity":"sha512-14avnuPk2KTAp41ev3AwCB2M2LI0DNb7tSW4g+EPYtNhOtel5lAP/6zyufC95IMQt6nfEBU1s67U11AcsMGM9Q==","signatures":[{"sig":"MEUCIQCU6QWFYla9zrg4bZFhQNQ8hmDm7IDb8QOT6PMdSldxQwIgelI4nLpel+yh2Z6nsIAekYi2A0lFIQLoqyu8IuDH9RM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrctw//ZsfsjvtHjoh6C2mXbBf/OGO0Xe0Yd+DtL0rJunSTpsZ9oUVO\r\nxrhyvE0I6UsYQFStOI/3oNypCqixjGIJw5VH0QooKWYw3xPLMx+ZtuGPZQSc\r\nQB3FvRgQybbE7nMae4kvHtwwp96oj5DAG5ofx7L9/kllLyvrP407ssYeXxiM\r\nIBKwkjDGJXmwqzUyqmwBRIgzoBZGY3QDADnFD3Z/dNb5n0YQuOmYjbakXH1P\r\nUcyJCnQefY78/IOvEyRKDWdC9wE7/UZv8Yqm4bitmUhGxqESreJHN/8wpP7j\r\nRwd8wu+GFNYvVAAmDU67gZ5Z8EUAx8ugSTidAyVZv+aJSJVwo1Fcvc1Cbm7C\r\n45Lt0xHpswOV96ClYEmZvkmOokpLSyUeOHRivytJMnb2/CemFXvYGylYxSSf\r\nyVHazqMNKt+q/bsjOdnZq4uPpoAMWZ/dXaEsR2frM/e+ggsc0gcIz07gVAj7\r\nJeViu2gSLCND4KfoJEpnwDHrRpTn363Y3qjamcy4POAZaUSNaLIsqfHuRsTC\r\ns4ERO+zLT427n+dwkib/9y5UptZrhT8ZM+zzgzDCpO4LmKI4Gq9WHo6GXola\r\nWbiNkIg5datb4gbB+p/CIgWRafUoeFnQhbUtpS7/KpijBdFR+nFPctcUmbCo\r\nC+aI+SVTT+WrPn6u96NaOiq1TeB+JfUlTEc=\r\n=iZjc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/density":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5e5c2afc0.0_1667994822107_0.602599519951659","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/icon-button","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3e3f43359.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e8f9c8048b3167bc907e89e3ecb8853e6dc12b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3e3f43359.0.tgz","fileCount":40,"integrity":"sha512-g3juknGFIqNxnSvHKFd0J+1hiLyWqyOitHCm36LO9EbmaQGEtdorbsXvQAq2Bhe7Mc5jYEpFJ2kVQ8crMhzP8w==","signatures":[{"sig":"MEQCICypk9kGW8p/MLQanzvnMEgl81+DlicPUNUMKqSUeao9AiAWNoETd4hvHL92EQM4x7jXKQe9PP1RR5RuweQcLYUWJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAeFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7XA//St9flPtpCqzAcMvLA9Wc6dB95EOVPrCqrnu4rYSHzzsCbQns\r\n+8oUyVFRa3d4IDUmRE+sjeAmlmNXPIfeQBwEMHVxV06ZhCNtDp1OcVPWqnXd\r\namet92G+wVHiWDvAiTvFYABYOcgVOsiv5zMMf9gaSApHTJ3248DdZTAHrfMn\r\nfQSIAMZ9sW6kcUZxxTym5xRe738KWrwH+pxFAsma/KCQZIJk3y7vEc7YNKzZ\r\nUkfGrNG2J6V9egrgjqXOPRCLmK1TCRcFrCvM5SbhMs5wqCOlfkewL4MzM2BA\r\nAgTiBgIkWrErqwvoAsHH1op22r/rhF5XG26rnV9qNfrEphG2xXizNuXEwd3J\r\nNhng8YJ1WAGUhPl83kkddP9qklwo/9gU/bPybst/kf70zH/XEAZMoiZF2uky\r\nGQ0wF8ijp3XBzsWg9sp0QlptEmU/OIXwDmBGuiK9+1I+ReE4GLnCED5Ocf8E\r\nEGJ8U7m2mCt3J5oXqh9eF50pcRO0HoOK03G/8mILtoQLSod/hyDLmjBiumuu\r\nZLw2nktrXxXZ3H+eW649HXwJNJ5N08EI1SxfkOOy1OXRJxHSVeUlvB4BDfih\r\n9cRn6cNSSH3zxsB8X0M/L3qfmhmZ/766I+n3uyp/IebgOYKo1k7vEe8kJjSt\r\nIYhr6f09kBP/jmlL2FW5cTp4PQU5+LBdNeM=\r\n=AndV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/density":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"15.0.0-canary.3e3f43359.0","@material/touch-target":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3e3f43359.0_1668024197256_0.880993451863995","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/icon-button","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3f667fac6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff3869c2221e4b365736650f155649984346fddd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3f667fac6.0.tgz","fileCount":40,"integrity":"sha512-UA0gqniCgYj2DOKqkE4O9TofHmzPFPMm7IJ0sKnnf6gMOmg40/Fm2WZ35KZmYxog1xJJ2bY1RyAD+DmF+ErCJQ==","signatures":[{"sig":"MEQCIEz7pd5haQdhmP6hJ7JmlHYnplEonhe//GdGuEpkj93jAiBbt1fXmQRCU+xYY2j1upOXz1qTRn1LaYRT6725ueeisQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZhAAgfaQRoLytXCd+KWQY1ewT3mGNDV5F0gB62rMlxTx+9gNk7uV\r\nYMFx5y0DsQWX/WiiHa/+Uw1fFlvbwTXyyKpIwAgW7rnec10uVSSJEmWQo06q\r\nlLeZxQq+Dug6OMVo0I3NljyfsMz+JS/9kBR7iXGA7RDEvl06bT6KyNTfkwxB\r\nMmxmNUCkaZmERLy3WQq+soXlvbgmQnJcP6VDHHFtvyn776c4rXysN6+c9ZBm\r\nsBw1kTdsU7Z5525K4dm+7knAYJCdvjeo15iaat8AGbALk/XZCCcnipYHU572\r\nDHPVzhfrs7czcjP2kb94zCC9+9RYs1+aCli3IRDiB4fcy3uodwx5yoYmedrw\r\n7lJg4YDSkBZyJ4qiySIe7nsLW66mflK2T5f+ha7wT1z9ksFXLfM6UEITLNo/\r\nnpAMplVwT7TdSo8RFEGa6ZEw2oI2AiiEi+trmpACDXqfDXb6sJkgiANyXsvP\r\niKX8osWmQTplk32J2NqU5UYnD7N+MiLiiEFTV854AlB2th4KLDijCfJcRL1O\r\nUo46qYp3004K1+iUDzJaS2GYiwLhfIAtP1vZTXRp55zJRYwATp/OeTOghNXM\r\nFT9dIe8ASPrxVT42XSNViHGCXIsYBzoIIsM1T9x88gjs8Y+DQdFiIY+73byv\r\nxisyu4Y3bKm5YvhvdJOnkcqNStCoPMP1ztE=\r\n=w6qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/density":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"15.0.0-canary.3f667fac6.0","@material/touch-target":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3f667fac6.0_1668031592970_0.8497778490347419","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/icon-button","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.faa28c1c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4056449650b1174d0dfef02dddb8dedb0232ab54","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.faa28c1c5.0.tgz","fileCount":40,"integrity":"sha512-r+txSdub/ZGTeQOy0tu5WRg4xtDvoA7cuAF/deZt9G/F+5w3ECSXmucWi0Gj+7l+Qi7TYuW1ftqpUa2UHIiAKg==","signatures":[{"sig":"MEYCIQC6pRDWvHiZ9BchIi/r2sqMmFIDBicTgLWZkprqy3WHWAIhAIsOubEhRxUTGGD/90LnSt8OTyQDpgoOb3y9IU/tywM1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWOg/+OS9Jqdy4O9OaOu11QSHNg6QSkqpkNExiHi2wNTUraTZZyd6j\r\n0hBB8vWK/edoFRO8vXikwUUPxu+OD/aiyTXtrhFpIPAOyXdYcnmZvHYqtTtJ\r\n7jeUHYBSvHLre3qBreGgv1NkYSbAi8PGzWusArqwjX8NBgrsXFR0sOpCVqO5\r\nU/4bmWq9mdge7JDo/fp8R7eSZSJlIUoeOOLoa5nwxSuTJt/8LfVWl8bVgd/p\r\nq4akLY07TpUuvQo+jjpil9FXlskAhesT3Uwig2gsAzgejl0o0SrArqZW6dVn\r\nEDLoQaO3Tl62H7xNuxR6V0cvFojfk4XfTZICsTpXNGV1GYO9oh0waqOtJACG\r\npylcf63dlWyUC5DUZYpdmJ69e9npklJ3tgOhvk9PDzCuOo7MS+dBucqVb7IM\r\nGH3tESVUYlFip/M99rk8Ol4RemBIdZej/xFOlvw/Gz5IAOXNR0eR4+Jb+0GR\r\n//K+nRbZ2LbTrZnJR3x3SqQDLLXLbsikEOa4BLESHQNslVAYkP6ARe+u18ho\r\no3RZFDznYqtrIZ+GRmM0G3I3LBwsEt5Rw+/6+xwGNU3kGliKPF/KwQQR5o3H\r\nMjKIv7U6OMZWJYxzTjOjzlTIllAF7NL8dc63KfwMDFgiQ89NF2JgHPeKNqul\r\nn+tZPVsjEdAX5WgnktYYnYm8tDh5WS4cgIk=\r\n=GM8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/density":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.faa28c1c5.0_1668184577226_0.9723685661389985","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/icon-button","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a868c7866.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b8c7f8c440e91953e0dd325ccd664859f800e8e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a868c7866.0.tgz","fileCount":40,"integrity":"sha512-bIulZfzL4DlpzKzOtCt4QWPs0k8oX70xu5eHYjsQ/c/sVA+ROjG8hMIthZX/Cz0GHqFDsI36lloXTJzbpxXzwg==","signatures":[{"sig":"MEYCIQDHOG5AEPsKcV4+G/rS9RYctvuy55e6eHCprA92FFVXTQIhANYpvce029dtOboGn5A+OXN0x6r+4WQY2xdp6B7xDxW5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnopACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJBA//f0ux3jeZzXUhQWcW2ck+ms0Ms3YOiG1ObgqbcoEIgm6+7h6D\r\n0Hk4FrIdw9H5VzAqbbU8OJvdnydmguGriISPl6VfiYxn/w8FIiIdfcX3qqye\r\nZmfY9jQkBFNsJtjjbGd2QnyQKeVZTTKOtAKBqmj6zNaDah0DAk/CPj3jarXF\r\nOqAzkn9a3SmMXC4EMsDcCKywe75yKLXPaCcqGTwcjIgXoHIcAH4TrtMgfhzG\r\nWswjk1X4HqspqJQVkHUUI8tQXI3MRW5FvClZSSMsZhVVLcUx0ba/h3r/rOdA\r\n0+MowxUVyEJxqlFsEJZr+0ycFJFX0vN9GMTZcAM1iI7p5wvdh4fGzxXeOW+c\r\n1iVB3MdN/6XjGx8LIVv9Q7u7Vi74WpAFwTJECa4iL8H3TCWxOv7OxyCHZRig\r\nKclcHR59NizjyCfCcE+eujPs9/egpq7ac+qM/gMnPDWsn0dOMNbAt9uKwFt/\r\nqvqPiJ4ZESD/UXYeEzM7WWC07upQABnN+X7SRAzg1bADROeyKlO/XSGL2SD+\r\n5xzhjaFrrWLrKhDT+Hf9wqkAW1hRU1dxKbuxZ8ibvZ+qGcXJcwnyfSNyevdR\r\nZAlIjK5biQiTvSgW2xYg+XviCPJdDzUIE8i5Af433afSgT/z3rYnj4RkPM/c\r\nDOOsVsmIeWUFbaUi2rbeSu3soOnvrOyzL5s=\r\n=tm1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/density":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"15.0.0-canary.a868c7866.0","@material/touch-target":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a868c7866.0_1668184617289_0.8972441480627951","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/icon-button","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.602fe8efa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8f0b59465f41b367f63264f7320ea4bf2f0bfc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.602fe8efa.0.tgz","fileCount":40,"integrity":"sha512-Crz4nhugLC4Qoke9N3q+XKzdUG7SGsoyC/vQG1Fe6sI/TIIDa+IvIzqhGdlUISVeSBLAx7TVTUjUplhowgAy8Q==","signatures":[{"sig":"MEUCIAtmZhMNn5ClCkKvyGAmqBO0Yl4YJzYNiZVwPvETTB04AiEAuE2DEstDcc/xsmldZevjc+VxGx5lUByfSg7Ua19sIjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/1A//ZKS5jrvCpjH1t+zKSPBX6W1SHhv5/NZB9BWZZ5SqKwnGTjAG\r\npKMhZIokD3lh+6d82WnH+FQBn8OBOhCiEgMWEPyYLHKfU40O3c1MF7uuRUJS\r\n9aNkwIyJK3qoJdK9q5Zn9/NJGKYt8rpkfW7nyNGJOiIF98FggBrTq+KP1sJa\r\niMlC5BgzxizOE3dpL/VwUH3KaiKTWFxaVuZOicL/asiR7cfI+6aGCqjfUfoy\r\nJY1ejnpgxq5DNwNBchYNmTqhALXXYdRLl1YMM1xeq/KRGuAiKEjf3e6L72WY\r\nmEz3V6cWUlr+LJRzcQem3V0/9/edUMrZn+9NubyrDsEPHn4Kjbyi6Kum4w7w\r\nxhsnaP50JvVOM6QhkEtmUueUafFDkfLYRpl03WqQiyo43mODc/7RI09Y+4aY\r\n7JKuUPojKn6VHM1fft8CS0UTNs0xPAKMGQBjQkEwzfHXVBhCravi2wMk/j62\r\nk9IC5cTNOWkJDrqmm5WLG0LdvDTqa4eZLnMPOSUKVX5o5tAYSa3BkqEkUiDR\r\negRDB4RBsrrjO4rtwZdoe/oK9d3w0nEuXza59wqbtPJJ9I+dOkyi/WnAHY4o\r\ngoZkUmF++66+4/dvZVrT3yKVtJWBSzW4eFBUQTK6zG9kxGyz5kJb6imvq4HY\r\nny1lJUPN7tN0m3E9SqE3ECgJdNieNM5UsUA=\r\n=/xuj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/density":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"15.0.0-canary.602fe8efa.0","@material/touch-target":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.602fe8efa.0_1668186738989_0.34141573979981343","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/icon-button","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.558c2be62.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd42c888cf1f2286cb50a85ef9f32534543fa8a0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.558c2be62.0.tgz","fileCount":40,"integrity":"sha512-NfAa/cgUr6ru1tBk/MGEGXOq3s7tdKPuNehY/z3WFkx90expxBklmsEoo1aaxCkXp44aF7bRwftEirGMxu406A==","signatures":[{"sig":"MEUCIQDlsG2ihxE/f/Wj/ykY5bgQj1rghecNpHFyVjocgvkWTwIgJiEQRozR+LCz1a+MoZFEfA2k0RhAJOVY4X3f0uyXAdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohuQ/8Ds+jT0MLRD3mH65ddZtP7J51F6hGJSBTt/KZaixgr4vrerK2\r\nXGVsLbxIU553WmaWajNR4n0GvALUMDyhspes1CfRrATt1wSLGCPzqEHwgAlf\r\nSeFMuJn5LoBXmDHMVw+MgV2I82M6a+b2VLlj6nj8lL/ZujqJVicY07jgb5w4\r\nyyqmEFCeiUNo/34uKuDIDBlvudpMMQDIAkui7K5jVBl7wE/0n9jVJx9uIJXW\r\nreTTSO8je4DkosPudR/XEwMHaj/gt1pLcsTv1s2RPivvHdFbQrtjeBvEw2A7\r\nIN2mhxib5CHXjgKggIz/TkpfoO7a3/1Q9aIQIZRaNtz7DLqa88HKVBZB0EZc\r\nZ7IVRy1HmgCUgpM533XHUfCW4PcfGm5kYoDhc2LrXpwfHElvx5hL1oWWCC3g\r\n7bTMC1U4VsStk8nvUQVgUEi5UAIGdFTpuuVW0lA028XwhkZg6tWZpd4muyiS\r\nSLz/pHCfGYnY7x0gNSaeI6ggdrhFV2xdF5F4QTpcV5uII+d7rPsnaHo2wdx7\r\n9v42L9H1igdW8Q6xQ04oSI0hPfZso4i+j35+RommJE7d4rKdLHsfnWYoPkTl\r\nPqE7dVesWplNmD4nfPcW/R0xYY4r3vXx/SzhGDviN0G4VaktBMpGewpzCkQL\r\nlxdckBfFNlupL5Un4xftlAN9prPg+09em6Y=\r\n=g51V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/density":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"15.0.0-canary.558c2be62.0","@material/touch-target":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.558c2be62.0_1668206741792_0.05342219007184146","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/icon-button","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b5c13a7a8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c400c0ba488408d2b96a7482adf373cee3b76173","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":40,"integrity":"sha512-ot6qwT0V8Dl0JmjO+xg8bApoCx0dhudpBv8+Q4GkTVShnliz+pGZoSd5L0YbyAZJst44kNlAKYmkgCTWg7ed0A==","signatures":[{"sig":"MEYCIQCYM8hVh1SfBmmQeuiZTlPHagsYPPW4nL0JG58ZxZAi6wIhAOk2KBeNdWxZ1N+OhpwVVjH1F5h+wOTsqCdtAqxoOzY2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRzQ//VUaTRQz86pyW78zV2q80Y9QeB+yLkUQuksCIH4LF1mNW4Soc\r\nwuK7s7KeqH8UZhVv6YtvTi0NANKQoyUmWcKUz0Xk4Qt5GdXbMz+onbUa0FO4\r\nwbOlYxgUg27MlgyxqC8m9xChVReNgI/xMVjjANDeSrrwmCHgzmlMsL5LrMsM\r\nyZmm9GrdOjNMoKeCElKt23ClS2CYG+aD4Q4MeTm2f4muttQ5K/nrfVHUTvYe\r\nZOyzhng5qcma4F97wW3eW4WFF7XXh9Rq4B47nNJEhjhALDNIE4ukoHRtjEI3\r\nOhcufv5blKKQbhiUXa4pDHIFUPafICdOSIiiV2R7Y58YjYtx/27ZrXzUFOg4\r\np4oRuYgjTXjOoOxrMj1nVhrV4x4LtudXgtNbIuf/wmlWUlxiVUTv+uDWwY3R\r\nd/Lc99xlxu+x+RDZSzAaE7akCTvrdlIysHz/O0HQ8EkKRRsQFSWZCuuWIUFU\r\nNHjHCZNdgC3WHTAZtTWxgSYBuzGcT1mT3HI+d/2P4IGqvhUzLdn5h6AsQKmv\r\nRWrAkx7r9UHAiyiRx9hJ9H+KYMzLPlNSBF/UnxXTRgm0iimDGae3sumoDLB+\r\nDK3EQX7bfCqqTx0DmnZN2CteVDTMwsCzXMcmDjmazv0UwQvUCa++zPdG8dNY\r\njLS34UfUMHcHnIri61Nf0xQnMFbuY9HLBkY=\r\n=K0ee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/density":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b5c13a7a8.0_1668441540317_0.8164575288284608","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/icon-button","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a6e1c0702.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acd7d640864126fc7ffe0c2a12b3822f00cdaa45","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a6e1c0702.0.tgz","fileCount":40,"integrity":"sha512-LZ1nja0O8ok6JyatYOxYX6VO/Bzf5IyoXTUY25u3lIJOwcrbv8Ok3HygDlsdtuHpLXPgyKtz4jP3KVZikbb43w==","signatures":[{"sig":"MEQCIHwrIJzmmB5ABX0XUG59AT9yWErs337JHujS4EDLEo8CAiAYLnz2K2S/1tw7r2mndPJ7jwqOQ1Kf+UEQvx6B1BX3sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnqBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriMw//RUzEwuUfxn/5pFEhaJNX6o3gIiGzITw/6cc/6XvVG/9Lmn0v\r\nsB9WybxcNxDCu2TQT3T7E3fgDc2XUG8o7g92Lq+1dLA+9hdymoO0jXklM9k9\r\nYGbJZAPZLWZ4tGehTh1KhCHyEyQwTB9p4HHp1WpC86xj7ACDWa0sDEbyLSXv\r\nAzAy073Uj5d/v8bmck+h0IkTJZwOJZGph8VU6KVGawF5mnHYnwuLN1pRQl5r\r\nV8Fe857Gz235EqQGSo32kRRkOWWJdIx6oe0Moysc3bEmRFrC0wgnVC3EdJ+d\r\n5MJNgpQvPbBFBKlYzeLjyX5b+BXcdyNpLwdGc0hbOky6pyuAOtASY37oLJ9t\r\nu0X2QWUAtisqeKtsjlu9Q2agTXvlIw9oOI6xuQDUU193Ww9QJWHBeUA80j+Z\r\n9E0plXIT/yHBTtQ4+l1aYuUVHTgfK5h77ScnNn8vQ0TMHIt/AvsgDwCFpwcg\r\nyBYaI6oBv/bSrC9ZrMNFk0Gd2YyVkyG9IomG+5qSbKxGbfwSvNwO5ip0j3Zp\r\nsC5iKjKL0RWj1BpVqgwjh/eivpuvwQGat8gcRtBZIjUnotoWw45HeZVkdcX6\r\n7La1TwnOjl267iKgJApIL7ihAs35CzYnt/OLWXvH5dvCvOELKv4MbpY4CqUz\r\nTrr1snY915yYwp3K436NoBQlPrxJ4HWE51s=\r\n=3sbx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/density":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a6e1c0702.0_1668446848932_0.5738213855696739","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/icon-button","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b6f8a06de.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93941b1f90170dda032178890fce7bdc6962af8c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b6f8a06de.0.tgz","fileCount":40,"integrity":"sha512-IeU7/gq5ERgGXSR5DgpfeWW3Z9a+ElR+ZIXJxyXqytLlwqeQlTVcSsHKZcgBOwdOE0etkgRAth/erVO5RHYv4A==","signatures":[{"sig":"MEYCIQC4W7/Ut8GVHXcMGDVQvN5OIAy5OEmiF0o1Rgjr9Ra+/QIhAIMs7tnH2snVPUwnR+eer8/vDQU3395fxXw1x0AidYnx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0DRAAjsO/tHsvDWHSFJNK4sQFFVF5YYnoppn46ilTeq1+Cth+gfRJ\r\nu+7AfuuwsTYCfu4GVlsa3rC/4+FsRFu+Q4EbtqdcCYGfmf5scoRP2nNLR7xa\r\nM65zJ+S8a1sblPAl9/RrtkI2hu95VeH4r1uP+OZmYVhlM2R2oOoGFpyfwWEa\r\nGQDSoIG6eZF7migHJq2vqv6b0BlcLdCychP9AN3kcrUfwyU/Wque8mInlKhR\r\nj/kp7hq7UMCmYTsle86x76ASyj9hlDamPVvDpbodyL1ejxCgytEsBIm95+Jd\r\nBy5/weMuyvKBoQ5lsQWilrMEOHh991d06y6rDg6ogwngDn+lMECzF64QMAOj\r\nHG/RA0kKWMUpRwR1BvZCyyYBCZ8cHsxM6mLN0ApfhfXa9NTrZNau0TfqHMAN\r\nqmVEgmJYjcbmfO3nxPxUOSR6RQgT3UQqLI+b9FFVSaXfHnYRphh/0onvMc7a\r\n0iuk4Jvgq/mEGG07Uab7Iwn2cdRhgKqFAhiRfGTyuCUtUoXSUimcyV3DIY8f\r\nGa0NZjHH2xSil2YJAYkcXunEsy/Lt4g9ksPuHWBy3P+B9WBK335iAastZ79e\r\nKEn+E1LLpTdYikGIEuFBnwo4tytlFOTEUTWZmNVFJngX5uRJdRlPPL8JlqCg\r\nGgc4SEVQInGBDmPsnjf5vf0VBesc2CgdlIg=\r\n=IBoU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/density":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b6f8a06de.0_1668504530425_0.11107191207438727","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/icon-button","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0163f3ba5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7092b6dce811bafd429935115b2a97f49b40b9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0163f3ba5.0.tgz","fileCount":40,"integrity":"sha512-ZIS7O4rRVXTYMnH0twe5A7MfD7Svtc/2yqGz6XaxPjs34t7J9AiRQotew7JBXRCGpPIBR3+gOcytsQuOJpfNPw==","signatures":[{"sig":"MEQCIFaQtozYhEA/sjcoReo3Rt/AoQBDVAaHQBkOwkUjiYaXAiAMI8ResSnElW/ukUsKguLUp2OvRsKZN58jYptifBrOXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9Q8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBTw/8CGzMoDfFeyPvRkETH9+f37p7Nm/QZDg0YhSHXLMEL+HhXFrU\r\n1KS2sI7YcxdhtIvjV4CZOwlHIyjFH4L25rnsxJS7fyW0ebCUyzNq1nAYHz57\r\nXMf0nuuAM3po9FcMzy3TBTkt8S0zE5fTCaeZCJ+vAQhtijaH7M0nFBYomdFX\r\n+VgcOroCiGh2OnbvACBzB9RPpT1GwiQDo1KLNaQatqoVJUbF8dhykDd1yI+H\r\nNRZ92SVRKl9tnmLRqnIooCFhnCVY5lWW9Mv3JCixXwWqUV36oWR5c2Pxemu7\r\n4SPhudXqHalzXrAOGvGE9Bt3fU/jYJNfVqBlW6/KevyXH8xP2HpgKq1hgxfP\r\nMGlLhFUdCFn+e3/n2HuxJiLHLwCVbzJoFIkzoo/GCXvXD4tK0TSoQjF1F5JQ\r\njTqrwpO7vc6r6kI6PDBS3lu/03X9mclczvVUplmCgcssoakT/lgq+EMgzdg6\r\nPwSEO0z9kuxr3DN8i2sI9Ge25T/eTqv/Ut18KJPHsO2ovk0PyeN7U1a0AP+q\r\nfSlbPtHehxGglKU/XLXYxE786a6ogdhw8jt6QW63MeICwpxqJ40utiOavnKO\r\nD9QAsJkNXP9D6oohOa86cr8j3R5ODuRT9smLVLORuPnLy1pwkQochQkAKkNv\r\nMKWM/PLDw7sKILXiTHz0cXW3qeivZaveoEg=\r\n=N70Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/density":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0163f3ba5.0_1668535355855_0.01859385334181307","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/icon-button","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.66c5cbb94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"482d5a68abf0694f094ea2f7c4b8646a7d587368","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.66c5cbb94.0.tgz","fileCount":40,"integrity":"sha512-uIVnPhMquhw+0YwpT8vnl2UjdTW5/mqCfjRyndgj+0bWhysUVkBdMXcvUDOXa589bhQ9m2wuuZAMLnL+UAgbdg==","signatures":[{"sig":"MEYCIQC+UeifjHsveSOblze84CtrYgec+oLeLFIy18fN1fpWQwIhAOGDYlCaIR2pjQE1yTB+NYyLicHwV7422PjJDBrgI/nG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFMRAAiy1VB+TdITYxYol5Qrr4HbqGOqm5yaPEcoUwMy9tC7E2IJKm\r\nOHKmb9cftkj4EbXsGtVnMX+OQZW/ZIIVgLCyKhhfNHmFS0Sal6Ty7sm7GnYx\r\nFV3BbO2jMhg2Mqyu8SjSOYsBRh2aQXtyciRFQm4Oz5fd5Cz2cOPJOA4sYSZd\r\nXdSJNiuY6ymienVqRgxamGxMhwB3OSG1+AOnb4Ta2dI151HiS+5vERyp6IOj\r\nv0vwz8ea4SaFvj9l56V+vLN2Im9emN1DuyoFet4D6IkPgedpq/V2VuYivTH5\r\nuE+LfZCJ4rcTEEqI/u15Vqzc9fhlD+ooPbYep0EwKGQalKvCmWNtZvz4T/s/\r\nmGCz2brCVpyve+FIHcuBqnbv9Cf8Yo5Vk1Faa0RpvETBdb0WF27lcVVQY85G\r\nJarP+x5S2rkYECmMr0BuP/u1I8jvPDc/DDcI83YG5a9wgcEeGLA6GtEfIgTL\r\nUk82F+v2TpnMwsfrn+CctDdqWyG2OR1FP1jv3k4RqUp2+k7pQAzVso6we5j5\r\ngXWOTlGirGI36SSr1MjRHIGuyF2bEd+1oiWjBy2TxDYQE+D+kSFvz9LElOP0\r\nAXMuoKtQv/fAzDlIcalb0eDp2ED9xzS1L/VtnP6yIa/sSQdApL2pkYEwd6hG\r\n3dJGKEHNirvURS2Dr/8AcrRd3Of2H+0m1SE=\r\n=HUTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/density":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.66c5cbb94.0_1668540634418_0.04343842358360828","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/icon-button","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b01136063.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68edb9e1dd1283b82441bb6cf5595eb9cb8937ab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b01136063.0.tgz","fileCount":40,"integrity":"sha512-31Mo1MTPEx5xAYpzN90LfjlmB8pdgY/M5/Kh4PAMX8mBID4H5B5CYb4EnvYyBdReko/sfDsItY+7i0kpKwApFw==","signatures":[{"sig":"MEQCIACqIbagPTA9S5Oyj+hPEyXleiFyZMW+WQKHA9YphfwxAiARMdAEzDezO+zHxOmK8L9jpqtzQOZnp/vnJwt+ZUUtPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquCRAAjQDZVWMhGAokRY80qbkLTh9Pe506+qS4rQvm4J3rbBr/Aj7O\r\nCVw4j/u+UZ9ADuUid30SmqBq7Frl7xp+zQb77atqhYgfacZYv4ZIRjR+DZ7E\r\nuL2Ix/J+BbeqzQsW9U9uVhrcmINRSmf9vff/6brGVvD81lKa/hsyj6w9NXbf\r\nrzE2BTu51iHkKfwrJLtTDIU0+pB5OJ8d9Ub1MvSAe5o+BodrdrCJJWDJe82U\r\nAS69opFBf7SvCSNqlxS05A7uMAZf/noPd+Rgfcdyb1/gunA9fBo87ITVOXHd\r\neSkZBB6I5E0PrsN/dQcy/+hdnWEZyN7spjAETctbbreiROR0kXaXb5BKAQfR\r\nyFvR/TMtWKxijUQ+aMr0Og9wHUNz5zm2pYE5o24fuOfixwdrOCgDK1rRSGwH\r\n/gFwVMRPWptml0E/j76c/wFGO6G4gtCKp9d6tW1vq6MXy1/2vD24DUs36byk\r\neRvp7M7wCNvAtCptaz7gqmuLA6OwsvcmMs66VoAMKAdZPkwHaansy5Xo/wTb\r\nfydK0yanWMklNFhCMvPfiOt91BuqoV3cavZW0bqLH+AbAQ9rSessm5MZ+NDE\r\n68x+o2qcMCu9gRl/ykqT6phhKRE2KFKMIdrZSZSDX3opyiJzX/v7RWiFUpGv\r\nhjV243JAifZbtyxkj+JlaLUAf/JsBjPM1q0=\r\n=ixcY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/density":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/focus-ring":"15.0.0-canary.b01136063.0","@material/touch-target":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b01136063.0_1668557778448_0.6778483498554593","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/icon-button","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.01da0cabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8597dcd729d861787cc8f4479147631b1110535","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.01da0cabb.0.tgz","fileCount":40,"integrity":"sha512-xnS8hELN1BZJOC7ZgBKz5jNsF9aVRUl9hkYHYCzfd8jotCG/UKVKiUP1OW95EqDpb0A83uZ8KuokSGQ25s/Yhg==","signatures":[{"sig":"MEYCIQD+oC+1fuu6j14zFyCckyyV/hQcib6RNmIagNdFPMzRgAIhANSrA8JzIiWiaaCpWZei5TttlsWIgg7Um/vsBntoLZQl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyPQ/9F3npT3wBX6tT6JQKdk+MSH9ADF2rmaqzRaXhwRdlOn0rz1Cn\r\nmKDKNAPUIVSqR1j0Lne65t+SrtzGBdLfWXH4Hy8zQSqVk25I3KBnT0mPhHmi\r\nQ6Wd0UR0h4pLeoydmM3fxDKALD9hkQC3lu+Ub6CagqHM4YTS6ykXAn+0vBAy\r\nRYJhC8vLcYzPTUqarxeMlcdIbnkw2PqkNwO0K4YBXzBLBeJbk5K84Y07wcw2\r\nQjaB047SRAXer7XlBY7CSuH1Cq0dnArzE9aaLq+XKJ2KT9z7G1DHjnjmo9N6\r\nImaSZX7ZxkxK0OCQJAsQdwy6B12pmSceoQsjzXxiLrcc9JzrXwAw2LDbewQn\r\njApDgsC9zWzYgxN/AWXheyUH9M98LDhslR4GyFwYSsvob/7TbWtLpnmtRjan\r\nNp7O1kaj7GZIRHeGf6MfdNnN96bb5PNk/5/yLXrTB0rbH5gy6S7P/OqvADr8\r\nPGdBuHzuWQ6wVj8DH9fHZ9jBVJfCGwv3BlJIy6SpdecJ1/lWI18y2HBdq9zk\r\npDCibvsEFBOB6ACAYFl37cW52Zxw2M1/R85dJfIoyEPD75UejxhfPAlxornU\r\ntpbG6H+LWpKc+QztvzbvAg8BBUq8f9w1IUHQnOppLVkpCyUhfNsTS9hMDLks\r\n+TbAZFzguNYkEv6kxtT3oPoO7KT8BNRJJpc=\r\n=Gs01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/density":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"15.0.0-canary.01da0cabb.0","@material/touch-target":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.01da0cabb.0_1668590024594_0.7435053693373472","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/icon-button","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4ac393164.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4138b214af1a0ba91c3479e17d5f500cda8db47c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4ac393164.0.tgz","fileCount":40,"integrity":"sha512-uVvluu8UVoZQx4GW1INjHDXpefe4osj9JbATbH61NQK5xpG+9eBVGjrQVebVp+CaSA3yOs7M01hMK57wGl0gMw==","signatures":[{"sig":"MEQCIHSY06WtUcCOA3TZnyxo55acxOf/+zlhcxJW3TXbow1MAiAoXACn9iN+6ynQ5ZeX1SfR/5sqWX2JIH7OoxfuCsFeTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFCA/+LM115iyoOlv0y4KPPRUnhZhHLGRl7OpjGH5U8dITDQADE3dF\r\n2WRn8+Gz+RX1L3SyX5vN3/Fnw4oRdddZYmHw+6GAE1BBpG12hxvhGzaBE3XG\r\nHoYv99gcsv0tiTs8wBWIYPTyjjwDXMc6BHBsYCdmBCZUBsg8x+J2XvCfgMbr\r\n1SMs2jWDadBxl/JE4gD7/eFZ618Ghb/wkOwFdjgOVx+zMMtxvrLP86HCRKRm\r\nzzm7wErZiso/GHdV/Bcr6ED73+PTLZA+3kkgxFAF2X251g84KRxZIjrXTfaf\r\nxQajxWc0wzqzc3ZcTn8Bvp8B7QquTLuI1VM8RCpcHIxcqEJNoiJjsqEu+LGo\r\nEW3B0TeYkjY2/RflG+ZHqNQcpz3UEFWD2QtlUXYcZzGoF0dwN3dLYYACi4Fg\r\nr2WQHDY5o9J/Ehy2uE4EZoyfSaSQyAB+r0M7xjFOtt4FJD5AdJBYjaTTbpvF\r\n2iEDWHrkwKt90qf7RD/HMFpFWL2DqHvF5Z9Rw7WjDAsJF8XNOj7GMSpUiluM\r\nJVsw6/kM+27Tp3gysCGEuSmsat4Qr5oNVsS4baMdUIoRir4akV/rGVBz2jfA\r\n162He2OxZxmFUWElF9tw74Rldp67qWAA/y03Xwkw11W7aUz8B3/wgC3UBB7f\r\nMKMTJXTBD/EnxHSjnZTHmicbMIV/cTUxR28=\r\n=UNka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/density":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"15.0.0-canary.4ac393164.0","@material/touch-target":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4ac393164.0_1668615361235_0.8125314154617844","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/icon-button","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6048fb563.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8520a5d6ee57d4efd4ee5cc9d403db4492f778cc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6048fb563.0.tgz","fileCount":40,"integrity":"sha512-LO8wcvg2V4gjoOv2mxXWq4zXxkWvQ+AB8TigZbZn/X4OMbFv9o+BW+4xti9qnXaBFKH3NhJMLYdf3sjxVxx5Jg==","signatures":[{"sig":"MEQCICGzcqJHxIX1112VStIhFxoaPgr2V0vqvpk4SYRTPpX9AiBaoqji6um3SMguNJeefr6qsZjSgJwT7RI/hSiv1AfYyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ06ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4+A//enc6osRJthg2wvQoLZPu+cQKpQKEJin+Ghx7HGAaY2f1kg1X\r\neaf9/wOVSPXgN1h5dXSoB0wVSJUKBLDoiwFpt/daqeYitufSuYMRJhZ21pkX\r\n5tbxFONcGWHyPojyRUf1zu9T/gn2N8gSTuArmzkoQC6Fn/lD62YFSMBadR14\r\ndksk/2rK9FGvHAE5Exr/X8XRmPxQHd0ZSn/6Wzuy+RaIomuyM17pd9K/CsZF\r\nZg7PnteRITzdVhaFPxfCtbehXIpiFc35gn2ryKg8LgqhMBVJre308z8WvHog\r\nTuTJvzAGvzE7qRZCqQaubHJ6dEPdXpUu3yn0EUPSBCCcKMzfFuah0J2rdPof\r\nzhf7CMQFBWYce+U/k8fWduURXa1P8zr1H0m7E4pdmJwMBk4GiotrvgSDzusE\r\nhm9wfZYxrDEZPT2KE4vt6IUDZlWqAYLeSMkkZiDPHxV9p+OJH4BxZ7PhyyMe\r\n9SEWd0ejsDxEDm7CVHWB2SI6B8XNWgSIuJQ8ukweAwAol6YvZf1m4UgrOomA\r\n9Qs8UMHTI6VcOEW6JxIXstAabGzrhpQBuRG5L7EywaQ3zrBRVP9O9kfEqd5F\r\nfmD9ENCV0B8U/kh7XYwBR/bZGgcazgvJBBirvuE0qGGHGmSEubTzYvkAypsH\r\np4sC0InkjGAbdunzfKWl1aOHAddRT5szROo=\r\n=8Ddl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/density":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"15.0.0-canary.6048fb563.0","@material/touch-target":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6048fb563.0_1668615481961_0.07411950986559401","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/icon-button","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3777b03cb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0376966b25924d288c475f77b7f0b8c49319968","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3777b03cb.0.tgz","fileCount":40,"integrity":"sha512-/YUzNd2Y6Xi1qxWSgjPx3oT8Y/oTuDC17BNRrtKy+RfLUHzylqUcVOb8m6P5FIOXoGGBb6LfNCMxpmqo4kjM4w==","signatures":[{"sig":"MEQCIGXkhBlNOSJC/76lQUrimHFZBoAEQ6spJvWlSY9CpS2uAiAU8q3uAd7NVIIfJXjq+N6qqZ0bArf9a3b5eB/rv5+pSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS74ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomQw/+PXO13SktParOCyJmess+fJqyStU+ZAJBSXJRZ3C50Dj5c6i5\r\nQFXLLMsU3uqaHhcR6R3L5se8TudAiSxTJzBwhJFzuuuAsCHsHnpQ9K3T2LHW\r\nYL5puZC8KQIcfpSrBAFMT4l/HNUlAR4piYyntgaj8z/1EVgmZ+8K/pDiAubb\r\n1o24GFEa0N4rAT9Y0EuBXb+qWcKVpYgHFDhgVfWuslxQn5blj4RZrD1TqviU\r\nZE9hteDdh+pOGAe0EA6xDK7eKlmPPcmWvpAlM6gz1IRalcuyXdTPvzyQSWAU\r\nZXOQ/YPqyrK0FOwQESP3wg+JVfNXfDTCxMv7N+qrVfJIsSUIsQmhLO6PNrjY\r\n9iwytW7ZjFcGUh5EKXq9yQTqL4kryM4X9TmxmUi0vhKtyDgzhFVtJL93Ocfe\r\n1DpVo2meme++BTV0dZKHYSk+iAv1Wjffjc1oZ+ozRiOC2S/k4yMfY/M9/xIi\r\n9wgjvTb2vUBl4rTHSgTJLdbulL8n7BgSooEZ118nxKE/fCYnU0YrfUVV/YsU\r\nHKBbDhfuru0LV+uOzmASShXwGtKtBpqDBcIMmnt+60G7Rv3jOOGHlwrlEONo\r\nojPVN5qOv117GQcIiOsNAIfHsSPc/XmsmcJc6xiXT1ZiDPG/SK1kMOePgNjg\r\nhkbxo/wo6tOuq0omjgDX1NIgCGr4y+ML5s8=\r\n=F3tQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3777b03cb.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/ripple":"15.0.0-canary.3777b03cb.0","@material/density":"15.0.0-canary.3777b03cb.0","@material/elevation":"15.0.0-canary.3777b03cb.0","@material/focus-ring":"15.0.0-canary.3777b03cb.0","@material/touch-target":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3777b03cb.0_1668624119922_0.11125609885550825","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/icon-button","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f7f56fff7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9957a91cf47abfca07db8bc85e37fbb99207080","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f7f56fff7.0.tgz","fileCount":40,"integrity":"sha512-aGqaUtrgCq+Bl9itZKm4pxJohK1O2k0QztLYo2ZqU5pyVYuv0CGyHBOgMzYeGpfJKtq599J5ulUR7Qp60l0/tg==","signatures":[{"sig":"MEUCIQCvnhSQGnj3zBAXOsyL+MU6ogLVQ47EifaMMBs4PvI7PAIgMp84PkzHhnSKeQ1H5YBrC8GrRuXtbOlFmOT05QHTFEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxxw//ZNFtYrljnDbEmLCYFgo1da76A8n8tchdga8/fVKQhuVf0kB7\r\n27UR1nWOFp6DtyOGWHJtL0iEHxZ88k18rHcTHdNWnvSqNNSrUMn/3tJZzK+n\r\ngScs5kqYLKO9K62fzVDQrvTEvkMHCC2OfM1jnu+4Vyhh312JogfDWK+kY0ek\r\n3VQ4eEVrlbT59OwmrWDZdzuxK2/P63D6knVgmjDnVBdit76sgpe6QZP+ti9v\r\nrH05nqEqjxdHtUahQTsN9e7HuJWRQzKbh+B5qLAmB2wddaWtVwuWirtMPIvi\r\n4Br/a+NJ7XawWlPvCFlVTLcfcgKB0bCtrI/WTfaJJn1ODnW7DENSCEuYSoXT\r\nvDXSpb8zg1NmI+lzHvQ4+O68qge1gRA/HrI5mwAw6ywBxxteBfgnCfE/QxBn\r\nCkoQDWYZMuLHuvP2z6F3VHFOy7NbZ3nWVEMl4Q6mAwbpXyecVFCU1ks0+cQE\r\nTwRNovepVXcy0FQImnoWh04hjt/kjC/zu1s86/23b1jh0pkT/5U0pQXoJwpZ\r\nwWKlmikjYc9mvMUOGpmUjdLEgF86jeeYlWrO2fo6V9OCtdqiGaqBfgl4uSvy\r\nuBH9wRoMAm/MkOJU3uiEHPre3S7p7GVoy/0kECoM3F2LQsf3SzK3BJ8UckuM\r\nBLrs8HuZu7ltRAUL6OT7vWAq6rN4LfaqGXk=\r\n=c0Cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/density":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f7f56fff7.0_1668628588621_0.7850459217064931","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/icon-button","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7c73f6134.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92a06f1a9ffcf2b5b9656ff1bd6536ee5909d3e2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7c73f6134.0.tgz","fileCount":40,"integrity":"sha512-Wsg43U38y2MEzwtQ4+cKKG7b+LizG0BM3EDIrnpu8bf/3C2bxAkWVddRW431L4Se8CNJD4D2HWdn2UpodO06EQ==","signatures":[{"sig":"MEUCIAairqFpcsRbZWXv6cJyVVLxan8JaL/KL/1KsJVgGAzkAiEAic9tu52BYTSDwCwp15SiFyK4cALwV/92oR2ZHHUJoVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRwA/+IUsziKZOFP+1P4kD65RMnmmYHjOediQPH4ZIW+pYdwhy2UL0\r\nU4pTcZCZFBWr6stEm1vxNFZqRBVvyC+HpFHa1k9O2pr7yTpVv6Rngrxa5Y85\r\nlRi43YNlcFyTM2kXUIPcRnKIAJg0W6EGlwypVdMsCZZXYH/j8iDDtf3bx/7P\r\nf47QYwNco/H9uqfhHr1Xf2yPmUdHrxEM/nlra4kqpNghMx4tSQYz25w/WRCr\r\nwvvbyAJ6OAQ4AakXEE95WUOfnLQpbG/URIFbyBWf6rj84BgnacnRI3sOIlcU\r\nHwa/GPONe5hWvFxLkUzyLcnli9txMUt756HRMCdKIiovT7gGNxRaXzdV6f1R\r\nVuczK67rR7ODMqdaAMbhwVl9d/e+4CbP/W9GO2CjQbECBHbAf4zNKjL2HxKa\r\nkO7aoCXUzYoUQpFY2lA34EgSAAMHaIt/npDTbT2F655NFjcMWf3R5lOJoXC1\r\n6jKt2xFdJH6tnlORHNc++mpJuAztvfbV6+2Poo6DHjIdUhWaaJFfT9l2cffz\r\nzZto+801jDYZl0HfYI4oQPkJKLiOG0G5bKMDdLm/tWGta66Q+e8cscPzUQXL\r\nJ4PtoI6nL7fQZxgtqrqFBuExM1ds84SKrIZM+kOW2HcBRg2Rgf42euWMthS5\r\nKzcY00E2NEGxSrD+g4rcXwzNgJWD8eOWDYM=\r\n=CpYB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/density":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"15.0.0-canary.7c73f6134.0","@material/touch-target":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7c73f6134.0_1668628799369_0.46853022067830774","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/icon-button","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f1e037150.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2540a12ecd70f842d968b4898ba726f270c1c9d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f1e037150.0.tgz","fileCount":40,"integrity":"sha512-8waVvkfxq2XP0rJ4BQ3EXvjoCNEf/MI+52gpPeAl7c3Uq/8kd1ZDh8odtpVXZO8Xt0kAVmCNJlE3fWC3LntyrA==","signatures":[{"sig":"MEUCIQDr1QUwkQDNmRdJJb07dWPwnusiRWpUFz/aXJM5ufMlRgIgYdSPVJuZmbCNy6Y2hLZJ1sMJmYi4aQKDkk6HVX8qvy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHDg//RIJ0i8TyMT4JZjDZmSellfknVWD8oPvgn1wfBt2f//HEuzgo\r\n7GZsC9aMmbDjKWzqjAhxlwv9tqssj3UOv4P6C+R5ihpUGiU0j/tuP0/eWk7i\r\nBl2mv9PxrxAVo63WQd1aNChwNt4aOMS2N5V+HG90yj8SId5d5ya5L5J4jA81\r\nEw0kWE7rmWVAunUbI0SSSOdBsL0WaHX0T0N8OUctV7/qsc4L1JiA642ouHmI\r\n3pap/bekcHDeCeIX6o3qMjv2x8Kip7FlJ5+PIfZyai2W2k2U9zhasOGWDimM\r\nsklDx8fHvVQWmLq6nleDG+poY7PwzPnbLFnBPb5ohdRHqEL5og/zy+eQ8H/+\r\nRWnwX5hjCTeeMYzjlgNaFbdt8ftebOp6B7ovu8qS++vPpFY0opZ1sPWX++pp\r\nWLdpQhva2xfrrDD/DZAspadZz9VvQ0KSIn2GPicnaCLS0luskx5GKVk0OfxT\r\naKl01IsSdEChE2aZ+jw5PNZsZythM/bmiuOPjj2ZnoP1wFeuxxAUu45LEusj\r\naW9kDCFHDtrIN8Umxxks3aUpOpbEf7JR9HjuaFGitFGI9D7SxbJKBryAZnEJ\r\nj1nAzGh/zeiVBXj0OvsQRX2V8BQV6/W3ZEEKxdZIu/G0GvM1+SQpkW2vjU2Y\r\nUXRCp4z1Rt/6CF6l4u+rmc3siF1qFio2kc0=\r\n=7GEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/density":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"15.0.0-canary.f1e037150.0","@material/touch-target":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f1e037150.0_1668629143683_0.324586372636936","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/icon-button","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.40b18d043.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564d7632a4a3bba4b68f823cd2d5de257b27976f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.40b18d043.0.tgz","fileCount":40,"integrity":"sha512-ga5OBZ/BIaGpnCq/Wgiou94zk56kvtlUaENIRJb8j/qa/UdFX10fTj33ejeXymmvCeKn8dfpQ1uqbNUMG/rCUw==","signatures":[{"sig":"MEQCIBdQjXIvYzzf58jhM+XscljZ/xrvr1vmgqPYCSHqrc2wAiANqD1DPMsRpUuqkXxtcuGV6lraOdlf/A/EyxODn2NZ1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWtDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQxQ/+NnL58jmkeAGvBg1oMqZvhUEh1BsX34QaKz7VTrEpliC/2lnQ\r\nOlGumWZ71dW1AxQoGHjPHVbxQy6tVuEuPzJl7MZ5vX5bc40KvpBYbpXdS/Wu\r\nVWz6TEfe6nDYWacDht4sF12ZqVGSJJKf8eZ21RAPh8v0OnSsFjiaC/YBu1Jx\r\n8JQdUBBs7qJ0FzYm3N9xyuJ70Obu8Budnap52FjGEJSKC2EO6sGMYcVZJZPt\r\nJLgSAWAKbgBhpUBs6bJq2/wmWD41O5tDVyrcheBlyqwp+PuXorGSfCHW13vi\r\nHu1CjFYjOvkgIfNPE/UdtZCjBdPYyr8KwoyheeGq7o908a0L4LopZ7fbRu66\r\nf41JPewGraQSCDn9q+AdCo6hwMSDts+elXo2C+WWvg+bpPufqyf3Q6pe8Mdf\r\nyG+0SrNGsX4ONOjeQZ30Y6oOhIsEK7Mz7thQijOv58BzicNk2T0ldRIEEMIK\r\nf9RU98T5tga9PQ9uUTPJdJe3ynB5/bZFrmrJqMHeL+qehW9by/eRO+zezlPQ\r\nmDNXFbO1/UbtCzC7sTPk6tLVmJBDGOk9lwyRdRg7U467uUV1A5l/3xgXNJk4\r\nKgBdndB/3oMfEN2ukRCDy8oH3Lc96u6sOQY8i77yAGeeoNYyhHNeoeT/VYb1\r\nBdZOhrCX/ZRYZpODcPA0a/gyYUBwCyM/6Zo=\r\n=uT5D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/density":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"15.0.0-canary.40b18d043.0","@material/touch-target":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.40b18d043.0_1668639555314_0.5996438981261383","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/icon-button","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.86bde5c06.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9929d747757a2b9dc4086da18a6052db395a4b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.86bde5c06.0.tgz","fileCount":40,"integrity":"sha512-6bib3EzsL1Z2nFLXqMDXguYWZTKmYwcXl2yPimQj0dyy2gCKiaAKtnGlGVzTS/BVImr9b5gxlZjORnFkSOQW+A==","signatures":[{"sig":"MEUCIDmz+7MmrnIGeS7u5w0WA7X7c1dFiHqQChQgsSzjXI+TAiEAu6zikYKRUAv9F7u8LAolhnbMRSnq48JW+Aj/q+P6u2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrULA//SCRp+Xrrh0JtbZk+1yceawRpxjmPGcJvRHwAZQa24SHeipEC\r\nkAs5jMggKLfRrQWFd16ZbG+hPzJ4FR3K9x3XBRbm0SOudipSQUXAsnYUUFHW\r\nOhv4otni/tAUznADesvBq2zsJlFDgIS4+dsNlFvyUZXD2H0sBZkSng9m7sbC\r\naABNcpAuL7+Fj3QHVyUBzxeLOePBpU6y+Bp+Iyk21o5oRyiNdQbm/PbXlYrb\r\nrhyg0k++ICxxa0P5Jn9sdsvupG5LBJB6rTK+GA05WVaVEGTWpVcszKDj+y33\r\njy/9tdZaN6L2aECwT6cyXpaLUtfN5H269edaFEzcAh9o/OkaISBrEl7hYZEg\r\nFVp1+vYYJD43wZJDj3WHOq3RjBxj1YZd/WA2JAb2mnRTFj2N3vuIpflmZ1P6\r\nZFXErMjzhQp4cjzMkc2xL/UOS26/qhrc6pjJ/T6+zVHPo6RaQnJPMCORBq4R\r\nWpOrEWzqYxshOLYOTtU+TJVCC58M7QmAN7kIuyD+JQVeWz65eoPf6gzxKIyh\r\noEOe5LUXeHZokbm+wtQnwtQcOLDaHn1OU1ezQPdoYdmV6xPhatTcC/7+zsDU\r\nF4RHZGR7OrehbwT39wUXLq5C/kMnIDcQCK4jCpJq/ZprHsx4TNNiiVDtkXny\r\nCCRQScJ2HuTNRKWXhFHVzLzvDGejjloDmG8=\r\n=dZq0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/density":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"15.0.0-canary.86bde5c06.0","@material/touch-target":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.86bde5c06.0_1668640163759_0.009935201302470054","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/icon-button","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bb7751002.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a77470f4060373380b5df4f9bcd117f0205260","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bb7751002.0.tgz","fileCount":40,"integrity":"sha512-8wreiGh2F3sKnwtiOSg/tlIsGjlZ3HIcORFHb++4W8PKTw3yuVbE0eg3XVS2Yvn7YTLI93STdNyrEjKoJvmgpA==","signatures":[{"sig":"MEQCIEksVRFhHLvuSXyD7QN4NkG8TbddUVlorEFbLwzng/7gAiBCm8iBj1MeCQDwQZOONGjzcD08gIxaZu+1grERFgEvjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGzg/6ArVNIeh2yh7q2IP5Yu0XDCMlD6s749HvCShfkW14f3rjASCg\r\nAF3FTI1foH8mFIKD31iBzipUKkfIGMV+KBgKJVGuu4dUByhxpVrI1a9toAYd\r\ndgXz/enGKXWwjXTmt/EycunSPq6OZ1MOkGO4Thqfgi/TZys+EgJDro+7HSU7\r\nbeog3v9kV8SHdQKSjtjNp/OlCjK6JFXL2hgllYztlSOK/KTPuFNdwpTw5sQC\r\nPC5bSxVcvXtrGsdSTLcx8vemyOqb+p5UOnWkiHfUSSXn6O4LWcYxKmjtgqvt\r\ndZl6qSC4TJX+7jAVn79+UfBORLmHw0JpiGRPVz7b8VHp5QVjilWQV2z2f5H8\r\n7u7TxupDEQjWFh6k+A/TJSIbTR1lZdxvcgMMeKAEVgvrmMsGbfbIh87C6X8O\r\nrmtXgPzcG+bRH6wjAJd9pL9chYpc0kaEAvmaGzxrjKuPJKhCy4Pr1jAtooHz\r\nJSeXxUVHbgcVHW/GbKUbs89TzNYEnoyPILhWOrNdgoZBoQCC6H4GqgtOZyjG\r\nAT3GkUfmbtKQj6/t6Pj0rR4QqBMqNXfMXVeGzG/Q1qfZxQeqOvA1v7w+z+gs\r\nYj2qVIMaQnqL6AV3HHMWSUyxxzyl8QCFA0sDFq4TMr6pWksDUFfZ5YDvpB8m\r\nQ9C5YHjeofn7WjxRf1x15qPVoZU3HYgWkYc=\r\n=NVxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/density":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"15.0.0-canary.bb7751002.0","@material/touch-target":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bb7751002.0_1668643234536_0.07302634330363666","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/icon-button","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.63aca9af6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c036d618dbf113b3cb62a55a7aea4a0f9c4e5e4b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.63aca9af6.0.tgz","fileCount":40,"integrity":"sha512-o9YeZN3u5eK1X8Ga8e0WhNgUvlguaEzeWnHPn15pYAIIQUcV4x4TcAAnVlsaV16e4bsfwDD9OjmVLn+5QKkXhA==","signatures":[{"sig":"MEUCIEkz1rQkmH+TVCoVhwNIzTpRjf59T95MSJhmGDUe9WYKAiEA41KC6fFTf7n7GINPK8tXSW0jK7FmBbew10oVasillb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJWw//cjlQ1DJd0bysL6dhI/oKNJp6QNTV3Ptb13SSpj4b7kt5EYLa\r\nSK0K5R0XzT2XX2Xu4qvn7AM+uiJEea9nu8H/oE/bvmUVacA9F2ZTKH49U9n9\r\nNGWcurESkQvyT2FJopJLxUq8cSfXQuX4KGyQ3ck8MYjX237bRk8ji4w2LInV\r\ngP6XBSu3ssZKuZleIKz9hTjFC55IVQkFus4UzcnoYOHcA2iA5pe7NIpkumK0\r\nJUM+MgR6l3YiAW0drnpOslYaT6P37jf1AgRemGbdJLTeItCZVqlQCx67LI6/\r\nEfZZrnF5Q3oV/8GW4wMzACK9hg2JdXQBmMIniJlZomoVxhuPHnPAKmLhDKOl\r\nDx8LHgXJnY/0z11BtWCs2k+FoV6XaE7KxZfllze/CoNmbKcf9qqO2gQdZicm\r\nKfTY8g3DdPB3czbUD/wAMhQXX/e0Px5z3RHHVlCYEXt+2sXJJUd8Jlav27cc\r\n+c3oxZ8A/U2tDnJKKFYuyYNIQ6/MHmRwcU3PYIKVpUnkkgy8bhNwAkMxDaFF\r\nVh+jdIgTZI8NrMFHL5kKYij8vZBZQioN6Aw7X+mVk9JsZnQJHH0xMlaM9g9/\r\noeaHlt4CJiGKIk6XjT6U/kZLUQlF2Zk9w+PlLXQWROw44nh51OyfklIUkJWI\r\nBSdzcarBg9sYRpCyzNgTKbGxbk0FJ6t8e68=\r\n=CRCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/density":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"15.0.0-canary.63aca9af6.0","@material/touch-target":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.63aca9af6.0_1668711693829_0.10335518743228089","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/icon-button","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.56482dc2e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4751966260c331aed190b64ce053b31ba733731c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.56482dc2e.0.tgz","fileCount":40,"integrity":"sha512-o3GNgkA5bHLMD2HIVBi/XuvVO+pBiZi0poXBb/HMTzZXNkx7rakmdqjcYoDNvU7tEuQvnDQA9nvUgwEa+YhURg==","signatures":[{"sig":"MEYCIQCqU1DgpppPlVZC8qEzBmrj5RH/GLBlkluETyOO25dv+AIhAKZxFqD8f/a9KhM4tNuGNtL/bHhYI5QzABNekOpXk3y/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHyg/+KcXVBxF5BuGGioa6jq0bqreIsn3/gJcUrou4JGyEpiOG+Y06\r\ny/WsgVPa3+4NSb19QOkFiohNdPDKbyQ8AkO/5PmsZtZS9cuHF2CkHPi/E5Ea\r\n1LNj36wKV18eONvkH12at27FQAIZQIrN3gOnwCemDX6ImSxpG2r/CVmD/VUR\r\nfPPHY3Fd1ZF+ZzdY5XmeauTT5emiYNPtTdaXzvoZC0sLjMw+ql4/oOIVCBMn\r\nwGfWmeGyqLqJ+WBSUly8K8sEOhOWUtUFtQJnbgpnHTTpiTXCBhLkg33JIPfw\r\n15JKGPbpVrUO6EP7gLynq5d++7y8kg5kQP6I8KNDn2MPzMbjx5lb4HtGWVUa\r\nRwdmChBthehrgG373+rNe9ZYSBAvZu7i47pPoP25uj5960pSrOuDoxVkFJ3N\r\nVKAsgXPzED908spiQPCQP5ROzTO4lDhmNBT93zy0phqIQl4o/XmPqts4TlNh\r\nWGfg47Ucf7FyCMHuzepXH8LLGLooP7gaVQHDx4uZWthlj9q65UZGwA0GKa/Z\r\nczWhonwsxZI8y7af50gM9A495Ihc2J3WnNPo0tDK/eJIrE/f3S6k6RqClBn1\r\ngCE6cm+TLIubowCXvsU5VO8K3JSrt4Okj9F5kZvm+7DfKwLRc2VX5ZpTrqrc\r\nMmaY/EA0M/bvTXMHRe+QMddUTub74nO9768=\r\n=6MqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/density":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"15.0.0-canary.56482dc2e.0","@material/touch-target":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.56482dc2e.0_1668722131250_0.9285595618132432","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/icon-button","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.953e689f3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d4886a8055bd45c5b8f7b7d9d0f6aa944414159","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.953e689f3.0.tgz","fileCount":40,"integrity":"sha512-2vPvT583TW6bcP27pGad7lWEDbyf66ZawRg4d4P8a+7bydLh/Wo6tUtilt32frLu9yMlZUb8rIrs2p8xWOHc3A==","signatures":[{"sig":"MEQCIGMmXEydUePVcQG1Vx3BYk0R9twEaN+iKKFh4DaGjJ59AiAH5K7knLMTRg+ZkwalM+STNSy+unEDAuLY8HRkvDywjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrAVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT0A/9F6KFbrtwnw0wMELNrT4BD0S8ee/gZ1AX6Tf5qFE0Q2K34kr2\r\nqJlkQ5XALrR0qarJCZ7yeAPLiUQBOEXClFOtqqWaV8mPcG4C73iGAujd3zMS\r\nI7ZIFItuE4it35EjqV82YCjI4VkPSmMzwqT6O4ztEUSnGnueZukNmF7st/OG\r\nt/BXhd+QLi4Nlc+04IwNeULnTmgADCUUWTafZjElifRte5YQDKJdCf5Hgodb\r\nyhci7Ux80i9KTqyJMqWg300Rgbo4nDyUFDHcdSAjTisecJNGARk7ACXSS7Hc\r\ns25H/3wgApHWjQbR2DGvvzoPCmrzutgbaWOmCU/6YJFubIr4lx7VwBIPuyyL\r\ndCXMoTkDGnJ6I3CilqqbDnrJGQEVJlEyJ6Va7WqPZu5ZDSICtZ5bGf/vsVMR\r\nNnICRmksNeSaddXJAGXtYQw+n3ZMmc8yuC/30h8hNehRBi8j7s7/PDPy/vMa\r\n0/1FA755Sg3YS8kQBm/prboRvTF1uid8Mzoh36v9Ze9oScVRLvR7vSoJ4puC\r\nIu6vexzfgv/YuByfGH32iwGwMYQFsaPLYTPVjLAwD1zWOpk+NpABpV6Ai0CK\r\npBMk6cYJW+t4kzYTcY2KzIFvs6T4i4Y9MNL+j8WjMECCBOKsCkV9LE6eGevS\r\nwc311M4WSsSYgXJMJy2CI8VM/qMZTgIFSbI=\r\n=2fdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/density":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"15.0.0-canary.953e689f3.0","@material/touch-target":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.953e689f3.0_1668722709683_0.7292595507398434","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/icon-button","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b5606a793.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74b4deba7adb38345f971693b13b433a167505a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b5606a793.0.tgz","fileCount":40,"integrity":"sha512-TVIHKU8Z9xApA3vzsZmP0aeac0jL0r1VNEbO1pStBL9slLYYwWftPo7HztEMiGvG2pnW5XtPIM6K/kKo9dV2AA==","signatures":[{"sig":"MEUCIHcwI1babgHEXOvqvExeblSkF23eyryIkj/hc/rKSyBcAiEAnFcrk9x7z3+go5qi/VaSVdK/ERT2i+fS7bAYDFkse/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozyg//dqKXxr3CSejWrFA6LtvMkpG9XCQ8iN+G1bL5l7WZ52PvNnUF\r\nUZrFhvNLHjdb5s+AjumJN7mTV3PZ/clGUDXi/LTNwKl3RRU/kTwudkDSnH7V\r\nv7+ydOKrOvMLjTYx+J4xYwxoG3MyCACWI+aL1YHFv/kevMiF0F3Nz2tO08IK\r\nPBmDbBEPDF3yoKmO82Hlg+OVAP7s6IVmnnso5+xsiq3KDUDcq30ncbjXvDsS\r\nPWo0AsFUYe4VqG63h53jdtAv+/3yVqhbegIpRUW9JiOd3nQW2QbG6vDYGKdl\r\nU/JztolVdnmBYLb65ks68feBRjuUAM5JYY2GGNrLcKiGbA1TI/n71AnRLjQv\r\n9bkADhPlUt0UosUDV8T0tZL4lPeDCdpu+pDh4b40c6JaA1b9nWHS8oPVVhlD\r\nOgo66J5cPjHPyqakCTBm/3383fflHNcntRYI7JHUYZj+w6EszdlLI+RflTV1\r\niESKPgWgVGudVNtpKU7jzPh0wfYzDcMNdKZ+7PWwBWWhKX3oSbfWfbibEHmG\r\n3fsKYAMjQM6kv6mP3tSfWjAVvHFnVDOlqWJyEPmhjqYFdzLLt5GkAMOG2+n5\r\n23wtlOzYfgWvarH82ZisGE8UA+CjYi2HZlZ0/Tn4PnzNtINWUpF97YjMdOKo\r\nJiwKaDfIfdv7FZ3x/4iytlRzkDmzCdnYw7g=\r\n=AbYr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/density":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"15.0.0-canary.b5606a793.0","@material/touch-target":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b5606a793.0_1668766897119_0.6171644224136925","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/icon-button","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8c5675942.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"419f6f0cc3ea8cd5430d7025edc79f49d814c294","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8c5675942.0.tgz","fileCount":40,"integrity":"sha512-7iusfu8SVtg65PpldA2EG3rTiZP9x8/mMvrr4+toM0a1sgEAJqIx7QQJxAmnkbd9j2caJrOTbyHj4GzkLaX23Q==","signatures":[{"sig":"MEUCIFzXP8srt9z2q7lDIdLhJzV2/+hGtQFbnKuo8kxV80FfAiEA/ny6SJABrdM1dbZNWq+OjzSgTA6LCLzFeoVLX8Zi4BY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEFQ/8CctMJ3sTkk+xc1W3yBZ41v7TY9UtvKodg9mrXivwfsBmNDOA\r\nWr58IEBhk09P/uSQdnXRmTizQSWOHd1y8SvOWZSGOLMOC2K/G4riUR68TyRz\r\ngu7aOk6zIjsgRE5hx+/v16hEadMnClSgHyKk7RwpUjrN0m7g9bwUZWSrN5it\r\nQYVbP0GxkMrHZqvhGj+nWaV9mUERMsgwdypNCKdApBJhfhcpCgrGQsRIdCJo\r\nBJYa+IeQW3e5wVqCFe8Q6HphX2juf/vli6m1Vf6kno51fE9ji3Ua1jqW5jfk\r\ngT8JdVbbrqHK4BvxGqbF7W1hpTV0ZzAt+SY+2d3a4QGbBo9Xxn/wePy/2MtZ\r\n4xNu3iWFNJcIHbMzTJuaK99Ulww2OuXL/bpEPRNwam6PxuNmofdwWhjUyUID\r\npFZTNkvNPXyPbOUD648kMVFfKubVgU1uuX+iqbz3T21yeKhDUWzvf5QgYrN1\r\nfLVGzdKduLknJPLHJSPNsxGbRCw4oropeJsGjCyaYdPbD/yN7IJyE1Ug0rBb\r\nl0AE0stZgTPYHAdpMkD9lPwF5BQnCcz4V3AyunKJX/CLF2HJwaLYzs1wKNGZ\r\nENHw9ewGNIZuAx4X/nufu1bi0m2L0R4OEL19/2yQS/jM984Eefw4AHbaCFRN\r\no9mCB5Jw1lq4AFr3qzwEGzUroRngajQ2kOQ=\r\n=iSxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/density":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"15.0.0-canary.8c5675942.0","@material/touch-target":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8c5675942.0_1668784606874_0.27973577751259815","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/icon-button","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.697fbdebd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5901c85d4c49c4b44b0e260934ca4338254063e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.697fbdebd.0.tgz","fileCount":40,"integrity":"sha512-4ZgOsRmrObs3mR4nMSw3J/OcojqPfELwOJ7XiZHk8zfvrmyI5B9xKKCSJgQz/jyU9c8xOEFRPBj2COmpEO3OEw==","signatures":[{"sig":"MEUCIEvk32tbIaSGCWeMykTOKpJYh6IX12WfDwlW45VgSp2GAiEAmWMJblReZT4N6yAkdlrvjGIHLO1bEgjs8yofym27VmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6nhAAn2INojzSnD/zR6UKRjKro4rOh3ZhZUwSqFsvqRVqrbEoCnTN\r\nycrVhqGvnmDM9b31JJ/+bU30L43SCgFP/sgjmIeZQlClhmzAloNH4rqb69Na\r\nM3cGI2Ody1yys44lILYgza4tKzYLLLE4+CO5aPuHC8TaZFYBrzaPZjnmPCv5\r\nUOysC0IoxuN2xk0ohpYY3RQetL2M/qu540xLm8u6lR7lOBZ4LMJjcg5s0ibO\r\nRB2r77/nbzOj+1esRIWC2P6fchJta/D08L7d6NB2VAxgRES5HKQMl/R2c05e\r\nH0A00OvPERbwWVRH6viHQHxlbyf0poFkha3Rou9RPOvPoew3fOd3Xxgefqrl\r\nXfZMhlBRzCFFB1kdYERr6F755sHSX7/HBbaCfx3MGth2mKVW1opqhnNpr++V\r\nHmhuPjINZ3l2/JYYnEunkOeo2IARrLzrIIiJVk7vJauxlxk3zwiDuzqeNgJL\r\n51VGFuo8Wr1pIJ8EpjHXPpYXzht3ENrsvcDAlvMcNAjpicT41Z6XSz1KaEcp\r\nUK7G49PD8STbPlON1YwlfSzvAGrnlG57vGR2hPxQn8BNHTWqSiGIY6d4uPh8\r\nvRN8vl551itIgt06MBv5mgAhIw3GsDwgYQn3JD7RfiikfXKEvNUnko9k9JnS\r\nbZCeX96iwZZDVAr9qRKD+CyYUypju8lIxlM=\r\n=U7X+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/density":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"15.0.0-canary.697fbdebd.0","@material/touch-target":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.697fbdebd.0_1668790877311_0.5805670269904188","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/icon-button","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d58410453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e555a379c12aee716922c9ddc183141f2fbba476","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d58410453.0.tgz","fileCount":40,"integrity":"sha512-DvWiyaQRqwBY55/XMmr3Jct0J+BVl7qIsryffr+Fj1GKFLYSLK2qcCZSrSVKB9MsoWROwS3A24sXusS8V3C6zA==","signatures":[{"sig":"MEUCIC7ojVzQpB1CkHkNCKeMAwypR8jf7zI9W1QiD+o6kTV2AiEAhNgTdypMQu+KwgGb+hPnQzbkgxG9Rj241SmSXpqhJ2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpI5g//dSjD7UP4EegMhtppa+WoxR6WZQpZg82jtFPvT1grDc5F6fKR\r\nK4CY2DC3QoeFP/drYPZzxOEvp5KkddlKmEC/4h58OMxQNpkNPwI9GgEiBgnX\r\nWfBhUfdzahS4I8vnV5249ZSWbh7XgNkc9K0HDD5P55hOiyvxpd4wlPQeUhBj\r\nQO1JqOOE7e7mJXf5Xd5DLyKevzM/WNics5MEhf7zc67jIBn5xqm1/a0oMu5D\r\nXyQhZoO/73ro/qIS5L4FOYImtQza+M9LT38pjqZV8EmSd8DYczT+0kAQXOjG\r\nCDYvOjLh7NabdsNnorISuZ6nH071BlIKQqHlShfIZZ0xyUGpCXGeF1hPvc9K\r\n2CkIGFxp33MTy5qzBeNRvC+QaLNXsihPYhruxl4+/QhdksFRLI2MtLupoOhP\r\nLwFMVzCfx9IHPPrA0O15hLvEQTUKJywQmyS/Lci1EM7Ou9zosoN7mkY0j5y4\r\ngsf5qw4qyneFiEaSC/ntw3luok4NsJsOr7URfRwt3+Ug/xaBGWMk10pw7WUu\r\nFsFYsY/5lvWmscr9awEx53/+P/x36sEQ+QdP9jp/oAzb+Cz/bPyFE7LNiCSH\r\n56YxOaZB8OsaRz4XSUy9gVeytfsDQrZvnqchGL6m8W1qFSb7Z8N8rhJ5rHNr\r\ns7JmqrzGi0iTiCayJxiLzzYffcUbj2XfEEI=\r\n=AYED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/density":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/focus-ring":"15.0.0-canary.d58410453.0","@material/touch-target":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d58410453.0_1668799536314_0.21923516997188108","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/icon-button","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7971d6ad5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773ec7e504a1532d8b9c6d7500e9fe2c0b2f8d08","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7971d6ad5.0.tgz","fileCount":40,"integrity":"sha512-BT+tHdRviY1o/yBgtX5NxfS7LfQtQSf7DiZfgP9eExSU5fDA6AfqJfZHyJdLmJCtFZbzlxJ0PBmt44NSlI2/DA==","signatures":[{"sig":"MEUCIQD6zwUQ0gIKmkJLRYQ5HX3lQzo2od36tS36pTPHE3DwMAIgD0MV6ecwutsr1Q2LKQthNG8isU0h4uU7untOfkkLb48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJe1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZCQ/9HkM2X6Uo/J6LT2xXCpwm+3nkbTSgUqtjss1hEMso1tUHd1cy\r\no1P6vDxYG6JQ+k4y9W0HduLeihKbM0VuQH7Y8yE3y7+RgymWvUzNzG7H810g\r\nHO7aiE8+Mk4vEttTaekJWXVChnk8FDfCAamzTLCsAda/5pTf5qDfeGTRvnT1\r\nrb1dDg+xNSzlXWzoFIhiCfViUoscSiOGGyJeoYECsz5lHIrHDl2mVbM1XBM5\r\nmOwd/BCew8Z9teypQZxJU5XlBKqFhOzwfqlGZ5FYaLz8U602nlcpMhNLTruo\r\nk+dAj7/CiJ37GJ7Y4uS6JKBCm+QB546u9GolFPbvJ0KZypcr/iHcI+uwjp8/\r\nQ9R+b67CRe3MBjkykLJxRqmhob2z+wifVxofqOzO9nxob6CiHpajJ9JjjQ5I\r\ncZRqLewDMkOn8wLBZtFrxwX8WmbcIVoIjPG6JHaoNtUb2QZTpw9TA0KuRP/n\r\ndQvk++tQaGYF+ELiZDx7ucAngrxJzjlhEOHusipiRcdkZP99xr28WoWrDZoP\r\nq38zquOIwBSNicWsB6XadkCxOy+7WRrnKC/E9E0P9G/A5cN21GNubmqd19b9\r\nWj0lg6PZyRb0T/6jY2o69/xFeqmOQpj8HUk7ZSLW576ok37O7nRI/jniELTG\r\nJWchutA2ZsAmv81n8+90mhph8w+rttZ7ePU=\r\n=I/5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/density":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7971d6ad5.0_1668847541420_0.7969207502025977","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/icon-button","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a0ae73b0e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99efbb43123c7296a92dd6a8ae68b49a7e2c8560","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":40,"integrity":"sha512-geDZWkURLVHtHzE4e1+qIWtaSbQ4Zww+SB8y0wysm0VBPNqJLoOxIyT5EPk6YzmfVqqEQP5FERk3hp1hlqRglg==","signatures":[{"sig":"MEUCICdjjV4Gj4UPTuQeZFpqboA5VhwfegwJFNfmHInR9NYHAiEAnGdBwwiNbk8F+y88pIsEA+ZVvGpvc1UWuN+LUGVXpW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpmxw/+Iuo0Cy2/vNVSfpuTy0UO7ACqF9DB5b6esZ8m/uvKAZh3cT2L\r\n7JeqetHR84tiAPII1a3nCB8dg6nglvlE/kQ2H8DAWrUyO8P9UJG1SpE42q8T\r\nqJsb7+cnrjeUUv/tqds9KykGYRgg/jS0BDbyuwMD0fss5umMhzMUbYUQmdQI\r\nFaWXJYplyK9RBx2yOm+mXHC91Ct6LLPh0pUzm0SxrgOR82YfbE2uRfC0Pm0G\r\nh3C9IN6rcWgBMdAQNsTM0R6EVZqjTGYQqqyLNq0MKlhNuwGJH4OgtBgqokKe\r\nBe0R1JuLrnXgeGRcycilEH+4MZ8Lv3UnSLQwgxB5heWamOhXMtyntaXWNeMh\r\nGZjhkqIWFvJYo/h5fUHdMsy/F/GMk1LUSDyfoeaBE5ahrvlspJgC7tdMKSlb\r\n2llgLPRI/oDzJw8MpnNRjPKKrrx5wR7nNuXpo7ENV2yVAyHL3lkb03WJgQ3K\r\nf6+QA46ua4Mg9NbMEKzidXEEPPsF0+ePsLffLaF5flBuGRhfhHPrr/Rk6rYe\r\no/zCYxwRnw4jqSiqVD/6x7Qt2r3Hu0ZqPh0zFKWNLE8/uCFh8cVhZm/5DRQS\r\naeed+JATQF4ZlG0U8KuA6L47lKqTtYn5FFTnnR0OmBrNSTgpLU70RrEzWlWS\r\nzaal6Gp+UJJPVDtxlD0CYOPQ5Cu9ScLrnK8=\r\n=TaQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/density":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a0ae73b0e.0_1669028064251_0.5407106495488869","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/icon-button","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.96f472604.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc3f13feb097658ba5e2008dc6af01a59e7d9654","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.96f472604.0.tgz","fileCount":40,"integrity":"sha512-3jV60LYOBKS05WfdYmC+BAVxOvO4V/XCVfv3n9iV4QPBvIu/PMhxkdEkU/IiDypEWfZZu7bvq9Zk9D+B9N1n3w==","signatures":[{"sig":"MEUCICAKqzbqGjTuerivOjo7tuNqHWPFZBH4KUZGhItw2bqfAiEAjaeysruSo2zxPtf6Ic8NWs+hxj+XhtPLnAEl9REptyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3S7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFpRAAie3PN+eRCt2Q92x1/sRc6dISHYKhf8S5CfuR+INfVa6Vl9/n\r\n8DyvenMARpPafRsnlEqO3WGQVU2ag7vj1V6pFx8FBA5mS86eQhZmwocfaXLy\r\n+7ctotqCs0URwoZVJ+J1AmK5qvDfKvoZOLrb6cvBWAYM8juT+001ZBuyGPSU\r\nUyrEiU3H/IgcoPc6Qn29xsSJ1aM/cIi7Rp3lllo/BnX11eXA+aqVLNVn3ixF\r\nvD0tg1bWENSlMkSu4dhM5qVjQbfhgmfK7aYs7+2h+e+WbXKNKzZ+yn+VFcXr\r\ngPVBpCYgQ1TSQ0qt9dS9Lmtt6DJaGHDjSLUkWfCel7VFhYIzLK6BSYySh0SN\r\npQTFdnAKXvWuE/jdoEI7z0hfi6kK0jexurEtjNvZ0UDILJaQahVBFsbejgXl\r\ndh5HDtGIqp9FazKvWQQed7jCtRnf1T+bYTbVQp1tJM5emsBNHS6v2HRIbzxx\r\nxJImeZDJwT8injaGIsvo3BAuwiGkclHXjwO5i33v+lUC47A/p6Ii3+FuDITi\r\n7HCp5dC6ds8zaSEe58pcgVk51RhyVAKv66yPiwjvPuj5cKRI1erg5JLCfwvG\r\n3VB748R3pbd21eQ86KULW7oEoTI5zAqdV6E/kvNdcrCljlwrVx45egqtWGtA\r\nK5qWF9uGW3zB9HMmwhZBjvo9uWKgr//2gT8=\r\n=zBbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/density":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/focus-ring":"15.0.0-canary.96f472604.0","@material/touch-target":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.96f472604.0_1669035195231_0.11150022355891998","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/icon-button","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.18b8f31e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35412fb59a43e2d63d49b1a8293e3ca7da95928f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.18b8f31e1.0.tgz","fileCount":40,"integrity":"sha512-xyeKPKGnpEoRvJB3VDN2dPS1dL4zji+tPHqNEE2FLoCTw2jczuYRKRfDP2mn9BZufIL037lrO/llQ9qYynh5gg==","signatures":[{"sig":"MEUCIGi2xXYLb8lylGtPgzHvCoi1tH4ZJ9YQYQ5u/wBo4O5BAiEAyWjfIWuMdKO7odWz39dShC44sS1mK2njmxAjtorwSlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0vg//Zn2W2ooHbY6UtSv+xL4Jw045+uFwpfjMRdLSe87sDBlQcGBA\r\n3lx+zIzbCaHuOt1HbbeeX2EqBNfVtjMOWyJ0jbNthePtvAvenq1bCOsMqU8T\r\nwGsAoiivqRIikXhMIl3lCJoX3IdN+XK+xkE36/lVtyvU0K+pjF1+BcZqB4YM\r\nYWLt2vOb+qFkxFVs9e4YpmzMF5qlPkaPgMxVIBsyXmEYlvZ+T15upNJaawT3\r\noEf1u0de0LtxtCzhJ4WfKxrm0XgFFtvVCYHYAwMwBolW/jNbdcHRoY+m/+sk\r\naGBOCQJbeS525PrnPnMLuQ2Llvd9j7If7FZUcFRUrkXIuBF+gGnILgnrjFG+\r\nsakODv1d1WWQ9SeSgvB44Y/JSseB4vd2H655xiNz7lKhnUEQulSQFn4bCbeM\r\nvb3jFdIJkDyfuP2wo98m1Q31vDM35Y+cmrXwyTKe3lU2lMh8UX9UpU+c+qXc\r\nreaLbrpLiIUrl+9eM4PnjMLvcL1dSZIw6ywEAxoTxz0QDGOyTlT6KJjbPIcQ\r\nSRIDMZdSNgo1/axia4Ly2JeEaEIF1leYhfhP7/lMITyysgHUEndotsdCEayX\r\nDDJOWog5cD6dHiJbw4XiaC1uapSipG+9NI5a/hYrqDfAolxCWhgt8gPIpXAG\r\nvZlbNGWg6vtkQRNjidh/bjWdv4sGeFtcs7g=\r\n=r9o/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/density":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.18b8f31e1.0_1669046575679_0.23355760688486837","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/icon-button","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.912f33ce4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84dfa23118e5f819699445edc12df8c4567b725c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.912f33ce4.0.tgz","fileCount":40,"integrity":"sha512-weZW3zIsiNnz+QB4TeiF0eKKyCN41ler2wpRZQGSvWNrmtqKvr1lUYkloRcxS/slZr5UJfL7aUxAojXXjTfYNQ==","signatures":[{"sig":"MEYCIQCvtAD4wGtSqYr4WHbWddfR4yrKHIpzmLxxgpeZMog8dQIhAMUHCTOPGLpCpFjR2F6vYUuX08oRHqCuKyNFryFoQQdx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvmw/+KrhiwYM6ASXNUZmWeUCKsne9tJuOD4s3ColVvrD+PeVrmuXB\r\ndwHl/GXeXLpaogCbsCO7oTx3xd1IGbIpmE5FGYGoSEv1o8LIDw3oh8Ol9zt9\r\njC9lIGpLg+/MkxHyhai/Al81OOxrEt3YXyzO/iumL2cWWn7+Y6Jbaqfk+7og\r\nHylAwyeEOP/TrWkGiADfW7W6NXerDneOGzsz8NirHgCc/iP2MpV0KC0/rWsW\r\niRtAXPZJUTQ9QK3xZGT1KJatqrob5UUaNYyObHoOsmT+B4f39L4XtfErK/3Z\r\n3JDYrPQUqSifDwg6oQthtGF5mQODj/cbY1GNU7oCwH1ZOs+NiiYXQMsg3Z+a\r\n0+y0eHxodwnmGWUUHcTBYQnssKizRmJExaJEkdq28/v7vN9WhvJs7Xt7+QRf\r\nzg16/uvCzsmUfaUBVTSTHSlXKmW6myeIlcUA0umPBMYRjy0iFACQJ5gAQrv1\r\nfx70wvwxKWTVEF8RFo4zftCY/XnVtnZ13Zzc+JgAN/1mj6KMUJ0DMP80W5kG\r\nGZxhEO4F+sAUQ3lRpMJZWd51hoe5kyG+Ud5VK5wScmXW6hebsLevdIB9n/wi\r\n3j2qQXDA8MfVUG4j4amN686B2I/p2OtW0u4wo5FAmFOIVeSJEw93BzKl2A1H\r\nF/TD3xMJdVwurudQk90qtzEMte6cgVR8soU=\r\n=Lg3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/density":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"15.0.0-canary.912f33ce4.0","@material/touch-target":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.912f33ce4.0_1669053272136_0.13998299973608086","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/icon-button","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1e1b1c369.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddfbea728140bb29ed37f59242fce34e01359702","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1e1b1c369.0.tgz","fileCount":40,"integrity":"sha512-luZHxgSxrIv4OXJdbR/9oRygcHCJanb8sicD04qEVRy/RtZOyo07AhBinVfFkb4zsipTNkLoYG5vnX3Z8owGUw==","signatures":[{"sig":"MEUCIQDV9YzUovx08C5rKpfbqgzrMD3QtZ8Wis3bQioeshAZ4QIgREAufrgrXqyP7Sj96wE/Gk4FX/V+u6yYq3azCmDeAb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm33ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHLQ//bK7WZOr/kdeqrICDSxBNaicX2I6PI0KRlQuAwsDZzt4gAc/w\r\n7INyrfwpM2Cfsh2Ae5J35VT+1JLkqVkWGsXshWJLWbYhi7DTaCbxIeKNtvIi\r\nOw0mFT2g2AHvlL6GnUSMbuuHnU1etQZtX2seHcSJMmfIgZDIF7zmEILz/hcI\r\nBKsHDnk+KgQIB2WgAWtBye7H9zhggu+yPXBmF0Hskbm9TvFTE85zHmNAqD3s\r\nxSjORRRENZxRUGzW0FNiMAOZDqge7pUs8+suvfJyUqT8ldhPYYC/xfeqNu5E\r\nxsPG3SKdhZN819VhZem+yvhcSd8oQKvFU7IMBEQkKVpI7D9ntSoJ3AWmZdyb\r\nLQYUtqsKTMj1Gn64W1VQT/miYZGxM8HQ8zN38WjHqIU8jtZYg98f9KiONckm\r\n+bd+qPZQRf1mpUb6Brl7d11z/zXTimJWY4BT2hL+uDWniI7rOP2un9gnyefp\r\nWBIPBejXuFzgDwaxcwCtOun0/YzkpYuQ64gyvyinQ/pYM80eglaVUfhJBmDW\r\nhMrgx6GycvcpVwBG+B/B8sWE4CRhv2cOXLeIOzFzIvigZGW1lsZIMDZENGTg\r\nTGpWtZhvdtAWsXISMNi/KQ9qaUgS1xUwVMf8gfY4sifmtZg0nRCe6SEbpnBt\r\ndWhcxkiu8S+0i8kQ/+nJuZ9fctRuUrJt1ns=\r\n=XFHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/density":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1e1b1c369.0_1669230071243_0.26105345304560656","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/icon-button","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a2ec49244.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e0f06e0ca14ac42de5ba6e1ea59e8eac9aa36b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a2ec49244.0.tgz","fileCount":40,"integrity":"sha512-gAgOQjjOVEM1BMY4JM5grBEpnYAFLdX1mVWDZePKxha+i2jEKf88RBb7sS/A3jBO9g0AxCWMhznyMhtNSMpZzg==","signatures":[{"sig":"MEQCIDgkxLuIY60CzIjqYZj4k9emXYQgLxL0gi4NG87yCbyFAiBsrAjobTldMthTwrMv/TEdpGNZYR1D4NleWuM0sA7CDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopFg//byRfK/fb0iSXZg6SV5azSxp544bEn7Sqo1zXHre6ohjmvJjO\r\nog3Bb5kVU+I+5+tEVzRubV82n+CuMV9A/N+wdP/XNeK5oc92+ilpAXqJcE7e\r\njgPIoG6YMD8LfJ1tPQCw1Pr39RG+DvWVcaGobFZSYae9Mogar5QwsoMXYj/p\r\nSvRiArNf+dDc91OEsis56tv8HWM0W5+iFhJWrUN/0xKCgUBQgGJiXFOLMYhY\r\n1seFLObsEcbrM3lstQFbsiJfa4Rj0IOAi4/lAbvKL9u6SO1aJ54SZ5b8K6Tn\r\nSkLzYOqN48bMDOMKjZYqcVbmVQE4oL2HfCKlI9SDywr/ZykOAxOO5hQw8jYC\r\nTqheGtlpjTUZJdZBga9NWqIsQxur2dK4Zn/mTGszj+ZqW3fJt3oaVoWO0PgL\r\nN+reu4vxCpsEqAiG8++R/8q1oflSZxWWPnYJiZ9quLeYUaTxNd3DKPsp9+V3\r\nvCI2xYkcbhpbnR4fwheV6X5HdTPbzYwbm3KjNx6fagJDOW8W1+sid1j60fcb\r\n4ebiHmub7OzVUqHfbdHbxNWpoeI2qTk/3OzRz1Ftfgx08tpucQx0fJo6dny1\r\nkmSk34G3AvYoFJoiM2VHxi7ZUlgr0ydwLC6d1RP4EQQQCI77IiKCi3x598Pt\r\n6Ozbxk8fa5TdfVOP5omb1Abn5Vb8pCIbXuQ=\r\n=TXAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/density":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"15.0.0-canary.a2ec49244.0","@material/touch-target":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a2ec49244.0_1669231887575_0.023814591078116232","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/icon-button","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a7458ba0b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01a094b7a3d500ff77d88c87db231100cc1fdfda","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a7458ba0b.0.tgz","fileCount":40,"integrity":"sha512-Up2xNU6kXQyvY2vrCmgG3rYclgEjZKzOQhk+by1QyEi/qrcbXHUck3txcy5WIR5UjMIPmQp2wygcRndforE2Jw==","signatures":[{"sig":"MEYCIQCgwTSv6SC374k9Kdyly5O6OklSb1AKGVP7w81gQo73CQIhAPPuVh1ge20GWY6XUuP9WgXwGh3lV6p/7SMfUetmtvXB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL7xAAlE15mZ7onB02/VVIj4AgGXsuB8UfjdBYXFhMC6tbEQ4AfG6T\r\nXBNqWUEjVjM15ukx1Zv5Ox02TBzjk5ITvhN0IYKelUu6KLImcgSRZB2OG7WC\r\naat1foIpCtC0Fgm/st05MoO1gd27SaG5TzB1vAAUgptJu1rru7/KwSTKpOb+\r\ndkhCIwBMRd9fajZB6WTxnWx4aMfSdjgZ1wLOo1b+6u8tWNOeLqY+MObEbnf4\r\nzOh7m5wneq1pntxls2zhH+jAu2jKay+rgMuGkJBtZQFAPCEEtEB8P/SHc2lM\r\n/HvgVMds/nXeV+7ZwFPouwscKa1UKSz9TpcbOIeZj6bD8kltuGZ3eIOCtEBN\r\ntg9nWrH+hlTIQzooaMxT7sF+sW5JSnVRB5S9XR9OmyKh1iYhmLaOZbw9zesa\r\n8srAZnax4GJ4w6R8lZ+jk6si8S2RKXVr4VWidGfswDvt4UfWIjNnF3QtBn7d\r\nY6fTKu4YcWNhJvnS20B5+j3kmdIrz9HjYIhEN38rG6P02u2Xy1YjGOyRpx1h\r\nMXIyBKfLZOuqKn9gpw+qHDW6JxGpXXPVbKUlg1QeHK8M80MYaPMK0CH+lNPW\r\nWpTOa4Vt+w9J6X8sgUTe6Rhoj9nqXF/4AvPHz4EpMtcwp1QziiAIWlG3nDR5\r\nux3k3sSdcZA5RjyuS+3JbFJtJXW0Ac8YwI4=\r\n=R21h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/density":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a7458ba0b.0_1669234613649_0.04906319649360236","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/icon-button","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7c35e5036.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b88dedd2e6e6280b28abaa57e29f1990cffc72","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7c35e5036.0.tgz","fileCount":40,"integrity":"sha512-/CZzdD8j2fBOUrl/Hu09qMawNtbdHZysvcXv9gEVEufK+OWUauULu+zihJziLqi5d+gqP08hgHNrsiYo1bQByg==","signatures":[{"sig":"MEUCIECeBmS4xDKQhGce4yVXa077H7YaZnQ7cvtsOXMdaUmjAiEAiKDvXwOUBeZnyttY9hePbo8wI3POA0/XzdQzGMmzo3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplrA/+POgZJKX0P6ImZF6bHkQmcm9HUa3XzX+gnA51ELdBs9eglmJx\r\noVThfB9hdyYXMi5G6IXT9WWhZ9DoEZif/YP6xqfanWjTyb9H2H75yAa8c0DQ\r\neSyYZChAQ6rZO0FMP4Z2ZNhCXLAQoBZO4Nb0U9oIlAXcyJtZfDRyXhjyWcNo\r\nDVFqN98Ql+Wns+to1hFpXV5L4J5q2Isdmv8I4PQflAzV3z83VxvjVZXBWtzg\r\naOVWnPoBk9Omz4KvefqT8c2anDP1kKT4e+exT+lt/WxagJuo4JF6dcbBx8kM\r\nNrwvq8llCoklgGwp9AKKFKvrbHM8jnNFpUjKRQ/YCHbOBoen51nXCzD3zF8x\r\nUOFZJdn05twsJE9nbmfjFQ/qAjGt9OjFc8P/6ICg9v3UgaENkFn8maXduK6Z\r\n5G6l6snWo7xlquzRgeviqQBl41uL+QDD0eGO2QcdOVOKp6DhLuT7jngYahGv\r\nrlgcpVErwPUd0HGBL4nAS1CLrWud9ihKGTd7XsukyQZSPx1ciwKDmLczVMOu\r\nExE17vRib46MwF6ps3lMYorKeZC08nI3GsbEa2Q11RWHoHxHB3Y9drs/6TL0\r\nTd58gDBXqM5WOaEnC5XtNB1BKyO5AwPeSeV5PWoKBzvMfLcVZk5GhWFg46Vp\r\nbDpFs4AGenFyRWe/ajLjwDp5Co1NZi+8rE8=\r\n=kcDO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/density":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"15.0.0-canary.7c35e5036.0","@material/touch-target":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7c35e5036.0_1669279194233_0.5054675968838114","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/icon-button","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4356e05c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"086daddfae7bd05e396d272915a6c93c084ce3f3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4356e05c5.0.tgz","fileCount":40,"integrity":"sha512-ybsq3lse/W9hxLlByLyDXHz1gJ7GevTg2qGsfBDxpmgTTgfERTI2Hryvj8HUDJahKTUWNruEKeWFo0TB8mkTxA==","signatures":[{"sig":"MEUCIQDi8+BFMfqidr2iS1v4GQEXws0BfQkhIProVCzCD9A/QQIgeo8QZsk4uK9p5jEJszgiqieke9tkKFFWu2WfhbtEWTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb9BAAofXu/GmaeOCyj6lOg81jbwF9xJEKnYnp5leDvR3sA0pYvuLY\r\nizHYePNrEgn+TkwCzeaqSmq36XbAchuPtPQ/JGig39ZFfM5IcRE3a+IavbT+\r\ncbleGAmhBquORlZDhqvuCe82ZH6p7H2/yAKrc9Q8XpCfyNMK0q9lELB0Ku8n\r\nlErRJBCYGFSv3pdOHyFOhN9F8u43b/QFOy1lYSSmCdZAye2RAsS3gFzmwMLx\r\nMdU+XC35YO7ESYeD65TFaJe/YLnqbDehJ4KKt+IxZ6rBADhNq6Mo83Z6F31x\r\nykqWo7QQ3nsGVtH+b5TtxK46N9xJbE6o+FH+z6cXBVL/kfCyDu4kwenaRlN9\r\n0sWi1L6Pf/2W6H6jGSmJ3iWKKUrD3V0b789MH+ERjxW8bruLUNyrGZlf1tJg\r\nBgjvVFwjDgwqNIEoJy7w23sbBUX4IHL2jpXnkj8lGgcRfWkCsbiEn6qiXdEL\r\nNH122ickvF7yt/fDlCwoSa1U8NJR8SgtkH2UAQOj8ZynYyu+UEscslH7xSZd\r\nJLtrM8tlVRPDZrmXzL+vmY8jybzzD/xfNvQIsO3qTG2ylhPhsw1zX6UbFEvL\r\nSuFHANQSmrbe2SpirUBhjlILCyCa+7m1mP1BzU5dF/9KlU5u5BbL0dD62qqJ\r\nxAAcqcN6M+n/znnTzamtW2uPPGx+lkuL4eY=\r\n=5Bdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/density":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"15.0.0-canary.4356e05c5.0","@material/touch-target":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4356e05c5.0_1669283836318_0.45005834574936676","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/icon-button","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cb605f8af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc2038ff5a2a89842d72c31dc161d7afd3408afa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cb605f8af.0.tgz","fileCount":40,"integrity":"sha512-s5uOmHlVom0k86d3V3T/AFXm2AZlGs4aMDYBVodbcgOJVcBD7VACxjVpei2EQO734AatIs+v1p4jzuIuQX+Lew==","signatures":[{"sig":"MEYCIQCppcSgP1LXSSbBYSzZkK1AhmkuneU68wOBm9F1NxcgYwIhAPyAxTuvbc11b88pYranFUcnKBzeq/LIJ+pYplEDL0o5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl1g//VOqfoM/P0NkkHwCy5p5O5YeZ7/9G+ILK0eDQz3YRYOSkHwV8\r\nh8ld3GKyZ13l+p6IbU6ZOiicu6e/r6O2SeM9cBEowCxlP3yonWvklXCxNnCu\r\nmjPLepe2GZqzKCKzIH0Phzg0c/rieYqsi/+e4IL8z802gsprR/RclmDCvmxA\r\nrFSiS8PA8a1TpYBQHaCrJwnvrBjnGvXXissB6P0tXVKz+EpTzV/rAG1Y7/gz\r\nVtD3fpwDm73JsIaYcLO3QCIRAGA5lgGSoJNiGFOnc3ph/PaCf6km30WEa5QJ\r\nNj1jO9/Kz4qXTkqa3VMAYo2N+M+Msn2mRmUL7nvB4lUtJGnMzFyUKGHmdrBQ\r\nUN3fhc3UP8hZtKB0V6SFrwtnHuF7cQ9H1gjKPZEij3KlgsP0VbA5JdmIM+Er\r\nvWea7wtokLx1kwhTIpWla8TYR2xLfdmbKr0E1xRe2ClrUN4NLbAs1jvsJAqP\r\nNJ5cJN68tz3szGHGS4s/YV53LGcKdtM4kKizbWuTllsQAW/2uwtQ55iEV6Hp\r\nt2FONPOayR0PLenyLsrynnKMO6FaJ4RfgDdOAhKzxo5rj3p158FoabwhjnnD\r\n5lHtQ1JHjYqCILp54ww1v+XXb6YU0+lyT9tDxeB5ghuZY5WQYFOG2new3vrM\r\nlTDT5L9Drf9kAaSYaeXy0J4Xfyesu91nMtU=\r\n=ff4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/density":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"15.0.0-canary.cb605f8af.0","@material/touch-target":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cb605f8af.0_1669284978789_0.8369915626858251","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/icon-button","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.05fb07f9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bef9dbc49430132cee1d041506d8c8aa290776","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.05fb07f9f.0.tgz","fileCount":40,"integrity":"sha512-pEDU0Zr0+rMVjnm59aRrED/33RO+pYnaJes23gQLBKQjuBvuAOCo3I8dGc8TX7RgZaZnLmrCXG22lBnu6F6erg==","signatures":[{"sig":"MEYCIQDfnCjmcyUtG5d1qlHapOzLPVVjybmX3s7nGOAZnP0fYwIhALXJG/9YMyBVhUH/StN/EVCRqzVHMeMnDbJIMpG07ldO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfCA//bHQ+uKuFFBVG7d1w348nAZUHz8YSiIJI0o7AiT4nYfcfRTSW\r\nJWOlK5JGDedB+TsrAQv99oCwkWdtW4ihSW5y2Bjbq5Fq0BykQe+2FNVkLZJ+\r\ni4KU30JuQ58TBSKcpnPL/Ezo9QmKYrg2BV5CCFXOSl02iCNXtl+osnVpBqJQ\r\nZMfnQ2gHu/Lx+YHA2TxcyskT+7A2AF0AKlBz2WHFSmE3v8f+f/Eep4lv2kad\r\nU9e4qPnrBkbo62s3YaJ8aIUEL9cYWaoRqdlRc8TtIYtk3UlK0kmr2ORMGc4R\r\nRrs+C/ZqdK2Rgqv0rKiRYYgD9/wYV0vL+9whk2OQnu0XCF9/9qvt92Wm0hf9\r\nagd7iyWTtvhWLJvJTm2CWCoxbywa5Tl5ILI3/WztkUPbeie2eklIYM8LaeBz\r\nVmwNCeUfVqad0ZV1LLIgw7m5Mm1Xnsnv1D2mxIu06Jf+YtdHkrM47egdjhLO\r\n+3ae4ObBCG3MaWAEccImsEOalqLZz4LZcmYWzHp96yAuycfGxFMWCKm8g+S/\r\nRWfC1vUE8DT19vseJC322iTVFJfcVFSGAqAZ2vyfdmqMA8v1teGC6u7XOoEf\r\nG4LpbiFxmWDQg5Gpbm69HWsm1oayQqsgfwDCLttW2OLjoiQPTaeY6HI9216b\r\n2DpY6My+m2qlmucGpzxK9jFphg+TVKSKsMo=\r\n=Ails\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/density":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.05fb07f9f.0_1669310054729_0.5320137621167811","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/icon-button","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a911b386b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb08b41ceefea8d56dd1fe16828ac017c4d842e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a911b386b.0.tgz","fileCount":40,"integrity":"sha512-k+G7ac1GRV6SeR4Sri8HsXNmPbzcj768mLtiz/2dVrSQd7AKXsgCI3MRsChX74K/NXv47opm1Z/7QRAAcn4j/A==","signatures":[{"sig":"MEUCIElsiF6pUdzKAHU0S2n2O7Ai45BXw7QudB9KFC2o9iyJAiEA6n1Vn5Vcok2gvJI+d+RFh7e287CHsfsc9TLY0LufcYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOY2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt4xAAjRaONJuE0Dhq1VqjzoTISOJ+TxJtHaT47jEaLOcmETSCz/Nv\r\nMBu+wEUoaxrMpHrXdoe3yWJxq2ACsdi9U/oguef0+uuZt/eDO3Lm1iBhot5y\r\nH29W+uSvB0Do8gGe5d96jzhYxqMvuvf23uEEq/FJ0EKPurQ6sut2UpKGckR3\r\ngbwDHCSfMcfYoGg9k1ueIlJFM/FnMNINhV8JGm7kiBfG58XJKLbJcPMi5Yc1\r\nu+O/fISgXf+KSPC8MdZnSgYn1qjJmUykx3rNpLcPAqxJvP3NRt/r1PKCALKE\r\nqfw3GZIllRPl/m5gOXy8GrVV1p6WD9iERGHH/9zGaTDpYxYdqkcRsBfOVl8F\r\nv7G4iiMGK5orM/yFBWLZ7VgMNDgZdp5I0GvRDN4n9dZo+0Ad4FwtxNmilqqJ\r\nzQKPi3sUd8hC71CJWynlE2yMCDYGw0b0NdGPMgEyP1Z4wxjerS5x5pX18UXf\r\nq61w9RtRpeY64IkriwiGxrOBAJoXJ0LuwLfTA6/Yz80jCD4WTqysd/XimAIr\r\nrTwjrjTPUmP7RXf+Hh9MgqvX6vK1zL3KVzuII0j826PlvyxFKmNhvTuw+rc9\r\nSTOD4s51UiK6yML01TynOeMeq1QMz+M3slP5oi1FjrAbL6Nlb82BHLx5XM67\r\neON/KucxlMdoW7p/xzosdOzpme9zySrXDtE=\r\n=DiIV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/density":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"15.0.0-canary.a911b386b.0","@material/touch-target":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a911b386b.0_1669654070564_0.1142074444687955","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/icon-button","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2aa8050b4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1311aa4fd906ee2ce92ae3b7069b48bcd658e149","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2aa8050b4.0.tgz","fileCount":40,"integrity":"sha512-nl10w6v5nMjrOvqXpVVW2rorNJxFQvVltwIANaCVETQhMfB4Cymi0qSpah/Eyxsd7YbYkLSYnCZviQ94P99r+g==","signatures":[{"sig":"MEUCIFYn8feV7YmYljNHpQWE6kOyEFB2xV6sKcchG4FpRalaAiEAui35GXSxMhnXN5yEysua/fbExQ0ghoO/BrwbqF9APpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQgIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBPQ//R6TWqj2k5jfRyn4rdEpfbiSGooBDAHM/yAgVGb+K1q4R6x89\r\nzHn/55yk1b322hPQv+TmwGqci7XmtrCkL9hSCLhHHNMoLdSHAF9h9zs4C2AA\r\nvjv9N6lhfbJmA9TKrgLIvAcxUWLlaObEryisIHj3W4DXCGUBn3CUtE34CzW3\r\naXL0CKMwCCKLoZuiiT/jxg/O/c6nPvwWA1ltNef82kHQvFeqnrgMDvuwiITF\r\nrXSgynI9RcjesJ06Pdo/9TssnL8mR00nZJcQ9R57KHAC82TaS2wES/GVFVtJ\r\nW8QdqWQSgHVKKn5yaUWjOUGXoFZezDjEERrGDV28JO98mMzSQKdN0NmBc8rN\r\nQWa6dntGmHwtsCb2HPOrIOpO/3Heyhwpi0LmtWGdSxh4K90kds6BKpRSbkBn\r\nVxuO7sSrINCqcUnaWK+0ZXtkU331lHBB5bwXyE9AqKPBGK1PFGQ7bLcB5nrF\r\nZas9dq86NZw2/KSTbR1p7feWvQUotTvkpfN2kn4kfXab1DJT1iitaf0q35m4\r\ndareVqgUZujz1tLpMKtGsoyzzDr+3syPJ+2AtPCKSACzld6EasdOBG5z4idr\r\n0hu4GNH5cnxLTtDjuqiI6me+XwH4SWKkO3w14hMSW8VJ4bLl7PYe+2AN2t6r\r\nqivFugy6hKQfP5xJO66Zq3uUgRuvS5vcYUU=\r\n=v+Tm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/density":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2aa8050b4.0_1669662728463_0.6873746597121486","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/icon-button","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.323904a9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaca11706143d906f448d55cf88e660f1761eda8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.323904a9f.0.tgz","fileCount":40,"integrity":"sha512-kttFBUYjXPpeYDatv4qjSWhtvDtZDiMRfCkSRrP2hVetqwAhXBVPQb1AiGMDt81vkMPLCUrmLsAWTRCV+MauMg==","signatures":[{"sig":"MEQCIHckKlGQk8IgOOtX8TUVv43Sb3zMRpW17ZcwH4EVus/eAiApbYL1xtXu6L6p06l3r+TR+Q2Rhc9GujbfVy4WGO3M4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgwQ/+KCU0SAt67sqn3eJ4nt7mLOb5BXwy28LKb5y7kJdA33P38LrU\r\nbcwtTRH6bN6XjNgplqCPRy47EZ+2JjFz9hMkrbpSwSv5QBEdYFVQ3B8I4cnQ\r\nBcdf2z79oZaZ88hba3kW9Kdf+5Ncf+E6q/U6VdD0f9mNQ03ZUYtKmApITpQD\r\n+xdl+vZFLQII4DfZU1ntytU/umRPg5s6RT3bPS9nXMOvOsYpoAIMBJLXyM+E\r\nVRSzC46TqtqIUrWJc/HsBFH8IZoKx0xqFDbyLzN6LK7XwagUX2vP+obRVGjj\r\n8azVufkgSJe0b67+D51rXhhMlT6q335TAZ3P1iTeZH9GdYtuHVguroWxdSJM\r\n0TiR17QjvaHE009ejnnORxLq4VeVtGMTd/DfMwRp75XTnhxjhGunFXEsFfO7\r\nu7q6+3EVeYxqW6XNRzy8NeiAesIuducoCI72LpRUepaizhUM36LA8JAG/hvI\r\nNxSZZ/wsJz72efL0kUCETtdgrr0RIdRmQNcrXxPJoprcvJ1jIsX4Ap7zCXwa\r\nUN/7hBZKIcCV4iNob/W3t20iH0ZIrWSpcb1jecetnGr64R2RdvXmf1TFPE7y\r\nH3iFQSQT3qAITXliNqHL6kyHjVS0o0rIPPXej8bmRpBoG84uVHxAQrcpjyM3\r\n3OPfI0f6NthFb+fgB0/JjNPhjC+z/5T604A=\r\n=qyhU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/density":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"15.0.0-canary.323904a9f.0","@material/touch-target":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.323904a9f.0_1669736054697_0.474118832290332","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/icon-button","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.168a629a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6f3ca35cfaf7daee3e53090c10793cf521f12e3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.168a629a4.0.tgz","fileCount":40,"integrity":"sha512-/Oj1mPfHJLV613GozYLzsS+ZwGysdx8FR9ufN11V+Wr7stwjVljq5nmuR+Q5ic4KJhpYEbc8PyqEcGITodCBfA==","signatures":[{"sig":"MEQCIDOuE47/sjZulespnEKVh+csdBPpeycnZnWQt8tfPj7xAiA9FaWQUC/k2xMZyI2BoABwzItqVd7eVYE4AJ3ZoJmPLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCBA/9HurhAzPYN3VB6guDUinKl9G8/mcj5i83yIYityw6YaT0U4Gz\r\n55a74mR/Hpg9s/x4hR4v6T6by/yqZ7sU70lG5jlwo3sSZtBuwx+STsF4bvVk\r\nY/T87XNbOMIliZMVv2mF6F9HnIu5e9T/3IMkNr7XmSdxaUBd9M/4A79APn0K\r\n+gYJbQBCfYnL77Ix77EQxchIoJfQzjudzyqaq2SmNOyJPuMsSOa++YeOUZen\r\nuIqpC+wZxr4Eh/gdm+b9jHilBYNIy6Z94QEUd4KePPJGIdOH5CadC4ZJmbG3\r\n3Fsii2QmxcpYUL+p+q5/8Im+nbogomlPqf5DTBoL4i87EIhZoAh2DvsXsyu6\r\n2WOFTjQU89vzDJfU+9fJTfnNCJtzINgDbDHloZaGegqLXPdPv6qp0ePA6quX\r\nHs5LBchuAbiCGN00lrDjcFmz/FixsjxFIndVFAM2t+9hMYvaMqXbKfppl7vu\r\nSadJRh27hIX30K1mFXToCj8sCLg3kUemzfqP1oKKqt4N18167K8ufp57JJow\r\nXLepijJ8dNkntM94hgaw2JBEn0AnEbI5Z8jbmjs6zcqdovHQnjbSWdjqbdhQ\r\n7ojR0BYl39+aXrbad0oYpfaPveA9/elrepAp1IR0N/6L7Zt1Bi0EZxgGsYBw\r\nVX/qKjzNCItxz4qsl2+ELvb14oyRvpVrOdk=\r\n=u35s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/density":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"15.0.0-canary.168a629a4.0","@material/touch-target":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.168a629a4.0_1669740558667_0.6585864841719209","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/icon-button","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.65c411674.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c7a0391c44b1c98491e3d46d1a5a50e1d4b53cb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.65c411674.0.tgz","fileCount":40,"integrity":"sha512-Fq6/aeNNAyyI2G3flcxdsdhpGiRKptxhvpOkA131zn+vIEQyqEKx5wNfHZbt9rwU2GWLoyCNW0tJ4dClCWJUPA==","signatures":[{"sig":"MEQCIC8V4PaklQ9SC132w+pH3YvDwph9/aFQ8F2nXvmlJAsfAiAU8bVNxJ0dn5T8LwXwOOVgVvlPYALtFLbkDPSqBAb8/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkO4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIUg//d3dBbod7ii4K8w60yM7+k2/XWfJq6gn8oVmOcLdpAQAglopt\r\n62GkiIPB9Wx7SsLw+gRPng+wG0lfsU8xgYOu1+IjtPa9+kzA/TGIeEfUTDwN\r\np8oYqpZx1QW5olzmR4feaCi/u8VQeRP3nkg963XmTUV/z7aQoqZLBLlXYeUV\r\nUJbKDdeHX2+9nyrv+fs6kSeth2y2UmYzKfkVu4vb3/G17nuH3ZxYp5VPi03t\r\ngBnJ8u/YIaHgOLD3U/1AJOKZAXnysgo3ljTl1vTOn/gW9Gr2Q53g6VmgdXxj\r\nnFIeQ0lVL0jtL113kHPipv2eJNMG71x5TbmNfoOup3a7/gryDrBcBsobFR7v\r\nOFoXRH6oaVHC3Wuc1/gp8AEaD+iDj7Vn0xNTEluhz/5tUEzPmRXMMHGNwq+L\r\njhwGeViMzBS98w/w061I3itYC1+KKz3zC7fYRwU67eW51LJEYHA0MsOvJUn3\r\n0ZZnN/9mZ/M+RLSRy+SFFdq3CRlvep0nyadzwEp60lfMq0H7Wj7JcDa3jnIa\r\nBhgH3nss3y0OMFUU9MmNADXDFGYgxPQzv4XpWi/xC76ITh5CgjKPCgvLkQ3Z\r\nnM63MiQEWXrSG6soY83MpLngpVUJ+wKiAQrIjWxg0CfLZMeGS0iy/aFBqP2c\r\nNXfQ7zSesruRZMoYv2H9PuVPFXn0ETkOTcA=\r\n=lFuQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/density":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/focus-ring":"15.0.0-canary.65c411674.0","@material/touch-target":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.65c411674.0_1669743543945_0.2425686490667016","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/icon-button","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a86d36fd2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b6084924febeb196efe2dacf80c9f4b973bc389","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a86d36fd2.0.tgz","fileCount":40,"integrity":"sha512-wO70olUhCGcdm2z9ID8ZxZPKbePfJCFW+yWrmZ7SvEUxremJcixM1TP4M5yjBLST9b3gS8d476jrUk6DlvCPJw==","signatures":[{"sig":"MEYCIQCZ/nfBowd/xUgydjbFj6BPwdgZ75hIApARHhDV59/UsgIhALnvfovV6E/X2BY3g6FwnMBPbiDSzrXBqmmtIYoNNilp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUrQ/9FDOr2fBIoH1sikeXePT42308AfykoYYYoz0t+OMSzIyN8bcU\r\nm90L4wyFSK+ud8ufgqaiKU3v9ZnYs967e4KEX2sAP1QMBHUw3BRdOU3j9aUM\r\ngsEgigWPRMtG7olH2HhIJL2IbQRYGX7v/5RU56q+I3TnButuM7pND9F5AhHC\r\nm9R+Sqvy1qOymft75E4S+bGqTVqyojFddHwIT0SlpnhoKKqFBrOuOritvhif\r\ne0xG3ZXEYYexg3uAabSimye+E2XgAMpfw/wzd2w6BvEbRTIZ89CwRFVqXpfZ\r\nGXqyNLMyUEEpVcVKf8t+szPNuws9ofMqlQLU0PoiQwvJQ6UW35W+dvLU9CFx\r\ngyB9ednkoFIIFMrDjw+OoekOKH9Ln2w4hc8t0tOF3xj1+p8MPrv1JxDLnXG3\r\nxJF1cwtwVyFSj3jGcsrm3iIQq72bZu635FPbvic08v6AaZW1HlZPjy2jRpqo\r\n76LmBcqAdzIA5/7vIt+tl8OIeo+5o7oOHSucLxUItersPuQMWdsPUQilnEBk\r\nb7pt5LuSbxk7j3Iethm1PtQ25YtlsyBQgOY56g0edHcgtH2Lq1+WLK0iXsNm\r\nVDzrV0uaI9SBPuquaf9HXZv9G7HubPigSxg75ExqiG4KHtIa51V+EHzBveVK\r\nLqqJwTja9bFWzJM4euwnxSCVdWBbM19I6ow=\r\n=5iCw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/density":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a86d36fd2.0_1669774486450_0.812748561852346","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/icon-button","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3a1f46c66.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f95e2c676a63355265c04d5285a031e5ed3ef19","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3a1f46c66.0.tgz","fileCount":40,"integrity":"sha512-YCXGP2D6RlRWwTHKnmbZykJFI9bmyanQxcDCpqaT+AGp581WhTniSFhCNbAm/Jz+V8pcvLVHq0yHqPkCpsSPpw==","signatures":[{"sig":"MEUCIF+ldftHem6HV1/jvsdttiUwjTbR5rYes28gsFUwFx4XAiEAnhCj28/pGsgm+PJlo+LM28Up6lRCCOCoNtleJIywrR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0egACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2DQ/+NYBmN2I3HzM6eyAssfYif8QGCy2pyg63q4FU7YZ4JfD4bBn7\r\noBbB/mWYcvjabUoVUlEbX6XnwBtIYHTRVz3pKdD7JdKWT/pj/C8C9VCpGF4z\r\nmd6VZQu5BM956PxGUQjlZc9bOR86UdlSoFDqcO3kDlqTr7mrKfLKd+kyI9Yu\r\n6pKL2TpbahQIL5bdF5AfpgJYX18rSw5XD0T7uLwks/3dE0vCG+zpkNRM70lG\r\nFOAajx/Hy/djge7TMS8K5Y2dHd3KStofQV9YfIyRKAcNsV0kWUMpkYRsZxw9\r\ne86Mm0A3r86BBIC8gHwpVMBHYW17QxcSc65rjQK3a7W71I0d57ixUldiMFq3\r\njv7Xqgd+2/sEATFpEuO7QA629EuDCjygeD1pIOsy6jRL9BZyV7wXTwcwvabA\r\nDwcO3wQ+i+JSl1jLxH7P3eVLRzyQz/qFgzUDLfZSA81FShEVn+hZsHJzs62a\r\nwadDalAZR++iKDMbbpqAU/uCCoBRcDHewrH2WTXtTRCfv5usl8k2cJsUtLNv\r\nQvjIVg3hly45cvAyowpDNXjzNK/KehCeaV+4xyqglTNODOpIFTua6ToAQINB\r\nOBc3eAU8XSEuajJriBLWEvGav/2Gl5+rCm8LTR9YFAtMDjo4NfgjoVcGB+Xz\r\nnLt9VQu/G1mVmos2250IK6dHO/OcYfcs9Fo=\r\n=O3sH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/density":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3a1f46c66.0_1669810080546_0.5864840469676338","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/icon-button","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.32d8a9648.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"780e1d5f5194ee028881eee02ef32658ed19089c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.32d8a9648.0.tgz","fileCount":40,"integrity":"sha512-bMroJ9gxE82jXwlpsPHfP4q3zBqZDmJV+U+G93f6kE5x+SVzq6pzctQfD48wmpVouTznqbEhdTFkQpxV+JgXCA==","signatures":[{"sig":"MEUCIDQ1vvlhU40/iAlGmrDT+8MMXnmgUIno0hWIRl8O7zSMAiEA0jgVTU5nthOAAi/ftx0QqXKK+JzykhU29Q9VtGrYXdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOSKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+DA/+PvjiW4obNWgezw0toNWftiFdPr1p32tDA964n1tbmEkt3GwV\r\noQNEte6i38q6xrBtwoAEm70caDpWW5VSEFAcvlQb/6m24gQm0kN7bUwphNYW\r\nrQJurPqqo9LsbZqlqooMKwUYswkS8JDp5eSMlLjUsDS9TiNHGAwuiTmVxXh7\r\nUl3GwwMons8aNRHcUDYoVCSwoTmqTjZvnBgLQX6Ic4kzOz1V/cLB0jcD5lpy\r\nCkH0vfmOUNQWJ4M8s3wz38ppkvH1qp5bmwiRW5a5yHV4jEjF7xvmmUJhbp57\r\nxdjZZWdoFxmY1W0tJtnLDxfpW2g6vKdffFE1YE7ymMiqrRqcP72sJyxN/r3O\r\nZGPtxRLP3P5XmoYUj9i0iR1opyRilH9uQKRKTHTkXo6n+2bDBgf+vPp7liHa\r\nyEDYHpe1D2CkJAE4E9cKbkKZ4dR1B61kfkOJVvL8BYpYdFbASNXUvoRdDk4q\r\n6DlsNc+NdxHKOJ7sUSs8wFpuKe+d9yyYQM3Tbn7IrVWCIjCSO/Gq7/7UxwIh\r\nqWbLRv0aXRHhOEGhhpRrVnpv+a6uDCpcjt7CVU/FyoMX++5QnnYB0q1l4oVX\r\nxyoE81gsWxk984AjQ0iLKAmEp8dAZJTstsJUC42xkz8uFZ2f4A0n2qF9KYcD\r\nYTjTYPJKZFnG760gGw71UCMheCgPvwW5+Yc=\r\n=goYO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/density":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"15.0.0-canary.32d8a9648.0","@material/touch-target":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.32d8a9648.0_1669915786498_0.22436572155095447","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/icon-button","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.03618ab70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de6538da224f70778a105a1ce62606ba5806b5a5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.03618ab70.0.tgz","fileCount":40,"integrity":"sha512-4wZ9H0WHbe37ZNwIQoTtFUU0vkjUOIoJedjq/OskA9bkQA3yWzrJSh/2fuMLQCs3al6MLWo08zeptiNRlDH+nw==","signatures":[{"sig":"MEUCIQCY2XDFBXxlEZqsmsVvS42ke8IWVO+X8dyJ9C195pPwNgIgHxweBVfsGX+Vor5F+Tj6FXBHJBZcUeZDcQbBjDaXDic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV8Q/9FYfAHRXbaaVDwHEmuLMYYaBQdZdVIzD4XLp4meSj0Ye3B/y9\r\ng1EUX/y5M+mn7TmIDMbEP8PdGuraJI5p2jQ0y0KW97Y/c/cLEp7vVcXOjwU7\r\nAqcUGCB6Yv4VU35o1UX1hLCRLpg+KW5futqvR0CWnKDb06yWrR8mRsPzu8xv\r\nq3BL1vOmB/GZ+AHPiEfct1bHRVwUGGHd7Xt+A1gOQ97XgSpNYIjR0Ng78ueZ\r\naH4jPPx/5MQXL1V4ibWCRectOViIYqyxi8w/E59rlDS/ynB3LErjJoaSZCeo\r\nNJZjK792oDgP/c7wy20IykuHl02JHtZsbRqROwg5jLrpjvgvzAn0BdrFxYLX\r\n/JcMtVpJtNqzSvtiwuHWMtPVc382a+YVcBglIOptdqSKBMcciKBp26SLE2ZT\r\n1xr+gyZxJPlicAUt7iKVtclc+NP0vsgxpLtl+8icexYrNPrBiT1nMUmiZryi\r\n+/wR9rXow1p+coYwGmaC3tfDE8gcvMEjCOi9CZfVQQevMor6BJLIzPkCihdg\r\nSBQdsb3RviIxLPIERrXJ6zWGzvmupQ3/3myMdKkIQ00J0PpQSv01w8fpczq2\r\ncA/JFlShyKEAgVj16EahHQAHVe+2M1OK2p34YQsLVKTZBYvW02zIs2+MK5Ig\r\np8WjQwOk80Z3kJgc6imhB2DksmCUy97eWsg=\r\n=leUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/density":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"15.0.0-canary.03618ab70.0","@material/touch-target":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.03618ab70.0_1669928100608_0.6944362491596217","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/icon-button","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.68aaed940.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82d22f519c481d330ae66e8312f3f2f965603b7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.68aaed940.0.tgz","fileCount":40,"integrity":"sha512-E3db2coL9QoyyM49BRZW6Gc0HbTuc2T3TZ1xa5CMaKMeXJ2l20MFYJW2UM/UQ1gHHCejLEx8R4twML6HcRtzMg==","signatures":[{"sig":"MEYCIQDnoThZcbSep5R5oy5OZbGwf9vWAmDqxHJuSLqFCNNZ4gIhAMUsQG9WGm3fmz/NGyJ1T+72+Y4Vth6Vlu/VvMttk09i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRueACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjsw//babCMB+jUdrKh/KmTwG7BdFzQTGUP8wQ+h7/ApnHtXy6VREU\r\nmj+B0plJnFR1eN2P8tz4E8IvzrYtU61lmpLBPJWjokt6MGUIrLkaMX/1Xjmd\r\nwtfm07KxgVVy6WKDGRSgFRmYeOm+qUW2cH+ZBzMh9+Aoom/oGTaufdjh1Urz\r\nmZ6iTc4MOJJi2Iqt9V9ILLFE07thY4O6CLlFaqLG6O2/bJKwHgwGSsR2SZSf\r\nfwu/Ja4g2xJW0+GRHF8NvwKaOT+DEVJ0Wrz1BdY2TjWzkJe8OxVFsw/xqn1h\r\n0a2qvCU5sZNPsAGIl2GkDrrRL0KzwFeQbQPCQg7MnInN2bh+Jwm7PKcjsZwz\r\n4sD9Ej0OgiReXosGL1Nn0K+sOmxQpKmTMxNSYWL2HoWmP6c2kklmLjFUW69g\r\n9xh8y4SDC6FR1v0G0YoEzzoxKMJ1PR+x2t9PLe0l8PniBKpWxBZwwbxsfh5s\r\nteHy8FE/h/49bKRjz4HHxAGt+lypeN+LSImidgmC+uHyk7HVHChCkuubj8fY\r\nd2R6Sixt6KcY4yZI8jXCgYCp9p3Jpb9Is90hQw0hm+ZRVvBBwG13MCaHEdb7\r\nZYlAsOogdYEqlcyU7mg8yv/vQw35KRgwYwQ9WGvH4AH42NgV14A9sIF5N/fd\r\n8fG1zZ4scTehtfkpOQCK1X4Zw7WtYvnD//U=\r\n=DGvX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/density":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"15.0.0-canary.68aaed940.0","@material/touch-target":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.68aaed940.0_1669929885869_0.2836982112708757","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/icon-button","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f0a0bbc75.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e492aa2d952eb9af783709707ca4cfc5a0dc4aa4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":40,"integrity":"sha512-SfpITySWsoxG8Gczhy8ujuW8AOKTSnqTKp06LTrsLxdmFAZnky4g2ASPahQHYKQy5+1MTXN8EzFWeqQL7mqiXw==","signatures":[{"sig":"MEQCIDmMnhnLwVQUJKA6dpYEaQJrbQpXa1TcB9OhIAZL+2U2AiBpM0mckMPNv/KdvkKEdB5TQkevg6vnqtfTG1LbI/xZuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGRw/+K/SS04KA5RswbvB59IoFEq4EABzinPrEC+g+N4Xg2uRSJA8b\r\nbDP4ghECKyGkPqKAzrEqdIb0g4vrckAb+DHNZLDDFpvTBJ91buLtnS00K9OM\r\nSx1RTpL7hKT1aN9GpzKeJxyG3pZbEvjAPc891eItPdOAj3D3mKdnqxIzLeZp\r\ngfLm6W4ooQV9uzgOdPdDQfOufWDZyi8y6/W5a8hEgwrpG72SrMMbmSsoHOXt\r\nR4gqZPo2wrvk/pTsYGib0u54xY+qfvJUz95Ux/s0x8v6hjzMFq+2NwSnJHp7\r\nIfwGvJHtRm5C2l0PYmtq0DNWZ1Ho7Kbl+OcT5VRQbBBQOeoQev7FBJImzmrq\r\nvNI8FDqlsCFnKKwwFmq1awyondVK5l54MkGREShAAYZcb2dNx0UTJiMFdJO5\r\neqk/CyCTC9CRcKouDvF2Vv493pSTtU516YO7/4LuLVd3y/dQPtxKpzxiwnzC\r\npDziBn2RXTTl4AXrZNH3EWxWHxtQiCX8vhxkBg1DEo54PlnpkkUffidItyTC\r\nTQexGuyjBvh/C4eARx0w/8Id2txmu8XQ18OE88ajEtWaDL4G5xqtMdVlo+5z\r\nGOdS5+dsw7PbrgLn15yUmL6Iyg8HiFP3UWh0jejUWwkAPJxowJGV+mO/vOet\r\nV6vL2hTXPUzz93gsNEk6pCC+JEksvxTEQnc=\r\n=0d2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/density":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f0a0bbc75.0_1669971730364_0.9758854923206415","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/icon-button","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.dd99c8764.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2415317ca887434fe5ebbdb6dce6c522ac885428","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.dd99c8764.0.tgz","fileCount":40,"integrity":"sha512-OtyWkKrDBwMnRdecACaakdtrBj5ioe2BrAaOnMzBAks8RXbKhz3GWxh+rrgTlrfur+hdQvbJZAYmjBx6nLF0EA==","signatures":[{"sig":"MEQCIBiGJoD5IShdZbg55cQPIU04DKeQrKt27kPptBDZG+PtAiA+ElAJkKpZxJtRM7vTsI/FNk0GqTlD/jaQr2e9JD72Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigU9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk0RAAmNfVg/5MroHRIo/hUjlO7y5R2CYjZqtpW6uIuOK2Jsi+sPMm\r\nPDg8EtWgqAxyFMlvLQpJgK6eFdqXM49WctFDV+xYGHmC6cibEjnf8iqSTJ3u\r\nZCH0OSAyOBt46Kr+PukyZ6e+l4q3RwqdA7uY2lxickJkGkwhR/9zyMAWSpDV\r\nN49IvCcXqy5YIuRcqNes1Q1i/MBG2akHZ1A9hzu621MGuDzz5Wt9uN+R3Rnl\r\nrba6xWXhQ32GsLoy14Z3RAl5Vd2EspWYb3YC+iLmaJ/DbkK28GgZbxIMA621\r\nR4WeJ4/XpcJP2vmPBTgCEof90cFXXIJG3yXe791kGgltZXvW5uYkxFw1rte0\r\nzE01bPuowKOgB2MYERUsoVJ/Qg3VIW9uADxlbERn1jFS1QQy8W6M5lxYkE1Q\r\nU2WQrzA1l5BC03HJ1ff7wdbfXfGQw2saQyAncT9sdFdqHUw+Jh8m41l1xWm6\r\n7sMZkG5/698ILxmzJmGMmUXQD/gHUhkKLK+0gAIimMjynwp4gXxxPVn9CKsN\r\ni26KbVZ3wJi5BHdtdRJMqHQhWJzLSecoe7oD2OLgPUcZgzspG48/XFJ+vZ6G\r\nU+K/BoCw40+3x1FP8cU7i0+hRCwijkUGmJW10ttqtELt7NtyVYMjJEMnakhW\r\nR/+pC3NYfOnnEA15rJ/+ktgihNByvZKcrAM=\r\n=Hr34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/density":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"15.0.0-canary.dd99c8764.0","@material/touch-target":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.dd99c8764.0_1669989693353_0.029652856995039834","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/icon-button","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fabdcca3a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"866c1c1acf193968bf9fe023d48f25e6b72693de","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fabdcca3a.0.tgz","fileCount":40,"integrity":"sha512-4foh9ycrusM0fWF/dIZTm/fDJtIMx9eSLKCN/Syf0tJDpASxG9A1LeNW/U7X98pHbTUFcVVBp4RSfHjvp3LYHQ==","signatures":[{"sig":"MEUCIQC9wv/RxmWfdvyVXPZHJjyoDakhKlr+GHlboqeSC+KwHgIgS7Yww2+pYxrZFkNqVjexeLElYWcmrLlZvDtR7CAbMY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihStACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq1hAAihedqOyh1Wb1LGBbKe4TdUXAtKDDik1Oy4yO9dsdiR7wLNXs\r\nLhLx4HbLCIS/VZWyQUoBjxk6ItrePem4N1D8PeV1si6PlLByXJvkjus3nxOt\r\nYr/hVxHM4CI8pTq8VbOyzIw5ELynZfe1fP0RC0F4YrFzgYZCvsstKYL6lTk7\r\nA/OXYjOnvqdrOkWDdr9hmQEbXwQxjSZQEBOwzGR5OtjlowWrLpuKGEjFnwMh\r\nWvqZfmWXi1biF3VREi5KMgkSyYWNKPeMQmvcDemr+NV0XAf5eoyaxQZyzfnR\r\nZBV3Tar/WWslKgWgzRNK0wjcc+DSJicz2ObW1XymQFyVRPy5T/p7m4+dcMHB\r\nwDl0ngpUMI+T0ihqHsYzwq0qqyLjiHGLGvcTo7fmDjYWg+WsBzGV8240FOzA\r\nFo2anwULK9mhHVJLl46U51KoGuIS6Rvy7biBrWh6DGNrC0KUcA8XjL4htjSv\r\ngD2BvEO3Jmi6gDI+I3q33UQgycj+sJllvyBH1zEhWOECXF4+6ZrjbL/tG05b\r\nFM8MA5wGcUZv04NSy++W2q3/uY22Ke1a+b5ehoD705bzfT7XZHuB8eHeJFRu\r\nCDQDe9C4Qv7EhWPJud49HOZj6g1xrJERxq4y+4E3AaligdY7DhjwfluLoF26\r\n03GRzaxIj+GYPx1Buuws59GU6j9C3VLPXTs=\r\n=jOEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/density":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fabdcca3a.0_1669993644999_0.4692896360195158","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/icon-button","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2d26722d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"375d0d2eb3985fe3fde302de7db7064642df6b25","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2d26722d2.0.tgz","fileCount":40,"integrity":"sha512-YDG4R4JZYVijdvejJDUwlP8MOf5G957jjduUa+LrPYp5hLG2Aw7jLL0XaNgCCmFstE2+nsL6W7ZmT+P/Ajd2+g==","signatures":[{"sig":"MEUCIQC5kLhczEpRw3T2ncpp9e6WGGo5AA5LXrmaALmURjrHeAIgFGheroiMU8UqMWCf1RdwaLN0/q+0J5wFLEV07XM0mHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiideACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtbw//RbfWa35AVKFOxdEk9wCp9L6DqdRqNHgty1d9PZ582/mufqUd\r\ncAPBnZdtpzUe6eVExLtQ9+Ggj7v5vqBwdWl89GvLtFl6oiQngysrQFMN7l+b\r\nLfunvf9Mw/4hShsp4++mWRGq6gjnVtjNZWd3Emz8KraJ8WTvzfhQji6aanFX\r\nlDaxrZ2fhVzmarhzS7gonfXIq9jf1VGy/6f7mp08urxewReyqsNK0E60Hh/1\r\nl7dt0B//2ZBA96Mrc7ok7rcbIJJNrIAX7viPTimbVNpbtjtIL6KWanQpxkGN\r\nVgpy/7RWhwiFI9NpraHaLgBoyBznrkILBJWJUHu2sGapH22YI9zia6QaGQss\r\ned8eMgb/EwpBOIvFspsMzYQrMPR0AMAxbAUvngofKHqNI2Nhx/2QElvUWi2Y\r\nKdFnRcLcjh6WNtxE/t1aVnTYjwSy9sU6fBdnH38VD6A7sEfm9OhTo7QyBBwW\r\nJNLyaNC1tKO98PwEkxiNGJu6kkPLlRcC7RCM9lu9Io40nbPeCORKtnDEsKJ1\r\noCr5q9JqBKweueKuRooZ6Kcw3S6UCIZLVSgivVHhwb81prS+J8MFuvlGGxSO\r\nstruudqSIIi5I6JaUfwq9+kvKaCeKMvylr8Besao5FKUJ5WE+NdSkcJ36otp\r\ncxVVz8a7uglOqifX3Bc9EVANqM3v9241YKA=\r\n=cSHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/density":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"15.0.0-canary.2d26722d2.0","@material/touch-target":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2d26722d2.0_1669998430495_0.33825594521169","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/icon-button","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.eaa0c3a86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac10a6fd4e129c52b476fce608a6e775c6e62180","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":40,"integrity":"sha512-P159CdFK5SHUoX8Hl5W5NVdU9lOCGumWJtjFyeqvxw51zzCXkYwsXeio+xbMnp2uSXj8k/5sYhkEz7ExckMb9Q==","signatures":[{"sig":"MEYCIQCcuoWr5ByTiK+uLsYjTbNal6daHwFG2uNCAZzYWkHa3wIhAIUcxJfK8+W7j7kONjqJ0kScwi0+KUilPLmYKvdtBkHE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXnxAAo+Q4ioa4ki/HiGV2HNvPSEngylQJS3J3M+H1yXmxCcIZqRbF\r\nJ04mfDbjiGU2UU6OiJdY2sE7ypaHMj9hGDIc3GtSte6HjCpz6cZsw71B2Cr/\r\nEUigj/5VSr0Ff/k2nc+d/r+c5qB9auG4rm7PCkTRFPBO0AZdjMr1zGLTfH34\r\nRVjcLxsT8Rn/XOr7+GCakCn70H5BSEOk4NV85Ys7+4OpNL6VHY0bSJjP7Hsy\r\n46a4u2wzW3H0WPzHDKppOWfpgBKe232lvwOE5mjuEoIM3++SZ2SdtKAIyhtb\r\nRJAacJqusTlkx2nWeoy6lGTB0SXL1qLBjLgx9Ft5CTy2dFzrr1WglohfcVKr\r\nFvvfI73GEVRiQgIguPqzzkasubCwbUyhqB3ZO4Vod4ix16sVcMzjPZq6Ho+c\r\nxv/NFLgEmlEkMjc3yO/iYQMg53dN5ta30KeGC1Nwe8tJCOWrx9EPEUeLtKAq\r\n5s89Sef0YVjHxxmuzgOD+c2tA8zKpgJDwEO8OSzWSnKM3ga7GjtdbS5STYYV\r\n4GV0vZgmaV/X1+hqlNjrWcjjTOM9YF8a2SzEvH25WAKDox4No6N3XP2SP+cm\r\n43YDHijtbDM5siC5KAudrP04bRLYxdcCovGs6t5kd3k+7i6jpSuA4//CYAtZ\r\nRAwtn8gF4WAmnPrOdiEpmajYmRLA8zJ+Ux0=\r\n=+dAS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/density":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.eaa0c3a86.0_1670002994438_0.029073288615197868","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/icon-button","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.79a613bbd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1bbbb113418e1c2f907dcc243c24b218c3c4c9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.79a613bbd.0.tgz","fileCount":40,"integrity":"sha512-eif4CHzpXcx2xGdewCdMH1m6FhJ3M8kHpD5U8RcpeFSJCFrx3nmiTvEmhLh2qmIf6H9GwGxuZmavwIRBsUuQvA==","signatures":[{"sig":"MEUCIQDSchUc1Dxwicpd7ZRDcwtOpS11wRKpz9bY+0PjwpGSIwIgVireB8pQa0BoLWMD6B8C4E/nX7Aws21og8qIchVTogo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1D6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpI+hAAgjpFSQcDAr3tOc3rGntL5TRRX0N29rLNFTnx2qeaI9hhYI+3\r\nOymsw9O8kj47YErpeVYb+NdNPNxyybH/HBY8o1V6zXUJhX9sPArtJxrm3Vup\r\n3iQB5LHA3Y9fsO2JQeqS+AjY2jCQBG9u5SDt3JA4GcqNpHTDIRAtJJou6gUk\r\nVHu8/lczopbIGmx8BW04PJA+ma8+krn30Xdo4QREGTdokpamrFoJ/LTJfUg9\r\nLBIvg3H/MNXr+7qojsoOP/HDvnESFlnWMUS7aeQy0ig+Qbehp5ucSj160dTA\r\nXE/tvbXxrrYL+CY40elPP3jYWLZx226aS7hT+liDBLT6obHiRG0k8+SuGVYk\r\n+NB+9Jv4Fc3vv/J84fSqRb3Ts1w9oknVizkGpHdGLjCqZXLoT5z/NqwvVRgg\r\nMejJPIiEZo9euzXJWwZWpXp3UGbqUibZ9rtu8ZCnZCczVbGsX1yEQNqv8M3H\r\n8PxNzHk7jEcsxVxcAv06mak9aVGzeJjZvLLUQXdMMK8Wp5AvhdPgaqEBgR5a\r\nqT4f321K2rnnAfLGBr3ijJqO4NtGjGUkX9ixRbnbmiI+bCbk9lRrjobiGbmX\r\nrQCxEHLGrV4oqhSCzo4NcYemy/2OVATWhwNcYa7HuZqdorkdedLCWZLp3/gz\r\nF+LP4g9xDyo5gStZCfwT0BYT4GIgpBNYXrw=\r\n=IfFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/density":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"15.0.0-canary.79a613bbd.0","@material/touch-target":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.79a613bbd.0_1670336762558_0.8600785482584923","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/icon-button","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c871fe61e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"094d44571a058a3eb070572fc3f9fd29cb0a035d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c871fe61e.0.tgz","fileCount":40,"integrity":"sha512-pMYR0JtDfcbknZihEqytsTLQSfBigxBxfP0eZa/V9e44gVvgC0ZsFrk5ZoRQcUHGSJ+IBN1rRNf1TbHWx5Yl1g==","signatures":[{"sig":"MEUCIQC/FUoPDxoMzeKMb3EHjJV8/AnhwFkUb0C71tTBQ2y1qQIgeAWPFkSeBE4hK7Ywv9Uac9eTOtn60Ot0izROHiz49DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEY7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr48hAAmz58V7rR+C2MBloAhkDllqHmRvJvswyRyAcoSH9Au7yKyasf\r\nnDq/vD6aZ8WOv3plD5gTweVwFGmASsXfiBqBa7RHnu+w20RZopF4JEJ5k2IL\r\nkzcjM6IuDlmTcicxGAtm5N2jCAj2gMUglzu6zWP0K2cXhIrehdZ/E3ucFaRb\r\nHUO7/TDuOnrewF4OiVgSvLMMKaOzjWlI91vFXnBu2T0ia43GvFGHZL3xCay5\r\n3WeCf5+20O2HnW6O3lfNdBOKASSaTkDtu6j8XIAm1PHvRvd8R0+p3o2+go5E\r\nSCxfg3nVQ4HKoSHtfoiKsjud1fe5WZwI+u2k9dVgrZ9rgJa755sTw6khn+FD\r\nDqwYkMcxd7ncpRErszEp/OubTU56c5oPfpykL7kqGlqkWYtszPz1sNciDHSt\r\nIgXWV6g0sxHVpsqG5bcPUQDJxeLbHoF7F7fuQP/XT4pjZNqE7n1n/RA0EX8P\r\nwW+AUdybfKokFp4ja256ys/joNLikoDCACUtR+/jFWB+PuxIth8BEHbVpYyf\r\nEtuEJ/1s8EkTzehA1M4E/kVJVKZwn3ZLAd3MWkVwlAvEEqSFdaLYD01qUsIO\r\n1nGQ/nTrKmLugm7zFuC99Px8P+IImxmv3gMjexftRpSgurIC5Qu3fBYBdPIQ\r\n6Z3bM3wu3Wakf9510GcXvnFdZosb1IVQ2wo=\r\n=c3Aa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/density":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"15.0.0-canary.c871fe61e.0","@material/touch-target":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c871fe61e.0_1670399546783_0.910824778995089","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/icon-button","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9eaee7936.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae32158d3379bf91d379bb685dd01faa3c1b77c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9eaee7936.0.tgz","fileCount":40,"integrity":"sha512-G2YP17Vp+qTiC7No4+jZTkEqFMwl3/HO4mCg4gX0LrrryAw/rIgofVund2OTNjvMxKifTF4zC8NeWyoWc+soVw==","signatures":[{"sig":"MEQCIFtswbxw+MpC8tLhXaKUq9GzVZ4tvO73n25LFg+comVMAiAFiQrpVLSVZO8bVLLZ39i1ongOsXI1JrUlJW3f/efIAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrONQ/9HVKNQvz4PTrCwlY0CIs3bRm18uBrOHyCLdmlBxUFF98cZHEC\r\n8yWzszXefK2DGlFXiOdFu8rzEOout0C+kJZqiFCF4bw4hec8cypweTHOdZih\r\nWRUXCnivbYYG4jbLgUmXxD0H4oCdXXCt6TQRs3Ox+Ezpre/ihVU+eZKVnVQS\r\nz5DNqlnBnf/7fz+Fq5e/mFz2M3J6wDXE0EtYJJ5VILR30A9K+m80TZlS5DQg\r\n0xBqNi5rqT2zWIaTwhtGKeqr71SK3koYdMPKrmT1nS1BvhKxOHYZ/CBTb48i\r\nD7oKGkFlvgieLYkXVWL6xtU8W90vMEXC6kv+0iHSFAop94tm9lxmsAfC6sYJ\r\nQ+l243ZTJDaCf0cjd7ksjTOC5OLqD/H8pO7axXtGH8WSbLAS/qA7LsuhQH6B\r\n/M2T7IfOCYK04+keqCo4tXvdbIoI4XSeY3LLZH9AcZ0sq/TNT/vUZj71kJi9\r\nZpPCuLTG6iuQFrRu7CJaMLb9c1pNhQc7YaH2Yp5k2GrZMQqsW5EEqrmGDJby\r\n1Y2upmPPVyvOJM1YL6EAbAO0r7t+/YI1WiJ8KvcTjk62uYSFYwQ33H+CdZZX\r\nETDm/o5SHXcIc9+3gV/PyjCp7Yzu7zdw10aPNqHYe8a5OkvLjqilxJ/e0gF8\r\nUKH+bylV6GgmDaXahGi1/JrmETFkGc2NWME=\r\n=pbjV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/density":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"15.0.0-canary.9eaee7936.0","@material/touch-target":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9eaee7936.0_1670443411656_0.9268948401923727","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/icon-button","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1d37bf601.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9673577f1c7a90ffac390d6b4e09801b455dd2b0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1d37bf601.0.tgz","fileCount":40,"integrity":"sha512-zyVyjqWTxjOSLFiya0APt/V9KZqkXzCGbKGYmEnlHCs2mE9FLPLBliqBIJ9TfsBXYkBS5E2QwrNZLfVSMShAGg==","signatures":[{"sig":"MEUCIGlmtQnIe04BEpaoSARU/l7AH8FNOv+eu0P41B4hbF2TAiEA1hQIEEAqZJcxnCKIoQ/oGYDAVOT1aYetU+ig3T7jbQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowPA//eXjtUvaM3k6CrC3oJe/MEOy3nVw/tHy7XHIyzhbTWFIHvO9N\r\nFolcp9G6zzcB7/AaFoaXcqebZNiH3WYZIq6ebdQ9moJiK6StJSdy9SI6nK0D\r\nP7g9iAQ+Lq6zqoITqR/HTuOtSooQI2cgf19/nHStwUeG/tD6Fam9E+dqJUZ7\r\n58qsQJtiNInEdSsfMzM1gDPKpMOZEKW/vKn0uZgMlGYpAj17Tnqc2rnb9Cca\r\nsPGyNFQI+NZ/haj906XFRLBia8qamJ62YEOb5EaBvvqarLfGTYSEmFI1Vq4d\r\n67zmScYvmnm1R/Brf8jeOn9TIZOhGKsRKj+VkqDP6qjrEj31dwYJZvDB5gqA\r\nZ57yUASey1P7ViOvLjb8WfrQD3fqbYAAthtWMulFRoEl+iTKL2/Z6gJQ/KdA\r\na2t16zuTCIV08zZSkoBrnpiyJa4uKS65FyCR/iDzEGRVLtZ/R1oWcMCILFpo\r\nTaE8RxeSsyH2yAuzlJn3Gv5WQGRbmStxTjtq9j+FiA9JH54D9Hkh555IJjad\r\nl/dT1EP2IAIvXZlqsM03ZJXWf6p2iscRro4saZYtdgkyIfK4Ngj5yS+TgeNU\r\neCybrgCLJmPt9hKVsAqa3JxTmOe/eIweKD5oKGLRFKf5CHFNvwhoeh0NTWnA\r\nVp9J/La4209TruYZgGnpPUEkhwer5nw097s=\r\n=7kTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/density":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"15.0.0-canary.1d37bf601.0","@material/touch-target":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1d37bf601.0_1670445712011_0.3119341457380016","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/icon-button","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a5fe069d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a0a9923304e620332c75b46f2dc50c0595115eb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a5fe069d5.0.tgz","fileCount":40,"integrity":"sha512-I4d1TgFqwqvqfT5Dfrhpbw5zVCcmq3gt/UuzqhCL5cf2UVWurZnCMKql20ue3KpXUHD2dVMo86MKn0FGYEgmug==","signatures":[{"sig":"MEQCIAqAIsiJmiJK7nB6p6HqQKmU3ODokzChdqfIwrcjjwI9AiAHyUNWJshMdFCSOX3xQrgKsWq3TfPCdc6xZu3E1Vlxlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPFg//cEv3EH5qzrj3YmmlV16hPtclwztOEJt0e3U2c3GzTcLrqDvd\r\nDXqpB/i7urQKX6CbqMbF49ko9oRu/Mq93g9+szIgj7TFs2ZCyo5jcA5EkoDe\r\nv4pbITO58F+SaXSPxcZRIqgEBU7Lk8crl8yWKhJFE7LSLSFcsE4CKP8iYL8G\r\nJ5jGkzsdw/ENN6ietWKpVmmhgSriPiVScWFrwMv0lQaaDR3FhwmciNozWjgg\r\nsofGL36UpoxDx8SoZJwlG1f122vr8muBsFBbXvfn5ie0EcBiV3FC8bqFfGow\r\nPkZDLbJD3T3hPtxRDG9qdZkO3zISEm9xTg92IzpRnKlNpvlBQoVOmDAjc/wM\r\n/YOvO1v1tZeXYeMDPTcHU1DxnI/J3+UUDIt0VM1xiBgV/4e46/Vt02czInA+\r\nepLrrtWRMJJiuZ+FJEywoNBpTBdejlvo8ZVDdhGZNTLAdzfiZSqq3F0uHyhM\r\nRcn5Qjmo5NwBOw9CK0CTCH6uT/NYV2Ly0KFbX/2vOfZq3Xyg/gieilfilnQU\r\ngnkgZkXr8WYaKnDLR61W36kAJUKpjhk+EZ9IYYE93SuNduoxeq+pruEFmDPK\r\nkjHaWUP3IWXDg48ZOPQc8Ozxncd/5YHXzAH7Z3TTkEKHfQ9KAov0Tmx5HtEZ\r\neDyfNPfr0kA958MOXbrjIUCn/dOBN8tHfio=\r\n=pIrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/density":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a5fe069d5.0_1670611497817_0.3007182122281675","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/icon-button","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ce8b5326f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1da7dd18b3f391aad7611a8c962c7ac0f621f9e5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ce8b5326f.0.tgz","fileCount":40,"integrity":"sha512-par3mJpuuphoK0GOOYpnZx2mET5HE044Gxrh6dFamigOpPtZplKzgWbwJRDE0GoIfgvjAfgrtW7WDnr3ZE1fLA==","signatures":[{"sig":"MEYCIQD0E50zt9oh9H/j0PuPPMvKE2NRcj/ln3kihJUCRi//YgIhAJIbn8H//LysdSHL3ziBl2z/v7axIAb0mh8gVVSQ7lNS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocIw/+KM/PEMSpjVqXpzuUmqcRvv29BKEQvUg4RH6mjqO+ySI7ltD2\r\njAw+JE4oQIixU5IeJ3EjQ3BVHLVB17tSQg07dJYnBSCzuCbBiyqZl2e9VMf/\r\nah42QBTbEBZgr2jvigC/KtzqBbESan4icL5a8PxQr1aBvX5v6wimtZ0s0ScL\r\nR/aCF1MlD0Ze9jvYNTbdGFUbbhyiqofNE0d6yM1msB+edTUKF89v+IP/Rs1n\r\nXcdt0CLhVJMr41RoBHuWWeppJK6KXZSekZZ4FiPzumddJBjJlhTp8AT5ZbRo\r\nI0iVasd58KxB5VCp2d2a9EplAlhURQr5hP8g9s9AiwkS6dkLaWy+VFqU5vOH\r\nWfoxnvfHsvgABf4bnjjvAI3EDFDPYl0rwfftFpTxEqk9lfxrOnpK5d4FtfcE\r\nkOIQgvF3yjg9YRlEEhRB1PzOIEDD5R8QgT83I7lqj9Ru6iOQDu5lAgwD6UCP\r\nCEI5hpA4MVYVNxaI5FW60ualEqDGcGutHQZd1f/lLlL8ZFOrS60QIaOhzOKf\r\n3lVT5kH53l3IiI5IbNum5tuv5D9leg3L9lKGKGW7+YTgMzC7QZkCxjeQL846\r\nEWYwnW+YyVjr8q0N50FP8dAm+Z03pB5TsXAieu23ws6yJEDtTrq4F211vt0y\r\neqKwVusdCMcbu69ytUy2lArjkRhHOHZam4M=\r\n=/k09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/density":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ce8b5326f.0_1670628685223_0.43405311937154445","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/icon-button","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.43f5323bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50a065727b3e91e98ffaf2a91cd1ba3e0f9630c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.43f5323bc.0.tgz","fileCount":40,"integrity":"sha512-/dEQS83SI2NpQYjGSrYRAM3gE67w0O4j8i0IC9YYXXQEA+wamVH+Qgf/klaFCuJuYQwBaYLP5x9BWBrTwkwLrA==","signatures":[{"sig":"MEQCIEQSqsICgRH9QUVnS31SiFI+jqo3IjlcktjxODGFuKyQAiAevedhX+yPNPpLR6IL5UWJlI7PnBFFn57ZZdZQ0nFFhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1rtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra3w/+Lq3VWSCgkzXffUxtvUiG1cXFitulXR4mqNV/n6Y36vlr3IIb\r\n8Q2QkUs8tWdLCYMWJ6LpQoUL7bQ8Z4HL03QoJJZAQ9+MMvaHTIzWV9yOF8hT\r\nJtGI92gO/hRyI2lBIfmGbq1z0q+aXrQ9PX4ZS9dh+JUxTJ3kUa+YSmamMlJS\r\n8VHG/0Rr4492/gOOvuZJ9bZGYqTKdfVfKr+YZl7DfpVTa5unF/UDvjPAjCy1\r\nKJR0B/4oaqkToD94S3FcmR6u2xD/yUUHlk2w7mZxfkMyvbCetoL4LeZ131CK\r\nQq48ONCEcSYHWYiqETKbnDG4EkOMZ93O8kzGbl0m4B19LkCiKD2eIsVFMDbQ\r\nFQX+XLZl9n6njBScVg1bwDd5V4I3YfLVMR3IxpnPxaSKfqZpAIrn9/Uhkem9\r\n+8BYQ1lSHPrCHB1MtNVQBWK3bEt23c/mddHOvopc9a33ao58w39AbdbOwiwe\r\nME8AjrpVBs3v7U745v63ZuXmxsZGv1AJ6gibU3Mt4crz9URstJlgEu7yM9bq\r\n2neJOsbq5e3vIvaqwUa7q+HUkNXPuIE3Rr8PG3AaNpvjvbw7eImjiCK8nn8X\r\n+o5ZjTTJXck3QAWgM7mCkPOJGquZvGL9K/Lb1dvKbXL+MdnDbOz6Ktf7yFiD\r\nLeXMBft4yUCXImDjMsFxCjW645C6/oLWZP8=\r\n=pAtU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/density":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"15.0.0-canary.43f5323bc.0","@material/touch-target":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.43f5323bc.0_1670863597432_0.08674282808441913","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/icon-button","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5490e32e7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a64eabbc6473009afb74a995a9312c823313cc0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5490e32e7.0.tgz","fileCount":40,"integrity":"sha512-9aL8NrvK0W4/uyhHSKhmbuQSXJ4aMvrSM8gzVui4t57DGf3rLitAvGiKHWV5xbOJPkSCyg9ldBae9HTBNIXGXA==","signatures":[{"sig":"MEQCIBMHoTKvpgPuHgoYObm84ohSb1/f+l+/otoKrvTh0zM4AiB+7nST7tfilv7v3IgjUSzLQnz89hXGOHV2xzPahj8leQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl165ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWwhAAnp/94kktXwf7Hce5VuKYpmPesVAayAC6fRuQD2gq650eeZNN\r\n43kgjCkB+kdDjaVJEmA1hcw1J4/36xqdYFk/1lKZ6ht4KMKttQPFFYdgjW0N\r\n50rtmP8aGEfGP0pVkH0jXJgKmtbllPkDCEVQjv5+OGJAyHBra/pLrYExFDAI\r\nCyqsyJGzBemyggGVDlgSA1qb7lsIBauHuAC08Rstg3eo2tCTOcn0W1Y8klVP\r\nRugOugiwiCNq1zG49GsDFPlIXl+7HZWW/IaXRlGDa4nyawMoRLDDwid28zUh\r\nH7G92SuaMqUedvzUtxnyAgresux75/tI4qzaOPRZ/iIWsv1P8hXwyS7N9VIE\r\nDHyAMf8NB7HxwCuCay85Goki4p2OPi8Bt+OiJQ8kIU0GGAsHmePVYUbsr5Dm\r\nBvLm1SXYxABoPG73egkHmECGszpSswjQPt0qRxx2gLWZf4UbMIYglXgZcYdy\r\nLyXEMMGBesXu2pP7PjyAew7j6jBeSFKP4jACpKc9ZRFNsL44O903BY822L7Z\r\nWn42BEpVkiHGO+rcAh49sMTg//gvRSnCQHMiUctbGj8ngB8H8nC6a92ADnHP\r\nkVgzHvD8DrYwBRzKpfdWNg5nLsxUyrMLhByS5mzWnFpTZhff0zJk+1aNPsAq\r\nD4OUsqAJR5cD97VZiEyLEXOFSWN+B1c5P5E=\r\n=VmFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/density":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"15.0.0-canary.5490e32e7.0","@material/touch-target":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5490e32e7.0_1670864568936_0.8257325836144005","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/icon-button","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.817002c29.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"882992fe7cabaf624a0b4c1dc221c2686b2fd95d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.817002c29.0.tgz","fileCount":40,"integrity":"sha512-Rd7OnG+p1u3i+fDL9CctaOmikNVug1qo1qI9SX91VFNL5uAbigucu+wDrlj//tFZ41yHd/mtt1w4JsFERWSpxw==","signatures":[{"sig":"MEQCICkz3VexRUa1qazaGzgcJhGTzKny3POazXEkAy1XDlvAAiBVxGzjg9eGX0PS+mOHsj6CqSPiWlthjJwJzzPRAtn3Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoGg//X53guKSRwcqH6if0OHvHGr4d5Ba4Q0A+O7Dhr70ne9VEJt67\r\n8MEejTbY6535unUx8s1HFTaA0WA0/+R+wfHVnEJ7auwTaihVJqkCw3hvxG1Y\r\nsdGliSv/RQgLpgxs1ZM7lZ51Ya50colom7t24ieLBkP5VAcGXngBNq1AtLqa\r\nJ6WzwDkgTzQKNJwd6ksnATPzOREZ/VsOObmxH4fMksR8CVZ4Lu6FecO/3HL0\r\nw2wdZTqFTab+6a9XPbdebMCQn1KMky8wzWN/xX1nBLGVvpIPIrjQzGHh/ODQ\r\nij/RlwUU4QatfzkVqfDxtV3eGXgm0mgZlB7hJCDlc+NSC3Oo9QGO9WF2nh6x\r\ndOkb8FgI7XO/Y7Td1gfFbPOxIO4HqOhf6Brhi9AOFufp0U2TFASRacQr1jFi\r\nu8MjBbsUMSClS+oegY+6cIxKExDS+fCgq+p9TS52Y3+I+PnnJQP+r7yRT4mQ\r\n9v3oc1Ttp0c+A3hYE0/vDWDrYdFw9QbUaj4aGVbRLvasRMO7tiy5Ok/KtdqI\r\nFPS6zAO19/jP6rLmtFJeR+5MiXDx54GaxfcxWX46GqQ9MW7QhxPLFV8eJKwh\r\n0R8eGgm7C/MwtxsHpmn82ldiZznzAXrBYmV+dKtAYAxwBgq7yvUuxz0p/KzV\r\nUylUveqbcupEaXXE9ygBg7R7OTLofTVtpKU=\r\n=j6Pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/density":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/focus-ring":"15.0.0-canary.817002c29.0","@material/touch-target":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.817002c29.0_1670968480156_0.19315714124147454","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/icon-button","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.313a1326a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea9b22eeb176a0f9ad32ed4b0566eec623d47c7f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.313a1326a.0.tgz","fileCount":40,"integrity":"sha512-PPgeiwJVP58XGGx/8XI8xJdbvdjJI5b7OJ+Xi5eKyOAVI2sUWs/TYRKsLjKGQYK9kHgbmSSEi3+oIP5gVbi3CQ==","signatures":[{"sig":"MEUCIASODvSa8xy/78oz2mQRmjY2vlyuH6152Qv22+KVNckuAiEAps3D2wZV4kfQaJRZFphvAxhcZ7u2BXc9CeuZd7Tjz9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6jw//fU6N34SsI9/kNL5gIYExo457wahWAwCDwMyaEA9iwqV6YeZM\r\n0Pcd9CE5LdeEhgh3XyvXUV5LoX2SJVb7Eo2gwOoJ9E63Tq3KEVz9yHsXD/iS\r\nDpIdZZSFMFm/TtbQc/Kzs+ITKVragRPThgn7rn/7e6cg6LxnYM2nBOJDJ3ea\r\n1o6Edjia4nrMN/vULIYdLdfhBv+wmWKMCLHUzVDkDIE/VumxhhbItBNJTbv8\r\nuPurIm1bP6phv+WOUay8/W2Ox8FNfLTDPC334aB/1twJ36Hvht3P5FYWCy04\r\ng2ojCSSjcq7g4xgZEFNpbX/uRxXSes/+FBSShpKLV376hGuLW7vuzPRxkEo4\r\nb/Fnmf8UE4DmcRRiZP+VTcDTgKgODT/kFkSj+A48gqnuw5uDnIw20TvZj1Uk\r\nM1kiSgeKY778FWjuAq+0QMndHAfbAudK+b646PiVUZIUJJUo3J2M1oY356uf\r\nr2tFsviHT13Zl+HxSS6qBWXM+0xoZG0HTR2u3K3g36bsrroxxx1dtsiOxYqT\r\nvCSXBr6SM9rwF6VjZZ/syzD7dL3kZy3fbfQMmiVQMZIB/bzzErNAcVdi4n2T\r\nm/Xej9ZUlKGrdYhOAKSTaZhc1WTCmNRLBt7uV8VsXvSQpIxI2nUn5Zdo5lfD\r\n5+ieDICRpEVNTuPcQpo+qrxJBiFzNT315Go=\r\n=aVwl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/density":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"15.0.0-canary.313a1326a.0","@material/touch-target":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.313a1326a.0_1671013767307_0.9744822417879395","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/icon-button","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a69c14e10.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b30e67c0e08ccd54eb85eece4b4c3ca14c06395","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a69c14e10.0.tgz","fileCount":40,"integrity":"sha512-9tDklVPL6H/TzSDHCqiYyLTFWS1+LOQ+WVHGiC/qxEb6oRKPAZh0ZS414YrtJvl0jMOwMuDSfzzvuedYC3KZqQ==","signatures":[{"sig":"MEYCIQDy+6VpO+4ZbVf/Nb2FfVzGmr6hSaBTzNOE5OpGuL6DFgIhAM4lBaiW4yIKcGZOhJxbEYWTqXF2JK3xjq/ikJOY7AqJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbE+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVgQ//V5Qnvpt2Gh8IU+ba13CaU9tiSe80b/9Yzwa2HDUeWs5Ezc6X\r\nyk9cFgt+LIr8M59PU6ZttYTkCqK71Q5edj0TlE3JpeHNqMgb7DMDYzwKHmQb\r\nCUmBt2EQof53+RslqPyY0Tf8TCRx1fOLglWF3+dUW/RHehGQiku6tv7gGqFn\r\nGPphJwKn+uFAWguk01bwYyfoRiycBgaUWfzUQ5F7W6dwwG/Z5YM6Yxbofb1w\r\n2r8VnIAx8RnzwTS8BsddDGKbjK2BjkCqs/AolTVy31fmJxNm01wkZfxXJCXi\r\nxAM3sGPoTYikr1pc5zayw0zLibtIL65T036BHnwoDHsC8p5Qyw3g1dysxsA3\r\nyAnWRA9LyTkutW8nW4n8DMz0V7SL2SDWU1FATImlaMb/HbMc0I04kakrqL4l\r\n2+Ff1YXhmvNVp+J6Fr77dN9LJhN+YiK42yQoTif+2hbEcUIUecfMz1A1/yiy\r\nTI95pyQCXtJgdo9ZcVDIXKNh8byKJHENJi8aa7vgvePa2wNF7dumAKg2avYn\r\nWcWBvAWq4+cpwkfMH8E2p0GKjwT+IqfbUZ6+tTnbezJb5zxVS4j6gj9RKwHj\r\nEHaaFE+9Wg+8UzvdoUYF64f5AfqVvsl2MN2/6u7JZBHIXF3kaJ/vh6Z45Glz\r\nikOSyqlHwXzQJ3eIVv28NbuRJvdfdNEK7Vs=\r\n=ZvrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/density":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"15.0.0-canary.a69c14e10.0","@material/touch-target":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a69c14e10.0_1671016765855_0.7148148705669108","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/icon-button","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f43e0ceb5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe0dfb04072ac048656a163c5f6cb3a68ccbff1a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":40,"integrity":"sha512-J+fudlOe/rgtbTM7oVH4UwJ9rNtf7lHt3Zm4PadX62rYdYHTk0Q+Fz3L6Dwn7W46DNtkXxIjTsTHjdFMP8pCvA==","signatures":[{"sig":"MEYCIQC8TVQKRol8KSqs+dTFy3dhGYFmB4gBKD4Zbb5Fngs9fQIhALHsrfy1UvVOH547vyeCev2fvrPbQBP6Ka6f6GJyMv6+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjohAAoorHWT68t46PnViClhDUr9eUm9XuXd2W/sZjgpXpkqO1QWv6\r\nUwz4y6psOPQ0n2LylYTJw9sjweAdSOSFAyZ60oPm1N5fCI1ZDNGP5tCsUQaF\r\nBz5WogvNu1xF2YOlNvCkHNLEqph64QMmXK7KefsybiONFjIBz4NPEvka5uTz\r\nFhPJgROzMCAjq0sMk0pA4CZjxGBVGeqOc1YJu6+kzveW75GOwDFAK7UBJylA\r\nHVL0dlQOqJdIhB6guQQT5GAxbJ7tiwriavzQCPmObG4toPZU+8KYaMm7L/D4\r\n0hQ7VNK5An6E6ev9lo7Krh5As9/H7QJTwvsDp+tu6OxYy7u2CRFmfNPevFtn\r\n99NDTEdI0BBwWuhSY7VgUF9S6565fh6DBuuCCy11sUiOj6Bd4Qzv/M99vq7n\r\n/Q7zi/2EK9u742OeyvUnrewiozQLOmzeYCdlAOjXGi9jKbeF5bVlqRArXtrr\r\nX15IVksA4cX2j5cu+e9iDhevPcOpzs5jfZDyGlhmB6eAYFPI5gee2je4Rwt7\r\nE86/KUOUqglhclSX8LuyiBT2CZ6Wo3REq1BkCBAz7pKf7nJXGK+PiETDSBk0\r\n4AJ5Yo7QO/8JUCOAsANvnQBTykh3u5x+tmps4BWNXAfYIoYRM5FprpTTMqZ+\r\n5JcE97aNaXKp7cKM5qu+f0xMD5kSEMI4bwY=\r\n=4U1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/density":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f43e0ceb5.0_1671036329543_0.2953927690347189","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/icon-button","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.34767110.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdd7473fce43aad153ef3208a5bbc1d5786617b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.34767110.0.tgz","fileCount":40,"integrity":"sha512-VU8XBOlPUS2x1/OpEconLqw1JfinQfnfaXNHsul5SErahhSRoJJTE6PJtnZ9LZQu52S+TSsZ9pOr6bwvSs2saA==","signatures":[{"sig":"MEYCIQDWif5aXpnUc3SweOJE8G9CoY1NY6JfjR4RUb3iQKUagwIhAPcH6kycou6lHKdpTtrrRftV9z7uZzJU1skXdLFg9lvV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzlw//Yz1JYImjtICJ+pqYyIyCNvcFFCAPa2HDg0bfs8xKK4HY/wNE\r\neYXsdMZc5aupytd/Dg6OZi2KeO0+rA9pcZM4N01es34cmIqpltEKqBjhui0s\r\nVfXFKz8E8vIk9+g13uXsvVolo7dWurmuiJQk+w4RB+T6ofi+Zce9Y4WbBjTS\r\nA/bI8JNNd9OnmwhBbMbzedX3UwKF3kwUaxlTT9xW5d4kGMOqQEkeGOSDxGqQ\r\nny3wz8dZCi8frpR2fZ/X8p5z4y/lM6UXNAXebJknRbgu6rJUO0lP5jRKLXqm\r\ntyU7qzDOmTjb5xaifU4vAKqnqcpuZDfL5qQgQSBe6ZNRXtWNcB3LI4E0Q3y3\r\ngw6c2K1rV45j3mn45F8SgBuw8Ei7x/t6MEcHg9Q53KCXGJHfLHJIOzz+rziM\r\nRTuuGGcan6w5u4WUKdF7r2ZM7AWXIvf3Yv5D2kHUUrKKK5lh9tYPz0LihWUW\r\ncc5YWrb/pW8ETGuda9/bxgV6bGsLd4Vc88V1IySnGK89AZvyzHJsN+Lp5ugT\r\nNwFJNk9MUWNEt6YYesuq488Nn2ccYluyAYsSdazj7rsJ9Os2lVODdIpLHH25\r\nFtlYKa3Auy7CgYqHTUMqN0CGZRkpLiwuD6FrBBHqadgGDhfO8v0skV6+fP8C\r\n5D6g1ykxRKoprcbualMD5OwpGoN/mfyQicQ=\r\n=uGdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/density":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/focus-ring":"15.0.0-canary.034767110.0","@material/touch-target":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.34767110.0_1671038454287_0.6630193351990046","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/icon-button","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1f99f3c50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ae77f61093ee5d8aaa2fccc702f154ff97bbcae","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1f99f3c50.0.tgz","fileCount":40,"integrity":"sha512-haprH9CcvMyV2T7loNRSHEB10cftU2Aab6gPgpbn0dcYfUQWRwR6+Dm9GOw7tebPQdS6K0ccqfZ+Mn6/Z9bTFg==","signatures":[{"sig":"MEUCIQDPJhtTBSPmD6jZIcruPnppZOn1VRkR/xyxUfpFKLYwlgIgNvVAFBFdQasxzuCrOERwKj5rQYjQx0OG30u4JOoA5H4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJQA/8CesPULum0fwQ2OWVZu1KAaXUankFaatZ/Brz4frimuhIfr+e\r\nQF/yiGqY4pQQqZDAHDeU7RpWivUSZWdWrlSF9ERwHVn9PH/bO57pVK0/9XRh\r\nKF/ZHA7Vu+p8xqcWtthCK0l5g427MLqt4Lo5OCpFLncDzHdSE8CoqZbO90qY\r\nICxjdPk3mfEWreDt7FpG4+gunPy0UIx5QfaOSghNOiNiFLhoiePWYnkvX9gq\r\nKG1QhGP+Y/LHBg0H5Z4KMOJ2FBv84VdIJTANxS1gFIrwclAZk2vDfxW4KdYq\r\nR/MGoVl5RAkAppJHagqE8NOlna9kmJQZa1vC+eWRkrkjPLyH9LiaWJxpy0fa\r\nNm/yfLxOxpDc11h9jSOnaeNLlVEFOwOuVZZjwQlncs6RgdjDQN983sUO/N5Y\r\nusMPwpt8AdCY3sP4Ma+si9r8IYw9wyl71YdB8pcjjl5yEt+sXTj66JgOeAky\r\nw0m/eNq63G0kTLWJTu66Mf17MWZbi4/kjYi7EPHiq0xH5P6lnQpFmHVM4T77\r\ninVuZIFSOaDuHjLrKqQS+RLeRvnMGFVe9yptG/rh4H/uJL1wYG8Qpq56ZTAT\r\nwuwKLEFMSWYYeVKGd6FypMQE4rd7zY+mDMdiU+fFNeSAL2xmRBBPvFSAgjtb\r\nMzpRKGFM5CyWSEoaNWxazBx8w+20eZTQ0Ug=\r\n=5Mdj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/density":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1f99f3c50.0_1671114368448_0.7699076272414604","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/icon-button","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cfd69490f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d26dc21448f087990fcc70e518bc62e94b7af16c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cfd69490f.0.tgz","fileCount":40,"integrity":"sha512-567eVGyzqQg9dgIpMoGOFB1pZ6ktTyIAKcVnHOhqZJAOxzt+n4SeTLRM+JqvzTENZnYYvS1+vnL3864pU3mVWA==","signatures":[{"sig":"MEQCIHej+L8wITuPce+bNG04c7kYuGUPgQ/+9aCJ/1hZ25F4AiBJFguP9Ztb1kxnylHIv0EUSh54Di0AMqt9TWReBEfpwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyIA//ZraB9NmoU6CWsvyhB/dRQvr+cb3FskOS2Y3PTbkdT/WuBj8z\r\n6JHFalDRAn+SsNUz56vMI3X3fYGwBmiM+2ccX3ptBHIFl4H/tGIHnewv3QvW\r\nmRCIjSPnrGspAMbSf+z3sN+5LKZZu5LaaOww3SeNXIMMHUw8vzyj0t/KBjXF\r\n1PQot+EBRcyxaJ8gTbT6pj6ERGCk1VsL3fm4iqlw6PAfdESJ6B9A6QdDsInF\r\nEqc2g2dbvRWcGa0X7RK4dacaN/uOuSc1JsXmFq/AKG+KxrvCN84ugwih1moZ\r\nOYmtfF+jsX0+Tw0BIneGM7Qsonhi9+0RxiU6Tj94nF/2b+0p2qD9jYp+48LI\r\nb1unSsdkuAP6HAEJbyNegyz8WUGef0VManSh8w2Ehi+QwGwHcUsXPyotpjGc\r\niuRd6FqsjUqMS1H1NcIBnaBS1a509C4WTT/uLW2Z3Sa0Iu1+k+GQ/iTSgsup\r\nU5EiH/gqRTGOo1s2LWBaCtOEe0aIVvCEcEox35I8GEFEbus+Vsh3tvEp4cDc\r\nAr7w5TYVt3UUNEh2KlsOMKt0uQJQsfdjbBDdeQFfQnbZA6zqmJ8STtCGT7uW\r\nb8b5loijM8rN5FKCibu/80t+9muGfDKyob2ROPWOQqz96SNGWcV5wCcjhHJd\r\nCuVsG3vkvtqdcWcksP7UvwsvlJGdsXRbWUQ=\r\n=aUpH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/density":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"15.0.0-canary.cfd69490f.0","@material/touch-target":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cfd69490f.0_1671221349947_0.6976526283914379","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/icon-button","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.94ad8d986.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"513c6ae55a806d432b83eafa1fcd900f033d97b2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.94ad8d986.0.tgz","fileCount":40,"integrity":"sha512-6pBzpXEgKf6fw8iyl8HKGvmCJJTchjXUMrKczzy3VN/436g/5Co9c/aDMQZvZQj3hj/Yi5TdSOR05K5c7ZwbEg==","signatures":[{"sig":"MEYCIQCABaJ7CbZ+07iZNLJ1VlrIqPTc2dTrdRo4np2ouss3GgIhAPtKfloOmsP8hEv7HaS4vCnu7bRatR6ZExtBHthLKAF4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRqw//e04WeX0XCHMhJYIhlF/+6sW4uZYheLobqZPz5F5moAS5jEEN\r\nIOiKcnlBd4DYQJSoC6tQQSoVEQVQIrvfEdVHkJV2biYN4yz3IKc2KIMiACM2\r\nk0x1WYB3BAiwDMMJ+gaUGdm7C+KCW45Q8a7icZqBnQowHG/sIthz5oRnLYJh\r\n/6dxYvNA8eW/N6uLXaKOi79KyZWnRlYIuxv0ZgYlKAbKySOuEOUdwTmMeVoH\r\npNaEdaffvQv879WKtjYJS53/tx8u2gZ8r17+jqlIGLclf4UM/NmVWpS1RJDn\r\nNL9iKycrAk/8cHIoia+wooWMts9xcKs6BkffrrOSp6ie/13mMV+4shBCiXXn\r\nRafg42YEkj4S3TJd21Xs+6/kY2TgDc2JQMCFIGmiRiH9TH+M1yFVetNOExsZ\r\n/zjFtyLaDEIKXj89RMDaGAqmKWbtAGAbXeMe+Oqri+cSWZKQlLusN9Hf9RSB\r\nqFaETy1yG4OvVQCgG5Jceiof7SlND+gmtVfIe8Jng1RBcw0cIr+m3CN5tT4L\r\ndNxmfzzAJsMwPlc1XlO2URUHotP+6XLgEa7hWLj6HbpYrYlEeNVGh4iQ+jwW\r\nznALyJC6ioG1Kv5MhYQcDeDaCOD9yfwNvXkGHYYRh+TIKCf6IglwLBRnSzwV\r\nmEZrl2WtNLxE7F9SnhFZeNS6Ban9kEJIXKY=\r\n=X65G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/density":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"15.0.0-canary.94ad8d986.0","@material/touch-target":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.94ad8d986.0_1671478063392_0.6388517914896268","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/icon-button","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.604264203.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fcafb5097cc7428830436744d2f5365ff18cd4e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.604264203.0.tgz","fileCount":40,"integrity":"sha512-e+RI8nZcFQeSZlPXzlJbxl0QDJdP9hqkFvjx5mQvzh1VUEZCo/qR1SU/t6IrmOiFU5pM2wO/gl2r5uFZUG0zYQ==","signatures":[{"sig":"MEUCIQDkjy9jMvvPo53wzg9KVGPqLSVeuY4srxZyK7N7fHbHgAIgFWSLPKKw6XEFcbckmujSY9RBj+p44j/d4P0wMWjR8uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyQQ/+NSeSEPd9s0kTxypUjRrW+Vah1ZX9b6q6InCUf+aTxjefQdiz\r\npC6PeMcj3yeoGE/Fworpuj8idu4DO3MOu/BlSBew+m+jlz8agukpLJcTWvjW\r\nLnnT2pIN4zFzIKb+5+qSsTFfMdFJ/4QUoy3rmmh0TA6mqoQx23yY94dIZQV4\r\n3B+a9hJgnjPgrUbO+9IZfggFE/+CNmWp5W+Jfq3DHtkLjYG47nssAjumSDAr\r\n/2Qw6vbuwu5fY67z/b4PgTc4wiBzCjDwrqdnZ0lxJUpNuG4BY0C8XGUq3qHr\r\nxHQjtQsXB72jE326LwS5hrYVmIb1UbgZnbov9lTGFngwPfiPyEx0GMWLIab8\r\noUoyLw3eCTHa6Eae70oYVPXxBxzM3QhqGqSfNKKJCROp2ngRcVp5OIT+eoSm\r\nQEDsw6PxhNgNUAtBquSvduX31qttlKUgLwLDt2RitDKP/38aciPpSPoovYa3\r\nvQhjNGZDUdSE+q7XaoqPHn8CvFW60rE9jIsuppAc4DNpi49Rto137qYk/4XS\r\n+FDzu3Hxb37Ygije9SlvYxTp2632i+AUGJQ/hu829XTir7+OcsXsxDUlN2S0\r\nhXGkPgieB5UDabhLPGmkV1OTGbfZDM7zo9KByWFrV0U618/LtrS3GTU4ensQ\r\nKJ1HWGxmhSzorjMclICW5OepQ2/hyVumgEw=\r\n=YT9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/density":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/focus-ring":"15.0.0-canary.604264203.0","@material/touch-target":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.604264203.0_1671658883808_0.023038968170221663","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/icon-button","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.85bcff6af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48d61891bf42ddb804d62feec686f35f5aed4ce9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.85bcff6af.0.tgz","fileCount":40,"integrity":"sha512-afZCo2cI2d0NtH0zwD1MDGfVxm+z8xE6uoddu4YBs6GWesae+O6hhlhUGg+FzV2PFQb1pZD3+bbbk90WgL22aw==","signatures":[{"sig":"MEYCIQC5c4Apg8DgD7fHBexc85b5XDurohdflXG9+QOoxRhZZQIhAOWcivvmkMIccGS1uSFFAIxmADeMIbS2azhkAd6MdaHW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7uQ//TxzFeInGV40k0nPYQpGqZ5fSKRMp5w8Thv3hktnwjH7NpdWf\r\nxx4t62AfWnvgClULr921Y3kGBObmdjPqvvCa/EhVOAkX3s5F610T2T2RSLl5\r\nRSLOCrRbyE4Mn1yZ4gzlyhr3o28kKgR6ETUVFgDMGwNSFYqKXMwZ3RAgQV0q\r\nLCU3NY5lB87qFqVJS0LiPGWegI6gkoabKS63t5aKhOsHjWLGsBBJBBqWFbrO\r\nOOSc+gxXiFTREaW++100he/l6I7UH+SDDMXD9JLr47zAj461sAYI+Q3WZv2n\r\nLw+XHBj99psakdmodSZTzo0QjnXyx56lDf42GGW1Wn74nxEdgTzxB/QH+QIO\r\nQ1W/6TBW10wGC1l9kGaSOzk6xhzpRFsGi1kMDiNtL57stubsKhsquj2E4fXE\r\nxuECes3jN1gw+BRXX6seXqfaJEv+CZSSxeQD7Lf21zKAbSJZK/dzKEnqkDdE\r\nouF1fztNmH5WGPMhnnoEoUS0JToOoWVC7jFJT1YacHjJ2xFT2T+SXs5Xmrrd\r\n/1kf5XaLACnVproTzCLuk0CI7XX3Q9+adCa8Kjn41h08duw/MMFz1cYw5Tof\r\nkq6bLO4wDwyIjoy5ejDrTUUk29cmoBxGG4WdQwRJyKSvlropw+Vq7MEgaoF9\r\n2tI/qDRo/2fOIkwXy7nrIBr0LQpXMJsjuh8=\r\n=HJFQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/density":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"15.0.0-canary.85bcff6af.0","@material/touch-target":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.85bcff6af.0_1671704748208_0.17979666079120293","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/icon-button","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ece3e8d21.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"580fd7aec96906044e29a5428c66f59b8b925049","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ece3e8d21.0.tgz","fileCount":40,"integrity":"sha512-8FgAym2IegCp/4YV6Yi93cm1xxIUF6Tzer2qH5gcD38dYF24Yk9k/gn/EkwUMZ4bpf2SnztROinbQAv9WoVAmg==","signatures":[{"sig":"MEYCIQDaiLKACAmvF8oB4A5B+Jbrr7RD7Tx7V5GPnlgqmXhLsAIhAPIqmxysbajSGWOI4qxeYAQ4GeLALPQp99fxEN2WUuqe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJARACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq13w/9H+JUPKpurmW3rBwdhIHVLIa1U2y1SNipquvtqVpkL0QM+pcm\r\n4xBPkzrjVlWDx76n+Gwdy+dbbH93th3l2LofYn15+jaCeM8w8NTtlwjYp66E\r\nJo7hMH4za5Wp/BegshEVYDG+QFrTnqyJnKj/4zHZu+/AnWDm41MRgK+Xa3LD\r\nG1erpG3wgfzpEp6mh6Xq4K9AMojcSJIIbyFIesThmM02t48xVLByRVpYQKT6\r\nrA30IigTH3x02DkAT5Isn5EOjlRICBARJDsSSOfE77vSzOLtCXbfaZWa3/5K\r\ngnOh9h45CKH7iMJD/ry7R/OthVvjJ2rfpvFfaAjJRgeiS6iMvTbwQtBK6o7Q\r\nm/ZkBJr4R3s1a0v9kDYcmfLEXq2BAOLjnsbqvjQxYkBvp0ar6/OCU46MjYIF\r\nXNed5r/FD09M3E07dJJIeeNifcihp5iOPAkWWynJZjCD8J3bJBzvNzcQZHi4\r\nR1OwREs8l1Qs3szW7ubZm/g+sTz0Em4C3k7BkVfC5wUZI8LHO1xQ9KSGRjtW\r\nQvaeHdTXeBGVXQ0G4t7WYe1VXdIC778Nf9wpMsWFaWWrCNoDEBkJr++ompmp\r\n7At5wk7plnHP+9ow0NJ81awS/tUORNIaBtOj70+vmDlkjrVh+Xjx69KdeStq\r\nxa5lcmXHj269IPtLczj9zkquHV4REMPd9gk=\r\n=JBzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/density":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ece3e8d21.0_1671729168918_0.705945445389184","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/icon-button","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.278ad53d1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c125b4e50e4f105ec6e1f024af758797dc94353","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.278ad53d1.0.tgz","fileCount":40,"integrity":"sha512-M544Xbmfqy9IjFD0CeQ2neXUfKDRfAsBvk/z3t+GDe4GKjszFmwo2kViJ5zYqsKqGBcl4yKMat6JZEISF3PIpw==","signatures":[{"sig":"MEYCIQCUNrCQ65QVXgX+6gqjWucfJcNuYY8pD3i8KU1tTtENRwIhAKyWvzDt8UXN0AO+7pz7I9rqJqsnDa27ovwruvmuz57Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTyA//cHI6Y03TBVRtqhXIwLcW/K0wf23V4qRqhbRYWhDFRG5f+LKs\r\n9CC3l+hsRIa5hh82fNYzB8OzPGtpEm6olMA4c33MWJtJHzr7YGxY2X4srorM\r\nheQlk4CNEv2s80oV/XtY8ZtgRLKBJPIDLJM4cvvZpom7KVRTfHHX/Xalqlfr\r\nvUu0bMgUmtp4i4Cor2zK49usIbcG8T80V9oIa9QbYl4g77GN8y5DbMdqkCou\r\nMU2tCKPyeZNpOykjLKBK4rwzcj441GHSVLsPwecHaM69mEk/wbtPnhf7oRA3\r\nbTclQbU67KE0S2DlFscHGXF4dCUJE05NNzKVYCRffNwXcFUdZOryQEBWCacR\r\nSSw8EDDr+HjumL8phcP+d+Y+3xWenJLelulyqAotr+VGwQYZB3qabf/LCdg3\r\npopsxRnFUfEZbyuUKMUanm5XrCt0Mg6TJEoYUiZE8a32RMOSmyWzO1McP72h\r\nulfQMLh6/giMIUmG5c3dlmqaojNHgiMF0XojOtyQAWmOUUYeLLKIU/akzydH\r\n0z99+MaPu97rIIkz1q4kFDEX7xGaNZTBOseiD9yd+vUfU9eUi/ihbAuRkeXC\r\n8Ooi4HnQIKjEUX64mP/hiQPVlQaZWaGWKQYeXGEBpG9Q3lUHmuF1eOaR5zqn\r\n7UoXnm5pXUpegg9tMozMgPzKqdeZ/GIwBJ4=\r\n=mK1D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/density":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"15.0.0-canary.278ad53d1.0","@material/touch-target":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.278ad53d1.0_1672160744163_0.5347720847588433","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/icon-button","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a7d8389e1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91abba0ef6a5365919c0b0986ff8dcd2d95dc769","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a7d8389e1.0.tgz","fileCount":40,"integrity":"sha512-7mCutSbQkN+ubPOPCOz/+FWUxXRiMr+P+GaLnXqtYDgeqMwbsY4/3dHXzzGvZrcaFjrgVEU7XiRoXZRZFw62rA==","signatures":[{"sig":"MEUCIB/oLj5qk8s/1hLZnUqjaRHB07MvLboYWsh8KZySz8guAiEA5dMOc5N5/7O9JinKhFujY9ACmuaSkGkPo1YWtrpX+zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0G7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozqA/9E6BNzXEufKngpCxaO7LsjDBci5vmYkzKAC9QBD4xUUNkG7pg\r\n2oEKU9fC7ppy/Y4c7BqyQiDWG6XYDNWvL8Xjfg7TD2DEgSsgTg2rSy5UrCGp\r\nqUu8zW8AhMGBU3tE0tDBkPY79BetFHXj3fXtKem93dfL7dLoi5q4Jjyc0JS9\r\nPpmHw7DMuxT/na9yrMEnDs3ZMYLFs5PnqNGN2QH0G2J1yHGyn6r6zWL1ZXdV\r\nxNhnCO4iT/jDhL4JG+7hO29cJDbtGAuhXFycPiQADVDPAPe9yRjZfpHbpnuO\r\nig0iqzwZmeyrufIDtP9VSMDzgG/M1v24NN/XJ7KJDVKtsC677Zjq971gp2n/\r\n1vGxdD+WOtavjlwMukVjK63jWdXFO0OzSXWY2MTKXcYJkw2nqWh5b9J0zOLm\r\nHx2PPQa5oOsOFczKWa745YIAbLsRcwI2Y1LNt+Z5D/X/JYrf0jiu/2XHdqh+\r\nJ0+v17bFT5TyJvsAOO2oZ8TNrl3iFZfn9wzxxBTa1oW9fl5osU065L4xJ+IE\r\nUEAuarUwl8VcBl9XdLaR8zKVKZuU+XzK5SgJf2P2zPVIWXLRh/OElQtP4AXC\r\n2FBybPIB6WsHTTIqyb9oCKEcyGO6Y5JpwvEbW1qef6bgnqV2kOUAtjIBSsbh\r\n8zkGEEk/uBKZGvaauK2onfb0h5CykbO1WbY=\r\n=UW7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/density":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a7d8389e1.0_1672167867705_0.38124194117538424","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/icon-button","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8175d5eff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79afd689dffa9782b1173c658d707b460145a96b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8175d5eff.0.tgz","fileCount":40,"integrity":"sha512-nIBQpHfTTiIfS9mD206BRSz1w6ubQ92VAU74cxiaJwt04ApEM2PiIvJqZ8yig2GOAT517mS/wJg5EjEmuMkqCQ==","signatures":[{"sig":"MEQCIHGaG2NE2wztkrbj6nejymfo3aNh+tm8LuJ6R+tLvW5gAiA2KbSGKhBpmvBRmibs4iVwxgije2vKVgjCptjb2WWPRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNIg//Qe8ODdoTYrLNN0hyKoavRb18N9v9a7rpkMyQ4pIY5jH2sse1\r\nBb5tmHZvd4laRcLGGgbhNAEmzBS0zIOaJyBYA/DJ0FEfFaMZ72rNT3IYBHHr\r\nxUV1wmVLx1TIOOuB/BC7KVFZN9iQ5eZLn/b83wxayUzZVeemxhQzFfjAJgyt\r\nH34rmBE0Lk2nGp9D5Mu+AGt+5KeVofuFjVdpRCyTDwlT3CGABG6WkzKVrCHY\r\no/9N8A/7Kxc7DSc8SQGxdoNhETnBh26By8Uar+pxpPF8ep3wEgMXnWz+lGU/\r\nDDXXCBitLYfIm6s6wI18e+Cl4++lj93bM+f7mhOsMdhQrxlCXDdqpsIZ41z8\r\nyf2JEzSoQwQZWlwFt5u0AkR1oa/zjUejZ9hdHryTMA0owzvT7j3lVUv/zxu6\r\n5WxLbCNBYJ56Xua+gNcou7JHxrv1xtveMp/mTt3U3LAd9PteaQGrpt8AahrO\r\nGZBE1j/pOTp5nC5IZ73jZT5f0zQ7Fk6A8M+qfMzH2qULAX1XO6PrDazL12bA\r\n3J4Op33vNAY975WnC8kJsVpeyunXpT5vyr7stJXo+EhF4F2utASFmEX+3Y22\r\nNSyzVtZZQ7EpxqmZwoIOLBdF2gYvLcqDMapNkTwZqly3rp2e1M5l8XwJXzjZ\r\nJm5GHMYx2HiJg0iHCFBu96F+on7QoKxAVBs=\r\n=RmnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/density":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"15.0.0-canary.8175d5eff.0","@material/touch-target":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8175d5eff.0_1672192337924_0.07279865515364659","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/icon-button","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e21dcb86d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c4ef1c7a66b2b1dad03fb699a279256a6a99cb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e21dcb86d.0.tgz","fileCount":40,"integrity":"sha512-3Y7h7IeEDHf1s/z+urYflms8RxEVRZgw3jDEUmw0iMJt4Xss8JtDdwJaTerNwiY+Hs6AXvGMNpAj9FkyfeH79g==","signatures":[{"sig":"MEUCIAth0/yA5/GYZuIC7ctW/YJ9WnsPhwbGJpxJI/v7vWm0AiEA6KL7JZyg3sRp2X1/Hw8HB4PGRGUvxpqr7ju/2GO1OEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEPQ//Tp4lEZ+WundhaBgq4tZaA8nvfTXsR7CXOpQjx1Ds5oRYvGs9\r\npjIzMvqxRqcOcDLAu4kzzMj5IcCUz6aL6LHkV7VAG/2c+Evp34PmTkbh1Z7a\r\nnkVZb40g3w1Zc8d6jN4SFH+UFxVg2VhRKX0p5CUFxB6ebF8ouQUiMtbS3LTm\r\n2jpKoo1uy8v2RYwcWIP+VFhr+UrkGMf0MgMVa0spdUVgnKFrlRYj/gHdUBqw\r\njAKRNKed4r+YroEDzfGflHhqh7KGpptoOhPdEQF+pSG1qgV0yCdyu2ygTzaR\r\n05OBcTkjSZ86shgiFGKmbdHQvm2Sfh1KHIEb0rM/IOtwlEQTJjCnyoIY8+ok\r\njpxnNBcdBnoYc5iwaubiHuovaCdQdmrFIJAHgVlzJne9eoPXzk2+IedysmBO\r\nvNLa/YQSCP6jCce2SbuqlfXmQ16oq6WfPiFip2mteSZ3DoU3o98YMHGWWGCQ\r\nZPg1qCWjVeaULt4QYJ5g21XI1ZgE25jZc2JJXAQRJKj7wgy3LV67UBSaNkFh\r\nPVqKlrZCTJS6Ngi7Nn+8bVFQhhL0AuB6yny+UtABjPwvjqQ3cQYX6118b+2s\r\nB07wR8e4mPzVJiHJ5fTKCTRlAX5C6Rk/tv3GbiPBhBlUjfJx+GU6zNK6V/ig\r\nMwZne5rk3H/70edciLGgCH4Dw6j2zj8u0eo=\r\n=TVKD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/density":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e21dcb86d.0_1672322569409_0.23989571844768665","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/icon-button","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.20ab6f5a8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02c3e81a5576285d568cb3bcdfdc388d04d1818c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":40,"integrity":"sha512-C25q/QErEGgcAV3Rsn5zlodZ7zj84toKsQRt+wXARZIICJBHh605DwV4/sYE8cOt73f1CriULkRIFYwd/DonDw==","signatures":[{"sig":"MEYCIQClXaeoQ7/r0IpyrRl5yPXipzF6Pi1ni+NCVOsqHrgTwgIhALPPnlnfyRdSvU9Bz1UtXJ/eqw39zjIHPeAViMFoedjS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+NRAAnwdLA3Fjhxb9mtoFym99fpI8GvBFhJ6FaZz05CHPqo7HGYgk\r\nY3D5ySrnZlQtGEG600zLW25qHP8J/9HNiMBPHuQmmrmuUjoFR9i0lDyPt95k\r\n2wKjYazXw5E5X+ZPuXWPas2SMHSEsxYdDnXQgGjAgE93eRJDbGDFCyscYYJL\r\nB/ykJHtgq51IN+SGRT5roHQ9nhSalb3+jUwWzgGbeztS4fy/p0mrvcxfUGC4\r\nUjPL7aM4/gD61wzkxsUo7d05sc70ROwEw9r+wbzMlGayd8bHThzMErtW2D7g\r\nkQQr1bdGVC1a5iKCm6rJcOB3IxLADMgTF4mmSAoIBVRRsjxQeNwh43t0fQRb\r\nZZ3fabpCHS6Bq4bate6odNQSJ9gIp5TihnIGWlewuSP61yC8lWftyILkQM7U\r\nJ9yB8deN+UvgFz/zpxqPQxXxGfHR7l+weOOMye0SPeO644QlYXgMMxSbQRp9\r\nPran+7SFOfPubrCZuFYp9eOnK8HEX60UXUIJQAEWLcuiytWXZWPE5aVHzxB2\r\nc0+xn0e4fcuVTMcGc670pZkisT6sFOHsUJsFlqWpPtzgY9dMjm0LE8DKdGdq\r\neU55E7hspAM6uSXsu21mtqRSzyUE6JBRrGTmD7PnR8rlc+7LjRy7jtLlZH9l\r\nCJd0kjZtc3SOE8IXfdUu75SboYIoY4uzsWo=\r\n=RWCg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/density":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.20ab6f5a8.0_1672342893314_0.6615429360813225","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/icon-button","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b9806f623.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3609f4dfb19c7d27c122a8960570cc0c1a5c0a83","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b9806f623.0.tgz","fileCount":40,"integrity":"sha512-oxhvFRh77MmeA3caT+VRad4WvAN0d+34vvEeWq8sBEfSL5wMEIIzuU3/Az5Dr9b9JimGtxwKwey8Nu1B5QwNmg==","signatures":[{"sig":"MEQCIEvJFYydiFTxuO+G410F5O/+bZjFKLOKUS5rtkCgfYKoAiBwkIbIUa6EGXZW5nNVfgyXWCHb0EWNKYaY+Y3IMxcf8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh16ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq2g//c1Eus+ARrp/zQMpMjMm8zfoY+VPi63ANEDegR/rQX9FM9u93\r\ndjg/374j3w/m1RuK9pwft6iqXwzctdROe8xhtRtG1WTKAzcrUuxqDVhBdqKR\r\n2scpv05NrMnR3T8RSsZGG/vxOQ4h14j7r7ZSB4CQsatG1+oJbThn394Yw85b\r\nGbTrg7E0/hi4rGB+xhxxL9Fqh4LCK/I34JLkaO2r9EFyyL1c8AD/ydrpIRIY\r\nQ9/ykszjTlh/npxHUfQaEuzMsi8C5ynu9FscRKNCMBAmSLQpPQBivZLg9hDg\r\n0h2l9qul97q2v7UwN1ET2+pgOedqd1CTPgH37LHt0eB4uMboxGmsjPYjFLTW\r\nk2IyiwYW88z5OGn04u2fTljBFPtm5p7iDbKmHQgYSKlXprJcYorEDcGXQ3fg\r\nkC5Mum8igxsEr34tPj2ImzF6wGo8cbrpu6poXe462rW0HuaEr2fKvQwHTi6A\r\nEjH669Alm/dZh3GqXkJlppTc3FA5bhNj0MupERecHejuJp8qTlT750ekxyoZ\r\n7kV9PUd5AaJH3TSeT3jN2L2yBTK9+f4GH88qqGvhXKUU1ODaGjHqqJ4EPr1b\r\nl3Q8s0jaKNbjAwMbw1HwtDxTsUVWNKuUR7lg1oZxh8w2tmC4VLUSlZsSDqdV\r\n5IGgq3rzc55+mouwwChgGuR38bZlK7nEwPE=\r\n=qg3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/density":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"15.0.0-canary.b9806f623.0","@material/touch-target":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b9806f623.0_1672355194210_0.007323847549005613","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/icon-button","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.50c9f550e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7deac31d6db28375f796c867b2f9e5408d03b19d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.50c9f550e.0.tgz","fileCount":40,"integrity":"sha512-d4/C0VWbqeBBqYyCS75gwDz8BCIyLfEEm++yjOuUf2BjIHUTrYJw9/GSpPRnpHb4+vJQgSipm7mTdJzZpyTRsA==","signatures":[{"sig":"MEYCIQDLRHTObGoLz7+eYeq3MDWuXqD/p6meeJ3YQ2/qOV/wlQIhAKw2n4VZpu1ipDw2CMv4GQCdK4RgvVSY2IZNpNjmOrST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6jhAAixYQ2nIAkH+jtfeDx8NCF070tVCYny+lSo1byYwe/Ee7AZrJ\r\n0z3NYN5OP/oOWEUofmf/aTlUrE7t5sZrg7AP5hV75ala7h7sa+eOXktCxbLK\r\n2sTaz2g0gIdE4+VsEP4WxoiPs+RRA9QMlCGAqc6W3ktVmqv7yD4L+Lx3Q6SY\r\n8VvK3VYzCSwYdQmTT3+IF9iQURa61sBTIKi4OeBOT+bAJVivh9KTWTl+RWLq\r\n05D/ocNtVHmwmBsqvCwA99GjVWRmlbla2t+KzNfNBRv8n0bOhODjqz+/3FIh\r\nxihw/1Ox1cMQAa2JcuYBtqRp2niEf5bISYYo6cFjiIz0C1z11MO9L3VgwfsZ\r\n7BuiD6Z2xvOqotCMuYhsrMYJw8a2fVoVXAXGJSfocsFiyYB8R7WU61VErLZh\r\nX+Vog6RWDOqKK9uz2AlxSc+1Q288LT3o2lYMxxiz9m4duvZVj1c20rU6XWyT\r\nopEGU+fCMkgVmv1a6w7NQFjvHl1OOdgIttQPqvZr4ums85mEJmq7vEIWjgN4\r\npc8kTFwSifiQFFWJP0PADTZdRHI1rZnr1wu9bcPzsKkGYGJwopTxs9rv2MuT\r\ncA0tFaXVTZlTyd2v9WyQX4wdqajXf3KkjzUZLSZ5a62VjGuMcX4C90vtwWfJ\r\nVYWqNcfb8t38aEWtzw6ppxG9SdJbo9vbcuo=\r\n=Q7yB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/density":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"15.0.0-canary.50c9f550e.0","@material/touch-target":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.50c9f550e.0_1672760896801_0.22270692187191132","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/icon-button","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.af490a848.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fb992f88597b8ce5d32ed7fe280984130faa606","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.af490a848.0.tgz","fileCount":40,"integrity":"sha512-J2XsXTK1MKGWShuDkWO+Fwq4bW3/dZ0MHnd99HqOgUKbhokcLbA0JcFCYxDzMlTCorLmCuaKBakkGIpPHQNxcg==","signatures":[{"sig":"MEUCIQC+vuXyNFi5lGgC7eqFvdjqQFp7mR6IamtCN5s9t8AJoAIgKmDme1/JIiUKoXsfvHf1rKlcm41IzwO7Sfa7f/ChVMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO2g/+LRSNhlZl6+d9Yc7mdpIhKnq806E5QyMg9Yqpy3E+u3r6QvJW\r\nbJwaOpJv8fQ30jBnl/3XbOx26FgLlH1UwhjA0Sy2N9lTqTmEsAcklGzcjLTZ\r\nF8y5yd0loLHQ1r0K9LdnYJPD1pooJJYeizikZHZ/KGnPIdwxa0E0agGRZFve\r\nkb7oJSSdR0k+Oj72t0MyiiyfS+ztUQ0YudVuIai08g0B0+DZh0xHq/vuJVee\r\nH9UBahPhiBBICqiMda+hw+4pWOWmF78Feoa5PW+tmHgKY9dT+5JUf9YzgbhL\r\nbFykkSh1qR9aWcup29bR2Twvo67sHgezmAjJn8kXuCs4xNibVHzN2URkAmiE\r\nSeJBNFT5zFvl/x2pItTFM6oNHSAF1yCdHni8o8+WBJ+6VSRAnuyyHVX1iz4a\r\nDTctqTOYydl5Cdw8ImEp6oplmKdFBEu55wJbGflaTiX59aRofCrdTBGir+cB\r\nd4/DOxCSEZDjgrihzxfwp83zWDldnd4xE6kc4LWiwX/hpjyshoq2zmbtdWeL\r\nZnFdug5iSzOj4+fPExWwNY891W/Me0k8eTsUcHpGtRtjWKKLni7hxKZf5Xqz\r\n51BCeMTOddlu7GjymDrwMmfEB0XNaG51e6qIttmKc3SdxsVDXELnp1jjoG3n\r\nvzCWBfvZsNs5shYFUL6jNIqyw0ToFKQCJnc=\r\n=PAoM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/density":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/focus-ring":"15.0.0-canary.af490a848.0","@material/touch-target":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.af490a848.0_1672761488145_0.2882667245555737","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/icon-button","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7cf487c98.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fea3443a3b977c184d37ed3df7092f3f0097ffe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7cf487c98.0.tgz","fileCount":40,"integrity":"sha512-wm+t8rCeOxio+YlwvKNYXfwxOzKxvRK2z10KDIREmDMEpvSRvb2Arxb9Xri60PlnM+MayFoat9yjrwa1+hnYPA==","signatures":[{"sig":"MEUCIQC6RSXk8tJ2S0dBOp8zB06BKP9g2WFp3hHCCWsc3llCFwIgdEHk455lDluFe4jqNoDpqevC0jIZScQC8rx2I8GeSBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0vRAAmUaDzlnpiCT8N0LUsG9WgkguoHZ7rsWWXJunxmCmikRvVSyt\r\nDUZwOzzo9xwEpqkHOFNAA3XMx2E6Digs3pbw2YkV0zxhc2TgkBgllDysxVrc\r\nSzIEIFGhtoVz6uw3XSt776pBjQq1j6ADYPtw0tWh4gadBqtWubGD+hu4JPE7\r\nWseaOc4cFHal5gvTxCxXNBqISvJd0R7QcEyQMcXPVpda2Zybq20uHXx75jDB\r\nXbtk5KxEksxRO8/qCtr5lW8UwiGnCVk1iIR5PtvfJM+kSASLTWJzvj1O8nvm\r\nwW4hXPKtFiXbcJJ1tz/fzLRNb8OkIC6ZrcPiiJXR3HLUb0Qx9/OtBB+s4m4T\r\n+f5xErciT1r5pMMQuxxp7pVfIwf6OF6ldnu1ORtf5y4gZy+SHaUZqcxt2W+O\r\ncVVQhh64mPVpS4f2p4pUPAbjpS4zNiohNtB8fY1igaNo+3xv/rAzd6RA3jfI\r\n7/rflGLpcjd1Q51eR4kP75SaMAu2k6q8poWSgosP062MpQucyL5uAhU5imko\r\nnDJRBeliMPUzrIN198YR02cFWr7aHq5xxHj8soKwCL2L/YnpVPc2BGl33cCm\r\nSCeUlufv5YE2OS9OznttbMPuPPfj3tupCpt4K64My/O1IsA5qgNxNPH9C0P3\r\nVu5g+aBDL/fCNuO8AF+w+JD6kSeVK+VTm/o=\r\n=a2na\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/density":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"15.0.0-canary.7cf487c98.0","@material/touch-target":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7cf487c98.0_1672767563874_0.8402235212211469","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/icon-button","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a52be2d5e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66af00c399017d93a02d9077d4ca83eea56ae304","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a52be2d5e.0.tgz","fileCount":40,"integrity":"sha512-wSxuIIQASe6y4lJ4Q4FzzWQ/O0Adwtngqe5F/GPBA98QFd/d4z+oLFniciouw++FsIr+TbJSPTSMfIJ5POW97g==","signatures":[{"sig":"MEUCIGNxlGVAzk2PJWW35cI7RA/T354coq/3qijv3GlRbUZgAiEAnyX2Zg8ACGrv9euh0LGZdzqXGrYWb2n5Pgr1B4z5kYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5gA/9FSIV0oLssdc5Sp+Gtt0ElR+lb21rGfzdpuybZayQ5o3RTyWi\r\nXUYi0hIS24c3m22xl2OobF/v+iUJGZHbP15qxeDyUmcnzAJ0e4WcnvP71psr\r\nEcwqBvbzY7QjSHVXl/WiLp7YHbkD7W4+C2HkK6VsY7z8ZzIAWRH+DnFnF1q5\r\n6LuVUzQVr+wGb6W/iL6jwYfs2ilUpJ+WIQdfBNxQA1zW4EXa46tY0Gm36WPt\r\nNcFPuTQ48h/xM4PTXsk+YCtC62tsDIUEJd+tgFkLrYjIvgw3YCo4nW0CocmN\r\ndAjZcoeiL6keMVsuiN3CgN/WiRSPLeqsdNZxUkAm4//BZMskCed9xXKozFAH\r\nVkL5nO15+GaTSa1ryvN09oDm28CNB6ULbQuE6dW0NWvH9gCCORUffvF8yokh\r\npQsb77OUQXOHn9C/labVfgyaqHKN6xInXw0SBX38ffzM4eAHeK6I1tSijbU1\r\noNjX5xMTrcJ12sb/FuyjlToRHXjyUWSyy2GIdOSBWrkqA5RhYIlu1aJbVEZH\r\nr1zEfkjFjBPx4xo8N5C69K3ZfL/t1HEkiHBkVqLpSVDI8BADIkiMGLQfVKuT\r\nhhSlcYK84BwnDzUe16r4acwvb240zF73h1MHoO3ZHI8g13h1kPq5g30b5hsQ\r\ndhdasUDh9wPVXfkEZo8nAcVwQ2e1LD9Atww=\r\n=64GM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/density":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a52be2d5e.0_1672773226173_0.23262532711665962","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/icon-button","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e38ba17c5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66bdfa1351af70ffc82f66a14bb6260771422b8c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e38ba17c5.0.tgz","fileCount":40,"integrity":"sha512-3RygyieEfOwpssSVBojeYQ/ZacbVAd9soBv5NTd7MGf4CVCMcsjp8NC4EexQbDdmDTpWIOCIT11eyMZ+z4QxLQ==","signatures":[{"sig":"MEUCIFMO/kjNoxLWVodg5aJn4p0J9Yn4XhgJ2OA92xDXdw2pAiEAkfF351TCDgTJkCq/ItsgNoweFoAAMM7X/2KWetS6Rdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvLQ/9HBV2RiEIqZdbxrTT3LN0guvgpXBFwDFWiwuOlP1NTjBE7jBX\r\nC8ywWMYUFqqkzX12a+7R6GrMjjGNg6N9aWYo/+sQF56n/E981lhRp35DU3mI\r\nztk9FNOJ/pslj145qrNsL1LfzwB1v3DXhtMUTpLhOVqq5By3KN/txCeYmyiV\r\nwIRK0J8WWasQvtYLQx1tFvbpmgHazz6Lg9Bb8mZ38UPCa5jfi53JO+GNVaG9\r\naAoEWXUVF0Ur8RsuOXk8y/YclPFB3dgeyVVBDNttctHrRr7R1ZBDtQnDmynt\r\nO6howXAUvfSobeW9afWUz3+MtLwS4iPBm+gj/qxLdsyFbg9j6KqWmJrh8o+G\r\nyzv/u5X80T9hwUcgVNR6rsblYWOcYA0BdsO//lIapLNixTLwLBn32K++8QUQ\r\nH2HYCxIWqIEwXnd8S6qn4//xmkTMIyxEzG7V2oD6O2lH7Gi77f6JXF4fzliu\r\n5VettTAaH/KB301F96Wc1gf29GTDsvGx3kIyNtZ6SWd0J6q87R/zw+8wQoX0\r\nAkIuxNq58ssiMkcucfclZhq+RWOdn7m5dN97fw3hha8jH4gmQQEB3Wk7FCwo\r\n1WDvwwCtERx1ngEncySgtxRaWmaI+sOdFWoNklouUGUkcDAJ+f//8O0+pvg2\r\nWmOyvpH2cjmJ38SFj5tpYjIK6efvoef0bI4=\r\n=Rg7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/density":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e38ba17c5.0_1672785173777_0.6901309235423472","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/icon-button","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.49041a6c3.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615beeee888d1981442a418311fb0e50b22837df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.49041a6c3.0.tgz","fileCount":40,"integrity":"sha512-pjco++O8GoSLzUwgsaDEBOrd3xjYDeznZZumG0qundE7zTUHPZpZoaxI7lSjG0dH8OS681+P/yBcjbvI+GHt8w==","signatures":[{"sig":"MEUCIQCgRWUV97w5H3HxCV+xrJnxAM6fUNL9tF/dHUQ9DNlS2wIgR4CE/HqUXx0vS1yHl1oflCJyRtjJqZktBGy/xLV/rCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZi8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1cw//ZqANH6Oonwx6RvBTZrjoXWiFaSYpZCt7gLXzf7HgWXLFz92B\r\nIOi53ahEhXmD4UVwmlJ6qbVZiUVnQ+MY8AOgi1k9386LmaY80DUTobIZw+qA\r\n7po51FoDoRCVL7Ase9MBt+aUrfXhzuzY+hw1hQq37m8vA7vRYZGoAnGCnfxg\r\nD1rJ+X3Lj2yFZtUue0MjfUqZjUK46ctxZGvu3mBmVfY+7NYbmATdG5kvSUJ5\r\nJP0Tnl+1PdPnrlmpRJiJ71+pctvL7rr4Uftm/n0VBkcofOyo0An8pMAIbFr5\r\nk/J0SAiNxzzOWlkzZ/AyPaB/urwr8pikl92Hkw5z7B2bhY01i0Z/VmssAl0/\r\neAzX14o0WkaK5f5AQi2P44389l3prYbkntCxzcYhR1q4te5ZKw8dW52MgIzS\r\nMvNO95qBb+AvYNLlzTesmFqEtZ3j0bUMdn10ZouZWlpAO4pVw6AO+LlFTqmI\r\nW8faF0fdfL5ke7FEj31WFgnuqONqiHofgo8mPN3hlzCwkygYbr2QXtoDoCr9\r\noymPYt2bCr7b5/Z7O5uqQemt68SRqG3TsxdRTGoPqEgmlP2E5giGWIvEy0rz\r\nHjtGQ805LsZYj0l3mD9cIx1h9pf21bycT/GziIkEHy0rQDZW57LGE/m2974M\r\nTvrFKBqDGOLlJVHzPuTYkXKqf+mFYOd4PX0=\r\n=3Orz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/density":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"15.0.0-canary.49041a6c3.0","@material/touch-target":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.49041a6c3.0_1672845500174_0.7162010356774646","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/icon-button","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c492898c2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c82dbee7bfbecffb7e385273196849604b1c9ac","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c492898c2.0.tgz","fileCount":40,"integrity":"sha512-Um8a72X4qR1bylHkESKINMQxA4t8VJppiMFfU5QyWB9PSyZDzQypwB/DGnaBLR8cE+v1KIOw/5mCpeb2wcVi3w==","signatures":[{"sig":"MEUCIBkRYNX4Ku7IkFLEC1WXmKWdGUzB774M3BOuxdYuuMMeAiEA/iipTBqEgOoGIu0XBYg5BW5I0zwMuDbUZuTrKfvViwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYEw//Smw3U1sQfB/XMVJqtPKbzQT7JzhlpVHLS7UTlF7N3tyt801H\r\nyWiwSHBomY1sGUYAxwZZ+JY2ibjSQdVhkDhlfd0o3odmAjzGaL1IpVvoGgF0\r\nCjMhvIqWsjEF3D4bRndm3sTvuosD1scaFwxBc17iFw2cRcc81KWfM9YEjMPe\r\nCSP45fjOFD5KgNG7uN2orRQ1d6sNIzj8PJ2QQdOT1ejQLFbuNWgX4/0Z5+Tb\r\ntjbgrK/PfrhuLuc+SXlWizPGiwtioYTfch6PeNo5zFxvCS6uVLG3uSh+Afgp\r\nvzlOU3iqQI0iw9azuzDKCV7YSZ1RH4NnUclgqRGIU84M2160bytFcAvahlAZ\r\nWKjyHfwX7Tl5OiVeZPoYuZaJTGiRS3OMnTAlIFKia+yFgMw8vVybSAzvY0rf\r\nKF+GEQRsaNtwfzw7wP4mjG0WqYpNSBXLHY7xWF4atm8ZZJl4wb7B+XlMKuLP\r\nDl+6efW79BSIAB9D6WYvLt0PeyOotJJqltFg+Y9ZNEZ14kPw3MDVVUqlX8Fh\r\nm3QU3HGy1Pb8m366uSR5j5ChdJleK4QOHitKnjowxHT+lSsoNMNmhH8DFVFH\r\nQ2jqNesYNYaC02P2E6IN9g+oCpc/YgkxT0PqnQtuKmB19e7qTp93qzwDzOhy\r\nrFLrDRNEQnlbXsEKGMlwxqXb2ku5ePTR3dQ=\r\n=bmp0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/density":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"15.0.0-canary.c492898c2.0","@material/touch-target":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c492898c2.0_1672853861858_0.8142585428704745","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/icon-button","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d7a2277de.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f57ade7f0f83481616c8db4710348ecf64ee78d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d7a2277de.0.tgz","fileCount":40,"integrity":"sha512-s+lZB8HFrLKHTm+JiaSgY4s328kqa3TGA8G68VtA5C9mxFfk7m8EbUiYEaziex/r4b9n0hG3kv0EgZ0Em9KiNQ==","signatures":[{"sig":"MEYCIQCWt3m0dGt3EZ4823clN/OZrBD4ThdbmZCNa2QzcNcQMwIhALGolaIXgeZ1QqSgJPlVx7MprVDUt6VeamLcLRKT16F1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS6Q//W3ukKb2b6SGK2iiOamgPR5px+gb8TkjtMLuz5dPTRvbY+5/P\r\nzungU0fVM0ZCc+s1T1GIkQH50FfQWlBq95dhtLTBZTYIMyEiw0uXtNfBhKwH\r\n4P8u1AgH7PJzCARhr8UZ3TgnbF1gW8kOIyUNU0+vCSwJ8rIqRaUjLIdWAdQz\r\nwIpMN+OoBJzO7unGPQRQSpwkTa7+kJ0TdGJHa1N7KYHYmxjryV7aN2+Ssof+\r\nYuBP8zP+5UGpr7gas623yzCludjTlO9MY4OOLiI4SU1GZ5n0Y225DOujOmhQ\r\n9YdwbmoPshaC7tgrpHoiOKcujh3empViS0k0bXUHl3OsnQPClLEl/z0YR6Ux\r\n+CN8LSk5xI0T2Bb4yA9CguII1FhSPQj3/HdY7ReVf/AfBrG5l9cwo1QLu4R2\r\nbofD/6gD/HXw/yznvlGEaKqSBwo3EyYPINpDgJ5M6QuAZnHrjE8zYngr2MTy\r\n7Ivq6RrbXu5I/4ceCJlfV7T5A43CBYuiKAXMuBlUS6ZjEr1t5QBCj5Mct/f3\r\noyZCBJA77FsDLD91nta7KW1+sj92U0ihjB1mEh1BA44YQGdJ42jGHU30I3XN\r\n6VHxYWafoypKI9sqMHOj1b7AEp7TgdSz3XQcL4IEivaLzZQ1NaHWLPiRviGd\r\nk/F4UlEj398Y0tooNJh8TILdvU9TNoNRofc=\r\n=X9mC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/density":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"15.0.0-canary.d7a2277de.0","@material/touch-target":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d7a2277de.0_1672868180634_0.23674167826066506","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/icon-button","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fd95ca7ef.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"425d52a4353c679e6b328351da485e33a3c30f00","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":40,"integrity":"sha512-cMFLVP2QruX4deWrVZ0YuQoykY1gIHcijgkJdzuwCSLhsWPvdEeNTWEifz1mVchIJdZNqLbTtYpevM+gSH6Fxg==","signatures":[{"sig":"MEUCIQDgudUH5A3OwKuun8pihe9BXzszB1LAbRSJfkFcf+DtRgIgEa0UoUXF8JeZ86rEWnx0eJdDytENrZ7tfQ1Dzu88Ncw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqKw//bljxsAgEu/IQstyYPUHP9IRsQJzblT/kToi5+0YPhBhCOgE9\r\nWrQrS4ZnFNXjQiUGGwlrgkBaM1HcH+YoZZknYIuU+Z5UbXg7/b4J+r9EyYaH\r\nJK2pApNtmXSkzlOqxIOqnknugIBXoVLm8tqGbeidAqpPbYCMgLeORnc2v8Qy\r\nP2TvCHYMZdzayEE3T2hijDgfmZIrXqYtXZkLFK6kzYgKAiV/e37xqr6OgRxU\r\nB5c26SU7TVUHPlEmd5CV92Y/TO4eNNx/smPSq7glReuCBIDT04Xqql7wIKhB\r\nyZ4hg+MzCRHQ6hcdTIxjFeXP+MMj5kKyyMD0XHMG+S25dRX9yMw8ABuBs60R\r\n0cw7Xj6wySBurjTraSZIPH4BbyP9/GNO+y1tB+IScuYawGH9H3u0QCGm7GVI\r\naWGq1PeksGc6sVMb4FODQn/9vsVtJ6kRMh7p6auipHrMDTQKrCoDgKIhT8rX\r\n9Ge/gjwlNNl4vJ0m2K2R3A2k9mIdK+hLi9FdcW0Lm16WiRenA+nXWRYZZou6\r\nZpaEJEdUJLJA87w2L4O/FM50y0b7JBXCnFz+w+F34pFwn3zsOdDw7sc9kcO8\r\ncUoDw/JTo4Yt/PdvC3mTf2/0aRdCFopx2URTItl1vEOxuVk5HfTa6tElsAQA\r\nARMqSwtZK9uvyz7c01dqz6Q2eI5s61uiT3k=\r\n=ufTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/density":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fd95ca7ef.0_1672880607434_0.9183661597795973","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/icon-button","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1eb44faf9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25f7d1a75472e1f31da3454cf89b91090d4e201b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1eb44faf9.0.tgz","fileCount":40,"integrity":"sha512-Tgc7RQKorw0sKtPikkZfZlxvDf3jOcEKeCEIwwSUDZYMxsugnvl1Pnj2alzyRsqxEBLpAcwnGM0F+p6tO4NK1g==","signatures":[{"sig":"MEQCIHt5nsGg4oKRr8qWJUbOV9OEWyXY6X5Z9ND97h+0vdx8AiBK6M7ybj4P83bC0JpPDhfRLkIJqgWtNtg14yYeWYLANw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCZA/+M5T/LoKP63PojZKuhYl+rOgPcbx5IFNW6OWacHo6m+mvvzGh\r\nBOK4s9sfB8N5uS+KKmwIdu5uBj8qVX1Ifj3YM4wvJL0nkcqfayFB/nCMu+ZR\r\nP/QBTBWnav8x0zpTdQB+t+iGOx9TnMv7XXXS/5C//B1QM7HreeBXkahfX3nK\r\n9gv1TII1JPGi9ZI9Bj0wQhPrHyv4RZyUgVt4jg/epvxLpYDp+aCcMc4TxW/9\r\ngk+vwAvMnip/AgpC+kDrm5gOa9agWskq+4peio4wNofFELtvw5wRd10xWpcV\r\n1Sdm6yAHKxuVWifLWwpTwEy4X1612wPIiXJKSWnWkOG9S/BqkkFrBjiZOYwS\r\n3+5iiZRidUCHec49lcoydVp+Y28WmRg5Fw3wQ9BMXwV/CJCG7gLVSema9Qs6\r\n91ZVd1ojQJSxtPvNlq5c0yCuxX+82p9uSBKWAxCeGyCoLhZrtv0QBzsUyRDX\r\nojSEuwH4qDSimMIL70+BACFeB6lOla5z78QSh4oU1lEma537KnvNdD8gHvLr\r\norZKptNcRd0tzBAA4uYw0HTXwl/ZR1rRVJ0lC/+ZWldyrRJu3ghRWnTrI1VV\r\nKcUZ1zOsSS3UqZ5Nz9meTad6vmfy6MCEWRn7oZaaE5Vk3WoS9qjRutDnIHpQ\r\nBZCP0rdJswirbujbwgXRxIIz+FbjzwkJN3k=\r\n=lFfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/density":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1eb44faf9.0_1672909797614_0.9499040149782443","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/icon-button","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.adcdb7db9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4652ace12fa4bce55948032a5cf24a88f34ea4c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.adcdb7db9.0.tgz","fileCount":40,"integrity":"sha512-gKT6km/fLfbc4InrUOA9MGh/U1Yy3RCEe4iDzgRXS4kGvn+KNjifK3UAzyx/WNauP84a6rSoNkV2Irk7p5u3VQ==","signatures":[{"sig":"MEUCIBlWaxoKHywkDaKthDE4xcDe4h5KM26bUYYa1zrPPV8HAiEAmeCNM2nxUC0v0bwK1ZLk5qRq2kDKMuQqYiD7ouDsb18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvkwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZYQ//aKeQoupztcjtOFi6/E5orK8iSvEE2d2H3e8mxHo11pxKfD7y\r\nMsoLSTb2taDAbS1mqGJgVH+iVLHX/nACkfEW9R5HfLjSdE2R8YAHQKHUrzAg\r\n9Mvy40CI/ly8I5oCawYy56tUUAcOUfJMis8tpJ1fEgX3mtfAislVKasmJJTo\r\nvNcWpbXKUEkwKYa4POaeoeTTWBi2ggXjHISgBOSQ9TJKCpCkKw3+hk+TMzD+\r\nefcfH7Mh6otTe9uHLfrkoN1Ty+9Agryr7zbfA0KeYzf15rbrw0gkfYPawgDZ\r\nLgy3YeSX46fa0Sj7LEGPCHGBBmlD8wHA1rc1pjpAJ7OjVsHyVYLBQ9mJGtH5\r\n1qqMJBzVLsSEpnj/6xo0fdgvPR6p93A5bO/VRBvgAa+zdqRFpgS//F2rj0z2\r\nq1abLZny+IPCb/OXFiCRwVq7/gSRaU35/B+bUVB6+I+CJRGr+sQgCEo7VoTv\r\n8yBuOUIUcY59EtSi17DvSyQlPkrgxdoH17sySPzhIeKP2oglzPqstNJegQuz\r\na1F03WDKnmAFF2pjF7I0qiy6jwiBp+wJQFgfbI7qiMwLdcnaNhv50jazk4Vm\r\n8XPXYztab6cCzp5ck40yOyRCx1E/UR0OOjSyPUq6kQNBKRoEzPctZZDYUp6F\r\n7jxc1yaeeQCSL962xYsknQ9WhTkQk4kyLRI=\r\n=mx26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/density":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.adcdb7db9.0_1672935728504_0.9108753080354113","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/icon-button","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.067af7eff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"107fbc16997c6afa10fe945e43dcc7bb7395e281","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.067af7eff.0.tgz","fileCount":40,"integrity":"sha512-lUYWX4Y984Ci5rhsKmLr41Vogv7yy/FELeGR6SjLooUQuPQvLto7JTVKmGrO4KUEvHAFLXX5pOLY0FRpC8P37w==","signatures":[{"sig":"MEQCIG3FWA9CluyOAmyOgzbTYpFRYswt1N9TS/RjeV8KLwVJAiB0E4lW7WQY0uKuzPi6Xm1n+c/dtIs10N6I83duDI2uRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1fw/+LqbGKGCCOPk5XOqxKGikiEpa6ytpuziI74yNAQxte0J9rh3X\r\n61yIj7gFVfO/Lnm1lEra3aRcSExQeKilYNY+ZvhQU0hkJLcf0pWI6cV5Js2f\r\nMAqTG1Le3OXRyIZxllcBUKThMABAYIh56C2Ej10/0oCG5yXkMTu9QP8uKcrM\r\nCKJc9OBMuMvc+9mcfFAjB0+p4g7VMtpHmtTM3MfCtFGXjF9R2IpfKo0p2Pf/\r\nCZSxxgkgL2hg+3OO7rCN/QPOKqRc/aR/N1ahVmT6JMpVJTuZYs8QDCGBRp4m\r\no/CvOxQlgPspKUm8HWeRBIc+yJD3Zk9CsGDMsydD9n6cTbFyHu8yqXahhXfz\r\n1y+vC2/6fv9TghA3YAP8cSa8kxLiW9q15USUBYT39GeYfAGU30TmTDkFw6wq\r\n7ftLvYw2kk2cPnt6Wu7H9sYiDo6t9q2H0Hy1xjgM8/c5MyfAdlFENccuoCp7\r\n3J/nt/unZmzmESqJ68jI2XMX5X1ycnWE52VaTbiK9c8yoo7ufkoRplftfPPH\r\n/gDOnOON8yCq6OwK0v4C4DokhCHGzivUabKhzfwaPmdtKoxFqt8kxEKjR6Pp\r\nVb1/JWah05vFqNm/R4lHfZcRNpUDaoldwKHIaXlXDOAY31iuq0g/RVu7hHEQ\r\ny40VaIwIM/4AGdPdwfEY/lDi9UhcRxDnPUY=\r\n=j0OD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/density":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"15.0.0-canary.067af7eff.0","@material/touch-target":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.067af7eff.0_1673047001786_0.060372364980017634","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/icon-button","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.21d1196a7.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e9e3287664c880d9989de0fcfbe6b6af621bc20","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.21d1196a7.0.tgz","fileCount":40,"integrity":"sha512-V4k+9U/yVOLq0BqLVCfjHZZT1kMa0XfozlJ3ffrR+vfie1FKsttt2qnuVy5cBNSymfVS3vJQi20JjdF6UexwtA==","signatures":[{"sig":"MEUCIQD0FkcY0cWmltY9hlcK0l4jABqvlWvvY1DBGvqXYrTGRwIgE9ImBdMKHwTtjEI5d4qkYjq9vGYmwXRdNeDs2ZVcNwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7HA/+ObsU2dR+Qx8oAa+GbPU8f8IiL09xoUJMssMB8dGacwhytpJB\r\npTETEO0rEI9urK4zA5YStWjX/gFUDvqM7MOlV2HhpOV5YqwRwcNn3rno17ot\r\ne8qUWMRW9KX4sHCAxNheuOhNjsU/onDKKs5mZFXu3+bBjD7Zh9Bkv7ld7dxw\r\nuYxFHBBQJfe3PmwF0NGzAan2H/yQ4FMxDyB+XAd5lWxPerdX3BEYSJLeBsZQ\r\nXle9cLkphiKRmaXb72PWoe/NFL0U9YSaAiUlxnNmspvjc4rLWH2JNLTU9YsJ\r\nOUNhp4QpUHBjx5Snn1EeCTBNMkx/s74hjr8OaSI2TDuipBujdpyXf9rg25Uu\r\nk5CV4BfYnFIgaGvYyFbRQkdVIq1W3ThlmHO/D6rVKThJEz9AsWvbEfY3yCPd\r\nqYhw46xbjvUim9P2R3NSn0LO+S8nCLGpop/IuLU8NV/P0WfJQgteJLGwanxt\r\noEEkiyAn2+x+qgxkbKttAwsM2ws8jfJmHYKtepanso/GRWVLhMXTqjWo+3dk\r\nT76yX7WZk92+ju5DdA2BP4v0yP9F3uMzJ991nCOtFNxsbbt56lNxdtxsW8KI\r\nyWSYLpptMc57A6X0GQlwEsgZm6pKF1y3MfToOQ7LL76CfDMJlg5WrtCT6Io/\r\nLnD8qkitCoUeolqOTBTM2CwW0NvRRyZz36Q=\r\n=uD09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/density":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"15.0.0-canary.21d1196a7.0","@material/touch-target":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.21d1196a7.0_1673261024139_0.05877638470148239","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/icon-button","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8d2d8d3c4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24eeadb469674cb0789caaa885f75a9852eb7d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":40,"integrity":"sha512-XN6CVKkYZG5eAE0wXVRQaHKesD71gG1KwOHd0qRmT0stxd4XFSAc4eNj7tipfH/1qRxDtTf4kxEYIeVrIrSDTw==","signatures":[{"sig":"MEYCIQDED2RWqxKIQwoctSnoOfSeHUg6sV0nvRMl4O5U41YXmwIhAJhLT5Jo6KjorzzlZNvUxtS5k67ytcNqLkv6Zkl0NGVD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogsw/+IXPVhkT231ttsRNffq0molfuGtHnEQGiJma4XHTM2hepVjPe\r\nJtw1X9ziIEOPAAB0ytYpJNK+7mFukNC01KxWS8ypUjp8M7EY6+CdZIHwfV8W\r\nt2cTXi/RcDIVd475NjJ3MYd9EjjJua/8shfMw08XmXMR1kRw3HIcvh48nXpF\r\ntUzdfhFf/msw2EsjSJJpzbrZ60fJpVXufLd9kidMnbG2F8u7DmGPyraPwR4K\r\n4IGbuL1OLJ/hYMcQritYvl5I1lzxpe+RWJfyfiZPNS0oQE4RGHAORPeJi0Ob\r\nwKrbRMRPXovSnuqy+8vvEqs2kh41ZuFc/PFPHT/UZiqiAV9b0iNMF6y1NdyZ\r\nrOS+JO2P9Jsh3bIFZ7ojxcwBtA1yd2exj9lz6ZueHqiFHmwO29+OnPxT5Blm\r\nhuEFRJuLMZMKp3/0QBYXbLmzP6HOXH9A8W0x7RznO/ynEv4oiU7qTQv+gIt7\r\n3U76RK0B6Hc/WU38GxGzdKRNzKK/AIuZJ1xOjKAwpEG6duVL/nGzFH+MX+JI\r\nYuR9UoA5gIvGzdr4HMuVpxmX8wlS9Cg1zymY4Bws5x6g0HXmBHTu9ruDzyIx\r\nBYgya01VOStlltxa8HmE5eTqSHyyeJlYtSIW46a1kYuhKvY+Rl+TGFzoYjf2\r\nXFeChH3ZgvONMFqJc88mDj+h9RPzS37RkGY=\r\n=whpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/density":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8d2d8d3c4.0_1673303073972_0.6187499550131441","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/icon-button","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fc6ee6c32.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eed05f9a58da6737b44a433e165cf5b9d2eefb2b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":40,"integrity":"sha512-Wyw8H1vSkygyVxRBVQGHErnh1t12KVf9JivJF/buw2K7OknZO8OJE1eWSVNjfqNhbCa7E6ahePIhW4iJxfRLOA==","signatures":[{"sig":"MEYCIQCW99ynuaK3+BADK4RSpjhCUfpECTCDq24O4z7Qwu3fEgIhAMaiSa4NzvoHIRWlI4SFxNaSfF0Y3JRlMp4ReL71Qaug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZI9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8vhAApG7WnnDZHgjPaVLtwuyANT96pBg1aA8Cc8JF2YhhpW3rkLft\r\nmII0fH20Ztjd4oI2qVY5tIVr8sdRaU7IC1lDz7BPYaBnIpD9rDjKddSR6FTv\r\ndoiKpEzY5ENuanSYmWIUGBEGV8V+DeNiDskFBnJ6+GSwN/WqVJL9LmZ3DSob\r\n8t4lPLuHW3o9NQ3MP6bjCEPY6r3VR/08V5WmZFLMAPkzG7Nk7HuIMUjXqAQr\r\nDrDSuw8q/QdgBq4Tumg3AfA4Qjh9b26qfMnACRUYf3K+H+Pyr/Qu91mcX0Q5\r\niXLi1a3wrYPuRBXiu79jXVp7CkxxODAHqs+3F9+Re6aP9cwUQe5A+XLcmbPJ\r\nYO7uuWOXGkgqfmJ6foz0X1bBlmEJdZYL50kFaVQf7C9wGis5cv0zKAPFLpWE\r\nwPUUmlBYExAUv8cpF05Jz0TJbUh1FtAJBomvHKn29tCvGHfCoyBr9R/IQ8wx\r\nAye5y64Ci1QERPwgmTGHowx/Q237V4uLYvKIlWeFE861Yh+FK/LDsgXvEJrl\r\n9zh1gXot8kjRNlhZu2HP8L2c3/weeVtgoF966HvgOvHxKCBBGjeWDZUuLcff\r\nFl7Cy9kYEDmVeucXnjyv/PfGpy3VstxxlLH8stzBVl2asLG/JpdzLwNoco5r\r\nirAh0OdLZ2ARQQB4M//CJnR60I9HMFppe90=\r\n=zwjw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/density":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fc6ee6c32.0_1673368125206_0.7278034623422989","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/icon-button","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.73537ab0f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cca693304b523493b54bc71cc98db310a65eeaf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.73537ab0f.0.tgz","fileCount":40,"integrity":"sha512-Wi7rTaLKkDoHwAfDakBGmMYvnFUZ0j3TqgWXY9k0L6Lp302J2FxJWwx99eRwcJl52A87YVJ61zSz58iAvkXjyg==","signatures":[{"sig":"MEUCID5RylqIoqLHlO65hxSwi+1UCTWhYsuGamRvqPR5VaYWAiEAyglKf9Zwh4JyBNkwcpGxJIaM6OdkBwfvDyrwyNm5k0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvap6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow2w/9H0xUUFupQqZHUq+65ucBBD+Ep/AgEOKtBXzxIf6Fz6nof/zK\r\nmjWXPrJgj5W90lXrg//NizPFB43wKByPT7rAgmv9PabOiuadUgxQUu71iCvs\r\nc0TcRtUd2pMBOUf94O3YN/DZ9Dp55KcWQpPg28uBe4SDDQagaNLURKFphQ69\r\nBIkZqrjgU/S8Zk5jiGSRDdNRyKd/dZQtSHBfYFy8KSQTW9ZCZpJF+SP18oph\r\npk7nT87qBioh9YuV5YVt3E8tZj8ALd4SGs2Y3XV2u1J1HHvdUzrtimjNyLQR\r\n9OeBWNZL6bik7yxzimuzMZztBjcKVKVPYOQ01Kek6nnwuOuEONQsiX3KBc2U\r\nhrSE/0pZtNDpwuBrDMm53BjzW82OEqWcoxBNaTrhW/WD6zUgiy38Lo4yprLa\r\nY2qgEUKM51mK2dqY4NflcwydHFvVV+Rm6jyChd+3X2t2pT/IsXcfLdu2Frl7\r\npntderFwdmFaY4ftE0tEpdtm7cQ2W1EI8E3jSy6SWbUeISKRXuX66ZldkH7V\r\nwnG/H1QDpbezdOgSQYPfdAf8WuJYdYPhNNsp0N9ZTkQi45usratCREoio43S\r\nwIVlZpv+Yu/Asz/M3+G7iusGoaO5blGx51mFuI0W2d51J5GJq3ViGTYF5Iw5\r\nRZI4ZQNyMihtuaoR0DrCUBneRANSQ0MT5pE=\r\n=8keF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/density":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"15.0.0-canary.73537ab0f.0","@material/touch-target":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.73537ab0f.0_1673374329770_0.12859004417218323","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/icon-button","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.684e33d25.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1f1adba5f2947c3bb31795df2921fa2e7d1f862","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.684e33d25.0.tgz","fileCount":40,"integrity":"sha512-wMI+XGzmIN/o2ePBKg2hLyx7H4pXCRAyyIKMQS1FMp1UKa2tYmiHVX/V8skhKwCqxg3i6Ls/LxMjfPxTR18WvQ==","signatures":[{"sig":"MEUCIHHXuyksmkWp/9+3xybIVjs+Kyxwfh81r04l8+wm+k96AiEArFu4/wsuXEOGuejxYU2w5xb/8AnNHYehypE/gERwWTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBWA/+Kk+Ms9dDyf2wwUh2rQgCFpAw/E4IbnqPTeUwjI8OYgUTrBmx\r\n5vx+XqTd1vIjsAuCv7UcAsLcZogMFkVp2gFMNP1INfOhMfycvlDXIhN1+api\r\nvBOpq2+zSOLP2k/Q59/lgXTmfHzGdlKGft4tls32DvyAqnz7kncsaVvMMkKs\r\nGFE9ZCNtVX9KBIERA3i+m85OcdXhe64SjhVafMDbPT6Dcs/E1EpY3Dyd61UV\r\n0Spe8vrl3VbSR/ET3N6cyAjamyfQcrV+9qsoa9ApL9AaVuDVGm6ege/NZojl\r\nuH1Etit8hmxLwoVvGA1GuJ8TJM465MO6j5fa+wyc24qQfGbl0xjynR8xbGJF\r\n/4+pt440KgocCkV7gvF2oKN6bTWjQpnMLt/reroZmaLffWxLxwyKe+m8cQ2w\r\nNKrYPBPGJ94Jz6dW0107eBQW8Sv4uw2UYw6Q91sr7kzK/AxjerOh2aZlanZ9\r\nGUPHpNQUK8akH0NTHAwWZbRWBWvVOk4izQUpUdwGdeBfLTlI5Iw+zUQdFVHj\r\nTAj5Zh3XXVQdy+y61Tm/WUgwIfPRYbdih4ySd0LqYnCbymvXLUa8HSocmiv3\r\nxcFSckpB8asoc3cI6sKyjsZs/x2cBVVoVJ+7rcHQnwksFHXz8uyTuAQbM6gm\r\npb9OiZshxcpuLPa5BhnkDHR+swExZ2XNJSY=\r\n=rCkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/density":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"15.0.0-canary.684e33d25.0","@material/touch-target":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.684e33d25.0_1673378350002_0.5410856213363207","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/icon-button","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0e89aab6b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5366e9f41bd3153f67cbd878c55e142e95cc74","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0e89aab6b.0.tgz","fileCount":40,"integrity":"sha512-ZuNAa3ifx4U5uKR0cvwdFTObRN5tLjN76+XEbPu0kga2Al1DLJgRadS1oxLOh+OxPYORTd8T4mJwHLH975b8nA==","signatures":[{"sig":"MEYCIQDOmTX/0aRRyqVXbeMboWpCBZxXMNPTC6MtmAFUQlS4WAIhAObjrnoNigK71zkfH/LyaFEzT2IVYUgO+ilAO9X3wC6a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQZhAAmOmAB79SD68PmHWznpFze+1n18FJpU2A9VmdJ42QomrKBTlV\r\nUt/dTZvmnZRg3qD4g3IsSGZsF8mRXYnGKe121biCP21lOGrBcSpTwX9XTE6F\r\n0SPTbPhZ2Y4ZZ4AfqhpwbZ9YPo1WChK/qQVlhwNucKjNb+gHr6UiBauqUXSF\r\nzuNgiQKuXWABSjC6OSbRfHK/5gJiotNZf0pCJFCNjNpRe8N/L76qsdU8sglg\r\nQOhoxm1sdGOJBmwNifJdVAhM6asIWOwcA/QTOR3qqyw8GOWtFmt/5tWvWH5d\r\nKF4dxVJMvZGEZSQWS/IXkgsWZMbl+BcV/c6tkxkmeJTH/7W9UlrfR8bQlzlU\r\nyzNUaUAE1K33FjkPjOeWz+8A1ELNoPLzYpOsFq+J7THKdHUkyth+0lCMVm6H\r\nQnZBzPxDV6gGRiLpQHnfXdYNonw3AdGaz3AqrQ6ugOGgBwh6MmWfesTKWb6g\r\nKl29XL9Kyq8dn0MXkvGIXuKdTKHH5y0xghVE37Ktx2Jga1gdYWMpk0+ZPhpQ\r\nmDuEu+gPFp7ttRAVk9TbFPdTq+JzurqY2AF52NhSpr5dfn/0iHE9ztLErUQY\r\nN8/q4BwF7/Dzvk/xof68wJMNKqik0Pnnu9uY8wK/xbGaP3fckwgQUmK7XNfh\r\nRsHYH6TErES9sjCQPYDQgYveTtc9R1g2U24=\r\n=Menn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/density":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0e89aab6b.0_1673453888340_0.5643131327134159","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/icon-button","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b0103d10a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24fb9886eff8642ec44b93c081bab181e67032e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b0103d10a.0.tgz","fileCount":40,"integrity":"sha512-+PgbaNzmZi78e/opzMLuAx8AToxDyhWUwJerIdO0FjiJ9zgdKxar+uBMxCCzguYk7f1lE1lTSVa1OwlKIETeAQ==","signatures":[{"sig":"MEUCIF7d2se0fm6aV670j8bu1cNRfKofS3pnIovErrhrFgT+AiEApeCYzEg77p9askNuyk7nurCurImcSejANUEnAoTjSf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwo2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsmBAApEzwMhvpg8Flclcip2x7yh5ZlZVC8szehDvcNxFWj4oNnbpo\r\nSuXAd31gBSlLtSDffDbxulv99Wo87sNqx+oDrX2npA8uzP9YvFGwZqwnqaRk\r\niVcEHj0YZwCMEqjUPfk2EdzAH2FohPndMEnJYCQ4sOqpgbh96u+tkhcCQ52N\r\nPJ0ZQP84v83QvU7J7g8A7IGGPfI0wIebCXkLcpXAOUIL217fLT5IxrsK4RPU\r\nCTWXfgJ4WGFEgjKlLzkrXeI7vVB0AVMOIMMfJVxd74LWHIjFdWn1UXs3l9Wp\r\nvNCr68gj2FDETRiZzj2PLPJvpdpRBzK0WzQC6eXfCX91gYPtNgMcVLYrzpXE\r\nJFxzKQKju4bmdAl8tf1P/cnX+/2peg7KlTUlQ+99Xf9mNMd9UwkMnFVECehh\r\nMl7dwwpy0iaVbgNLLjRL1mi8MXsAN8hrMC9XxmZXL4jSgRTQLjDG6N09QPIG\r\n4xxyb/QUYW0sTmlRSHghuKK37wX0o/afoVlFCJpKvZtaHiekbGoRciifuUDw\r\nugpA6DBpGHClusszFdAShglcsSq71ZN+ykgzOs96H6neyeT+4ABiTMpyl3sl\r\ndoNAdM1M1S5ppGPB9i8suprm/yNI2XoqGPwk9dxNMJoN1JKk04pTK9rGXQfQ\r\nhgBxG7SjPO8jyUtKij10Cx+OAzvntiu9MKQ=\r\n=Pdz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/density":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"15.0.0-canary.b0103d10a.0","@material/touch-target":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b0103d10a.0_1673464374520_0.9996481396313555","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/icon-button","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.50e7a5312.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d43958a4e456763bd99250c7338b09a923829f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.50e7a5312.0.tgz","fileCount":40,"integrity":"sha512-Y9eUP30uf2Bjx3br3nKAnU3NQ9D9GCozowc56YJetdY0+Qc3FzDcj6AyTMIoWpgld2+fljDWAU4ibXV1B9d/7Q==","signatures":[{"sig":"MEQCIBrxd4Z/uwcAljWv6tbxTm5RnUVZUsAWTKdK0Y0mZ/JeAiApzrF6ZplZ/EX4Wg+QA5GSx659Rhlyh2eGBSfc6Np8Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW3hAAkM3jwVJyJ8/fCwbNzVLhSH1ysUOYlw7PtJND/94onkpGLo4w\r\nsIhOu6c5vSc0S4lT3XcqmPgvBQC6LZ2oguYMuvIS/3yNOHr4MSNKgd7yqdxb\r\nsRHoYC47sgIXsrCrPx9OimHFN5aeR1+/rDe+0NKR5bELx0M/1oO8tzl1AfAA\r\niJXWRGSgNb8k8YFOIlmgD841SuUngwpKBOQX68MeZ6S5t6agCWH/gpK3QUqn\r\nPPgILCILaCOytP/bfWvB28Dv6gLuMIZSt9cSAoK1i3XrZilxhpc5bY5VyV9j\r\n3xOxZn1gkY3qOFVKOH8U+AWxUXYNSgIzKRZC7koJp5EWlA8+hXTQkB4yAgFD\r\n9kPVaHYo37KjWmS5UhaIPY2ID0LSxpoO5D0IImlzWj55T04PTX8oROBw/mK1\r\nPo47Ac9FrClcyNeHOavBB3AQyYSOUkKusDCx0ARKzeQgqPAKy6J4mMD4ySVJ\r\nv29KCntRJNIWNji6hlFwKV78zw0UgIo3gJ53tRHe6i6KeTgk+RrBwkd4hoie\r\nPgUUAbh5g06wB+yZ72sc2KwW8f+9lbzKxOmN09ogd01UepknkK+UvcJ0hDBf\r\nhh809zzNDZC219DKgrzvkr9dXy7WbX+WezT7VpC4bhlN3DNfarHHqs7PrVje\r\ngxTgU6CZUG3INWlZtrI4uGlUGrl2mJnRCPs=\r\n=+i7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/density":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"15.0.0-canary.50e7a5312.0","@material/touch-target":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.50e7a5312.0_1673470490659_0.9187852341166651","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/icon-button","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.202823f54.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e837ac600b80c886397ba3adce5c64a377c7856","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.202823f54.0.tgz","fileCount":40,"integrity":"sha512-Fa9THyIDkAhPjY2Cdm0l7/g3ljL0En57VdBmGBsqiR3mML8kCstGXBXOwKtc8Yku87fMi1tGVZDvCwAnAlHC4Q==","signatures":[{"sig":"MEUCIAnHu5ZkWtDn9vl011d6256BPLQC1AF1rsXojGZTpWhDAiEAlDgYowiK30Tat2Irk6jqi1GQDo0M7vqva6VIP2B8LD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz5g//Q+72BlOo6VaQ4mLWveLdaqNpaU/1zKIdSzFxRWSrX/D9vdH9\r\nEjGgwjj7g80TTx0uQ5Fbx1u9AVfWB9p2pSVApTWOQ9ozDRSUNDV/fdmI8o2I\r\nFUG96lk6BRqMwdsmJaF0SYRTCrQo8YvxGVqsPRaDv41p2Q68kIXAxmQJucTj\r\nfEiI6Z65be2KT/XZSAJU+aK/ixBTTGmmgNQ8zQmSnMcgl7FKJLJd55MI8fvP\r\nBPS1PU8Ww4DW10gF0DgALS9sPTqqgm6fH5ZlXhTaZLPCtV/srbzeizqoeH3l\r\n7vY+d5VFpQBc+n0rQ/APdA0mr2xj3DUld2RnU19pBloQ49gryvZYqkDLDDkG\r\nz7Bg6m2Sd2infSQrlcDSXPa3JmrAoTHRH7Qr0GDjqde2MKxpJjtRiVjZNW+0\r\niEV5rAh2MhQzxfl1am8GWM0SF3s1Pzp12iU/1gKbo3LwuhJ8HkHkaYOazzr9\r\neSg6NOge2upf3gpj+WzMFiQYxIrOsIGuaCQ0ExawcWyUOU9+z9YvwQMfhQeV\r\nkwEE7mPWrd0CfPapd8cxJPuXD1qcPZq0pacSpx9JljLxKX3/jsYlU9UOADyI\r\nrtXGiSniNDd1dI+xrZFdr0xTMhQ1Xv+Is6hpZ5rhvQDT7klzHtFIeGa1FaW8\r\nUW4v925I8kypmC/b/2pC8l3OCeq93eCxUvk=\r\n=u84d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/density":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/focus-ring":"15.0.0-canary.202823f54.0","@material/touch-target":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.202823f54.0_1673472981981_0.46402056822008997","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/icon-button","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.199fe2a2a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca53bc0ced89b92714173c08fc71a31bf57438f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.199fe2a2a.0.tgz","fileCount":40,"integrity":"sha512-ZaXBdLk3s5+wy8qJJIpW3PcaSW4JQtl0HOsEYbD7YBLrgy9bnpx8Ij9bkgBRqMoNQI575C0A7Grzic3kMgbqvg==","signatures":[{"sig":"MEUCIFekehqjnIOlNi3Q0fT15jqX/JWsD0H33PTw56/R2g6nAiEAulE8jbq6Y/CUe1EIaIgyoThpOfZQeUQaW5HaCqGT8Bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgUw//dRDyxWx3+05GZn1iLuyjfIM7PT5yFkmeu4dmR32vs0bSx8Dx\r\nHb24PtOoYRdHdoojaXkxmHJN3qY4J6Bd1FzNcvGeYVGjpov+R396CfUw5VUA\r\nmCWaL5zcBY92cNPicm/tk5hfOP5VWinxvDULSfkUjF3FSKPYhEXa1oW3nAdN\r\ncWezOfe6Xc8hEBw023YdLHfsBM9VNn6NRdX5q2avXJ/NWMtoR1aym6ooHAPv\r\n2XurX+bqdjEwhvPPuvp/Ursiz8HXZ5immod8AGQsHOUordZunqUTBf2oKe1d\r\nIaEdf0Vzb2kpPZd/W+NGSedfbmqPcIc7+tR7nBj5gNXljYv3mRf2cd7eAoqF\r\nTq3jkBZrLsV6mG8NOSiPoOQ1cXuYs2caAxdRZG5JRTKXS7aNV3it1ahGeGJ8\r\nUbpZaYno6xSmGZMV2DyrvnwnTiVBopGrU5dfXE8uHog1+cmg4z1+QLcslCsR\r\nGKN2thY+rRGGCFGnM3eYAtMojLr2I01wvogdQpzB/1WCIq+898DMVvxWCa8q\r\na1IqDtLmbWHEMYQkrBE68xwE59NNR8U7Db16xPqPn1yj8i1rx/8vFlztvwz5\r\nPaRHC1m6bdp8KW8N9/sy6OAXOwNIZrhKFak2T5ol9drDcy6Eh7pDGVC9wtNr\r\npoUjtqSRNLHMxukhRoehK24xiWD/xUEph00=\r\n=odMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/density":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.199fe2a2a.0_1673474177734_0.43563306459289985","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/icon-button","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8c0786d6f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"429199d2af22993f5bef74ac357710d4fcd60d42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8c0786d6f.0.tgz","fileCount":40,"integrity":"sha512-lOehomCAUoBAFd9TnY8uEMfeA8qKztWB8XqXkRktSoSVuD7ZqghT3THABYfRtQX18iXjsYqZc7Vc4oUJwAOE7Q==","signatures":[{"sig":"MEUCIQDBggNDjaEH8GCckflZfuZD7Go/PhEgYd9GwgMNbKtPvQIgBE5tCHF775XLKHN/ljIe+TQczyLldF6vMfmgCpwcR4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvTQ/9FJJP1CCK8iWpyy4YhzJYn+9hqh8jbGgoXmsh+up7ehDfwoSX\r\n8CI6GUW8DtPqDo5rYGiVS8uWbpnNtMRAvwi2nrKVcyE6+yNQtqyuZw7LwfJj\r\nQjtjjL5FTr7V8jFUXtJ/VhlP4qIecj/6ZLQ95DmxLXPpqHeduaYPSWWwm8rC\r\nSSF5DoVWuS4QvUiwIGoCHKMPL3BTzweLmLfv+8lx6zlUOj0kY2TnbxVeL/B4\r\nlb30vme3HWriWmIBuW/3ceD3NnpUcyGWGHAOJI90VyrbCtUxgY3+a9k6ZX4I\r\nEwo9l5lGEYkR51IZ85wGQ63JPKBPVCl8HXDmPf47iAGr5o5ejp7vBFUwY5+9\r\npS0kDYv7yJVqIfqUKZc0Qrpm7pfN0b4JOHWNJ5CNh2G6fHG8Q6TDJAMatzZj\r\nVTsRxG/Ouc2eZ+x9nKiFaU8RLzRfcSVEqcrbXUo4xLH+uXZsAHSMO3AJbTgi\r\nhxuKD5snCyvv1k15I/fWGxFwwTVRC3HPg41tBoq4h18o5QowuV9EViuNIaSL\r\nBdydtQzQVBCTCeIhQ0wZzm4MMr+Arbi12iIP/rZ/ZkLRc72i4nB2sGhZg9kH\r\nLwuiDW6jwj9XL0SuSBDaGpQm4PMcZURsqxvXADsYjp5Y8848hTFkzpkENvrF\r\nK1KBFasHNTUZbh8RYl4hJmx/U5liG/vUY1E=\r\n=Ynn9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/density":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8c0786d6f.0_1673534215091_0.25869154112878534","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/icon-button","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8a74f7c6d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a12d5dcf84dfb2cdf134fcc9bd8ad22de77781","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":40,"integrity":"sha512-YpcrrvR/ge+ZSPF/kjkK8xVzPrfv3dge67vS+ijNvmWJ4H39+oBQwRGpoJDAQ31Btp0DB5pKF8W/OGtfeklEhg==","signatures":[{"sig":"MEQCIGqcOitrYnyvqnYHrnvfw4hYkMn0Yxf7T/TcK3M8QvouAiBhgJ5g2n848qSRxDemF17NzYBcMIUWRZ5xOzBXfxyy8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5FA//bFV0anhD21KITfrHSvLuaNCaFTLfUx/uL7pE+XiVEyLNU+LF\r\no012PHmSOKnCr6Pk2tDOh3dt90PdYlhP2cH80RxwFL4ho5C68klVx7bRB7vx\r\nef+MuX87AibjijWwhoPVCocoLiMQKd4MxLpe7WYVgOcK10w7Pz8zOHku3T4+\r\nVMCH1p+5MZPxERS6ORUxzIhmBrcYZn/hNK1cFgJXo/OoYvJp28mn6iuQK4oM\r\nEey6S/F+2513EsFoOFI/Z9xp31d2AsV1W/Ah3uqiUcx2Bm6hNEXiPN1Wl2mP\r\nk4mgbWkFKLNStdxdsD8W1WBOisG/devPkeV5cMf+wXv8al9rulMh3sERImS6\r\n2N1jngsKGRQd9Z1a3iShFtbDOYlDPYft6x7ivZyvalxLVqv0sT1dAM3kzKOv\r\npgKmqcvZjrWbBmwLLUTi8dxF7i/uqsSBLpFgepCxASr7kI/dyzF2ph5wh4b4\r\nHmcBbi/pOXwtMzMjUvcQMDrAY/6NLjBGyILaHT4lrNW2zTDijD+9XeK3V4zD\r\ntNpxJOsM5/2GeaxpsaqIcNCeEe3CWD327CVerhQi2lJY5pqy2P5TbVuWdkcC\r\nLdVQsDQPKWORffHRTNp/H/ncT724ovJx7CzoVqm0TMG+Jz/FiSRv+m4n9cUF\r\nmZJL6ExH8qohrUzvoCb7BsnVa3q8VC3fz6U=\r\n=1MZW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/density":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8a74f7c6d.0_1673983509668_0.3712219104138037","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/icon-button","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b4687fdc1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c07280c1e45c34b7d786b8d0c3326f6f9868643","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b4687fdc1.0.tgz","fileCount":40,"integrity":"sha512-wHkZSfd2fdfKa7kPcPUDpXN/KxFF0he0YbPCa3KCcA01mLuKtMyY8O1krYIEIhpJ4tTAG8lXpznggT0YLom10w==","signatures":[{"sig":"MEUCIF4FeeVfIG48ldM/ngEfrkicOujIZfq+FYysOnlp2vccAiEAyTj9NxE7LnUAV/P0zBlqwS4zkrJqQbu7acAQ8lCkcmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Cw/9FwKHWOwGFK1sXGS32u0NYcKiEg7jQjm0c2ofwSVBLaxaAO+8\r\n6h4mdKwbt0ZEEVeq8faLDTdJkzy/YiaTduT3aaCEJdCBE8qhR+sMAfMZfmNe\r\nHKq/lXZ8cdNSN0o8ORg3TN7o06zjg5o1eDkYkJ2/PJfrJi9ODL5pknpfKQwU\r\nFquD6iApUh8luP9NyKyOFFBNavkPnIuOopkxjFEDPhr/8OYCKfISTdKkSsSG\r\npbMpMNLIca5Hynjcw/zfbv1cm43mcu36owgAe6/VmOM/nTawViJbaXzBJVLP\r\nga6fYNR+UhG4jgTSex8oILBoyv92jBFHpxm6EWVMCxqfynfijqh7FKieShd/\r\nE0NXywLqU+qtaCP9c79gX4EU8+lM0bhM9jVGAZi63IGRB+0LHRxxqux8j8u3\r\naX66MpxFLXnESEXDs6XkaqyZ5C4lsSy7w49XkpVckni5a/v9sduHEj3yoo0p\r\nwrwrkyCqaO4pYF1rVmAFlFbufeI70EpQsStELV2Z00R6XX/Czt7rjT3mChYJ\r\nADISsil9q+eWseT4ymUFxpSL84dLIC72wOUgWZRZzCE2soTzhrGNNRwQKLE7\r\npF4ORRaSLwLl/3NbzE1mtJNHBDAIMrr6f5OUMjDr50JESDsG1a5FVegtMdIA\r\n9fzLyaFQNtw12glOmBotfnrUFtuEQDaoHpI=\r\n=yN57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/density":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b4687fdc1.0_1674157796953_0.512977789856228","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/icon-button","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b836b9892.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1711f785ce4c5e40b33e2882e6323e8ea1e0b0ab","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b836b9892.0.tgz","fileCount":40,"integrity":"sha512-TicT+RmOt4jFYl27myurdcBuep4H9kPRLgBtj+JxDzpAIiOKvuz5FGr2W/N9ykzOW4SMb67q4k5J6yplqTbmIQ==","signatures":[{"sig":"MEQCIB7Wd0+OKpueHUaKP+vqVuEpcysR2AFVhzMWqx7wWkOtAiBQS8NGQELpfc4JyzWjxQA/oLZCV3Zyg1qq/6yi9ZGj3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom/w//cMct4zDQtRsCmXvngV55N7n1+bKTO7sJyxtfvrm6OKR9rSXZ\r\nmgvcOBUbtdsv5utfE0Ad/vy8XfNloNkI1x/N/V77oda4I5gY/T3tnYrYi83n\r\nTHHLHaD7nDL1VPLW0J5HBTb7Ie0nafGP221n0j7aSLmZs7/T/lznFBwGQLqt\r\no3wsPVwFfkEyEveqksY2vB+6r5BKFYMpnkvgNpdqijboGOyCr34CJx8+SQ1X\r\n6XmquB+A7nWzfp0e/zd8HHjMi9I1DiQ7edSOqQNKRVqUt+agxgGwUnLP+7tG\r\nEvT++BcUiC68LTZWspHL5kA4jtuEE0NAEYTXVKB4LBTlHz61p+tbItq5hFrV\r\n7afWwgyRvEQoMGXWxQ+iNGAPBrkYpDKxdh6ScEORL9TZIMe4YSWIVBGXD2Xk\r\nCFZSDCQ2IonsNC5dFvxcHtAWIeQ5R3VIQQRjw3CTr789X7dtzas51yhMJkwR\r\nmmRuJe6VXHpf2WKOEbB9KRPTh68mvbN1Xt2gvcb+ESA3CE6VYDbMXhYEGX4P\r\nJiZH+usEnBmu6kUU4D3Sz4dkU+UpfruSWqvNugYev0c/pj7Lf+nx08l+WkLU\r\nO8tKFnGnQEvAiIinWs2ZJ4TAd/1nR2idWH/jvSj0/ajNMjfoDiZvqbIxwm0j\r\nhTQAGjag69Jf4OYoGuehMWYjg4yBiKylF4Q=\r\n=Z8X1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/density":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"15.0.0-canary.b836b9892.0","@material/touch-target":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b836b9892.0_1674599986198_0.7271090606461659","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/icon-button","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e8912fd37.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee3136d0b2317f956edc1f06f3bdf7e362a063e7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e8912fd37.0.tgz","fileCount":40,"integrity":"sha512-Q38SDJGJf0pkl/cajBs1ZRsGlENzFKc78oy9WE9Fivg5uGIH5Vowd0VGMgb0cx6cU9Em4kMF/FRhurAKktJ2zQ==","signatures":[{"sig":"MEQCIAO5EDPvsiY1BNZf80ec96RS+700XEzhfOgxQj4dt6yQAiB+ffd+riF31b5+F/+3cnYlYnhfOL4xnM0NYMZ7hU6oLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sa9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzzRAAn+loiB93u+8EzphVjb9e1olZKln0kZPO2oR/ZL8JPtcYne6I\r\nj1lnKRq+kvVktrV1pg17KJnbVh4upkse6qxm3xKcJWoMJCmDTuZ0VilCxirp\r\no+mToceLT8JUrpAoVTu6SdNRpmJzVCQzJESlM+adZSSDzI8z+z5fKSHca36C\r\nvc3RBBC1o2CIr47RhzzHmBuGEk/p1F4G5WL9gWMG/FVUgT2ZiSRgAVQSNEn/\r\n8N9HqP46bJgZLwK2vxevtzl8ocXXXazJ0SsgkA3GwQgZ5dPpzrnUpFl7PVRZ\r\nnNzyCmoBanTZnww8G63tWr3vFv8BVcJx+N4Isq03N9dFYq5AHJD3noXUaUdj\r\nM948fbfVOjRJ3iLcZFV1gWHcMmZbVEVpmOvzClQgUKvxT4X1ppPD5nforwNg\r\nK37xl+hRxnlCRdqiuSQRlJDgwc5ZPZXnUS7LuIABR/ozjMoDbyuBDwoH8MkT\r\n11imsSeXFh4HNiYRQ1LYc2ecOmg8/T1WdP+t+ut6jjNnBABV79RkqetEUEbb\r\nIL2PPaQZAkFqf3vjvr0CfaY5sKMHqLKorQDtuqgK2Wm2bk4wLp7V6/TO4a95\r\nliIPAouQg1dMewHIymUbjb/huAXksOqUb4AK0GHgvRelmHC91lF9GvE/Iq0m\r\n1l5sOF1FRPA02QJcgJEG2dVKwMRkeVKRpUk=\r\n=dRfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/density":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"15.0.0-canary.e8912fd37.0","@material/touch-target":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e8912fd37.0_1674757821612_0.1394714158939645","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/icon-button","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.16fbd30ff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb21ba60b489fc9e673fe3afe464a273728c7d3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.16fbd30ff.0.tgz","fileCount":40,"integrity":"sha512-epMsOMDu4lSRryQNffHWTgAqY+7c9fDGlPgKLa7FZMU7iqrVD+zB6blWaTO4isVB0QBM5I+V0hsbh4F4GCjsJQ==","signatures":[{"sig":"MEUCIQDyhvY79IS5VvWKfuHRfd7Qm7q8TdNhMnQvPh8/AIdKxAIgHvK9sR320t9Mqn0SrZvXfWxH68tHgGL3mw0YOJ1CYWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZcw//RIr35Yp0842xS/VQG1RCEa7d8zT/K7P/HRbmDnlHvgVX5qSo\r\nefCC6b/pdD67W2l2xurlANS1ZN6JOCH9h058V6iyOYwKtgsoQDAgHW9XmWrU\r\nEadaD/vcIC7QQ4HIRuG9tEe10+Gm52pMdHLr6d5w+2mnYAU3hdcAfn9PF6WA\r\nfuzhEUGVb6iz0QN/SB6e6h84oZ0wLcshHpBUZxDVRsZAy4BO00biv/H1Qo4v\r\nFyiYsmTOj0N8Auds+LmYjouyRrB/C7MJOdk0ydqosCCvIpfvorZyqhY+cNX3\r\noLBeoOqmyBdmR4rpGMngAbNTmZDmmK2dMfmkPlxy7y/XGU/yr5/8S1hLcMOz\r\nDTMonEf/FFwbfz8gdXddmag+BG6ZfWPaIgVXhmaAwah50q//bvDyczmQ7Rsq\r\nBjuS6jV0LNHgb7ebOYw3yo7X7bs6jaZI4DhoRxGBJzjpLU/8LZZieB1sxDle\r\n5/cogls9Jj3uPnEfAyYdC1mDyJVoHeZiMeKsqY+HJ6qcaDG1y7KqBTtsn/Dt\r\np/9ed3wcfAG5KNKUnoKVoRM7Cd74PnZphbPdY4Eu6Ly9dVqDRs3i/+Zy3h8r\r\nxO+jU0XKDM9I3Vv6M/qke0k83jWnSAxOGg2+MEtF31CPdJcYh3E9dG9DWfB2\r\n3KM4R7hOwenDVU8rklyHqITl+SMJLGKjDDo=\r\n=M2HU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/density":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.16fbd30ff.0_1674758118630_0.9417291910574732","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/icon-button","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.033ae083a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4688a4a258bd089c32128ac09edfaf7535a98962","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.033ae083a.0.tgz","fileCount":40,"integrity":"sha512-airNNDXrjDkv/PgobmN/Cqmd1INI3xSSQ4zN8R2jONWg89J3/4pxGm3AOktjvYBTMdlOjXJN/zrp6zg3jafrhQ==","signatures":[{"sig":"MEUCIQD7JhDvl00O1zEFgPYvQkx5MC/I7v4Gnt6vlaAdm3gRWQIgc2VfQgtuF8olyEM4o41iipEfOd7xB/HuRK4v/zzj8aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdhg/9Ewo/5jY8IYjsnpWOZ+EL+a0o+ImRdLTE1fcA8EhnP7hdtKXm\r\n1IDP3eSA/9v3woI1GEppcpwFZyCgaV00C8NzlZ3ZHJsIgX8ZXzKs42/R4D8H\r\n3cHKCe1vRbMYJpFa0U9NOVA0hHTAYmGN9mfj+u8nwSDPsLlDOeUWSMD6fPsw\r\nA3JF9T952uK4+NjIwjKoQW8QiNnLQBuUc/8Ix++UbfFpJnr4XyQoY6duPCKP\r\n1WNUGY5HI6ZRBZkHnp49bpIAmm9u9avRnPHKJ0DRkL3Souo/suqvWkHtOM7O\r\nqIQci13jTYr3yk3ooNT+3Jg+fY5KbqML0CCmV2CzmmYIHZbkVtnSTkLc2gJX\r\n0aAOStkf4ED/kxyhKOhjP0jtR5W6K6tDQhSX8L6YA62lHzrSLgLhWVy+escG\r\nKVEi4lSA/mdCux4wnrHu0Dm8H9+NlLe3SCSMPUY7U0VJbloseUQAnqGVfakx\r\nYzaSfYH8TzY6qcFJROGvlvlLnkoKliTXYYphkzkiPHBCjwkvqQCkdVCUQiQ0\r\nhjkz4bLRsAAWPSg9sGi/Rl0/laDVkl9nVd1UDxO8o+Zn14IUtKePNijPKDzH\r\nl9ZF2Mhx8vLyOU2unCGm+DchK2pc3Hy9euabSu/qftavOPlErJzjica98M/L\r\nVaLvGSfOKfTy3ojHxbSL4dQPQEE2B5iaoIk=\r\n=/a+P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/density":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"15.0.0-canary.033ae083a.0","@material/touch-target":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.033ae083a.0_1674761251374_0.09439404652392791","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/icon-button","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3a705fa1d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31c4ea0decbd9ec3ed3e9cbc13ce97a0888a86d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3a705fa1d.0.tgz","fileCount":40,"integrity":"sha512-q2wi9YLxm5PVnnqE3MxCkbn6mnk1xXMUvA4pLFQXj1z5jca3btUpNpeMwaojctY2twBvg0i6gvNGuH6o+x5LdQ==","signatures":[{"sig":"MEYCIQDuwEGital2OqqQq2dFCW0NaDTcSQngOBdoWCWl7UHtKAIhAOwzSkStY1pF9AYaAUOSHkK89RGj3tSfD3xts1LLFPlF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FO5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquyQ/+NnJhh2cGfe+HXiWQnFhkXrgRodQ7oG1OwkZSmj8tTRDwKnN5\r\nkfqbUFhRXXcTn/aX7qN0eH9yp2V5idhlp9DivK54nVOq5XiqO5tyDME+iu+Z\r\nxg2bf80MeDlqNO/JqqgktmhNB3NzhFM6qfXPsBb2hqhctB+rrX1MHRsEkZRx\r\nfPDeRvO5AJsbG4/IdcwYhTxQPExw2RzCNKz8n+uQCf7oUW0VO1eVDHsjlzsw\r\ni1y7l3Un1nP68l/r8ctuV3fzcy8JMi94X3nGmAcJxkKCbFuCDJdGXgzoiJT4\r\nzU94RBe0OYOZxfvCE038a4U208aOoDnR8W8ZeGpqc57EydlaloCu/GrceoGN\r\nml2WAtTOxs2iZ8vLzk0bMNsQ7Qd5oYbNv5KsDEXCrHjkHbQ826AhURrLIoW8\r\n6fEbtuyveEuzGGC8iPlP+cuHd1rz5n1FHFgYm5/RoNcMwrX292xCpE5Klyt+\r\nUXn2/3vD/sT9gArAAXogeMVTn+0pXNTo0broJ36e6R9p1o+z6YuQEf3Ye+hz\r\ntrjsk5weIAAjA5jrAGLLSOchvhtdy6FRM8nFP5Gkkz7uUPD7OQ320Ok9SniG\r\n0jNXScHV9zetky4BmJ3n453C7uzAy05hv3gKtJwF7Gnv1vR3OPJhMLQDotUg\r\nKLIByrwCqSdHeGHXyUr91RY0oZhBNGSlWVU=\r\n=QvQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/density":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3a705fa1d.0_1674859449496_0.9593187231798324","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/icon-button","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d6bea2ff2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cf8eb286426b6fc57d1b5fb99f2584567c2b93","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":40,"integrity":"sha512-qNvnilLy2ipMDu+pVRzot8ynGGuHtpLzo62NXesX6mgjtPo1aw0swE4XIN2zUEYoni1dAjRq/nVGmfGM8CGOlg==","signatures":[{"sig":"MEYCIQDBuDnlA2hMl8pOxM8W9/LHb7iw669C4uGYQB6NGBidugIhAO14pCE2kYsgqIM/lu57akbIa+vclo8g9C8tRidQTVrn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoezRAAhplBFVDz0+BvJNVjkYZAkQRvkBZcDA8++I3oJ3NaDeTwYNor\r\n+Vw4coS67ClU+pVv+dWgzpDoFTcIOyn9fuVCkUy+KvBTJHQU1sGQy5tyllWB\r\n2xmn3J7oXI8JfuW9ytGIdL/WdYiRfbYjh8+GDu4HiOePtGLrJu4JYmXyeXwU\r\nB8sPBYMzQiRG4tNCRGvFH4mfimIEl3NkLZj8sbbFxS3irYASELv+vMygW0Yi\r\n2wCKM5qSvl4Ht+FfKm6mM1xOiljjobF3aS5yf631u1Ou5maiK3idXXf0uiw2\r\nOIlTQK9wZN7LoTJxDDez+vOGsP/XCw7fXNOG2DJw0kP4I4iC1mK0hWBIWH8W\r\njo3eKq8iHXDXY8uOVMgIeR2VSiIdq30tsmmopkQQXoa2XvtQxYw9J9EGIUkH\r\n0/SLLGkpVA/TDppbwbg/e+jHmQZQN0UDxwrsU7YlHGOjhz2O9qhj07zg/q4/\r\nii8S81m4Zb/CJYS6cpx9c8xmgbjkeHVMi58XGENtpyxkaV8eb2/Mr2HwADQN\r\nhVNQlJ3v34NmlkR+ePabOSVhYVfwGHCslhaT8irjTRwa9yHYhRzQemla5I5t\r\n2N8dnr5zpIEQeu+5BKu8QB5FNrXfbPcqCV+TVz0LeLRS+Sq+I5z8Q2IS4Bq5\r\ndVocFm6F6fNG51Dl0KmKcVn2LL1wDrBt4ew=\r\n=yAWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/density":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d6bea2ff2.0_1675179039202_0.8088378119640602","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/icon-button","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0c94182c8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1179b34cc7abd28128f84937d1c0b61a981c821f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0c94182c8.0.tgz","fileCount":40,"integrity":"sha512-f9a3zr7uowjp6JwiQrFa2E1csiOZx9g9hIEDUxmLgCrYjvleTcMSH8AxrJekfINtUxLF52gZKo8FCFz/BEw1Pg==","signatures":[{"sig":"MEYCIQDeSbPSvQBKTtS+0yHsZmvtBpH46zmX8gQznIJWvbIzDQIhAKS79Z16xh9ZE1kyut5nPsWQC7+Yhy9DN3uxF2jPbgh2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXDg//Sws0MbAWTFc8z4G+Fk36uiToEbMx/aLp1UrGIcgY9f0erej2\r\nHDCeGWWjpDRpFzHLbpk+PzQwUHp4Wwed7sXvaBsX8q2bgLqfWo/gQcwoPFRM\r\nxD2Tg57QXV06rKwPtTzw/wDoYNHKib2NE1UAAikPXBip6TRoZlW3iXzmqixw\r\nUD2vewP416Fq4FlPXg+A5NiE4b/UCQKrK1mNBIm3WUOKFItCkSx7qeSFRCI3\r\nIlUOnueFd0eohbZ1+LphIBgqPwq+OhRzFa7RHEwAK6jZ0mAazJv+OQcjYo1S\r\nEd0iJWVNfcEjh51MVVowQFu8jikiWuj1mKnm3RvykrKfATXhvH/LMPkpGpqJ\r\nT7tdEsJezZ8Y71FoeK7TLUs41EifP9lY49SvGiZlkLdUsWZD1XQoSUnYYg7A\r\nCJqnwmcajDSiuDRgAW/EKT0+yfk2W5yBoXf7dOTvPT69DP5CUTjsyhwc/2TF\r\nktpA8G3YiedRP1E0O+iUFWiuM4XcZgTlVYBj3ELjLn1JppGfPGgk+PTmH+9f\r\nURxEUMpaLIrIhfeb4liqgxVlyiv6Eq2ygHZJdXgiVEWtjKXBhkSMXh9qLIqd\r\nuY1suHdwVQhJEHk7S15jYZn0BXN1FsPu9qPTs9W79bSbac9flFDqDJRaLBEp\r\n96XU/E8dqsJ6z/s3NbXNtKdXfaY9IYjaerg=\r\n=n8LC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/density":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"15.0.0-canary.0c94182c8.0","@material/touch-target":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0c94182c8.0_1675273486945_0.48973673293691133","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/icon-button","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.15b221540.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e1e9653a47e0d4413b26d7a9a5bb6b4742b1cfe","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.15b221540.0.tgz","fileCount":40,"integrity":"sha512-6lO7ienY6HRf3YkLWktYtYSAQGSINgDIBlbVfUM9fbJFNwG2/QQxVnE9ihJMoMmp3YKh1TGi10BpZ1cTcq81Eg==","signatures":[{"sig":"MEQCIDpMJH6+8p4vSa+SbnbJCRlKF7sAw1Yp1eeVFkwePX7GAiBbd0ThJQ0X/iapxGVRCEdeL/YOwAl1JUEuABum6uAmBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMohAAkjKrE9u1kkEAzLTKupycbucpkJsiIrit96WK10ijwmrFH9Tz\r\n1+XNtLS1OosKbJ/t4XVMRIv2gZXPd08ybv7AcVOVwm4Cvc/i3axICTlLEFaR\r\nPZIM39PJqYzXcmg41mdukocwnTw3FcNLkNTZPhonUa7DMtXxQ0Gzp4JNiV7W\r\npDJp/iMRhXwz0G254RqqpSJMLmFn/rluoY20wbNCc8+BOftgtBZ1+uNdDGJo\r\nWcZ/vyiH12fXQz8jDvQjXOdYgl6Or2B7ZvyK/1mKZVV0lEcWzs96xT6OeZrq\r\nNafIaei4Z/hz1sp9+FJ2c1SUJAhMNVQC1gRlcxg4pDGcL03/A37n7OHT2RM/\r\nQxBvE1aP845ZfOBv/aXm8xQhmllf6la005LwWjjii/mGpGIAI/4wh5+fusax\r\nOUhrA4Y8Hl6GGnQUEfeErGcc0D3e+nS0ExDpoCpxlhQJaeQzwNr2L7vKaBGp\r\nx4DSuXqw579vu/WFW5w1z9bP3SR5uhuzAA3uAB4m07Ao2ZdgaJHTSZOfnzZx\r\nPPMdcSlUugklWI2jS1MXs/mQOQmgFETK3H/dDWTSypt9rcyDSVOcTNDZPBgN\r\nYpqd4te+PeEK5qY3H766jPwIBcs047Lcc7U1/rYYWN0grcZvQGTl+K58zon+\r\neWm8z7fsrHqPsGE1qtgHzYJBhoLtCgwU+D0=\r\n=ZP3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/density":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/focus-ring":"15.0.0-canary.15b221540.0","@material/touch-target":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.15b221540.0_1675273988135_0.1306775373340192","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/icon-button","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.eeebb8bba.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b93a2802259370c5f2265b488ad5038596ceb35","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.eeebb8bba.0.tgz","fileCount":40,"integrity":"sha512-QoVn5hHK9qQu2jKf1ysJuYsvj+mlpyXuui1v9hLYJJgH3phYGnGvC+yWCrmfX6PBqQv9hywElaIBhkK6nnuPIQ==","signatures":[{"sig":"MEUCIQDpMzkIol6Pk8MG7I1ObY6kYuXEelqecQd/UGjBN1sh1AIgROgwTWPAMzfog4pW8AVNyV85Aw2HJWndCKdffvltjRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSXQ//R8pP/j4x2qQGipLics/DikvnDyx3gZJjUeBY7ZZCgQuKbU07\r\nfZnlkSDXgHhZFY0lpzQ5sxG2Ytw9+UFe+51FXUCRw/m25FLKZuxg92eGFxb+\r\nwjy5TP9NoOnnE0sfHvLXQplBnlF/HxswQkGGerZYOUD63FfepKw6ZOCzhCdL\r\nakvOmOJGiUcb/CeMHvULlco8m+qewXv2HbVgGpzX0v1OFs8u/s6B89+Ymgjs\r\n44frH6haSE6Qsn9KP+p8ZzrptvSF5ToTZV2u4bv4FCnSrYK28yu4KhaTnhUB\r\neom9nkkPyV2a9d8u1w5fKN4nj47xTM/1QOEmnudTIqA/bzvNu3HuWztNtQlp\r\nNphdDfoEGlINvu6s3Bm2BLCiRKW9RzkUyy6fa08zWn1nnTUU/e7piIhKC3+5\r\njhadvabyrFIquLFH3jWop5GEN6ylAwjeCaq0B9H6jKnXPvCvrPv2eeB43t7v\r\nFraw8t5VOpyRzmtsZpp15McaU6B/P9s6NcWdWw60NfIAAM750J7Tu7dDjqj9\r\nNhUiMOWHxJNYntTvJYaknguodogrOX7Af7usbqKLRiWVMkOZ53kgIFszxWpi\r\n4hbyxGhSwcP31nuR9Y704VF3kkqVTNQufkeLm894MABKhk+DTUdTJrDNq8vB\r\n/JonEVgT/QK/AqjF3EQkjQejp6ZSQZrlwF8=\r\n=2KOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eeebb8bba.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/ripple":"15.0.0-canary.eeebb8bba.0","@material/density":"15.0.0-canary.eeebb8bba.0","@material/elevation":"15.0.0-canary.eeebb8bba.0","@material/focus-ring":"15.0.0-canary.eeebb8bba.0","@material/touch-target":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.eeebb8bba.0_1675275772420_0.5456632048067569","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/icon-button","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6a4b3f834.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"631878b229144180eb9226a0933d39f56304f4f6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6a4b3f834.0.tgz","fileCount":40,"integrity":"sha512-kve+aS8SVIStU6Y51DgxB3yr6RR0S3Sk83YGFYVYmobOzuTeA4BR9+84E+k8UKCenurOiCRY/G+zLyxwfK9Adg==","signatures":[{"sig":"MEUCIQCWEtkVDR3EP7gXQOxfnuG8jE9EWp0IZTZBsLEhUa33fwIgYxCH982hgFey+h0ZvFU5fNk/rDCAcOcmixLQZ0c5WN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVWg/+IwAyVTE5BUf7ebMXND4A2BmrzVgs3vWPWou/2oQDHkJJE0hi\r\nFKYrLu4+TJZsF5IwDonk/6fPNpOOZo/iS2fBT9jpiFBkGRYyEtELuKnRvtnf\r\ncQVwDqQ6wZ0bkJdgr5IeicoBh3JdhWPuJC7a8i16B3jKcAYd/rYtwvyl5/X1\r\nkPm1BAluw5tS2F5Tz488ZDlsw7/SKNOA/MIX2EeGQ5uARTxWABCHkEljxxqQ\r\nwETjBi9XgL63M/wsL9ETjiGE1ByeSQcLK7V6WhkP4dSXO6BaTYMYvoVXJ8JZ\r\nnGF2boSSifAdaV6IOFDSt3fKL1kWCezG9W3Ez2a+cUeWExuiQrisMtDRQDhz\r\nBPJLCB6m4QUEH93qIxZnBPi3bOaElePlqnEACCpdqfsXHBQqojanC8DpqYsL\r\nJLUMLvPsx12ZVb+VP2atPVlMxstnKy3qLSfq8qN08CX5cGcFsurUMIGLfDnT\r\nJZbgkCla44xIjKN5W0atfE436pEPejkrFNs3w+WHJvwdQtFuZ/r0wYWZ+OnN\r\nMizqlQV+YJHcY2RipAjT+KFwP4mx/xrf91t+OIFYKSo3OyoBtQ3JKoPHgxeB\r\ngfIYEtyx03LFcJRuZPnHqTfgm9Ip5ugsthYx4iEQPGF2y4awfJ4x8SsMZrd9\r\ndXLuxA+ifIj2/VCFJK273ECelEMxScvB0Q8=\r\n=iq5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/density":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6a4b3f834.0_1675277940530_0.7215381274957553","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/icon-button","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b177b40e2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e082a486a1caabafb5e4d9c662eb6a81c1259b44","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b177b40e2.0.tgz","fileCount":40,"integrity":"sha512-77UlMAaBKrC0ctrQSZqRlSkrwb6zucHtmf+kgG/Q7x4a2SxJp7wvSO143dhjjtFcW8fD6+iBYBn8QOXOv6FtTA==","signatures":[{"sig":"MEYCIQD0IAkIN2H03KOzzBEY7JikcuVSgNX1Pf8vHBk0TcOGGQIhAKlUczyXGojyF4kOgAT+Cym1/tYKXdiDFzOGUusYdm+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNhQ//fTI6VTINVOghQHkpyPrn1yRqkLJkjbRXn0jeFN0lUXk8gLQj\r\ngbsLNYARy22/YT+mjAGIPvND2yxdfgzb3La+gAZgk/VfumKsH9vcaYZFI9ql\r\n0R7+5V4btbiSn3SfFc1sUPSS6+LMz/wKdSkXliYmVUosbE8eftLNl+wp8+XQ\r\nAxZrrsyvvyFna3c4SokVBtVOcUEpC9doDGB/xO5lqAEW1QBEZPPfh7PdU9Wz\r\n+B95h3xe6zNjEV2P//d0buVQDoCm7O2Icz21gY8oNbw8Mwh4a56UtFrlz8aR\r\nkIy4uPFPFMj2banqq3cOxJYFhfz3YXyYlvX0OJ5XRoQ9EJHvRnPoY1R/EFqg\r\nMKeAjCElecbTULllT6YBMgDIEu6sIWBgP6bSwovG+BT3dBt+LLH5yTysNfnN\r\n589/qbs9SvDNNHTxgSyJa/dUXkpzJaF/WEFP4YjVYT9+M1pT0whL2HFAmPX1\r\n9pY+IpSwH8XHoyDgCHw0iAf1HbUHB9xAHbH+mM4YFtb7yhDwB17gkpyzKTjS\r\nPb13xIQ/xX6T7NuwI6sZSuQA4JxJhEkIfW3gIhV+EUD2dZdJI8kM0xMJ9B+/\r\nLjntqCFVqhwl3FVPEX3FBZgVP/vmrmSTJR6+KKtbkps9I1RGd5Tv2sI9658u\r\nWBSYJNuKMWMXb+Zt5apAeStWrcH2CYY2OUM=\r\n=2olu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/density":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"15.0.0-canary.b177b40e2.0","@material/touch-target":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b177b40e2.0_1675308885112_0.14314284288125334","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/icon-button","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d9f821042.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e80c2ee1b8d267273928c5cf8ab18f6420d1ed9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d9f821042.0.tgz","fileCount":40,"integrity":"sha512-SgqlucaBbQcOaHp4P8m5R/hQks2hqfbYHnnmih+zNFBVtrh3/nuCV//dAFM/o+oEQ4rxjN0LODvl9D/BYIS/Jw==","signatures":[{"sig":"MEUCIQCx4QAJY6QkYmjF9uqNraw82xcXZSAaeygkpxIqWCwCugIgJnRdy0QG+HmMOhsoDe8zP4/ibS1LPLQvsBjzE4xi5Hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhRhAAmGhYPxR+DJt0NS44/qSCgfyGesrklaRt1OfOGdfHmwpN+2d1\r\n6eqt/ukTr57G2nww3nlBzvnxyXjT96SRVLACYYFvMidee9pct1ahil9Y/6FY\r\n/sqU3VuUQ/gYb3ALLpOtjQdnVUR21a9IzoCkXusF46Q6w/VqSFyIVM1hKtUx\r\n6aeU4aTeA8QGRtcb8ax9AKk48u+HwGziiQMcACHhnPxOw8yq4sIp7AKyCCUe\r\niva/SAWBGLtZ+v5dFbN9DQR5OW1YGSTUb5jnHukN0Qq47W0DMmtHsbSl0c57\r\nvJLRR9xcJxd2PnCXo+PHiKyRmvHHeRszRn3Kk7s/gGFtN+yMRv3sE9D6sto9\r\nPUMci9Z7bvW+Hra2xC/coy0tUQFOgJlPWeK/VWMpl/AmGw3vD0kBMrHwHM9t\r\n0ET3voO8ZGnJx79uO8Eda914xkvuGhriygMw2tOGK4qna2XsVq5qTUphBvcH\r\nRLFRzbxRgeWk3kUxxrBIZzrXnJJqZNLq1VPzUwPFiJA/ODHHmssWX366ovti\r\nTwdadSJ+lioMFe1+P5VtNmwc1CJZZbnYm3zUXPMk+cRJiIx6oocPhSgtvRqQ\r\nNNeEqOstqw5DhyWlaadODf8hWZh2M1N5fEKwMujAUSppafxzlgClDP03NVxF\r\n/bsI0YRxd/Xbul4g7q71qOc6gKuUBWL/pU0=\r\n=NnKm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/density":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"15.0.0-canary.d9f821042.0","@material/touch-target":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d9f821042.0_1675359532704_0.000374608796452236","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/icon-button","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.47c7deb19.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c34d95c012f8ed1fa068797eea231e434947f493","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.47c7deb19.0.tgz","fileCount":40,"integrity":"sha512-Lt70m5uRhtIFlN69pXwWtTXwOQAGfKiCWrrDchRy4dhHXuzW/NaUMuPjnmYcJAL28X9ZR5PBKp0nc+aMnX+XBg==","signatures":[{"sig":"MEUCIGqfRkNBKjevl3POsN++d9N+yEVsqBiYgahXwJIayHQIAiEAqdZTDQ8uwoEDwQrNqzJC5I8BLPno5757A1sGg18BJ78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3UA/8D0rXbkMeOrosqBxdUVEZGvW1FA7im6Xn3azm2c3z5QhJCnNc\r\nqXMWmJ73qChcApvjzGkPo9sYooZwJpCXJtyNe4k+9s5PvE+EXfbuw5555QQf\r\n+sB9hy0ai13JVT3bgKjG40OMgVvYx6sxFte304Q3nyfwD7dlEdVSNQWZ7G02\r\npZ3byPLzfnADTvpF5Csu3M/MCyUHK9FrU21G0lEds14TdMl0djJLABQPT1gA\r\nyqhcXCxsWpMhnEYSpRWBzfhTaf9ZSNoXAdM2kFZO+XnybKk5XzzYJwRvrqik\r\n7SmT/s3TSq5UAIfUA/yuK2TPhA5UFLacNttUGNxGQ6AoaP1Zm0b/rvzHa1/L\r\nxxcEZ9RS1OokAhNVjoRNQIVFaQ7uZ3Es82Ne/kyD4aqQCpTeeLElUfnFiusY\r\nG4VaNxjCT/8613nERcMN2zmQyjw2pBGfGifSaFKwUgIPDtEb6x5E62YEK4Ld\r\nYMnB7GoV1mSoSNJOVyO9CZjJrTzT1hKlVtbNfqrNh8rS66Q6qmCTU3iBJGWC\r\nzCgFsbVompqxiwNdg9kvH2pmx+JAmu8t7epoCJEbnPnZuc77blCnFQiqr8W8\r\nDrWTGZx9FVQS1qOyc7Sd5f/AUJ0231bt7pBH7IXAOjYEfke0CN6x0omUwu9N\r\nJwh9cQuMmR1iW3VSmmoJ8UH1qj+xjOs8Ag8=\r\n=Io4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/density":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"15.0.0-canary.47c7deb19.0","@material/touch-target":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.47c7deb19.0_1675415368952_0.4494848593927443","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/icon-button","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a16dbd1a6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87eebcfa95aa05a8d5c9c20e46fd39dabd15d2f7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":40,"integrity":"sha512-Pg8q2/NM3mXmuewzQwqPNlQ3eurkWpu+KeUqWCBw+frvZ74czs8ro6CPXDGsVVSq13j5AeLL0ejU5Bokk7xClw==","signatures":[{"sig":"MEUCIQDKyKgDFTbOiytgk7y5orPSM9P2XQ4nuqS1njO5CmXRvQIgNI6lJ0CNwh3tNCeicDBIrp+cMwi+lxqk4tM00c13ECM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBiA//aZbOCRabJymJ5RSDEbIVHMLeUhXu5AAhmtxZmZZQors6+KNa\r\nPj2QUCCrN9nQp9/PdXkaDtS84VcmkuFkCeXxjzZgE7TVlL6eg3utws3fe6yh\r\njDuopfAcY1XJOxqIz/9IpbUdjWizWSW9VxwtYrzqeJn3jOZD0M5oED8fABcS\r\n0S4fjlHAyX4RNotvIj/4OTCcYCgNZcnkjPaFmoR5yDFYq/mrMVhgzuDvetTD\r\nDpYCRu/MqLRaHoPYZ8w0PdK0RSKGNgbmj8ZmnHrIgrpNlV0xA2NBNSZLDmt4\r\nyShG1N7F7zuE2QPh2e11EHt//8cSvaqdtRxAEc0ZX8qgv/JxTPgZELFFTJtL\r\nTdweF+dv+kqjOhWTApNagrU/jzP7bGM5MtRZr3ZC+TrpkgrGRZjknTMQORki\r\nHMV/697/svR0y4hcaXVJZ+XD5HoupcM9u3DXJOZC0gSLERbNGdi4+cR/VlAb\r\n2wlBM4LPrmQ4jDO7Rm9JjQIGuU63pugV4rd9Rc5B076tFtABnwKe/73YIMMC\r\nNywqXCfXPIll0PIgSotHeMiRw1jwn56cD/MKfs3ywEghg5dgbOVY6N5QrMKm\r\noMIniAhGMm68FjhobN8elxDJADeOtG/qOHEjlg7iYuJC4gr9/BSIF9Xia4kS\r\ncAWHS+JWQFZfdgvJp6Jxl4O0ixhRiHjKFTc=\r\n=GY6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/density":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a16dbd1a6.0_1675491303459_0.8713781289018019","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/icon-button","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.93416f87a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e9bef7af383dd927d1471f0aeec1ff4e3e0b518","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.93416f87a.0.tgz","fileCount":40,"integrity":"sha512-hE+PDCy19mtM5pdgki6rKxVHaANPZjtVCw53Emd0KgadYZ9bt/Hr9iTy2vEs7bbE5zv8MJ/DAMa1ZyzepXSZcw==","signatures":[{"sig":"MEQCIF832ffOx//Es+lfG3Grq4wvpMKRbDGwPNWrid4Ga4iiAiAzwEzzXC/41U5kLQERZ1T6ioTZKm/6NVHJMF26JTl4cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2BQ//c07s62jF9rRIVwTk2nwDcFtG8LDxW0Z+LZE5sUDB9ukIFG7A\r\nHG59CNv6cN6sdBW09nFyWmeO98ahWxmX0j9phtb1vuqIHhJscG33/tpIdCd4\r\nycye8V3bbQkjsz29IDIo8o9I6cllLT/+JDwS8Bauqvcf1VgTIQB3fa/5M01d\r\nh0v6RIjO2kQoXaM17UdvSuFDnfuDKAvp7Sgny7wpndY3sQTXryOEP7CSom5O\r\n89zdc3h1TE9aP8zRCQAV89m1BrFiE0XYFlDPj6KSsAMSkFMVEdGC4AsKd+zn\r\nBtHHrVW7M/UPsbBbIsoxeK+kwSwOfcHGnKdYCKooE1oSuo8aoo7qHyMrojaU\r\nql/oDT7VYffqMoTTVJWEm8eJ4v8h/rcPUqLKbcmfD11K+G7UxAHDWvWuoscJ\r\n+VfTu75i4h6cfSJX/1ADPNg25ZX3rhZyTXx8U3nnop68IaSXjIcBUA8mCJ4y\r\nblCVojQtwdDsXi5Zyf7rKsKPGlR5bedh5XRCGLXPHaGPyoyeA2At9csYZrvB\r\ndaIsGKJdvrJ/86UFVaApzw/mF5XAjyN8MXhFcR61NZJzcyWY9808TG0CgMET\r\niwJwCfmLNZpwNPhyrv+j8FHZMnwbPG2DXfNVhRu7wiEdWYYYitC5QlHYQ8e8\r\nuLS4gMgQf/YuPC57jXCZr1b5iOie9IH6iDE=\r\n=EEyc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/density":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"15.0.0-canary.93416f87a.0","@material/touch-target":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.93416f87a.0_1675776262806_0.26922215744851674","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/icon-button","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.49b8e7442.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6229f9f93aeb02b4bfea088b1b9c6d0f8770fb2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.49b8e7442.0.tgz","fileCount":40,"integrity":"sha512-xU+rgpurAtM5IRr92MKM2iq9WPURoT9wOqL22fcD1Z05OEy6INtuz144uUtKAMP7M0jvA9TMbE1v6YCkrgYSVw==","signatures":[{"sig":"MEUCIQDVHBswqmwPWVb33MkzffkMyu5vIXN7jZa48J0AFL0ZgQIgH0oOvcJxqQWQRQ7+chCTZZKuyjL6j67FOyGTH9yFUY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKow//S5U6KGecX/NsC9mBAOmtQZFqschvDxkPpyTfXYpmFzC03jWo\r\n22sIIHw73jkTCpbtK9NrpLmGzo9X91+ahJNLmCw6ZqcgNL8NrvJJfp0ScMqy\r\nh/pcoTNYV3hVC3J4uVblyjz7beIcor4F0pry94IgWG0yn3EpHb/gfMJdg6WB\r\nc0lykBGOcX9aCasWW7IAXBOms5IEgF6bAZlbtDe5PHRIdRAMcziO14mOddgK\r\n++KzdB65X7cfA0eca69Y6Rbgtwj42LUvSkKEIgj7PclhUMlxEdrtLsLVU0Fo\r\nKMarZOLcsEyU0uCtzxAaNWpGJ1zo5X48Z6WKSRwIUckhMp9jiVkhUym8iJgN\r\np3NfiN5r8O+i5lJag5dP84vXF+ljipWxvx/g/pEzH0q6GkEOMGa+fOmBqmrz\r\nI4tb/CqmFP3BXsS6b28vxXE29zdEKCuDmGPSpMSQHqTrFMsbP8jC0zjv7nD7\r\nxh/ecUDSzaY5zEy1vH7NW6rw92t5Bfuowis6pIKJXiReRe5rUqrcukLVbWJL\r\nuV4S81Y/ns7PlnjeMiilqrbuJXMvC9jyXTA0da1M6+8nwejK8s3Mgp3SZnlf\r\nNnwVEJypvtlA4M9qbSRCh9IavIlTaH0MXtXBTp9IJHxv/eWbGzTgyQOKIKlr\r\nhsmMGhn9a/McAQO/bw/ThenQ4ZqyXi+MvbQ=\r\n=aUaf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/density":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"15.0.0-canary.49b8e7442.0","@material/touch-target":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.49b8e7442.0_1675811406821_0.8195815787363243","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/icon-button","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.de38de758.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76cf2b53b7954f8c4b9ce0d84ff11edf6d59c8d8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.de38de758.0.tgz","fileCount":40,"integrity":"sha512-R3QTtENacleazhv+tbhYtxGJbE2JtZ276dkZX9kg+dT/bZvy37HXlhcE4nleCHhWW0xa4uGkK+ggKiWIa0XggQ==","signatures":[{"sig":"MEQCIGFxN7gQGXvDq+7XJUVJPZO89iub73E4QE+iq//SqlWrAiBXtAZvKsWhrVlUeT4hGINiR3RVf1ctJUc+FY2owxvsYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RSAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnPxAAgbbjIWnTeyPrc1oOZYBrCp08e347m+Bxn6JJpeqB8logDMMP\r\nwMqMZYREhOJGhfSu7g4LLnQCIUwB/rqFUvOXs8JrSi/zsYmgZ2LzrMnCh/Wm\r\nS+AAD9ghI5p/LVtATAG3K/7fz8Po0u9pBs2AQk/T3xEEioDkOinY0qgqPLvr\r\nf88HwtfcnQV4J4Tc41NDEF9QeViWkgv1xDxTJzzusTEP3jYwscqRoSTPQ7kO\r\nCU+YwAVDEb1pWqwyEN15Jpl87wmXGidfXjiCwQp+H+6em8csJCMyNGV60t/a\r\ne3gP+Ex0Tlua+s/xo9SvrAr8mZyTt079vqoDWGRdPRs9pWxUABUW1vWI0Tx8\r\npBwONstGmUmDb9RWr0NjeMc4cCwbMmzlYUFcjDnjFk2zXualhmptGQYIslqB\r\nj3DAOaxGE+3OlrLRZw5eKYTayL14EHlrPVoay0ZPCK+tcr4Jpw64s/fBNAdM\r\n3hVnZEWxrqvQpMvF23neiszgACiDFWbq4E0jFhOZgPGd6ELfWE128Xy0CbGH\r\nlRbWVlgXOVxwPpPbpn58o+p/nwe8iDoXFvh4usE+G/QN691Mwix3OKJzPZ1E\r\ncvc3bb2yEjKSIIpJtYDQUsFvpB2AoOHYVEPDgmSeVv0W1H7w4kGUKUcMsvWx\r\n1nkcSJM30Juf+F1LTc4Neq/1x4h9N4yNUg0=\r\n=su5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/density":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/focus-ring":"15.0.0-canary.de38de758.0","@material/touch-target":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.de38de758.0_1675957375871_0.1436308289042143","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/icon-button","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4d62de70c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e032b6d2772a00f1efd14c81ce8c1b245c69d0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4d62de70c.0.tgz","fileCount":40,"integrity":"sha512-w2V4vrt2E9HNHIz7Er++Epm1Oy9zgacGm1fWhfo52v1vHpfBbMTSwnWWXZvdCYo9Av42MXckSW2JHHQrnpbFww==","signatures":[{"sig":"MEUCIQDn6Uu2W1RReQN7n3bK1meRku2+QbszIJ65muy7LFBnYAIgD0+xBDDP9b9RKMP0ieD1eIYTukDPx55xFL3ZwTFYcos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL2g/+KiwMVK9tPDzfyhkVixPQyqZBguvPTJEL4k1VE4eErO3W5skv\r\n0HxV8N94/my9Nzal9bQkdK95w9dlxLE7LCkhsnTTUFpgDl4ASvAnhNjV3+KK\r\ntlGmUXqwdwa6vP1/yr3VK8xjZN+ipJMJfy1i3fsJumx3bmAjhXoYSvvFHO0O\r\nU1Qr/fjZkHF72Zm50VDnI8AX5NGqtygEZXNFwUV+JqZHNI/BV8BSDwKQ8nhd\r\nXNYJWtlraBNq0+wtQ+EgOrMxhIFOhRBQh0/xpTu9u/59biyccoMIt/lLeZQP\r\nf2bZMP4VbLrsajjCgVvrv0E8HL8D+IeOarhs9aOq8IURvVbJOTBwDZ+u42wt\r\nqH786nKbtkDjh61shoF0QKnmUsalXA/nMDsnxF0rjSzuqg4LfVeUV9tnLAxM\r\n1De6HwCkHmSi3yr7ixFkjGXesBhl/nUaAfffdrsQ/dcDCLI2k7L/eiHh/gLe\r\n4r2srfqRupnr2T3INzGKH3Kboh5HH8T5Zy3SuZR538zn3HYtUlatM13Fvpdd\r\nnVVyB2hpkMNeuH+D+ofwKaHS/pCb9edUzxKYvXqnpjHTs/3Pp5FM9SXacdYv\r\n6UP0Bj6zKTpLL6nv+vJEcomPOTriS/tc+pYgiEruPc4AKwQymOCDcCVIzJc/\r\nnGAFDc6e9UP7qUgKGLojVCv9qa9KxxR4OeA=\r\n=LRj9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/density":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"15.0.0-canary.4d62de70c.0","@material/touch-target":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4d62de70c.0_1675980217108_0.5990339621624725","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/icon-button","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6fcd8d418.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd12627a6d34b52ef00563a93a8c33d9e022c2a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6fcd8d418.0.tgz","fileCount":40,"integrity":"sha512-qhL3ZxHq2eMaCzTcjzfEBqDnje0HJIqKCuXzQkLB6cyZZn7VI4z9/VgraDHgAfoRAXQG02mijucQSePejDHjaA==","signatures":[{"sig":"MEUCIFvOkvdCbiIAPeOs9Q5OR3/X5KI5UEq8kgKciTXRBdbOAiEAqO4e6GtJIJodktaiEbhb79e1ccPHzW9K8+mHkd0dqhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iP/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFGBAAowPEsRxhMIVFWkVm/98PcHNzpnXrqKdteg+cjgvj84NKvHlb\r\nN1LVwcKEsjSpddLqKmZvXfKw0+Ts0WtPZWFJSIe4yL1lr4+BwYZAP1f8WHsM\r\nhCHBk4PKQvdytYUBYTQV1/jHAe9Tcj/LdTD4/e4QLMKoKhQccYDLgfVFzZSH\r\n2cBamikEkeeP+rdhuKqPJcTGp6cRhL90ZJiOCyUl4hLB+AIhATXrMNECvO1t\r\nSiSUzct0lRbPkNopDjrEW74XVSG/mHIr7kmeQKOwSFwQeghAXjCrVNjVDHJ6\r\ny3I6MHGLlk1kUpsU3h5ZAa6jV/FFVTXg1xB1iNWKt5L7+9DR3Qs1ItDje/SD\r\nba8qGImtKPiL/0cl9ivJVFHe0+ZZr4KW2//2O+ZgpaYSfN8WJF6EBS70rrJ7\r\n0+vut+RFkTZMxkeEdQi/LiZl45eZr1XhQ4ch7VTInDaLZRBRTri2PPvb4a6+\r\nq9pYHIEtHpvqgPEN01Z8+5c193gICL+mYNd4m4zcij4llFCOuioMim0h0BgY\r\nOeYb4B5xyiprj7xFrjUNi2mS/u5Bh+WM8AWHDO84gJb/MjALb76g8wCcneG5\r\n6M7saB1PZqEL33YwjdsU1j5rUcgrbjh1FpaZ+FaUYw5NaMRseYykGwv7GeZp\r\njwkw78M8PFMRkxJZB9t/HFH3hUgaJEw6pvc=\r\n=iARD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/density":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6fcd8d418.0_1676289023304_0.6542263350955231","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/icon-button","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.066d9439b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8859fc4d4105f5b92673a1919cf44d7a88d7c59","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.066d9439b.0.tgz","fileCount":40,"integrity":"sha512-B6XiDgdqBFI8S9zGxHe9+CuP7vd9lwEv1ub0zmtbXE+BLM7p6Kp3f+Q7/V5Lir0sekQqLH96q/PNDGwcBR/gQg==","signatures":[{"sig":"MEQCIEJ0sNw6YikxmYRwbBi8J9MzFFuoYRltKlYzbD4/1ovwAiBRIw42Jbe1ak0ALoexJzp7RhYvrnFTKBfNZcx4/Qo7Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpudxAAiq2bLwpTZdRYFnEm0yFVTK7pA8q92uLob2IVUuwdYNB6AdI/\r\n9rCsdtG6mRuPx/kMgxn7ZHNFA+ZUqaFfrrWVCWHD4rCZBLR/Rg6X4bqIuQjp\r\nS2/hIEFYOVVd3PLKilh2OxPQxyUsB268CB8RnHifIs5zEHZhm7C8Ij0aKbkD\r\nPIYJvzjJaC0+atl08Duqo0/y+I4q1FdB99YcNiatnWjA5KPt/Ssu22cNIYYS\r\n/LGJ0Zbiip+md4q4eUufeu46ywRLRWKY0NN2nxG42Kebb/IMzC3D+/1Lb6vR\r\nEiWTEhMDTbwT0omDT1vsaLZFo7ax4My9Z3Lek4JwnhtX8q1B+SoKX2mtVXo+\r\nXbFqLJKT9vCCPi9paUsCvs7AwJfrSI+Y5ediwIn9EG+Qo89O/82PRqfioJc+\r\nVJS0RYdmpaaMgx2LyUWbjrcL19AnlGKgsmD0ZcrVhs6MJ9DqFCXczKusyGEV\r\nKHRlFYD3w5eG7pz7/YsJYFphzbGRvYl+DW5PxDbPkDaiiOi2phcs6TBsch6l\r\nimfVQ/uLYG5iAXciHC80xXuhCGRj+3/TnyZUi+rEpeqsn+zNh1NmCeUFibjX\r\nL4SnjK6ygEG3xVDYjqTNMiv8xybQpBQpyii7Az8K2KjMMs9My0AN1MU3jvEO\r\nbPlrBXddOc1vc6c4z5yTqT/FTXOpd4q11jI=\r\n=YCai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/density":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"15.0.0-canary.066d9439b.0","@material/touch-target":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.066d9439b.0_1676491099338_0.3020344140348552","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/icon-button","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7ab32468c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271fa996367618ddc08ce706c961f820912af17c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7ab32468c.0.tgz","fileCount":40,"integrity":"sha512-KspFlmhVtL05a0lAyUpNWHdMfD/N/MdWQ3u6i3s6E9T2n4hYkkncScSsaFAr1T2kqgC+SdXYyo8ouafJsUoHAw==","signatures":[{"sig":"MEYCIQDwzuXXsFSnQS3q4dAZpg1SKh/BQAz+kTB7l40tco89OwIhALOQPbe9RCs6+WglnZiUU4Zoky6jnPOrSYM4ATFjlgc3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpntA//XTTQimJUxzYRM7df7fzgG7beK2MlX7+sfzf+XPjLS1tPZL59\r\nrbknST7HiBiC4svGsy1+ZBl2z8EeO8ca/v9bUJike1PoKKWz99riLE4Oh0QZ\r\nJOcpHMIWDwGF9xFm84h8BS2mTGzexsT/2o4fjw8zxRtd0OV1v4We72+QHuWh\r\ngdAJ/vPM0LKN7EtI5Vq2SzmFFkLw3szNRYaB3UDRKtBh0KjMnz1ytDIjR/zF\r\n+GxQdEXLAOd59Urw818Yj9ghM9QeqJIcmERi99BjDP6MNUu/lBCGWhaMHE6N\r\nYT5v5CuMJBVwEV9oJ9Qe8yA1SSsJ8apjhmUfM/t9J3FZ7X7nKCz7VcoCW0yf\r\nqVbc+wv4KANkq5puoBdznmEKUFjq6XEKRkXAq5wdIbfwbVOrgIORSLajBZTs\r\nB9IHcnR0et4i7GWP3tvFusijk3ShSRzpQme+ORQFur2eD8rdDUXZMoPV+WeU\r\nNG/deoOuTZpANbKW4GUfsoObtnhnZYwhkm3Ry4HXl2O9QvHNimZSMhCEOZL2\r\nQeFq51MxQ7Au8Z0EytovyK1pclE2Cxgb7s0XYuOsWKYrc9vPvqNW9LgCLBMf\r\nHA+YVJcn0gGXK2vI6mELOso4HczDbNjFAczINYdbHb771bxZyhdL7hv1jyaa\r\napYG37g6cAWx5rrOpU+or3iab7exY0OlfM8=\r\n=Mmt1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/density":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"15.0.0-canary.7ab32468c.0","@material/touch-target":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7ab32468c.0_1677004482488_0.6730349266531415","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/icon-button","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fa27ba61d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef450aca9f0f9302ac9a52e0a93c62b60c839832","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fa27ba61d.0.tgz","fileCount":40,"integrity":"sha512-Q1VSqYxdes29eS3ukDM+zPoOUyhMrxVZ2P1OvXLzVgQnDocv0PN2x5HyyMxj+i/JNKZOi09/COlaQq5za+YHyw==","signatures":[{"sig":"MEQCICjtvCw+TuJtqKCzvj7piaGBqV47m5IPKdwVolbIifHfAiAMJErVU+kG1p+TnwUkuDZJahXH+7oI3h74cefjqvBmbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NgwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozmA//UgdKiB6NBc14SlC8zKtzC9kjO5tDNz2oVFWHZCyNkplNa6aP\r\nDKhM4OpahdmIyFdJvd7TAUyLdtlWG05SPKk4FllOR/G+xpHTJEzaBrEJrCfq\r\nrp87ZolVobS9PchCAXzV/3KVVhKmz5/urb6ZtBl7yDGfbLlYif0efQceaQNk\r\nqminKe1lSunxJ3+mS52JZoE5rpbqmFuxvqXpmVHrXdvBT4qI5ZXRJhk2UWhe\r\nMsBMyP0ariKTuLKImv+sfGc1XWJra+az1OZbxydTtV6xke3GKnO77SvneO1j\r\nm2iY6Ic5qQUUcKUrW91m+baTPRh/Ul0TEVozy9i8J9DC2vJc8beR9KrR3YQJ\r\naPedwgppccS6kgA0hta6ng/+mm2ddGzmdT2OfrRJHn3Qs4T7kXIq9zA9f7HA\r\nU/9oulVfIDbpAKyus8qZY7GFzeipFbZIR86cWWPj3aHuo5o9wHXyELKesoqM\r\n0Q/XWPP0f6Yc6OCissmntQnMh+Pb+1tKZjZ2yCNxlW1z5ZKR69nofbQen4Bn\r\nl1rqz/hLr+y0+mpboJjGARSjN4Q6aEYrPSpZMNh2O5vRha0MaNwfODsr9/wb\r\nC2PZ9kM8ZSLSlLpre2GC5cTxXXJkWyxiOrXKgB3FFFf91m3iv7L9pJf8Yl0t\r\nNext5PNchTvwD3Xkt3MQvztfVJpLxsthvWU=\r\n=/SKh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/density":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fa27ba61d.0_1677514800646_0.2672532735800661","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/icon-button","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.311ab4d4a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c3ab2917c47811b215915471086872fd19fe0e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.311ab4d4a.0.tgz","fileCount":40,"integrity":"sha512-9GQ8KBmiXjmf8mIvX68NCKNIQ1BgToet0Ab4C/pf9FVfOCYLCVIhQZTsJvPBV9epzkfPyOZfE6c3wVhTU+F6Tg==","signatures":[{"sig":"MEUCIQClryXItcN4NrSQjLtnPvHvWtDFmmQl2Dq+ydv9AiscPAIgXwZICqKM20WDBNDduMqDyF/8FFVzwatF0TUzjg6a6f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorPw/9HgYG8pkMKdUNBsN2DjP/HJlg6JmtqWkOf+KtnYOaZiB2oVxz\r\n0F5vOpfTIp6i8PFe6LthfqL2iGKN3tN5TMUXWuZRP3ok2X5+KeMphHxCPhUo\r\n2EVWgsvjHJcsGzWROOvde8MPynfaLyYWhsD6APLyjmjqMbgVBTeAk9N5bUd4\r\nVUD8V0gXXtv1fHQY/GSTzMq9kXyzDbygovUaiOzq2v6OqjKiVjgGTE0xU3T7\r\nuEAnL5eITqY1G5DqDIYuV26/fx6j1CRTeq5ZkLQ9r2Rih9Q+lD186f0dkInR\r\nPj4gwbE8haknMFtru+EbSIosJYvy4zr96ak5XpK3EDqeC3bbpUSO6lXL8X+d\r\n0gnPE5pd4H5QqlvowaYhTWXzKHrkGWMMEhtndId9vwEv7l5lYqH6zufmajJB\r\npKl5bsVYuKAcmmi7Cx+7GOkT3vLt+juS1cpfiz/VXKSggYvz6y4FbUPvM9Ma\r\ngM9ZBF1OPAXaFL+OowGk/X1GpQtLa2OW967XcTHr6/RRHeUnNe8msS7dx9m8\r\nWmHt9OOXynyyzTRxyG95c4chsPSCupLzebHuelm+gXLMmoXGUjBGmUmKU2Vi\r\nNsjs+yn9vDYQnL9b19+oRPMGKedM87aeqJ76Z+cKEzT/HUGe4yN90UCBcErr\r\npUwHkL+f+tcpGQn3U3rKlrsjzGuyoC4RYmU=\r\n=fb3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/density":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.311ab4d4a.0_1677516117684_0.6271076246688496","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/icon-button","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5cb8e2174.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b81b91b3ead7a3b29751de303c114828465e286c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5cb8e2174.0.tgz","fileCount":40,"integrity":"sha512-HOZzMnfdetNhvWTV/IYn7zv7klT+VPxr64yBYh58PqfUX4ayDpj3Fnt1ZCn3g/1297+UI7hfMOO6nHaJf9Cnkw==","signatures":[{"sig":"MEYCIQCGNTa0XwE0iSLlbf6W6xgw1PNgvBtAruh7Mnp+PvUGfQIhALNHmBHY0QM/Qticrvnq3xrRUgi2ig9yb1TFtI6b2mtw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmXQ/+PXTjlslykLXs9bLsv9zzhmk0KB2LuTT2HJFFc3C/sn2Tlje5\r\noRQpQvcmybYrjwMpYmSEUWouWO24zqN7tj66VyXGevxFo1r0Ei6R9XxzARzH\r\nKw47O/0+vxmVtbV/TE3gEuuqywZDu4zWfND7Fs64TDRdUUuloK+xaUHsQolC\r\n3nVNBe+ikeMMkrOYWqoyjjANvaOpTzqmOxhQFBqy5UHXGfFXDlc04Hfvbzoz\r\nDdN/hB01q7zE5LNHQ6PUdemo/FaR8YO7GN/O37YwIH5TAV1J3nmrYD9LTmY4\r\nKDM5T9Nss6A3q3arJTI9yoAj2RgULpq/4lUQ2n4PJb46iH7j4FXbMr2TCS4b\r\n4GC08UTA8hGLKOWpz0dx6nkCarbhltU2PmMn3imBJnIuGeqECqLIv9wykIPO\r\nd+wCwS2b5AW6v/w4q3F4P//lGK9VgBU1qtFqZcsxgqG3EO1AdGxA6VgQ2KJx\r\n6EJweI+WH9P4EiQ8QnR5DfRJB+WXANkaTwHTfZOThejFNyi2y895LxEDsqbL\r\n2Y1n797DkwixAaFvoJvfP7AoeB8VfWiZi0hp/wVc3a5bx3yUDBPQZspcANmF\r\nXqqwqEvz/wRWNplie5GnggcOulzLPQJi+t9QnUqjgJlmp8eE+YtMlFEdfGYo\r\nR+8tTjRyBhwZxNrRl71ZvannML5cee8laJA=\r\n=w0v9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/density":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5cb8e2174.0_1677688581054_0.16505248269837125","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/icon-button","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f32339937.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20373f9cf247ceed9b08e3b5a3add0c788e6691f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f32339937.0.tgz","fileCount":40,"integrity":"sha512-jxph5vSxa21AuMzYuxpUmTahgxfpzP3VZYms0bgFiGpqCkclFXfD9Q4lROlgYmIOTM5oR26XNcvbgIAz1tvkNg==","signatures":[{"sig":"MEUCIC27fFGKwfJg3ZSoI0jEsFauuJ7RZ9URij3OYszrvkr6AiEAxXl4kRWNUxcTAgyGl1Zk9vc3Q1AlQK4HeX9fhh5hzGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgO3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Eg/7BtiIKhcJSP5YbY4NVl6HoIFh6CbsQ9AiU8fTMrIWVVI0SkSU\r\nKTgdkb3ZbXNZDS3lwZKMHVSNnPuF7poPji64ivi2IZ039fYc9m4ckstQ+hXF\r\nyDOcCrWznwdscagiWmn64Yjr+AWcl5ME3zqt8/o75xeZ0PrOT8Y6sItFCEkp\r\n8FCAwiF4WhKa+Ncn1El6lv7+j+pfs8BVSmf0q/bCeSEJVvraYLRq5+ygKSX6\r\ncFmlIxGCebj4I7wegQn9lC8CTeMspLuUHhZo0Xl2MvjAZLvWp433wIg9dvmg\r\nc+1pLYn5XlZGmjtuw/dUdfulOIoKWMLrekJ4HM6b3+HeKEC2dgr5rk8GvxUT\r\naGYtXpZrQ41OBkGwEtCdfZvR3HKriV6lgZhuA78dKrADgwbYYZ9lOahcafa3\r\n2Ygm57kzHHtl8/gl4uDCXgCerzxxgUdiVi0BJyC550e7okqUbIKiIwtkLHbr\r\n/pw7d4tYrd6YTCaxv/CbvvFbiHZeQgGlhR3pXdIPbwSZpnXj0kA9SjlW86nA\r\niQ79nRbXY/Q8cxOgizd5QJkeLX4LpNa9tqzdEchHE5Y2cXHC3iiUw2BZ2pxa\r\nFwtG8BZKQ+7fiIRlbxCk7NpdAx+CvtJ668K6h4Sn37HDVTBhgjrdpDVQ/gzr\r\nmBW2BmIS9hIQqHcxJ+rc0Jmc7pANJPS48sk=\r\n=6QzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/density":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/focus-ring":"15.0.0-canary.f32339937.0","@material/touch-target":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f32339937.0_1678115767260_0.3087781451906868","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/icon-button","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7644d63d5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43a118f5939bff52ad237b6c37c34fa9bc09faf1","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7644d63d5.0.tgz","fileCount":40,"integrity":"sha512-TQDT8X7NZrekhFAsUdyunLaEewNjOmnB6GVkRyO0tzon08clByRpIFhzk8MH0wMdlARbqvaSTyW+LqOcERx4oA==","signatures":[{"sig":"MEUCIQC4/2Fm+01KFRtjRkRxDdCH49i4nlj5wmrBOlKD815BHwIgQvesTttch2Zh9GtWR09pgDPLtAVmWNrt+rXsFbg1Pk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDKg/9HVP6BRdbzFYDKl+GGVT8p5W1ZM+q0m0LRl3lJyeuA2iiJ9rv\r\nh2wBMz9LehoNk1Iv70cHq2cJrTswOCIihHYt8IWGIb8s9IQl8A6tDniZBIeb\r\npnDWIIEKymY9cl0IPJgp7K5LvTgaWkxMsMJDpQJSgpxUVcIvKhytKx1DNvu7\r\nR0gzYcT7xjzzguGTM79dYnrq96sY14/imL2HrUcuc6PwX95T+9MVTMY9UzUL\r\nPCCXuYq4AextaYsNaaLAqty/qA2uG+kaFmn86AFUT23uRdDOmJ2fGonO5V64\r\n39CxrWjbsHGyKgH3/SxUi2kX58ctJnlt0b4p7/rlr7EtzUItqQU3GbSnC6nZ\r\nCIQCc0x2MK3IYNxAnEtl4cJV6rOkzDHSwcLx/gOeIlDDHAT3vcNO5NbXsYOS\r\nh0CEQvqF5wSQFubFOKkDyqtWBwuMpWgLEX9fwJGTbbiTgHEJ/DTBM/imqGll\r\nGbLaU4GOkc1TPzmfGGFAe5AbPbmkwucLeBS7Da9M3iBfbEqP0fIaR9uzzd9C\r\nTMj0G+BiV9bYqLtO50ShLqgEPMmk5HNxvf9JMth7nXngByxATOfFOwysxiqp\r\n7t7X3o9nlN2aWr6Ia4C5wjF5VM1D7mQIv7k/ikWHrk3gqT9khuj5HAmTc1I/\r\n5tePTteGXgq4vImiBMrnDr+35uJPJRQ3YO4=\r\n=FJue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/density":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"15.0.0-canary.7644d63d5.0","@material/touch-target":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7644d63d5.0_1678141679985_0.7739447994328288","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/icon-button","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d96330c08.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85ae5d5298175a818e9349077c0caec977c3aa4c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d96330c08.0.tgz","fileCount":40,"integrity":"sha512-Fx2tqfnh14a8tyVR1dwvFjP2CchoP/la3kMlxfNUq438ipfbVEj78FspJm5vcMvjHNWUp8khOwSsUKVpIipHHw==","signatures":[{"sig":"MEYCIQDeMahFoNPaV4XSY1bEdCfQ6zD423sDaCMhS/9ef0af8wIhAN0eQAk8EmahEJP/8uQ/+vwRVdNicZvtPWPaHgzKaGNZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Uw/9GEA1qsLHVV4Khid/flp83T94khBinVhVwH4jQiZPKuyCIaeG\r\nzbDc8Zva1+UBMGnYbIIA1T9ZOk3lTKCS/0nEyJkc0dy/prGpc8v+iUZPBWUO\r\n49FhW2EzNK9Q5or8po97TsdgXJUzUxzq7DIA6zUYgC24hkAQt4/ex9AayNmL\r\neGQQnm/7qBtlRkKQ//sIEvf+tDhufQvqM9kzFir69tZYNfN2U2oRmIWkshOA\r\n1YN+To6JexNiMr5VFYdYpPixUQorSwlWEgrgZKTUJHdt2bjthgOtBIM9ArJd\r\nrIpYcvEoInb/0uj9XDIYtN7J7BlOBTdbSn+D1YuXEy5OMmCHpDFbTSjq+0n7\r\nQawWKigZ16ApMG4doJjtSBgz7zixkn/mqj+ReHfiSlg61cwb972V2QjlP3FF\r\ntEQQXKx7znjwWQTxmsG1MpMFCMVQdl5wDw8Rq7diRdbtTuYfAi223WzBxtkV\r\nw+ysSQxGhxjjUcSr+SW4RWayMZoW8gPG7u5Mr/IIA1EqxrekZOb2lQ9CsaJX\r\nDQ3YMFKr7yoxsnvIBh8yM7BjQ28PrN5EmdGi1BIbkCIUdbhFIlajZl7Xksxc\r\nIgg2M7e5e6RO1pxjKWMImFE0tUuFfy82WhrMfIdQw+WzDSSQOHeKt5ieWYuM\r\nH5KfMBNAeSWyXQZ54R2tktT4FhIa+DGlTok=\r\n=Nf94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/density":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"15.0.0-canary.d96330c08.0","@material/touch-target":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d96330c08.0_1678275741468_0.5366817551374126","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/icon-button","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c99cae77c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdafc612333836df8291abb906c568084670b115","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c99cae77c.0.tgz","fileCount":40,"integrity":"sha512-vkqmvSKSurPmghHaOh7/4lX+CY9o/An5CwoNmX4wqjsp7cRmGG91svDGBTjQwSKiJUc8TOqm0UdqB8NaTGJuuw==","signatures":[{"sig":"MEQCIGZhWRN2EyjGNuoredQG19vZ2Ty05qod+MS9etc50hJWAiACWrANP6X1MHZ4jNmZPUf0C/lhASTVqyIWuD5ht1cV6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOZA//Q8qTTBDm2AqrSOWz6N0cNG/XTYOPhrc3YIBdyH6RQuzZBAKB\r\n/PMZkfJtTd+hz/wg3XEtT1ioeqc9kuG2D5ccwvXRRFPDzEyYkC1z9znzioLF\r\ngcKTBXLe8vLleOevkxqSimf/ZOtJWySlMu2CETJVt36Wme0kOJ4KbiuCKEzx\r\nasVssDh2M+5bShPHIAQ4gPYoo5UUDckAoHY7FhaPiWDlQHyobPVdbvy5P7fR\r\n1wRSoHd5tFqq5yiuXlnCVXtyh3wP4cxiKl/OWOVwgunhtz1qPv9EkDMeCMi/\r\ndv03hsY5buHu8v+uJej2i3QWluzfl1P2GPVoEAYvLpwbvRMX6Rm9Dgbn8656\r\nGCwVmDklaBqs6xve5QXJxx8pqWCtJUhXchGuzyhigtFVi9C3EFtGpUDGS1Og\r\nI4aQ0WMqemMyWGT0+h6RlQtOcIlMwwcP7vngn6INcrqeRUZqeGExoUc3Co+x\r\nTolEGI7bgVBGs6xreiLMa5O4lLRYk+BuGHUqbAU24YBpahFv8d9wkIm0FfDv\r\ngb3vDThjbM+DQ0ffKSO2SwPbczZhPUrqUBDrI7+Y8yCLgTrPLHOzbgdAFiuI\r\n9CHIakAX0ZZnz+GvlF7Ar3SUHfjKhnIEWPu1jr7Vg1GkZPgA0tA8OgxoaLuL\r\nYgVWTuTTneaebktuENduDIChLsFfxTRnyns=\r\n=QBls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/density":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"15.0.0-canary.c99cae77c.0","@material/touch-target":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c99cae77c.0_1678319006867_0.1332371707477713","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/icon-button","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6023b1cd3.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf8d994988578869bb5b674abf62f0fa095b4a42","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6023b1cd3.0.tgz","fileCount":40,"integrity":"sha512-H1KfW+b4Gb55r5ERSlbfHy0kt8IMdn5MoC4PRFb1lztEjaSEFEXMQHEE7sngU4Ty+W/9pqQhyu4KmN8X3y0Q2A==","signatures":[{"sig":"MEQCIHmvEq4WOkj/msUmnPbgw7fuB76OXGvnZEqQVN3P0aVkAiAmGYHJwGKHOnsiCQ/0ZQVbzRC7TekIpATQht5UrrNp5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeytACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowpw//dpcEO7G2cFzym9F1oBslA0u5qgbAE2xSmtqTEPXhLJrUIcbM\r\n6aAVtuLJbRqYDVvX6zyUd2Slt9RYMVOm6QxcoR2dhjJoOG6EbUiFCjsZ6z33\r\nLVt3oJfXiDy3IJGlGuvPUzzvssmZnM2En4GBhBgyyehwMOFeeA9I8VUFdK1p\r\nWxWidB9syIlil3N/8ksjT03sfvRdsOQ4SLRKv1qX6OkGJ7P6iVOI7Lk7qzgU\r\n+nGqd+vWMfr/NiT1JDqwA0B4BawERow+5xEZNGrHCCWs5dCo50v6p0un+slD\r\n7pV1TmAcIXoZwiegES0Ccm6GiE6Q4NW/SgHCUV7qHNNoW75ZPxnUoP4CYzcq\r\nzJewXMYXJQeLElXogVOPEArZyjvX83GEtpFo/9O8nkImNjXNqudb5pn0WgA/\r\n2jwSZO7YjmLlHR0ekpIMGYL51P1e+QLmuxiLULqv73pcgtVSeftcbzR3CDFI\r\nbnlFOaBmvNouWzbI0iOnwot1crkXarBKIymzu5fPMAHcIFNzJCNsjGSFtiAq\r\neU8LTqfdSky27/F3Q0YwBP/cIr4/ohqTnok8lt8hjGok+lHuQoNa+38vuEaP\r\nCi7RSKYzyWM4K1nHgxIe6hD/1Kmef4YG95lJhAHd6nCwhawMrMchfOcOyAu7\r\njQ3Z56zwwE6pSlciItx4F1kIvBGvrjqDjpw=\r\n=t0N7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/density":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6023b1cd3.0_1678372013484_0.41599896408771997","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/icon-button","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.274610c77.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be24168eee6f28dfb8d9fbdadec141feef1ff1af","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.274610c77.0.tgz","fileCount":40,"integrity":"sha512-R0LFECub2o7R607vH9Od2fWPQSgSCm9XjBu+S+nX/kslO+KVOIaUifxPmq3KqVmz9YIE7rmSqz7J3OYawaV82A==","signatures":[{"sig":"MEYCIQDnjT0f7apbULs61Klbg+dSJaqqrARHTT4kXoWQ5uj30wIhAP69gPVD41GSJcHKqRuxFL3nVttKBke+TzJqWWTgiHxD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfRCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Xg/+OcuGDz4VmyvZAk1OIVqyEjVrNc7mTy7J+7TihXAbx2zUeQ28\r\nG82VHmfMB3soDLGNIL9PGXu+Vu0i5wBU3LRPk4TXybaNkKQjRARs9Isu2/kr\r\nwP/F86HxYfH0zj7MZ5tuB4y9NtMCOoToRCcOpSnIfGZldfQHe3SfUkffdkDc\r\n3CvTHxfYsmfjGoxjex0fUD9m+4hPQD4tpeL5MMVgfRIsNJx0sZC3OVyKxOCq\r\nRyhoguYH54PP9+c0NXW6tDJSVXDNiTkVIsQWF+FYBb4q0Uo9xUyXwZZGUoE+\r\nERzXYhVCP+JoXh96xiZCymzD/HhcAmffxeTfXlQrTz+RdyRTB35YEMHpv7Vw\r\nIQuKXNxUvxA3tvv4NcJ5rIFEbiLYIdnbv/RMGHO8uL8Lf7eHmp8fMWso/IXc\r\n6dIn+aH8aOHvB7fjLEWWqRNpE4xgX/sEhsT39ecMO4C25f85wJOcwUX0PUUX\r\nfhZZ5SKdfeDJg0rG9kpS0HdhrTBtj07wufXH4a1GNn4e/mTXjU+iDcjLuSyh\r\nUsDvVvT1+d6g6nK/ZNuZ6d7TO28eaYpeMpQJY10OUb5iVR1z7Nrg4+Hy7j4W\r\nQCuyl2mRPmyo1plPkYjFDGcclK9XGrPSO/MXLCQa9u9pw/pIDi6b52V50cWf\r\n0+7QDBH8ttmbD4b6D3I3ZfVWzwIJ71ugbQ0=\r\n=z5H5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/density":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/focus-ring":"15.0.0-canary.274610c77.0","@material/touch-target":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.274610c77.0_1678373954639_0.8471716642992384","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/icon-button","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a274583b9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2168aaebb4a6a9b413ef98c3abfcfde0a92116df","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a274583b9.0.tgz","fileCount":40,"integrity":"sha512-16Ikb8wmV4fQyGCacecFmptAPS53TDN03MX0BDGbjSqcjoUx8rh+OgRdhepaJ8REnSIShDVa+qhCLiGSfSLN+w==","signatures":[{"sig":"MEUCIQDoa1lNVIs1aSaGcSnyuxjQ1pElkc2xu607GdE7+vyJsAIgPkMLiPolpaN4gnpcv8rwEi3iJ21ie/oFhJ/DqCGCVuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVdBAAlfSTRl4K/SFLGmRvS4Py4afRjRimPoz24fvKS5rFOdASYai/\r\nft5Kmui2X6cyJoKeLCyWgswArnx9PHUvKvgc2Yn+WqPcoWg2iUwBZFVwRMa+\r\nYDNC5qGQ73zsaRSAaBoEkXC81Uy62Fu1QmWMr9Tw20lK2cawkCZNCJ9coWDr\r\nGw25+5UxQHN2y0M5ieyizC1IBVO0iQ7kxUAdqEh+m2uoz0ndne1GkwCraINl\r\nKixdCPl+usCtSTidFFLwnQ0tFdi7v5Q48kYwB4rF2O88HpRS2qH6J6/yrcrm\r\nIh2SBlHCgTsQS1BTLK6g0vTCxVMxTAh7MRMN3V+E41FGX8vVs/Z5A9nedjSx\r\n75owWl2g3Nl9UZyeUyGAJrDEWmxMHALfjaozmv3+Tzpr6XSXMo4sfSsNAPaX\r\nZNUkz9145ODMZjcQfOtbNV1ORPzDCdbAqR8HaElMJdDdae0i1umKTNUcyD6R\r\neVjYjict/OmLSDQ9j/r4Ja95vSeWxis/2fUZxM6xKUXs/9ocsWAVoLtWT9oR\r\nf4e4VVJUssmJdOv5hyzu4vm1sln86fT57CF30PTTT4mB8e2eI/+vn+uR8hkW\r\nBSGZ1MrCExFi2X144XPRNC49LitZ/UAtElsJkG8yyNiGKgXLuqWeEMcrotH3\r\ntIMFP2eCCUKe4o4wwyWtVyaCBmn0kY3NPMM=\r\n=jLSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/density":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"15.0.0-canary.a274583b9.0","@material/touch-target":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a274583b9.0_1678391590029_0.25384842609765523","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/icon-button","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.da22ca960.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98bd2b1c762aee436d75a27aeaa4094134342b5f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.da22ca960.0.tgz","fileCount":40,"integrity":"sha512-DN6V3/URqSQHEn/VBBOWivabO82GmVIXNHfRu90DAoeNBut/wA4ZFdiulV9aUd1VXZeuU5jPwwvOoQD1Yt7s6w==","signatures":[{"sig":"MEUCIQCWIHreOle2kngDVBKH9mYM+SmaxFK7+MZpLU0jtaYAKgIgOfgk3pmFtuJ5Ys3cs90m6VT1FK2AhdWS8jBC3xFpZQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzOw/+Nf8cZtFN5lN0DgNf64ZVh7XHOKSlC6Om0Y5q8v8n9zyY1ga1\r\n+fmllPCqgcwKTtmb+IF3VlQd5l8SlZArhG9rDh1baGYjO71Bf3Ws1T2LHAJS\r\nKzOiDOULZ8x/2OV0MiE1/TEVk9AasP8y563lnktNiMpt4O4oWP4oKxGSTkPe\r\nmxad1cYPMlZM2+bshFFLGOvk099W0KMZhjoLOhLzNLsFfCMOWS7nQzqqAHpH\r\nongjDSyQZum810gqk344JUctrnp1X2jsXrLRPD3dfsRmwX1CzyVsBtvk2Dwe\r\nYDAjDoT25Nz+vgdQ/6mWnyw4TX9DQrCvtCI3kaeOWUCh/84zLD3j3PqjB/W+\r\nqH3oqWH6rFBRu6vWOYvdcUYxGfQ9vaHRBzH6oQn7h50JyIledDdLApMW6C3k\r\n4U3IqMiq1Rg1MVhEbpQzYD40tpuIQlSP+OiJfh+Jbf7JhCunLhfukkboaEEk\r\nkL5KeS5JGGkvZH9NH5SGsYmjhWv16z/fqpw9o3o7zqO1ErPr3vAzWXGXXYkH\r\n1JLxG9/poCzGP7qKK7pW1b/VB9Yl7vuU479XiKSzpF0RhzCy4ftUYtTrGWvb\r\npfLMk29CxDC+rF/kNXzEsG3x2j+B8/4m1zSprfZJE9qsaGXQKVI8SZ3InN+n\r\n3IbQpcJ/gFPrkIzj5nd99u/EM7wq8po1gKg=\r\n=rOUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/density":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"15.0.0-canary.da22ca960.0","@material/touch-target":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.da22ca960.0_1678393126798_0.7310189602681219","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/icon-button","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.304a94e8b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b305076ec162cc4fc6ed3d7fda538722f991b707","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.304a94e8b.0.tgz","fileCount":40,"integrity":"sha512-7hhPH1fC96CSArmGguu+AJhDWltlxgJGj+hfDYdLk9cC0+kVHYBFOHnsWm82srnMLwi167qS1D+N5DsyxV+Brg==","signatures":[{"sig":"MEYCIQDeZgUIXlXix+0QJ2hKqJaI03ycOW9dA2p1ME5duCqMxgIhANcjVk8mrgyLq24yX/o6T7+r+cy4j40Q4DD8XW7omuL8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpPw/9FM8mgPSAAa2ccNH96x0qKytreQN1n9gtQIVpvqRlSJra0vwW\r\nWvitFVl2C9ToyqDjTdZOrNadKaJ9UNbwnpM2wOPeDImDyBma/AEacreWohcb\r\n85sVhX6yIAQoAhyqS8tzuR4e7LcJHgg4HJHxlF/6itoocaPtFZvp2ns0rZhr\r\n75XdHmZAJb4mOYdT477RzYyIQ6aTqffXKRjdEp6P7SMjlnvDGsOI8/XhS2xu\r\n9tyH9E0UXE8Out4oUpAGViu7tyL0OQ56so3tRFGQX2qEgVppO4cwQTOWuiDN\r\nGO27UpR/dWFYRFVpsILpLrY0PbpritrDxuzl71jvxN8OFAAfDdZxU2YbcsdU\r\n4KGbTxbP9mpOLAHCLaFeT4OYRitXlatlAjoNjtziX+CeTI1MQikw0s9/f4P6\r\ngLKr6aOHK11oyvZaRsyL3CgrB3n6E1U6EcxaQ9mgczQ4pZX0srJJrHIjUToa\r\nQdkHJ07vjmAUyLGT7Xe2WaLvuHf5raKdbW24aJPleM2qopouyEcw4uLtNbu8\r\n8vqfPnECA7kGdOfZGHSSimAraAxMpUIAyAuHhIKANB1Y2iLF1On1dhL0GrDz\r\nBUR2Gj3Bo5rfA/FwgTWZTnZYdbBs6dohDg6xd1lX5rlCjwaQmDPPe+X/ByqL\r\nQFl1+m3rIRgUDsemEtU28LZ/+FQS6rfZyCQ=\r\n=e7aX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/density":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"15.0.0-canary.304a94e8b.0","@material/touch-target":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.304a94e8b.0_1678394730642_0.9641880254169524","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/icon-button","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6c265915c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca84d5287a10e7fdf0179f88e1986835f0bcac7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6c265915c.0.tgz","fileCount":40,"integrity":"sha512-95CY+2jGlcqL/e4Bey61vbDfO3UjR0lggj8y3zI6vc6IbU8k9c8eOiCjO5fQhIZwzlliTqJR3u+LizsTkmovgA==","signatures":[{"sig":"MEUCIQCnZQ1+JfrQk7ijeCsnKer30IdfdwTgFSHnDARDQv4kHAIgIIqDbIW429r5kS82nqtso/pltypQpQm0+c3r606Gty4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/GxAAoNB27F5lYPq2Hcad94LoC23XlU0Vupn5HVKa6DSdEPvvemjn\r\nAeu6tngvi0NvAE3Y4hpKBzERxsn4+K5KGzJpw7ajIM8D0XFGh1YDFF0qqqLl\r\naQ7JivNOO40djEMfUIGoIxlNjS9ffWAcOSmMCcWwHC3iJnFlzHPvuGCrPNo7\r\nN/B3vkUIn9wPAuSvHJQzSNj48ktNY5dsTHHjA1ojo7AENpPwXVVfjbExlODR\r\n2dlApZ5u/vO+G9Td2j1ifSxb1pn5/34ML263Fv+tip+5Y7MSNKysbgCi/J4d\r\nNZgAQB6mq3k8d6op3XbJYVEPJcqQ+OkVhhX6z4SyxhEHNaOaw7xONWjAudp4\r\nYeZ9KcCRd9eP592T7FApKjHZtfDF16Oln2MYbJIdxTA8A6y/a+mXtsSvNjOz\r\nvwX5K63ewqovqcgdLtRLEyyqC/mJSw48pm1m0ADmVDj7PWQQFHZVJB0GIC0e\r\nyCv2mahNnlgvZDg3DkQYkf5/omeSVHKJa51lBgswgsc9EUNDezubNCMfPROd\r\nBPatNU3xOvTiEWVRUX1rE5XPdjE6yz+40EKZkO+hqRs5h75oPWlqujFWbjTq\r\nnOvJtRgskGaHPXNpFm6TSU9k+XoEQzwtYZeDTZdfnw007H+IxUMcLk57aT9j\r\nZp4Z5PKx2PQl8eSkZFR+QS76zwPS2CgMNx8=\r\n=RDc/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/density":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"15.0.0-canary.6c265915c.0","@material/touch-target":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6c265915c.0_1678398467781_0.29828910204207393","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/icon-button","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.de5224633.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c194698acfbfbbc784679c7a2e046e50096e1da5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.de5224633.0.tgz","fileCount":40,"integrity":"sha512-ECLlnbNLkcw7p8EIRSwYmhdj13Bi+H92QIkF7b9G9IT08SjcpJcGux13MX2TFhLLR0YKrDy4vnrs7dvLlYSDnA==","signatures":[{"sig":"MEUCIFHIOp68YX9JxPDPYNlKzhiMOEHRLfErWY5PcK10v3xYAiEAxzJoLtB0gJF45ajMhWrxspAD5sQ2a2QB4kWbhRbj89E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7JQ//YWvL2X3OdCLU1YTcgl2g9TTnTqbnLhKhMjauC307cwVSB0n5\r\nqol4BI2csJB3nFy6Tc9Gea+VKWyNVX5SCS2BMGKsz3tOpiBWJkNDu1x1GDlF\r\nzH4bUGj2hARx3CYAAIBkH16de0HBa3YFA+f4aLeYVVaRyiBXL76M3f/Xcyh9\r\nN5/vI+SWb+45nFTuKaktSNRS+v1hZkRhaogvhA4haE5CEcMguF9+jGTdv5pi\r\nQyYyyGG2oWIWVax9bNpa76V6pAvHqdQg8xuhlbnPwHN4KPX0g4Ob++Et+C8L\r\n/6F3H/lZyrHwyp8NRWggl3VDZI5Juc3HdUfjYPBiMaswRTzDnBi4TyuZAlsw\r\naopyBaI6t3J7rMKtwoZ3gGpBhIyLDjfz5RnLA88ubZyDPthBI2oiz1fALVD5\r\nrIXhuTBeqmz8cT/L/Wq8Op6XK8suAjfWSTtFd0/iVT2amevHUfCdRu3uO83m\r\nrcpeUdsM+8NYvjdZLb1pVR7dxky0FBlybcIbmlR9ApKagIhDRrUKWJ0Bvrw6\r\n7qinN1ddFKx/kH7jZe+qeC6CWbRds2fpDryv58yHu2YsGJUPs5Tjc+27jZQY\r\n5yQ2gYB/eVvqepMolTwl0yJG39926s1tWSnYV+qMbIeMEqyVtZ3P6PtB5Dmd\r\nWPl49iW3J8V/66u60Em9rxp9t+aBCxwkNnQ=\r\n=/T3B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/density":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/focus-ring":"15.0.0-canary.de5224633.0","@material/touch-target":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.de5224633.0_1678406173670_0.6153910083554093","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/icon-button","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8879557e6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07a89cc20c1bdb8628ea3ddc07964c5ba27a75c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8879557e6.0.tgz","fileCount":40,"integrity":"sha512-CNvC6qeH6KL9Gu6kcmoMWcWXP1M/uu4/ZTRW/0/Tj0a38d2V7xxcYYwY4CjbIVdeCHW1gVrHFS1MBXnvANp2YQ==","signatures":[{"sig":"MEUCIQDn1PmeS34xZ8Ha5Sv2VB5Ikk0k0BLXnDYfKyM+1gXtqwIga569ykmq5k/U0f6wKhCZv90TdR2zlruyGD0KVEdcmxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxHw/7BeJf1XdzDD5QParEoA2M/YDA+zirG3VdFbw0nwfabySqVcma\r\ndtld/ALOMmtHkKU1enXw2GviaCjABGM0H2C0qgz4lujZ8P0nf73ISH8UuWLW\r\n2SOpzfd+kQv0v0YbF0/OadssHisA93mUZWyDgVilehSWWMDp5PRzSQRx0kT4\r\n9EsjyZphuUu3VFpTJzJql+H5pCjUCrd1ceElJiQOW1TAThSKtvv5mBxwtvtC\r\nJ2E3pkRFb38WsiNUIhCB3CzJtXnnqnw0FrvxdCWhG1GYFpwrPnvzc10rs/M2\r\nYCj1j1WUgDT1PUBOBDAQvtyw/eGsTBLVxxBAQzbg9ifOPj+1v9Q38WMVcDPu\r\nb+FC5Z0PzSoafdQJMAEMGXyiZj34IST8qn+GONvx/BEGEbI2uLlKNXxgeVR6\r\nCnjFqiJCr4JLlLaf8mXI1GeKoaA79QJTmopbvKrxB9kIh6yocEW5JNNYQmFU\r\nGtHdbL8IqZalDHmJy8SUHANkiCUhxk2uDbfti34EqXWp1eZPsJ6eX2afozNE\r\nE6KOM3tHT5iVCYETvuMohRD0FUoQwzKfSNnr5UVfyaIoV9xMSYLNRH6io2xj\r\n18sfZ4wjPGPyF629z4HbKDszUH2v3JpYx9wm229JXEoSqS0xPnju33LpJ2pW\r\nNfCEBNISzdptF0TXV3xH0Guci5JZ5Mjqpa0=\r\n=2ut4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/density":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"15.0.0-canary.8879557e6.0","@material/touch-target":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8879557e6.0_1678457304919_0.4793139025421935","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/icon-button","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.23073a303.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5058c966182b7daa4b888d94d20840716e8d8c5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.23073a303.0.tgz","fileCount":40,"integrity":"sha512-NkUGGoDHerIfHUwYKIIXtiLxBHxzdTA1gc+VMhn/NZaYq/xd/PsqOiJjoK4Lsa+Kbdk0BSXwtWLo1eXDojJ12Q==","signatures":[{"sig":"MEUCIQDd9Ku6fZK/+WfN7MZ+iibuuGsF+iL1xmjjyKzbYucZ3gIgEli4ap5JBh+CgHLjgk9qmNlJkVGsGJhNzfyOlGYQqec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzuCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon+g/8DjI4PvzSbNb7OJ+a2q941Nle9srxfZbJiq+Ig61stT4QnUI8\r\nqwJGl81VEs5cSwfa9t4her0lelZ+7ikVSwa5ujkAT28VEG37Owe23gc7v3TD\r\nQf70gsez+9xEbWx8cRLCmmLQiHqcI2saMO/VvfXHpLr7TswCrCE8JfnSljyM\r\nDu/IkCwKBfH3V+BPCqmR95rd8/2PFtTCatw6vTFdYi1nzJlJyMIzBaYZsVvz\r\n+/Az9Un4MJ/OkSNe820Ltkkbc6+eJ7MXupLGixGhp/4UGBCpI2uq/I0CAF8x\r\nVajzOXpBViN7ps6L6MPBa8nvRCYNbN5SBECaJlWyd+168MIxZcr+qYZgOojk\r\nYRxaS0kM4gvvdcnBMU9i9PA8rPy2FHAZtEQjYyWpQYqYSSSlov2rzFYb0Q0j\r\nr8Gor5cn1Wcac2MKt3D9pyXoo1JqyxzUlKJ7aUAm3gRSvzUt+mhb9g0nbFq2\r\n+bLeSAKdDAmLqYSlhAuzPsJrSCBOGYnOrS6quIpMC0E7AU6DvM2egSaroxaU\r\nyKAKRRBYeTw3NFewuzDV51LKIYbE/T6QNQQgp1ENAUR9wkdSxfoXwAZdVTDO\r\ni2cSKnXhYISECPcMVa7N1JGn99RNJ2JvorxfZ/UUallI5AqFLflCQ15FeZ/3\r\nGgAejLe1nvvKd+/xA0tXCoiOaBBG5nXMbUk=\r\n=hZI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/density":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/focus-ring":"15.0.0-canary.23073a303.0","@material/touch-target":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.23073a303.0_1678457729992_0.9734192389698955","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/icon-button","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.51c7d4014.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7e1d56d023701d5f3a94b0d1ef7921fc59437a7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.51c7d4014.0.tgz","fileCount":40,"integrity":"sha512-pOXjS6OXUwC9LAKh+7zch0QaJQCC+BPeBaER856Q0ezsx2hUr7wAF8zgrOcqMD9CAdhMy7M2dNiT5BYjtdrfvg==","signatures":[{"sig":"MEUCIQC1hrjx41jutcCjYdaNg17G/vglvGv8AYaG3ZdjBu9xVwIgfLGPchwWLLWHMsc3A5i8lNPP5odVU9W5G1kEtxPoF9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC186ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqURA/+Mxq87fiE9BtEsdxnjTsPnic2iyyx0qJ8gQfrb4zQUZ42aFAY\r\nBFI79/NOTCy/V+A+0660Cd7roWINfc2Sr8y3luJG7OrB1p7yVwwr5EsMaYmN\r\nIKdaO1PXkJqTWme+Z5pPMG0L+HsN4UGRDfHxEnRoJ69U3M9r0rCWjeCLT660\r\nXm8QgOBoeRMF+nvTG5rWDwnpnEJeRyjknJ2plPxKgO4N4EE+alJKzCzSrRiC\r\nbddUeddscJp8kRTpIZCxK+WWgdJhyJ6fQJO7t8PgtOC4KzarV8Ab2pDacXIY\r\nRUYSOMgeZ2T+x9rsqtpviKtvqhS0e1Wc4Jm5J9HLx16Zuqtv4zQCNy4IZZ5F\r\nHuWACWvd+75TBYF5+QuAi9HfABAMJlii0pIGSvsDex8X882/jMBEQMtv98kq\r\nhAEKfiY2RvPdt2jjH0RjljaH7wYfWByl7/H4SnoCrq6RzkTS6Xl3tpI1n53P\r\na5lXYgG839gvk8HGNiRDsg+PCzMC2BHQFD+6FDW0DqQInXgsOD3SPUPOF4pA\r\nCfqgWi+WE+lLUOHIbbUMtkYzEbwBHl8v9ckfMTbAH8lSAjZrVTAGGap4NJ2X\r\n/mKLvGH75OpJkCvF0ozyVjg/y4IsRw4idZTREhHTh7tgr901dN0zHDAO4qp+\r\nU9/FSz+siV7B9nFAELTRjANnNTYvjkGQcFc=\r\n=awnZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/density":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"15.0.0-canary.51c7d4014.0","@material/touch-target":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.51c7d4014.0_1678466874155_0.8560820449648423","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/icon-button","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1175a5be0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dda33aafc09b2914f011f9ab29f2d04f3f52e4d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1175a5be0.0.tgz","fileCount":40,"integrity":"sha512-Dxbp0XIQ6IjTuT6W8+WEVMh7WcSEc99nl6dvwZBpmP9/E437S90Y45vtvS4pWNbIe4Lor+TDnhK+vbvheCA0cQ==","signatures":[{"sig":"MEUCIQCuvo5TaygRpOp4DhFOm7BEO6uY17tYQhvxT1nyxabYWgIgDUuXvfuC6A5rX6mLCBhFvXzu4REtxwYJ6gFdqKXE8sI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5efACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPQg/8Dzz73rUoOcCAe7q2ibFxORqpH8qrjhKTdZMjg7fbhlfjfRnv\r\nNGCStxBsL/aN6718CaXMtRMz521NJK1297iGF2dMUmywaLRuELpBNUTctC/T\r\n+fbBlPwMI0x4z0kxc3shyt11diTcic4J6s2ZEZp//ujmEtOvjFI8ghh+GM4K\r\nSTNvKCe/0UeNms4Hw/WOb4M7fPbD2Uof1B27Luy69cqNAqOI8yvVPn3D9z5o\r\nN6q1+i2rktUHkOzDnwVib4hhvaGBFDew7WoWSswiCTrqT2XEQPm4gZn0WcpQ\r\nmUfuYSAIbRNzFoO5unA8TKAIOUAZZItbP7jWHf8jLiCOzdtX0e+YIAe3WWBW\r\ndG4siVh1TEdWJz7LRix/zchHk94WWfKtPPV3m+lOhDDGhTY3jtly6VvdGjTu\r\n8SBjFRXQnnGq54FdiRp8H6C8zLYRRDGEDAZs2wvuDfIMYRBWlTsxPIP6P3nI\r\n/HZLew/a7NxjbtQ5/2O4h45M+ZvPMpuC7lqfmk12D+ab44JtCY4akQRsks4J\r\n4zuo+Y7SNMYW/eyGsiquYHvCdplZ+/F4YkP/7d8wqBQN9BhDvxs553Wc5b+h\r\nhV+AqJWBATd4xXyXDZIN369cWD08SMHtbgRppxSNiGMQfKSpkMahPS3yO7TV\r\nu+lbBxkur5+MpQKSVOG7XtwEi6+Jub9M5oc=\r\n=JTG5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/density":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"15.0.0-canary.1175a5be0.0","@material/touch-target":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1175a5be0.0_1678481311337_0.3107791055272635","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/icon-button","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7adf3af80.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"331e94dbd98472c6e75332ad58cdae1da34d605c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7adf3af80.0.tgz","fileCount":40,"integrity":"sha512-CY0XHztycURjtPC5zYOtKchXgGvA0spgWSCRXMpVFPZUPqLCbXzOPWfglkgd6ALA4WOtvQyq4JPTuMouCQbsyg==","signatures":[{"sig":"MEQCIQDyho7QCp7tWPW3AqXusIUD/V+2kTsX2McI/FQ9jSuoQQIfVPzgEeSjBkDBANNZoNPHBd3Jk7zSfZOSk/b1Usks5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojbw//TK56CC4m3DRRZS7a9+b8ZlNEhUIeTUChrg4zbqB9+k9QJobP\r\ngoeItmdt2BKk6hmYhfy5aZizV0qdAy/eEJSEI4W7D1wCwqKlxTagWnrf0box\r\n1+d/U9Yh5LWEMfIW95lJeNkFHTWuGe0rQvhb8z/xn3mC/gnRct04P5xS0lyw\r\nCX86DWz3+knItngb9KDBRsIQuXKiRPeaDePwzV7tzO+bVIKm6LKQ5aaSBeZE\r\nmmFqog5PZVmNycwyKmfvHNEDqSHKLaI9if+Mzc2jaNDz4eUDcdBA6/7Fl8u6\r\n2TwFKYyPlGw6g6+gQ89TGTJl1eHRQhajto6o9pPL63U5S2xaM/bhoXfi3o5y\r\nzL3KGXlSyPDt4CU1KcriK4rjDxiaw9rZbbGOKxTJqJs7ek0/0WMzL68Lse4+\r\nOuHjZ5+QOhkXKGt7827KpPblAVqIGASzpROMTEB1rBf1m0x7YRGXafLAGxmn\r\nVZdB2kBSS4pVs9cVNPk6GGGrWh7+jI9QgMb4ax70Gcs5G9PTWgFTltmI/rlI\r\nGaSt3hbP5S0IKOZOVsDFrbzeRcGUKHZNzVrTB+3z+qRR6mEdQzxh406F/uKR\r\nwzFWQJSymy705JZIpuEoMpEGOEGsuRhQzWAD2Ol65dBqVMwhJjMKTlVV/Fsg\r\nXH1sUTmjm6BFFsKnIHxzSNGNLs8g0lk3TdI=\r\n=nQq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/density":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"15.0.0-canary.7adf3af80.0","@material/touch-target":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7adf3af80.0_1678497929467_0.4091971968826944","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/icon-button","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.82554d770.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22205f5bf39612a21d9ebfdb5fea555340a08cf0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.82554d770.0.tgz","fileCount":40,"integrity":"sha512-Bi0uJzfeFX2kqZ0M5FlG0mpMHf0mjDrBfVqJYsrggqAWEOBz9FMt/osD2WOp78aYAVWsTkfWuM2tVDtwncLxOg==","signatures":[{"sig":"MEUCIC/hTSCuOMyy/cB3bjkBwoMNbl+Q1X7/4+i7CsGO4AxZAiEA49TNgdd3srdZancLJ5BM4Ezum1IfJQFUSVLaRTBEwzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9toACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5hAAgbtANlRXnV/XdnIB+OSWsns1REqwheh5xZPWB5AbUvvT2FsX\r\n3wRkz3ml0s1zUWyW39qSFikj5aTkEEGhnQ8XZViHYiNDcS/N0O+7faGSJXAt\r\nCbEEByjuaBBdLoYfqhoBdBdV9kCpgMZVvq9REY62U7NPxIA193jHJG07WNzo\r\n8Kfq57eA0QodsxlJstzZPgiIb1d9odTj9RT3AnAlw7SlcrD+hE/9jVHVp23O\r\nclBDS+Kaxt5JFhLdXWK96NvSNnbDqLeqcdvdpoF0lipxMX+O+gX35XcIyJvN\r\n4pdyj0zxbOFwtjIso4jFoSF6c2QM8yoikLu4AICRR0HHoMNpJPA9CKmY3qU6\r\nVFdkFfpQon+O14uIe8f/86rnykd4k9nLxXn5vVK3H9mVJqqdRStQQZwfJoRb\r\nftBi18eXdGh331/3fOH/vx/+LCPjhfE0k2U4QpNZL89JFeDQY3TI90PL428s\r\njTdjAUKZHUgE+SLm+1RhJ3sz3iyMwm0KmDwlqVvV47kNgy8py2YWFYl/x3LY\r\nyjX8o2MeX0piMf+4ePLrkzr3LJ6M99PshzGlI347NvkKPzPlVF78uJp94Nba\r\nNs57zUmnDes/wOvf0abRGkJbGUSSUGXXzFn5ZCPvaPrVTWtkryfY0smUGVT1\r\nwsBRU+7KKJyEj3CMF7ls+OuqRT8Bx2jA+j8=\r\n=Xer9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/density":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/focus-ring":"15.0.0-canary.82554d770.0","@material/touch-target":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.82554d770.0_1678498663911_0.17470209045500584","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/icon-button","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.93fc524b7.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b9e9c7340fc11c9a5ec5e56a9540850784fcd97","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.93fc524b7.0.tgz","fileCount":40,"integrity":"sha512-larwE6PjCGe9EXT7T6U60uqM8kSrB1Jf1jaHWjRQ1nZV3YMv+IxG6R160l3Y/5Wb3WGQBNcfuXzqIHW0hu9etQ==","signatures":[{"sig":"MEUCIEWZ4hBCvBQhhiBG8rzdRxUvp8SiOaNXUetcVY+skMAvAiEArq4jcl6Mn9Ft00UNAYrVsaAf+Is0ATVL/0ADfFptmpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuE5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpGhAAo48TZTPLOEbQ6WLkB/L4O8QlJkCGzwMtOtQPDuW9P6BWv30l\r\nKBtwg3TVTfyE6FmbhYq8FKl3+vDGRkEX3337TLerPJu6WUOnkQdvpUetp9he\r\nBCZzsjO6RsuBlOPq652w2+GuHlkxKGQ2xK1uBiWkdlAJQ5ysiYjdaQWAnhHK\r\nbOf0fJjrVFtv8M/DdUaBNWSM7wg1dDq+6gF+eG7hlm3NUnt/AKRJ7fjNlBCO\r\nZDj17/4lFdNd/vObhCECv36yUVOlI4B/36VAD+JIAlvMZcbu51N3e/Mddcbr\r\n45rvUCKjoE9aCnxsZy4umX6KkO6ESbRM8/8uwHLGeh+FYOTzOMquVjRducoD\r\n0ZcL0jUzhLAysFo3Zc0ePyyVKeDrtJ/MgYT7pcGMroAQ1Ib9w48ulC0Lhnon\r\nirpqFAeO2I39c1rqkKG1ekE34qIQIfnDHcstG56Nvmmvab74KG3kEtPv9GSt\r\n3lbJNvTAV+fUJPNcfPRL8XV2iVMPVgHZC87fCKtyxVenlebuZklRoNHWWWnT\r\nbEvbc5finQ607CaO7JiZOGGKp9IpPyh02shrN0YWyDtV16688fnOdxWxevD/\r\nIDO5cnjHQS944Dek5lit0QrQHglVq/m0Pj+ofX9PnTnZrKcybfTLrBU7Hs4U\r\nTxfoQgZS8TVTyX5NoOTJlzc9VglsCSfXXSw=\r\n=8Wrw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/density":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"15.0.0-canary.93fc524b7.0","@material/touch-target":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.93fc524b7.0_1678696761334_0.8419687268000613","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/icon-button","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.50be0fbae.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51130a84553deae8b98c00022e5180f25cdef626","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.50be0fbae.0.tgz","fileCount":40,"integrity":"sha512-A3WFKhB03na3w5vX+8CykQHZW8wiHmpr+zy2NAjumdc/lUybkyCHogbjBsykIL9AzclASMS3fdUbfxuLRJj9FA==","signatures":[{"sig":"MEUCIQDwvM4jbR9zP57pJEiz9BuQavfgx7NStdtRUBF+uQue6AIgWYhNN5EDJ8bSfc7IpxYuQMNs7HsXUkdkg2S9aQmbegI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC2A/9GST8SET9Yce70DNL0VEunvS8ZncpqsuRf/UxOdYbSVfuzy8D\r\nbd/Q4G9ELX/21509vdykrmLDG3yIDl7B8ixcDJdMQl/mBI/ZciR/PmmCe8UW\r\nKpmBtji4GVpvd/iQ3+1f3DwylxSa3CstkMyXlr1Nd+lscQR/FrIuVa58QVHM\r\nqIC6jwDrXogsDv9DiTuoI03jmczh9bPqY1+VJdpGFIw34chYSqhTaKRr3Zmd\r\n+a1PUE9vIqTWtUsCh5/nT59wsKfOa+TgCBp6BzTa+pQp5OJVMbFznPi8B3Jt\r\nW8mf8L42A5rpajBlv5/H+4E8JjBY4XHKXbsQm9jUIOT1rRJqrykresaOKeTM\r\novwyudHGK4DJPUUJgD8f9wwPmIhRO43JyF8oCo3leIzRxOrSnOckm+KrlcK1\r\n2MUwMMi99qq4pX5Njl4A0SOXviqFsSO3vVenSiVKBP2QHAlllyfDbeFjYZiA\r\nqVYDQvDqZcLWUPBcCHnIMDivOlVt/qeSjJCZ0C53t0q3yhW9jsZd+E+0Mmpp\r\nRjGxGJZhucNLRGm8urP2quK2tdG+uCHp7330gFXkNAgxNkIVW82/Fbp1Oh9w\r\nUOXjDwr1Y6cktCvfZyosZk7HKYB9pAspBmoHTeXLUTimHnTPBe5wvEj2U0Og\r\n15LRNQmXRCEeHbutkk17v3GQRsdQMcvnNs8=\r\n=1BuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/density":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"15.0.0-canary.50be0fbae.0","@material/touch-target":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.50be0fbae.0_1678729482039_0.35092981030716586","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/icon-button","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6b5ffccd9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c15163caf3d83687746fa7ed9602764471f2315","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":40,"integrity":"sha512-Q0bx2+Wuv88DpdnlddOMMXqKvlNyC5n+giPZY9CH5oRVDGXKyPaah+dySti1nwO6OGVNt/lb6abgNh1Cd72vJQ==","signatures":[{"sig":"MEQCICMXBIEdOodzfpBpvmtAY2NuKVXbbPguNFjYjJwG8speAiBIsueXr1ukRHgBQnpSwYE52B/vC2sM2dcch4Eubdts3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmooow/9EP6KcjNLvLUzNgq/aJ4I9YR085nLCdcF/RxiXuQNAv8sw7d6\r\n2s5/GWizXq/tZw4QFslHZ3mNMbGitn/P8aKg7PUOF04G6ltcAaHiyflSWdO2\r\nbg8hYU0OUDEmJPBv3ie67tnoQNnbeWCZNLyJWGYKiZ9r9MAugWVzZw3HYYt1\r\nUAmxyUA35s14A3QUmiDGFCaIEEpqeZlfIxGQjo12VJyaS31SXfW5BezFhwPZ\r\n7rOCgNm/jzzmJJ5iE5mCprvz0fiFBrpc7dUB0RlBTIJJEK7NuN2ub8CXzSm/\r\nq20K61fYUIwB8DPdK4gCnamnhduQzmNnUDkF+Oj7SypTbbKReKfDhLvw6dGj\r\nhbeN34EOkq3aew3aZ/SEIMFTnX+0RFBO/cdO5HiXz/a5TyJ+A6NAQyyG9S0D\r\nbVkp7HUkopf/LhSHDNwe9BaEVfNeQ/UU/ATbvwBw1Tq75PrSFkxmAneTwnIc\r\nS7e212rKmdhj9EFuM8GpblfAnf8lgeYjg9ooXlq9NDtIX8Rr0BVYE+ATEbYJ\r\nKRvUcVzjLTvZoi9EyqK4gzt/vhmN54djhN2JbV726k5DbGFqajy8/r6mEpuu\r\nUTokbnGf1dpq+vgPtx+oWuVVvyJ8A+m/SjeNclvJg6diMOnySsftHuEnfRaP\r\n9Rh9etHKySRRKTD7uarTTohhTWD0yEmgN9c=\r\n=Frpd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/density":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6b5ffccd9.0_1678729683028_0.20517537092485583","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/icon-button","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1c8013f4e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2ca50c12c9e4a9c61b074e4020f2d6a467aeb7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1c8013f4e.0.tgz","fileCount":40,"integrity":"sha512-3aMHNtierL2Q+D+tMpa0rp3TZW0ivIrPKk5j39cwiZC2J+VUwOhyOLhX+LXbRZvJcr7VUfoMNUUHTVrEFlbNIQ==","signatures":[{"sig":"MEYCIQCyR9muoai2EDRaWKf6HrMq9Jjy9WEuedJSbBEROrVrEAIhAKmppeupRGmrPKuKqy0Iv3G3cuxmTStboYNNCpPv8DGz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFsQ//TsAjyYgaalcKBQmR8AIKl6n603uFcsWSMQ+beMMaZKk0+MMH\r\nxRpnAU55B3fN0/MOQp6vgz4UKWS4uDN3o6Ao2fZV2OWCBApzfyCruaVTdke3\r\nDtE7lk6Ws94+hIWicx+MsAeUv1MVvacTPlA8U1fIi3AQIQcGGEPR+eJoIAS9\r\n5EF/UpeH4jMBD6+qRb49wjKL9HHSiwe4JFL0FJnBPaBMxW0swu7Q2wiCWMFV\r\nrQHbR+6nkgt3JVKvSxSe6qNC/KR+tcg9jzlqp4Db2SxNV9MZgJhCdOW3E7RS\r\nqVneV5Upw8s+Ho3LuPXxg1M9lARopaOMH6yN1kPsgNHGo62ZErCh34S5o+q8\r\nA4QvKNBlyrV1P++WsX8M5Q1cg2EAKLGlVX+yodk2SCmxaGe6vLT7hZgZyQPH\r\nq76k3TBlpSDpa4kWqQ9u/+26rGPaogAvX1fumPSn39EHrBXBpK9lBeYi4Wmz\r\no0B1o+V1owqCAyg36jgHzc8THRjzZn65pScyW+NIxtBKdwcgdFqGcTToc6ON\r\nOn+lXyvOH4eiNLfuAxZiaX+xXAQUQf+0BRXbJGsfAbkqFDBQuaZgFSyI3HDK\r\n8QQeCsICelDLhCVEsLSNSEhQNFzmqpG9jjr4Ehmy+MVhrx6LhWH+YZb4BLc0\r\nSLPKYsChuetaolb8qMKClYxQU2iMV6NspBo=\r\n=ZYjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/density":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1c8013f4e.0_1678730598912_0.8716308644293724","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/icon-button","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.112715df5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd533614ad71258f6583403a777f00b1352cd2bf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.112715df5.0.tgz","fileCount":40,"integrity":"sha512-dIwIS6xVZwX6mD7jBPjmkF4rAbHrx9yOlIvqewSedCmS1LAw+e4i4fGrn9VbGPMcVop+0mZlvN5qVGgAmXJgEw==","signatures":[{"sig":"MEYCIQDUDQtHVkCmuvJ2fQK17coPXgLw7gj3razQDAapJjunQAIhAMmZcBu/G+YNjc2jTjut9EHOER2jyW4zu8rJ7QNP2opE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5nA//UoeVd5BJClPGp3ucbSnmj0QKb5bNYuvcenjCVJNrSp72UQfm\r\nD5yPIHHcHXy4nrKwq4dF9m8wDr6BRkxYLMc6Ef5c6j6Khpmq10Oy59Oo2aBA\r\nXcoPfW0Ku/RrlSdvzCcT02v+DnThi6QkbHyX26XId5OvwoDDJE7H46OhJEd3\r\nt6n9iDc2MfV7EJG91lfUoSnLDDfMEGJcSPHZXX/BZaIHSDfEG5EBco2bct0c\r\n54uzxTYnfpWO6oiKkWDETrLGTVvtyKig5NHfWxt9kiuu1LhqKgvdV25gTnDC\r\nattYWHWZEG7hkimFb7Q+h2mehGxGEA1lB62eze7qpQdshmaXzU/ApoaHa9T2\r\n9NHSA8NrV68kM6GTNBp8T1WzV7PbwgDCRaT3GGlt+XvNWgX8aCUEVVIjA0Dt\r\nbgSTsu70TXLNeeXb0/VrHd8xqq+PpyPJyKnO8PWcEtDZEwXq/x/Z2xR4y7+b\r\nCvB4TmWBSq1s8SqWmACiybj5/EKfyHhPSPRRqNrDOfnBEQ3R6Nj3KBTA9gwL\r\nk8VPLohL7KF3sQii5bO5yUYQGZT8YYErZRYHeOYpqrqwS2llh7UeIg66nwZM\r\nrYDBqTFs+z5cHMVZpqopWLgHAZmfeEUZqw+FVeTWiuYu0+kIQxaZeS7Y9U0Y\r\nxYqEwmc6GL+hHlHnMf8mBY+/+nzh636OhYQ=\r\n=iojp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/density":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/focus-ring":"15.0.0-canary.112715df5.0","@material/touch-target":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.112715df5.0_1678732784329_0.15409672100993488","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/icon-button","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d250911f2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed3a9830f1f87e34614fa974df1bd6ac6b241287","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d250911f2.0.tgz","fileCount":40,"integrity":"sha512-uVr69BZqr5PJznWEnNK5ll1np6zj5Yi21dk2WyKCD2mrbeKktq4FFhayM/SIO2TtUKJSJzAbyxDyPCe3AIQWGw==","signatures":[{"sig":"MEUCIQC+D7CkDTxi+OTyafaYNLtgy5DijzOcq/Te2xgppaTxWwIgHyV78IRNV4aIaUAd/LV3EaluqJrEF06r6+d9tOJoYNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3otACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIxRAAl9nchEQB78xXXM2+K/rE+dOpmPFnZoM2RvrT44+lnVDxjIAa\r\nYuBJ/Kfxyi1wjrsqEwdxg9w+c9IZ7qNEdphyN2iwVTcqS8Vxv3NS3Bn6FR4v\r\nvDqHdXNjlRljYs3sIVn/kYSYKzKK3oiqKhyFVuOHbKbyow1YeqYK3U5CnVeP\r\nOTIB7xo/xru70jE0sMVusk4yGa2elroIPp4j5KNu2JveFF6Xk9Ow+ziBYPnj\r\nQe1ogfT7Z+OTWJ7CrXTJK+fnyd7See43F+MkyGjEvaRCkyF65JoRzM7m+7qB\r\niSbMAQ/WPeiEA+GE+vbsnOeqi2Pk4GcCUoUr5ivuqzXjhrJxRDJXDqiijNpf\r\nH+Ex9qA6+h0aMoMzl2YC6IyVbN1ha4ZIWod6xfTSdBvEBaa90x0ngwmFyuTC\r\nN6tALkBtxMpvkwgfkEjOps6P6NXU24AvxOCp2ly0BWqMc0Q9lwACl/Jl38LO\r\nXckIMqZJVYN7kKImK2nZ6OUxOPkDGXJhVaHA6h4QV3QuAIQ7qlWvDzifNX02\r\nrovgt8gvROIO+yijfri9rfHaOsaIwg1opALdorQ5QlPrCcQN5igkbVSOyFPh\r\nuXDos4WYY8GVj8hOs8p5jOzSSwNdP//BbikDCp3rX1x+Aeaij2HnuYtnYO/J\r\nmcRGbMRB08+6yjVzjVGxawCRN6yDz+1r/oA=\r\n=kHFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/density":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"15.0.0-canary.d250911f2.0","@material/touch-target":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d250911f2.0_1678735917538_0.41612105424534684","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/icon-button","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7cd925c12.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f5610bc266fc4ec3f217081fb087bff9358b7e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7cd925c12.0.tgz","fileCount":40,"integrity":"sha512-RjwyhQ+hFo56QNYkEgQbB7SSywpDhaZ8mh3WXKJusfFWE0KytU+M/hzLdZqc9uT04CnMNQj5BrRFv8sKriGoMg==","signatures":[{"sig":"MEUCIQDjaUTW/IxIurA2SfdqNiUJG448P5VVBwXLFsOXuzQfhAIgbHPdxjtJrmHFK3hqg3DmY0sjfp4guolHqxXeBleI9B0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3v1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8xg//dni8fHv8E0xnCbrUwECgc1GRPiLp/Jih/858ugolXsju07Dm\r\njuLYlKCRosdgFJps8z5dEkbm2Oi2I2YEct3ztMLjNm9XK51oaAgjNCIBGZg3\r\nYkrDp/9hEd5KkAqQcWaEYrDUld8XsoRpj5+wSYj5KVTI5LBlMUvhop4JXXgd\r\nyiGq9jswXYTTNBgo3UyOQTBGwXffyOy7Y/lRs25Qn6LAv7wtyGULhFxs3oXd\r\nzXPpRi6yf4PQ4OC0/rfvwDBXDcPiYm8UlVdWngMh9siZ2BFjF9Zfun63telP\r\nbabOymelG3LsnC2G2hq6K92ic81GDqm+kldJznZdtQ/HawYQx1QPE1fWXAuY\r\nGwamNma9HJ7k31t7YEIJK1IENaSpiYHkY+qWNtJhXL6K7dTpxW86/iB7dZAf\r\nxQScJl0OBfTJaFkZHXCBX6bAynkSuYsfuCfrHH4VTk+sT1oc4U30SLeAGUj9\r\nceIKm01zWq5NE2P2FWG/Yh2ihSY1AA4ggIvZkSOlKZ5mFvfBeiYpCbJ2o4PK\r\nzJzJLfg/N5LRyC4MZsNmdvN04fpglEoMDMchpF/ot5y/UsTm1QYxLw3GCqg6\r\nmP9nluwuAu7siYnkhSnKwNgrEGzignDo0R263QqL0ysk1jx11zaqlWVWA+YY\r\nq0XeDQn8lXDaIsSEPgn6ap2i4jvSEA9+F4M=\r\n=3/7m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/density":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"15.0.0-canary.7cd925c12.0","@material/touch-target":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7cd925c12.0_1678736372914_0.2883944123000475","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/icon-button","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b2ddacf73.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60e97244e5a31030885a5ef3921a82b990db2090","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b2ddacf73.0.tgz","fileCount":40,"integrity":"sha512-QLaMEMNgCTEM2RJm/WvheeU8faGdqHRC6h7Y0rBH5KSIMlu8Pr8JL6Ft8SQT3rfOrNDDNtmyJWejJRALJciE6A==","signatures":[{"sig":"MEYCIQCKYCRFDuLtKhKnVapZu1KfvdzlLjmJUKStoN2Zk7xaVQIhAPofoYjrjIZpVKmIyQHv/60iML2Z9jzm1M4+l1FoH5yB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3z7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoStxAAjWhV8Yd+/vD+Zo3uQM0Y3R0ado9mwA8IwTgtetruPfJrL0Tx\r\nSJrSb9CCnrD/kO0cZ55aP8tdXv7m5rm0wj0LEyaCnZKGiBBfiYjC3+EMIzLr\r\nGDo5bKLxFW06jcKf7m2Fw06E2lgNFx+ZJnBIb6yngu7Nl4g7KP2nD6QHTVfv\r\nZZUHhoiX8kO9iE5cFEb8mpSu1kdPFSZ9Z3UNBl+ShWlFLhq1GN5GDaFIIsp0\r\nztmgmSaqbb3C21IgSN3GjQA88kMXU5HL+ifXxZEl1mvgNbz254iWNtHs6yLQ\r\nPfnjr8xMm4yLLLykOdf7nn2S0rLOD8PS3FRjK+Rvgx4uv4yYwVA3N7CNIhN3\r\n5MQKhe4qYz68kililsSPUsdBdaiJ7HNuFBXHL40XfQrWpxKL9aFRaf6JwMoj\r\n41ZaOqoW2Nby/DnNqXVQKKsPbrK9cbBchr9B9+GyjT9sMvpsW4ZRF7Fu62Xj\r\nw7sRsSycUCPpVnhB2JRfllIxXnaGAAZVeybV90KDF889kyN89McfwdsRLvJw\r\npdR+04JK/UOjrU1xWuv1w1lsNJHqZocEwYx7Q9qBIusnuKpZ0f3wliwbV2lS\r\ndMRJEOsDxILpV79oQauJnUajAjCb+J2v2YhJqPwSE0cHumDoMV31s7mcPuoM\r\noRDwYx1ZX9id8ikbFCal8kXhUjiFB8ZqtEI=\r\n=OtCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/density":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b2ddacf73.0_1678736635246_0.6342070674948366","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/icon-button","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.989ae2ecc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"613935fd3528d8e1e7232d0d338ac0e7a818e2bc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.989ae2ecc.0.tgz","fileCount":40,"integrity":"sha512-wLmwjQlutDle0I5T5Zg07sfyJtDYoV1Vsg/pPEsUy6flxosw3+h9hA3InBF6jUfrpcp0Z8dSRpyb9FknI47nbA==","signatures":[{"sig":"MEYCIQC4cItU5l/6NoFM/p+NIzs0diXl4wdivea815lVt/MZeQIhANwXHrrkVe2IEGlco/2q6PU/2kGNlzd0RHHIePTwHGkq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFPw/7BQfwRl8XnEvNrQaFTyafQ0nDFX7GF8ecS67pFHcnD9BTj25I\r\nYM/TiZfS5RFDmE2fFmM1aSSUgTkDC+sDR1CTbvn2hmcuiIHQYoC7l4vOjVxI\r\n7HvzhcfjO0yC9J+I3XnSiHOfE3zSGqsGEEmEHlKi1EC2rzmo/cTbWPXE0Jn3\r\nvcvnGY6vN5KCs4zKnoPyp385IxOQav7FVWjX9A3yY4Nm/uo/z0NC/iWjflX0\r\ns+iZWMJGR5bxx232qr1Vm/VAsqKYmycVEYSWrVPCGcbw4qwCnO+GtY/OvfMe\r\nq5Rac7ipkvzHWEFMYISrrfKBCg6FcRGdu0aJujK3VLmPy+xwzjQI1YpZgWOV\r\nD6C6jTbAjAuzTLvXi8OUMpfMOXf+M8J1S70TbZAll3+iXm8/xWvyL3d23pJD\r\n3mlc+M1tvwbWpNjRwvsY6dXRD6PijqtqH7e5gOldwjn4fJ6gswVFOAOtD+PG\r\nyFITxjRRsdanrMB1StaIENlH/dpZk1cLcmgenUABwRaY83+zG/93BLx4EjgM\r\nGyu4qBVjiI4LIWFOxsc/9Uk2jClLJ0k0KjucoLyWXS7Q5ovrhoDetEa8VclO\r\nDNbeJStyxtHQ1NoAs66PVs1AUh2RobCHN7HmVTBaosxYLcO5y/Xqt973SKYL\r\nVRll9fSxlfNeSXOd+aY6vHlQdO7KP9+oqiA=\r\n=3GGC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/density":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.989ae2ecc.0_1678737188711_0.6442570633206297","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/icon-button","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.89c66483a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fbe6a3dd513e85ad564aa7ededcd7a887f6605f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.89c66483a.0.tgz","fileCount":40,"integrity":"sha512-t4JejLEzL1sC+Q5wbJgIDQ5OdjOduGniFI7KLElVXe68lk7WdruHIHFzvMufMqBR3SXvW2tOd+gnpTKqG719sg==","signatures":[{"sig":"MEQCIEVe/Hl4pVbFQNcIrrJoD1aL/TOeDQw78UOc75geJSlnAiB2gU92vbJPvR0RS2nMho5wFA0utwOkC6ofX3mK2KIZTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4S3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOCBAAhZwCspja42bdHZgBbNPVU1KHTF5cP3s5wc+gyJM2VZ1FuAz/\r\nl/yFc9UP6YKvRCmmQCq35xxtFsKpQVcO+q8yphUH9sRY0ETRt7TznbhvxbGI\r\n0LfZu5xEc2IETau6O327I9ZFhpnUQ8J3ffTI1bkCGpzmmSo0dQ5T4O4eVWS1\r\nT8KzIDUnh2R5MaW8OL1EjTd583H76nfDG6k801uCdAtmNB0rGXsIyMgXC6Ie\r\n6nUT71+K09dJY6Y4G0mk/SGMZPRbqD1/rO8hkXD7SjfZonEQ1HtvQcWEpkji\r\nREG85kMoAjkvIeZxW0AaPJj9B7056518BVdh5zKALYD7X9kt4x0BMIoLmcml\r\nDDZnxqzKWumGiMxkZxbq8Y2IuVYdXL6mCtIovYdGp3iPwoOr3a0Ufa4XPP13\r\nhOQVW9cS8vhxkhdwdEwnuEKRABkuOqzyiQPy6thOT9jVPZOLiwYws9hFG/XJ\r\nFpjKdnK1SYsNM2y/ajoA6u7rTZZUYD6vQgFUcy7AVKsdMGsdmxnrMZIrw8LN\r\nd4WF/cG7308lNxZwWkshG471rOy8myIsTwQ8BDk7jH8CJVJ6aueHZ9e/4SrC\r\n0UMd4s0+TRUvxm8fZCAbEBOmg1tWObl7PsxyndIBIRa8nLDUmDVEJrOzc9fa\r\nDDOSWBI/bXtZVmsOpmNeH2yIS2qS3l/BPCI=\r\n=U+Jt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/density":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"15.0.0-canary.89c66483a.0","@material/touch-target":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.89c66483a.0_1678738614989_0.5156822047394032","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/icon-button","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6a85742c2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ebbba40e2c45fbad15ea0df5af63305a7712814","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6a85742c2.0.tgz","fileCount":40,"integrity":"sha512-5D6SPA/1tRcga7I8hXgW489osWbWbejywWd3opynLbIZrinNbgSq4/Xn94XulRsGoZK2jBVSrCVPYDUX5ybjOw==","signatures":[{"sig":"MEQCIQCg6waaLiyX51hgtmZ9Oabx1KBG1zyEyMvBbaatZmqIuwIfBBX9CEGmRbkwg9vrMNX1B26pQVfB4xDiVa15evH61Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQew//RK45beOjwyZZCYsdGF5H83NDLhI671o8einbCON0uL95LEQs\r\nud/ytys5+gSTJLyOD9cfFlPQOfO0EXY/gHYgEpfNsnEQcBxC58Fog418ahvt\r\nn7qOLqZbslOj6GgTPiaABgVssVGsMegrjAzmPQIN4MnV9IlcEZ6Dc3EEGO/m\r\n/Op3AnwIrUAlpAJs/z4JOAf0eSnl0iQnod5f46RhkXFFuAx1XHQxt/irh3Ep\r\noa37n7bT/pOxnZpsFPbRmyZE1LXKQvRtbC1CJ3Yj/E/CG9HVHEWi1SRpCj8y\r\nUmdQQSfuCb4bdBgYNNkpUfj7BMrtuG1llywur1Horqx2dnIe5iB4vgz0JRBW\r\n1YQmAKsSamoAytIxQ1pqdggqAaZPbdmVru7TRNaROF5JzbJVBRFZAMOBwxnJ\r\nRtQMT4BNjfY54UYswRwl8V/aBs3MruDNPujT26KEFiAdmuKOeTvFJWBg8IIr\r\nUzMgDt7mNn8sieuafqrnO0GahpE5r1Tcw6WMVhRag6TiDrn4U2QP5fXIc+Qa\r\nMOJFWwFm9AHkw83IQ31d0mT9JXFGjWgrFaivSKnTMZLNnqJO2+d/alOLRTvO\r\nwwobMr5o/Is6dly7Hini5FMmRapW+/g2AtwPcq0KMnhy5GjHYt0robN9PN0B\r\ndqUorggPfRj9giTP6uWSE4z66BfKLClLrsg=\r\n=vQH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/density":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"15.0.0-canary.6a85742c2.0","@material/touch-target":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6a85742c2.0_1678762068942_0.4602974286686323","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/icon-button","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bb6cd78d5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2802998e5e87a43116114f4b98095ac2c75ffa13","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":40,"integrity":"sha512-opAlp2BA67YobVR3tMHI4Uzmo1CwuRhibeZJuiiyGkFS9FqF2RGq37iWIeUywQvYKH69KESIt0v0Em7fb8GW4g==","signatures":[{"sig":"MEYCIQC6dI41F1ClFU2sBeu2WCX9ALg2rop/v8LaASSb7yY4ZgIhAN/i9BskBBaVA3/1+0LzbDKtP11NykYh9PCIYx5arotI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGEA//UZIuvtQh6DK/0tGKrOfYlyhiiBpvaIaUUwDcatJNmW+/nfiz\r\nR8p6VH3OclTI6Bw3jLBjbSaIwvgfEY22MYvA9WUHviE/O9U5aThmPh2qN2zN\r\nWXwGmPBu6pPiduRYLAaKXDs4BhiKB/hEIZnE8Cg4Bd1LXadZNERnR9gvxHHM\r\n6ClGxUd3wy0ATD+ZpOm89n3HdaF52YcVrT1IuekeFjCL8XUEUUM2WsCQCF3Z\r\nXdcnXMmHByWtO3YX/aGZDbDdSe1LsYfO/wBqX6SwkWQKs0stm3C37BPm1iwE\r\nGq8SvE9qfVc6sA/f7+56ee8PvAOd17FYjfwOeD7sEhJHh016NFId3CMn262x\r\nRS9/zjycvIjZ/ylX66EBT/ILUSumK5ndhd4fPOfkwMFG90IKcULM6G62sfQE\r\ns040bOYDOKkTJrsYqYHic0kvM8MJrp/qutav3SAwcJINJPIfQ6zhrcCLEvb6\r\n2kYllxkkHlMhdBYkDaqSdSFM8GReHidL7f3DBN0IksslePRtTuk8wa02Bgx7\r\nQw1atoWNG1mfqtJNHlRYk8W6MEkvnhcnQ7B/FjHUwecTRBFnZr1zElmEVDvy\r\nHrQmJq9kDLBdNwqNG4SNDwleRWx4vw3fJwHQdLzPPEpgTeMTCgaW/+ceVVkf\r\n37x0fWIRRHSN6jU9pJio4NTNgq6Z7d1+w2g=\r\n=jn+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/density":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bb6cd78d5.0_1678817839967_0.8537774244757605","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/icon-button","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5f94aa37d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2768b0c4610ac45bf06f1e14c9fc3c110467c6e0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5f94aa37d.0.tgz","fileCount":40,"integrity":"sha512-p2uVtTywywDkrmG+Cn+YH5dNUThBCTZ4hEphkNLY0SiFzZIWy9x0krsMXUnu5psdgU+4PS3yaSMZiTZPpJM9NA==","signatures":[{"sig":"MEQCID/Raf5n1duGuGUNEhgC+cnORJ6VsmmPLffvh/cgzfRoAiA7bBvbtE7qJzSjAX37DpkY9YGhLbYmls4FPvQ0nxM7zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCZg//bHIMZ8KR09eUdbZkTp2NgyywluTwcDDQMgAEOObNPFckbDhn\r\ndDKhWpQwcc1FDCU4r1Ihq+N+rTBkoM1vImm70lgGEqRiyXmn+a5ond8pvUk7\r\nqiQHes5ZyMAmAj4EtHOEgiGiDg+EKfBuiliMBEiYsk2F9HkMYaKe42wFwRKr\r\nl8z4POQ2ZonG/AdRuZV3kMLEOiVxoiGw+UVGLnfUyklsD7wO5zWR1ok61IYR\r\n5QAYSXeK8l+DRrwPtPbZt6Y9nQEKirfxp5pRtLl2QkPH/nz6D+Bf6y8yvJCU\r\ntixWyhS+Zvd8xfAUeLW12Cm7PVO2fhmtzFyO9dCeLXqwhbUyWMVMIeasR36z\r\nxMSbvuU0vcw2TbkobTD8EyQCNusscZMDsPxzVmK1SpRPx/i4e2/Rut8jPTv3\r\nvPMHBSihDvkP4MJn1yVdGH6oQtcigc+FOQcMDcydDyCJvYIkyuVjoouCidzv\r\n7dgkM01sAOL7OlpukZg7Na8Hfm3IUfbQIP2NAcWiPaeb4s/h1Xgxb8qQsG27\r\nVRRDcOnLW5QvKHoRhxSrYgZFukeSVq7y9JjoUiysr9vwaAlFqdaRnx/Uw0nZ\r\nSInem75YsYG/jjywkgayx6giN4q13i7SVAQL+Ie4E5cfGYaiWCRZDIT/74HP\r\ny2y4MLT6n5MUNXvIbHrWrFBfKYOiOFt6JYs=\r\n=ZqHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/density":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5f94aa37d.0_1678818039686_0.9216123767739941","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/icon-button","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1bd317240.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f09f5932d3e2431f2a8b9e28265d89d2bb467a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1bd317240.0.tgz","fileCount":40,"integrity":"sha512-CCdY8m28NB/7Ico1Pssy3PFMAIOokYCXJw0oDnBMISLF//BlF07GutgrwkhYg9Flo26niqVv4ku9g31QJmAaAQ==","signatures":[{"sig":"MEQCICcIQgGbiU8zs4rPo6ryVhGVW6NyGFvlmkLybo3jiLGAAiArx5ERGx0APrGoGyMb5EGdF6blRSxUHVMNtfatS9k05Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu+g//chVeFgIFjy+5PQPIvo4sNGqHjMIt+xSRNv3telf4Fmz67iub\r\n+80eJkYXyvVmbZ2P5/J5TMlSNTGcaxpHId8aW5e7YV6EOHZpuW/uWWsv3G/9\r\nRrACsXOT7TvsxZE9kOkxoUTOIoRKM5EStku8INFTVKpdw4z9T+c6KXgIX9+D\r\nb23rexdvQcIUOAqDBO5/vmGpotdy2SK+y3cfD4aDYNUDjxYizvpWexMjI6lG\r\nfdfRnkjcPCOJEisLJZtiwFYZvSvqdwyKKHNpre6yWvTS7o1KHAqpCuI7vMfY\r\npGPY0ZgTIbYU3QkdYl8yQOdVMTL1p68HlXR5gdNVP+2jCH/7o/rJnP581zdh\r\nxqRYdB/Mnr4+R0/gCfFCNw4oXHsImXPWtTXwkRD/RopvXGV7xclXXQUBNumS\r\nI1E6G4J+jEcO+u5DcK46i8I8+PrBMuEXtjsJZM4yJcXCy7JQDj0kYeM5GDtl\r\nhwc3Rd3rau7ZeHK9rOSX+oIjPknMUIgw8FmPVyfSr7XN6bsyNxBHv7UM7VY1\r\nK8pwu9BLPblVDOqkUEIip9Okxo6EnesHJThqjogGLkf1kzbmakVatfZABKiH\r\n4jPsvXE5ugdE6d40mRkST31/CnbLTxRww+kiaOOJOtSNsC5EK0/ODqqG5H5R\r\nfXtkmdcyghXHR2dIWTYT9O55h07tv5f+Frg=\r\n=0mIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/density":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"15.0.0-canary.1bd317240.0","@material/touch-target":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1bd317240.0_1678818269641_0.976200553824266","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/icon-button","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d441d2a2a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e118aeca68450a146c5054a9fa0318acc2fd11fa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d441d2a2a.0.tgz","fileCount":40,"integrity":"sha512-aZrcBO96z7VXOpOoiBgwaCHmydcivhXrrUH4V7MmgBy8o5yviogo89Vm/npknWhdeeXnbmcMrpr4QVd2LT6JKw==","signatures":[{"sig":"MEUCIQCLOdfNgXO/Mq+6P1aALpSMLRnwGsKt7DecJFwl+bO34QIgMrg8CIlwFgr2IcORXVBn0fpJqEkFXG36q0Dnw70shFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Ow//VBk1Mexcn3tMVfpsXA+h20e66jGuN79kN0KqZmdu/BSmFNOk\r\ngohgB0qpVwZu1Jf936KS/8e9M2OILpW0WpVNxHJQQwF3HnF8ysrpryNiDsus\r\ndUeGsR1OgFvhRGjg9tgxhk9TBLhFCAIj7IdGAlggTutqobozlwXA7SirIB74\r\nuj3qfyPJ5pCRkI6YDTUgn2GDvgq9sR/yi6b7pAUTXFKmJNiuhsmC78VmP3pV\r\nARhTKKNQNE/fHYKRE6YHSMW8zdQZBWuNY9ZKFy1rfiuPiSoFnbsbGRBmE0vH\r\nYzojRZ3ifPZsfXn7goPs8iOjpFS14QEYnKaypTA93ziyiWHuBOkkfzwyzVbO\r\n7TbpioMDnPg69KoWeVeZp0ht051XK3FKgad6lgGHPzEW8y3KwM3RNAxTg7CC\r\nVkAtBrlyCBqF4ZZVJVt8r1M4atHytpMQ35WQV5Y1OseLA3rQkk3Rs+8uHz6b\r\nAxgPH+W2P9jm9QKVKPxpn0S90B0jZE8bTsCO/tijz/irAXDlOkSGBJ5CAyao\r\nNRO2QwUy/VhWff9LbzG8z6f4kIdl74b92Zp4pKQ9RvJrKdnidXiIC3fPw9lv\r\nTmf2m+Xg+GCge72BC87L1YRcyk6TQ/5Bg35CSBqQLMzmHSytviwmkhhSVuFy\r\n2a8S7LzBjtvIHiT92l8fR/I/vv7wDQtSz7A=\r\n=QMJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/density":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d441d2a2a.0_1678818434164_0.9121526636820136","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/icon-button","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.fff4066c6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515b14c755aa45d9eff085dc7730b9e7d2e578f5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.fff4066c6.0.tgz","fileCount":40,"integrity":"sha512-TjWuTpUegvl3Him4Kr6gUFCyRa5zV+3s3mA/8aElJd/49fiXkjA9z6X9yI2m9yuM+WSuYLyLjaoMrQ7ptSAXaA==","signatures":[{"sig":"MEUCIBqezszqxVPhuP1PcE/KtvW2BCB5XOa1B9ffhOx6sQFcAiEAgseFtLgVNi/TgetMveHYKWlnwBriNvla6QTz3T14uJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELypACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxHhAAnIbyjR/JeFrQsVqPHPNH6OMcOLIKkPZYvByYI9f3zYLR00r2\r\nrtWHObU8M6sT/lZpvXOy0XJWc1bzapgayquwmga6a6khKLPcU2xVf3pbd+20\r\neRy+1AQSnfsgduPmF0dubc5uFnxNaCeugDQYZFGtfP4IzBTwm2L5f8bs4pZn\r\nIYtBh9b0dAfSEQV6RkUrZYIR/Pt4IAl1Yv6hTxb9JwuGe1UxKR+jAGnzWX43\r\nzc7LjcgmdSGV6Mbr+lya/KWF+1KXKzZznfBAtV7g5icC+4pIKXepdbrn/iSQ\r\n0+r+HB0RY4VuiThXjk0oJXYQotEJ5jn3fwefvQ6/B+VfTnNS8LNmVztrWlUQ\r\ndHciH8Cq0ki/x04+HgA/7MPXEd386RcTP7tlvSTKuI+GjZ6RgjqbXd9bXyR6\r\nvZf9ww529KJ9LCaaVktzfNlo9sE49sOn0uwMr4oCPQcRygQIpT+dh9HiLWP8\r\nsojqJlXtNeeMgR8E67jgmqUCqyaVSVKaCWI8EPP2QZIuRs11gGxnMzvN+l1Z\r\nnFsmgDOwxBlg+UC04Ic2UIi+llA0ZgqnUfJYmS9jgb8lTkjR7uAi3z+LCGvM\r\n5SVQOPvKNtDiYhNlnuIdwziCpnfpz62jx+JWvMdNiu8AyRlFyqqKBAePNI9W\r\nHwre3Ca88lSJSekw8rD6RDvbuvt8N93KHUM=\r\n=lTjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/density":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"15.0.0-canary.fff4066c6.0","@material/touch-target":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.fff4066c6.0_1678818473409_0.7351490707385331","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/icon-button","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.87809c710.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c787df30bc782033bcfe57694016383b24df61a","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.87809c710.0.tgz","fileCount":40,"integrity":"sha512-qrfqKH8ulgJLMfhGRbGFQgzdzgikdDpRe0yufmoZhBzbzHZx37VS3JQOlvrSulddkVPohHK50st1PZnkPr4ZHA==","signatures":[{"sig":"MEUCIQDkXAvz/9EeZhZA8fDxbikXDJVQXcQ+pV2hTFXEojwJxwIgXjUKJBJr57e5uEewJ+s62U2Ouf2ckujKNj4myYpnFDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGYQ/8CU++nkGMhBnvejXGz+7n45s5GynzoVT5XPBLdMVnUcmXaxDL\r\nH9TKLjTmNE5vXx/JH4odk2zN0odM89kVBu4r1AROjNxP+cmzRNvyqE5LKNPB\r\n1NB0kbzA9IxzH4bS7iV2miPMCXA2mvywQPufYDnliq5e69beyiY5xE7WtYK1\r\nqm0EMhVw8BjKXMBtnbhG/K2Wc6xOIEsC5G6H1q2nh2GWCFkR3to2+g2DDWz3\r\n2kEyLbVX6GMkxk5BSORFeZE0xS5ZhN09sCUU8O3oZX4NB54o+4p0W7/L99Xb\r\nlh8uPWShhofjYjNSmMeRAb+j5IeYq3CG0hvKQIShzI4rwtVFKymMc152BfGZ\r\nLaovImIkefZrPHIHfFXDYTsmJpRRq1IgX4HIEoA2wK/kwf34DqfiVHp/hNwv\r\nHStK0aKx4EKxJ+IqfKyHtph72qI11tiJKYE6N4xiLVnCon57JkDJ5MJ2Bfi1\r\n0pAi/qJQmIya30f4AtcpRruvl3bbTs42gOPcbla6f4mEyIvu6FVuY6os3JXN\r\nxmW88LynOPslwku+T8SzWMqffeYTkuYr9PDOyPeoc9kUW6k9CKh3Ox8rSjdq\r\nSnHPo4nzQwIpuOccyhJr4GdrKqBI3yXlcCMsAebujjYsGkoYcRGxfLf54C1w\r\nmVgiOanXcz223q9zf4ssksgPSr3ROcVY+Ks=\r\n=RF+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/density":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/focus-ring":"15.0.0-canary.87809c710.0","@material/touch-target":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.87809c710.0_1678819434552_0.2872603879168927","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/icon-button","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.48d30012d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e13c23e9bcb78d0e3645b122fe15f1ef6948e8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.48d30012d.0.tgz","fileCount":40,"integrity":"sha512-1E0fflLc6ZfnYKjRsV0OQ5lViNbCOwMVtWj7g5U2t2OyEwzBakSSxTtxt8WbtT2YkZvUr20r9HwcDxEpWkbIvA==","signatures":[{"sig":"MEYCIQD7QiC6A3W4rcfqE+ylBCAkGT6L8lYz22urEBdlLqEKYgIhAPO4xAEjdbWPhtYzPF6epkYyrH6p5IRYNvAzpbPXn5nq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVZBAAlRLsPG6nm7aEjByLkR/nTCPWfB3ctwb9By4Ctu2treSkpRlz\r\n/0OQQfR0Zw+H0tlQFnEF39MtnVHsRZXyg7Okbdr48Izzj1qFic6nPGX+q19U\r\nVERpGrZJxSLFS23LNHjHXqVYNHezzYZzAEpjpu77Ki2bQB4xYEpK5V/LEYWZ\r\n+mMlmoogjMj+m9RFPR79Hi9+7imR9WKR0gVff/6InCQ2A0oZiMtQSJIczaSI\r\nUuvY6WV/3mq60xe+R77jjVZIcJ49VdN0HgG9nroGAxXhsxoSVUoDRG+7qRdE\r\nBIxigQQPpgzp0mvhtzro0r/68w9je0YcKDe8iTtvgX0lvmX/bpMyMyY1uAU2\r\n0Uw5oxAUSzZrkR9IlxiYLY0NeiEIhcA2ftZ/6WclcnZ7GSmn75XFPnEIFYng\r\npeb4koF39kNOsej0yaJEPiplw6pa31LTCjmjjZShZRtqfb4BczFLRFxb+qot\r\nUmIrfflxqOqYxh32Wuhy5IvbqrjPjvjPfVmp14r2A9QbjtYJb9VKC99XlY1T\r\nLJDJ4sUIzAOk6TEr7NnL3jdXzHN2Ao6QAejrCcKI970mm3qS9s93sSJnkxk9\r\nHjClFcKN+bh4GpybHnMrnqyK+SWcoWsnOlFmJ8b+CQ8J9BQ+zMWYkIYY3Ivb\r\nhWo/V8HN5IIDRseJsEigmyd8jttRnTeHBeI=\r\n=nLdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/density":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"15.0.0-canary.48d30012d.0","@material/touch-target":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.48d30012d.0_1678819694803_0.623454967957007","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/icon-button","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.419b23cc6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf34dae79db74510aa71e781dbfa1d83c612ada6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.419b23cc6.0.tgz","fileCount":40,"integrity":"sha512-By25nHZwdFGRhdQIlTN0o/uo2pdKEZyh/chafFhzwXHGGmRPIuvWRHnKAyLGXbPI3RnDA3fY+Fo5jUIwTzO0bw==","signatures":[{"sig":"MEYCIQDXmYZHPMR9VY1uo2cdffMU5jqBVkB8+8k8JmUsW5uy2QIhAMpMWL1nLXZZTb/jZEzjsiLiR4TK1TOJ6M9RzDJPQybP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt0g/+OyJkYFGhXd5OyzsSAKsnk5269XaKUQyNBsBUAYEg2g0+ngKD\r\nMbMM3p/VWURqfIwJFIvjIsyFqlcHKgLSYf2lfOWEkh1OwCAMxVbbgEsqFouC\r\nUB/jjT3CAgtO59VOqVfFIo1bbTxrejBNFgvCO1HSZtKLsFBTB1aXy2rOJgjR\r\nHIyZubCIIqrmdGutRdRVQG4nLKOy9JbKBUx2Of69twezp10QikgSgKIQKCJD\r\nBhgJcAOVBCCB3tfg1vYpaLYXXA5YYgfJedx2fwhoPa9BRWd8zkE4QJHKHFrJ\r\n51+WztuZJ8QfBFFnvBOOmrNIFTv7fTyqtpYr2hydz4hmPJxDXeR0fODRbHnr\r\nsJCP1PbAhCQb9uiYQYNAdFCGKC7EoiB/NKvIf3Vi0EN6VfMBNumGmzRYqFZY\r\nRe3OEJwm7pCaGBiD0OEjIyAc0VoPRbckXWC0bezKOXcjim68cazNOBUNvW4q\r\neYoXEAjrimOPkVQT7t5dCxVNnUVUgrE5IRqUupcpblabAsDcxf+pBgYMMKec\r\nHoe/FusHkb4P1hbh9MfmjYBXnP1PxLWlY3O2RbDM/nZYCeT9upfRh/0J1bDq\r\nYrXK7J2qjbZRk64TX/YuCo/SKO9o25LiwOLKREhLB7TBzHzT9WqUvyxJyDec\r\nBjRxiTBaXNg2VtP9sTHNbhc/EujhTxrlQHU=\r\n=K1Qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/density":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"15.0.0-canary.419b23cc6.0","@material/touch-target":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.419b23cc6.0_1678820355693_0.9887084146781806","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/icon-button","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bf86521f4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d87c85852a1fca9b73ab9b35ed2cc033aa5fb04","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bf86521f4.0.tgz","fileCount":40,"integrity":"sha512-Vkaqu0E5LkNau5f3Ue8b4jhoNxu7OXTD4HmgW4Y8xvprhHSAog34OSb32TbWsOw28MIWJyLNRjlWdSUmFr9F+A==","signatures":[{"sig":"MEUCIDFNp+sSOzYnoFxQV+An/8xMTtD+YNaIZNxk9ivLFHlDAiEA1OdIthVl3a7jjC0R5BT9JGLdBMKQevh5SRpNSYeUDDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+vw/9EJPmaYpHJe1SqghKJP3SW667DLK7fsODX7zQa0mxQ+jh4S+8\r\nBbGi7B4Y/PGNpK1e5oyOVdGcSN0CLFUieghG4H9lxBrXbvc/TXovFak/XaNU\r\nMdk4thjwA/ISHGbIMGv+YF2Cz+/mkFRbXxWyhldZVFA0hCGrKdi4RJTOXgA0\r\nt8iTrR9WQw07oJAOXPdG7uR3TwmmsX3/0PCg2B128kGvIBzex33yK0zmn76A\r\nB8nc3+K7eXx8Z2v/Caf87bv7tycBMUN1hLm5/6U9zetX1pmgPVaqO5w/vPIb\r\nHY1+gIPB8IyXghVCLG9gUWcHyeS1fDXivzUGsAT1C2qaBtRsgo0Byq2T4zCL\r\nldWuDnlGNMqcxvh02mGH1/4Ho8xF2mEKXz41ukJls0RE1eemnu0iOBigOToP\r\nI7Ess3eqPlwWSQw0ENckvXtvsei27PMizY95jY+9upZkznQzRxVCoUZ9VhJW\r\nrZ8bt1k2kKJQxDJocJMX+uj3fHrUj/6UFRzaFhCfcykfmaT0XOpQCmAImtLJ\r\nHOaJ6sGknSYevyw+sMNZK1dM1XzSgQe9QJjtxjqgVZERmgeo7DKcnY4bzAne\r\nAmSqYSb0rO3EmaFqbog2V+TVvE1e7j/Y4UIfqiXewdRlICMibPkik0JUqRdq\r\nSZz7HPDauwQ9lVJvjavQ02JTGGJtKV34RZk=\r\n=yDjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/density":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"15.0.0-canary.bf86521f4.0","@material/touch-target":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bf86521f4.0_1678835632922_0.7934092494975609","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/icon-button","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.11f3d280e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46fbb76f2067741063fc4fa04fd8ce0eeeacad05","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.11f3d280e.0.tgz","fileCount":40,"integrity":"sha512-KwwDuy9tqX32/1R6RbC5UiL9UyAuLWHDyi8uY/TN0CB9ElEI+WWT4IYmvMimGbEZ1fnk64aJOoIll/4UNCqqCg==","signatures":[{"sig":"MEQCIHzAzQnvTNuL1iA6v07PimVeYxXWA3X5DrnI/crKi3RqAiBScghxhzP9V9Eyi4aUv9W9NslraLOAcOd6VPMBhHD2Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ1AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo3w/9FSaOIHeVfyX3RAMFKWKXqVvl4+2CaVORK58DlyhEiE2EFCjH\r\n3O/eB2muyOhNZm/LPrV6qTyZj5+5qoQluiIiewP28kyB3vOQxx/EJqWkm4e5\r\nlUfC9sTepEnQbnn7dL1MOjZx6NvPl1VpndD4XdmOVv4w26vmMAtEtPM9AsA0\r\n5hcRr7SLsTKMEaFuwrgECqzFYvgveJXbdMEt/zVjD+FW4u+cRi/codkSV9ID\r\n9sUMhtouRv8j+3SO2ThIq8VGeYwhJB0QaOmlVoxq6aFcWI04uNiUTYj1eAC/\r\nPVpfvoywtEu19ncepCNsicLpIwl1XDLogh1BvDltYC+VYB7C33el/7aGbhz+\r\n14D7asQ/XiRCQyY9FNK4/FHpIW99By5yxA3ifmqZruQVFjbxWXnvqx2dp6+v\r\nLORr3fN0zv/0Ft4alhhDKCu/HpS+jI6eog3+pWsBmJTcbicwob0nxlzM5tQw\r\n63Mj/FCWrYzPQBIu2Louc/2sQFPtxvYhVSVam3AEInXeEWZQB5Wu00mk2A+R\r\nMCFunxtcTCcNqHbXJaPDJG3DjLhYdtFWQzWmvSQDqhBEQJlWncXGRVUNUPnR\r\n+85W4MrQFNYnj37foC76SDE0CB3RF8qsuALa+f7oNuJVvrApiyVvWmGKOXP3\r\niGAMowAQQBRZpKbEG8cneZYHNwIV7BeiZuc=\r\n=1Hd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/density":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"15.0.0-canary.11f3d280e.0","@material/touch-target":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.11f3d280e.0_1678839104148_0.18136417018916973","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/icon-button","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b281a409a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7771c46d1bc3aabc713cea32082e1ea625219161","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b281a409a.0.tgz","fileCount":40,"integrity":"sha512-8XmUdEXCO0YWpJDGx7OLx/f/4SBkwhZx4/wt9FMnMRMWkAH714G/Rl9TpTsXjAKgGgruIux6iugSNO9UJzZmEQ==","signatures":[{"sig":"MEQCIB5JN1uuXLeMtWuLo81jMxHLNmR6fmjBxYOUv37bzJSIAiACpq14JYMfsei9La9nSeJljX4cBl/zi3vddhHNt1L9cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdA3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjxA//Z+n1gJ8eqoUx9CHa2y+QycxcjLP2g6OcEiIAgBZAELKcRdxm\r\nE0qWDwogiHYxMZdzfY8VXPXr/jc4TJBOO9dglpSWTtaPtKR1IDxjpBLfH35m\r\n3a/Bcb2176c2drKri9XcJf0v6oi4wdF7LO4Cp2Cbig0VNOfCv6e38cbamtx+\r\n5pXHzlJ+qTK+nabxPBmJddxYfuRn3+aqvgid5PkWPc+O+zR+I84SzelrovVx\r\nse67l32b5nvoKw1KJprE+fqwDiYsHbGdbsyDOZPqcCnvB+VWkYTI+GRn4RVb\r\nNaOFtiRX9LN/tN2iVTAHiWEP1rBo4vy8JMGCweR11Ku+K5p5eHVSm+ArBXp5\r\nGwFhj0VMKI3fubI+U/iZgUfIw1J7rLYK3HtXv/G3ZuudAf33kvnVqNLTINKd\r\nAVyZC023AD8hT2OolBHSxKDPP6nJnli2T0vsu7aje/LiJ55Z5r4oJlnAqRE6\r\n31gdYFeNIg3k3YxezjBEjunR6EA3IncMOTA2CVyz05lxkBwZ9BYc8DiW07hU\r\nAfoBoKIrXl/luNgaYkw1/RaVzHosAq9Gmd7h0iL9hsBKrq8z9iBbAsMYidt5\r\npR+9oaXf/ahdZGl9kfEjVeDUVnTFCvn7d7GWF5BBal9Ufy64tHAHsEXVK08i\r\n0ZSWZal6VyDT/Dv6dm+yY+Fgck6rIi7brrY=\r\n=+YES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/density":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"15.0.0-canary.b281a409a.0","@material/touch-target":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b281a409a.0_1679413303371_0.02051399190510983","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/icon-button","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.39e473690.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7275349904ac0514c074dda8976773cab02066fc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.39e473690.0.tgz","fileCount":40,"integrity":"sha512-cumYDAwgzoVnORn+0ffk/xdSCtW6ZOrb2NHXnVPrxNeExbWNUAlnRH6bGM06VXxBHb7YOYz82opwjB43m4I7oA==","signatures":[{"sig":"MEYCIQDRcIXnriLESmmElCgxiQvUrYUTpEGhtXHDsuz3voQpXwIhAOsFajTBDi4V7QvEhND2aKL6E/enRGR/XPeUOhBnubkG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF8g//ZuNMrqS0idjzNXUD67+gPN/gOY6Kb6L/KMMqGA3xk8aBzx5q\r\naHWX+GIAn34xbYKGUK+RbAttvnospjajzpRJ2Zs5GMjxj62BHUtR2u4GkuRY\r\n8anNrwE/TvbLKsDKqu4xyRnw+KQVuJJR0A0iTqPjRC2DLqnfcA6Ji7RJJf9v\r\npgMJPknjhAf9IirZBb9183oym0RjVa8qqkTPq8HFpkor61Zath86wj5hybmi\r\n4vdUgVTXceL/43XJQ/Fp57uzwEotJgRQ5DdQKTySy8Ak6Ry5oY10zGrZGlMM\r\nC7p21h9fJV8rJYAs1/+GVR/gpasGyFV6r00LyKXmO2BG68ZT0ZaeYE2+4Qjp\r\nZzuG9R+URh/YGktp1AvmgSkpLZonEJJiQZUsOpQptC0mTEFT+naKmndtElBD\r\nletfKjZOyiQV+l4H6TbPgKNmbwxIZrOFAiDjtax0Yo+PFNviR/dwBWlSp8fL\r\nWFjKEtiukFDfSki0bo349FS8OPt1ew/RlsxRrCwpjtg2Xay6QecdqGy95xMC\r\nF68dL1wFz9nQIzmWcVJPQLPAGAdccVRmXeBJnODYPr56pRssW2K9FCxRAirn\r\nUBwp4aQdG9TwPoqUvhAn0Jy6ICMAXWv4hqZoVTDzJhI3+dwz9vKuhDewP8Uh\r\nls1SQgphjwzeY5c4OHZXK17JYwLLk+BZkh8=\r\n=kwF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/density":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/focus-ring":"15.0.0-canary.39e473690.0","@material/touch-target":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.39e473690.0_1679421118152_0.48265864528429203","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/icon-button","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cedffb44c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a422b0650e1aa6ce7164942048bfb6344270bde","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cedffb44c.0.tgz","fileCount":40,"integrity":"sha512-D9FpOmj2eujggj3jtCu8KMAEvn8Vb9pktxI7pt8PdkQqYbzOxd0YzSqiM1FyiZplB6dcgI63A+AoFv2xh610Cw==","signatures":[{"sig":"MEQCIHfZhyeNE6Msf+WqppLQ+TIghi0x+vkFng7n7QNUN8BPAiA5DkN2s3tRJePhmMbh0AxU3bWRB671gzeSgJVng4pwOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM2RAAgIc/yrsmvOYVIbLgK+j+hepy3NPd3kKG8Qc+fgXg9lBGZ2BQ\r\nwuB2C9yBtwXKlgrcPRMPMUYIgN6cYt+5AS+6KwbiczipbgAWk+CsqOiWUXRl\r\nINanimWEA7wLjmo3DyaBRfZp4BvJsnvFMv9PH+T7JywyGVGn4ALXX8hbM+tn\r\nTMiiFuj0lmkk4Ln+T/Xn9VQ5JNnfb4mxZMZrK0zVwqzhH5TVRvLZbDZoXb0d\r\nwJg19kJ/WvayjUZWZr2D1HeJx4/nwqJs93wPWxVpfE0pIFN6tO2AQDu9JsOb\r\nPszTERe8b9n9r5rVNfbRPkGHLNCdhbVlZcr9Ari02fUISqM3wPRZ9ZNxxK9F\r\nt99nc5miMgnq4Z0LiaegeAUjcBFyUycgJo+OYVSM5pYNlWI5kAQ00UdWJHxr\r\nQPtToxkUdPTPv9kpWUMXRqp5SiSbobbL1XGntfD34etBRVDVV8jK3bwcktYi\r\n1TGXDXpVybY/DjyOe4HfYWYhVmJkJxZX9XN6VeRVTn/fBsBkfAObtVKTOI8b\r\nSPFongHSEZSj7SDsTQ+eIjg3F5fuhHqmtd7WkC6VsOLTRP+kwETuCI7uFb0h\r\nSM4Pf0hYhgZ+XWehnnEXLID9Dbz0WsKPXjHz1UC0VMaLHN4UJP8UF9lfFW+h\r\nzUhpYfS2UtkFWGu4QMZvvMsY7/TsyKpTEVE=\r\n=Nw2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/density":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"15.0.0-canary.cedffb44c.0","@material/touch-target":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cedffb44c.0_1679421534902_0.309858642825227","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/icon-button","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.36a4cba99.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"911ccf0b31c35dce6558da9eeaa429fb143da846","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.36a4cba99.0.tgz","fileCount":40,"integrity":"sha512-H8Pm7E88t0TQ9f4H/G8wZo59Q/WHnMi8DSNtt2TF8dWiM4Gz4cmjxHCdmpRycPd+4EelLOfDpv1TvbSDL0qLng==","signatures":[{"sig":"MEQCIDo7QUK6HbyWBoq3pPQzWKxQ88w9gZVnhn2yzB0mlFbOAiBmu8IIXpXb67OZlQKgYE5rM3se9XqU2/WebJ809Q+51w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwnw//XSknVNXeIGIFRYS/9JgvWfqLMXGOiy9e2bOcGyWAbUZ3RbOH\r\nZJCJZvNtrK5uwyZxO0b+7b8GxE3EM2pXgmRkB/hL09gl0+nszL9aBw4liom1\r\nL+eKu7xaTA3MkhisyEX4xvJr+tZfIDVVcIpMTkhl1KLOK4FHdM29oLbiSiDu\r\nyyp/Thr60JWyQSHiuz9DU208s0GgtMknkCE+Mew50z4PaEq+MnOVBL7/0suj\r\nuD9OrdvTNJDyafblXRhvSk31YBkLTaZrDDWXz9VeJDiv/hChH5lPn2Ch67dC\r\nRbH8oPz0HHMKlhl3zVpWWtQGlqCRK7x/Q46U0iqRDun89UKi6VHriheKbkjf\r\nMsQO81ZCFMCjgENQU4rVhvs9hFhiponhAxciJ/EuSRM48YIKvtHnPSvFbcHI\r\nsfnR3/q+LpZ7Jc/empvw9SbrRMGHJ5dHxDnlZmir7UJI7T1aPSONtPgWv+++\r\nqPbl88LKszYNz+/EJEBT5ODWPB5yyromL0qZtoDuqFOzxfDfWFenxbH05MVy\r\nCfEhCgbCxrUM4VEHP2DiOltV/gQD8xv4OTmmwTMLeDhjvXqh7ZI5pEhvKBZo\r\nC/PgLnkUnptTWPUEA8P8k0jMyGJUksTDy8K0fLwTrlo0LN5+eC3wT9v6i0Cg\r\n4rwt+VQf0hj4pbOB8eriigJj/82SWGpej4k=\r\n=4GxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/density":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"15.0.0-canary.36a4cba99.0","@material/touch-target":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.36a4cba99.0_1680025834004_0.8555656170885171","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/icon-button","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ed7e82ded.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43c1d306fc403db374c93d62a006be49c9d50a98","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ed7e82ded.0.tgz","fileCount":40,"integrity":"sha512-XCWOlG+k1ImeZlKiR8v23PSBUJSM6t42V46izrpQ3NnxZUJckEIPYzdvdv50WpXIKuLQH3ZxCzROVgQGVcMjcQ==","signatures":[{"sig":"MEYCIQDzA8y4EDv5BPrte3CWbFZJFZiSzYgygA4x0fsJsTEZQwIhAOxsgJfy5LGNbhCJuV67/1F87oq9cnmfjLtvWCGeZnms","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI098ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6JQ//TQe1Z5LwFo9BXzr44A5xkv8ST3gjO2zs7l82jO0fH7I/HSxG\r\n8wVqY02kEgSjD3xQEmZ6zQibsPlJI5XrY9RnYBT2pM3LBp7YC2cc0ZkjzBdT\r\nk7bAQOsnvYJ/xvLoEv/+wEzE0Q/7YPdYH94TNYCxId8R6AA6rKE24Axb0WfY\r\nnj3IcxTSGG+dieM5wspvqJxYNfdt8+AqAGt5B5+a7jMURsDo9jMSHnnC3MgI\r\nh/asfmhqpMoXzFuxrvphWcnvt/hG672DqMUldMBcSGO5zn8Urf3/YccykAZ6\r\nY5dIq4NgSHp4jeLZBOOl7qynGdRvIp2jkndgfrihAtmqdhya2OtAeOdqIGsR\r\nG5/rLBtyTHhrFzNO+WnNV8IODV3mhtF8B/bnxP70WfT9TcDOkEEtpyTR72i9\r\npfZcXLm7oK0xbqO6wkMKBhILb2mQ50PsmfA5BwKGzMhHj52mlFv9u/AtjX+Q\r\nOwaRdRgMM14UyWQC7x1oQVw9AXdcSXo2nQSr+Avqv1zXWAihdumc7UR2aDkk\r\n+NagLluzhZ7JkDhPVJRvUMsHqKuU1tTDMRGXpIiMdMEIhjNGgcSJABTuSQEP\r\noVb2AQMiILcsEt+9OD31AHLajUkg3/f1YPNNiTVdBLiAs0vEoGpSzMfv54a5\r\npnOqSa5VdnWBVoJZyL3J7gv3qjHe3Q82DqY=\r\n=Mgj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/density":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ed7e82ded.0_1680035708280_0.8816745596645716","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/icon-button","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.55093ee1e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1743b41d316ff83cdc15a92a2138cecf6158c2a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.55093ee1e.0.tgz","fileCount":40,"integrity":"sha512-+hUaeZf26KJXcsPBWxBK5ivPlBViK2x8dLCy6Tl97Yl0SdStAZUdsxNcGtmTlmAhAcmee+aJLgmDFk8GWFggrQ==","signatures":[{"sig":"MEUCIAppSj8NppLUaUEKDgu3VldBKU+lJmg6QL1VKJSmruTwAiEAmcRoyesAmNiE1vQMA0KumIlsoygBpuziwBQQHgPO00U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIg1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrdsw/9GBJTSa8+wvBvQguwh/QeS1++ezsrLrG8angNqg5Cln1wFtdw\r\nnPJ5t/2wnct6XTCjYDSfHumMX90wODtn25pkROabCs+Ly08qS+CQXoa57NrU\r\n3FjQcg31RJ967Fp00f4uCow1XcRGtExmBX2TqgmCmzYDxg/FRqG/2V9wKN0e\r\nXf2ytM1/7Rttb7JV+naoRTnhKD8dXiwhKGkFMLwQ6qigUlXK7B03TXqihEB9\r\nXFaRRTOnb0dXqCCD7FHdieGqKKeCrlH4y8aejZE1bnWeyrc4x/n0vioWffbO\r\nK4luy4SkUzRnwnbaIvPWjO0ficXYgLviC0BEXtupij+Vrv2DplRMuQpmQIac\r\n+E4wnMZs9R4Rw7bqhvAPaYNIZaB7R6zKMRlPJ0sgK9grpKfRkHXafDY0jsGA\r\nKWEQhydMdRsmsuh+fBycd9GBxNtZ82/ekBf6pZe1xw1bPL7P/t4OgY20X0TU\r\npHClS+OfrFxKuUe/FsJz0+LA4mEQ5TyYfjoPaKUL8wJMEPTt285qKEqnxMDU\r\nq17RuolV8is2zaf1H4se56yGzdNWBQB3ZlYAO2b255t3Ev/DufJU5RdqRW6P\r\n0+/0smKO/0mL8g2HdyO8MtmQWJsoQCmygp1WqiKRjV7j0rlRo7xt3GlNZGgG\r\nvl459LfvGbVsVMVpGuEQDYUj2lLK6xNJMYc=\r\n=j0du\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/density":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"15.0.0-canary.55093ee1e.0","@material/touch-target":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.55093ee1e.0_1680115764812_0.6372802261258417","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/icon-button","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0c53abc81.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27599e97a9a652bf4244b9bb06ed5d2df65c0b5d","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0c53abc81.0.tgz","fileCount":40,"integrity":"sha512-W4/55Wg4c16ssS9yjKpuq1c1reBuXUK1l+dueSTwTLdYnfqyNNTq5RtZ14WtnWyP23dQ4l4wM87C4E/f3UACrQ==","signatures":[{"sig":"MEUCIQDX8qck7G6GFNQmtBVHIY1rGTrKertt3PWyA3D/STPxQwIgRGyhcKc90yFzO0jHkYp4R8iC+wEUcPANTVhkK3eGZOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3TPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCmA/8D2AZZOwyA7AroX2URvwiROOPgM7eajDPVuXJyWuRtA6lztvd\r\nKyU3tI/klFODoFKEYFUImgrhw49DGvRO5qSbopbqWq7OHMEZP/F8FFGHR3u7\r\nR4Ul5wBVjuvlLNU/wb5LkhDgR2PmEVLyCFTUzYEFymOASq3IdgdNuGL8OpV7\r\ngiddDXlxFmtGYR/pbgbJI/GCwIjcSopuuseKFsyZ9kV5HitsklM973DWWIxh\r\nRwhsTUxlpkT6uZ5j3J7Vf6LUU+yfRTRm9R0tGtSK3tXtzgrq/vaXJmsJh60M\r\n+1z5aLPbM6bxky5pO1wqPlwWQwZqMYg8cN4KCU9JI5LGVKnz2I4b/xKh4D9R\r\nZcrCpFLzImh5q0gnaqStXUUeQO81qY2+O3zw3+J0Z38fMNt94nYbmRG85ChS\r\n4C8VzE4kLx+bKvFIsOCpuEUI8PcvL9b3mNgYp2tkPNoIyhj4vX9PmmKaBIzO\r\nsMbRj4D6P/xnJSrmDwSTG5c6JzSwcy/j2drGXbZOpokxMCaME+moO2jFK1uW\r\nqD8/9SctsPSm6j64iLnyUwireEAMXydBGUG5v+1R65zFiWLMbH71gore+UFN\r\nG3l2/Rf1KNR2C+p0SWKLAGcaOtlP/K6rPvFY41FoWn4atKuIh100KZC9+3es\r\nwUKwPMldXG9S0XJx7ZG/otcb+qa2l0kdDVc=\r\n=rNbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/density":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"15.0.0-canary.0c53abc81.0","@material/touch-target":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0c53abc81.0_1680831695141_0.733079970728963","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/icon-button","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.51311e69e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8493d4f7fdc5f4e596641fcaff4a1870790e3e79","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.51311e69e.0.tgz","fileCount":40,"integrity":"sha512-hQg+1KJSHkAUz78IHt462pW6zz0gxbEKQxEOPgt6qIrZG/jEPmekfWcujs0vuVM4xxWPUOGaD6uqdFBZ9HOYPg==","signatures":[{"sig":"MEYCIQDu6cWCc5/B7uqKRzR1Qjoope9Hv1Dup9snPMsjGkdESwIhAMqjTBRSyINHNXzdo4t1uZnpt1zeByeM9+6OgLO/H0Gr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAShAAlFtccj2XX3huoHb3Wg7HZ0jRaWpKi3/jlwq6ERCcyQ5B/Kc3\r\nWC+H0bzjYzJXU5rJpfwIMdPtQYGQnQBsFS2OKEnqamA+403PRMyhXMj19lWT\r\nFvozksbXLzV6oAFYvTc+IQ/CrEAkFI+vBiqS/U4VYiIPUXRfcghUw2jFAYQT\r\n3T6w/1U7CTEC+qLM4+2cOYDQds8kUq8Yv8vE9EZU7v7YWC/Am8R+yn1JYlKQ\r\ngqXYrkyyhaK/b4ph+hqRWqPmnUo6x1Su0chEhAhfRZCCyQyZVmBzWUXIBaOj\r\nWdA84oAYbcUbk32dDexMGyti90kQ6e/obeB6TIZ88OP3X6YMURwKeWgS2Gt4\r\nVNYxqVVrgkp/Gr2za49eKyaPKOvlMzTQaiJJUrklH9lHLTFEOWMZhX6tc2WK\r\n2DlICBhOyft04Y00W2bNsBhOHwMwQ7ZWeEVI0mscmET99DQ5tHGsuGbJ7hem\r\nOHuQuvTgUHBel87C/IAQc4yISDJPs6qb9yNEyKkegYk/byIBGzmR6f3bJY16\r\nAS4PGAvRFmIwtdB+xSsjqH0zj9DDSPBx/cbNRaHsBo9q5SiR9HOTiv7YoNo0\r\nNogJCdA7TUqOxMuE1r7N2IUHh9SL3K4WYYQC3hqdO/49UXXfM0n6S3oO9CCD\r\nEg/Vymg4Q1MxDl2FL2L5Wl2JfCFzAMIL2kM=\r\n=FVtn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/density":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"15.0.0-canary.51311e69e.0","@material/touch-target":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.51311e69e.0_1680890899009_0.910684740530229","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/icon-button","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.113b1a38e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de166516b31d787c7d03a81274264295c42bdbc","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.113b1a38e.0.tgz","fileCount":40,"integrity":"sha512-ssgG/xOX8mDmYjmJzErcl100/bPLt4m9FTrd+Hpt/T7Xu5D4/SvJRoe8MJYLIYbqvtex9gNe0d3aZNGX3GkYnw==","signatures":[{"sig":"MEYCIQCbVYC8pSqlAzch/yKMTfPwUk1F/UnVKkGhdsSHdpo0UwIhAIVEaQ7DPDpYbk14JOm1alYbX3RBJZVA8AAAdpRtvu4N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/XBAAid4sh5121JS9NdynBaM8gRcuJH07PllJsiP22pjEL00a2Ap4\r\nmImY1edLjX49CGxKpbDyIQ4iQwp+ZrpaehY3/iGEVvuOLnW+lhIKkyqo9Jcp\r\nxRGehvJiqkyUMZBAkt+YQaw3gYyJvoHczU7C7UsEKzKCOBX5deysKDab2NoQ\r\nKCfDEc6YVNk3F2HuldY/kXWbNtvsQOlEkeeRO2GD5Dwz90I2l9YFS9EKQbfA\r\ng86zc74quzdlEecKyJttlc6Cjo62FuRuqkqk+NzqZPeSEsk3R+hbvdTUFpJA\r\npQyqgAXMkP+Tg7QUrjj2Do3m6pqHQeLvfkGw42kLRSEvrAfmTX3lUzZ4sb9k\r\n199AsjA7hY+qJfCP+fyUqGuYm3Z7QNUnyIw8og16URcH5nYbZ3A4oBBG1Y3Z\r\nRB7f9K68Yafbf6Us7fbdUux4zX7BdoKlS720FqO44LkjLOXLGmKbMX0BkZsF\r\n1P9tuRkK17IdZgb22Uv8/APmGPLcTrqN2g4Ah6aRZH6nQg4T6EQJbyu5Ssm4\r\nBiBmwMoZVXKRR2Tj+p7FbsPuRg0FhMOG+BcQsQrWhmwrZHNmHons/jM/+qPu\r\n7WYjDWvtRd0fzAHzsaDm5HbxfEEJ0mBdX5VmpVTEg3PasG/qd4Jrv8oP6iDB\r\nLU49++clFLCWUbLZTcdomTGDDhHRmiKYBi0=\r\n=7Ojk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/density":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"15.0.0-canary.113b1a38e.0","@material/touch-target":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.113b1a38e.0_1681163653755_0.14018703402286503","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/icon-button","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ea2191426.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"485e3e1966e8efea928f271fd0607aaeee33eaa4","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ea2191426.0.tgz","fileCount":40,"integrity":"sha512-iqnEbkJnqDpTd1sfHMMDBpQOfDcPPRC+lDPNEnZoQbcGfo29T1pqoxQ5eJeEgfQ0B75ThipW11guDsQmOmpuLQ==","signatures":[{"sig":"MEUCIQCgL1bwGxa3D2V8gMm2Cfmi7+KcOxedIFBDw+Uux7krEwIgaR3Z7kgBDGpWwv/Cdc+ZtnanyBoeIOHKcyBE+L9PXp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNddrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp0w/7BpoZDUogNqUliEfVgVT3D/Ey1DSsQtiGIIPTrtpmXLy69R/A\r\nKmbYJ5Xu9X2fx/eeBKXUriWQVxQPfqOtd0jrBi98/NhXynRdkXGakxZVWUcW\r\nwt9rgoIHULko3iUvnOs0XdL4RodswVs0VB66T96Hj78ZImnc7l7C+XoaWFOX\r\nJk6pLJDriAgGwVZyYLlyNFE7wQKJA3SP7LeDp60AXaj1bBAZgMVLyKZxrB5E\r\n2M08nb0LZdsE5P1WJ5YixzwUscZyntDi45QRzJpKWL5vBxPSAuKurmOG5UuN\r\n7HW87vlUNZsW3XPL6mLof4mDijL9zJXXh527mt5iB2xAqv0NxEkI6JK0Prtc\r\njcCMZQCA+8DJRKYxpEdaxyRYYTbvvTZdzKQCUKe0sLmML3ekz/nGkH6lHCAA\r\nzWucFQLy3dphF8f0cVGXV3Fk/szi4iMYchPsjsBE0cN7lP39SG18SDXN9sTS\r\nhVXvgE64V40LvCdc9WhLf2lU5M/V6GjkQBqAv0/l9j9mt+exoHrGX/CKsA13\r\nH0hIbRXBF1FPkagpqoXriTtnYPUeLC1BFDVppii22VRMlAUSiHr7Q0Mq6/gz\r\nGVSn/8w7E/qIuAhCnluDw/TibOnv3XYdIWbjh4Ids9j1qlQAF4P5g8ZcofeI\r\nCHD3Bzc544mDC8mu76i2OLiu1oiYcEOC22U=\r\n=vL/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/density":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"15.0.0-canary.ea2191426.0","@material/touch-target":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ea2191426.0_1681250155686_0.2778941707938374","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/icon-button","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5a5c38538.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6109c6432a542c9308006bf52e1a59260231f19c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5a5c38538.0.tgz","fileCount":40,"integrity":"sha512-hvTUNRNyFWFxXVWtc/uRqTuX2GL7yqxYVlOdXR1fKP1A9c3c2Z/dEkFrQY3f3Lr22rlZe5XzNhZXeTsxDfmlMQ==","signatures":[{"sig":"MEUCIQD6PToo11TCxN6568v9+Tp4KDryTLtCExVd4HBRRWpdvgIgTzkfqUvj/PIK0rQ6btjpf5y4PM1wd9DVa3jQ8IuK4AM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+5w//fBh6y+u3BMolyEk4b2AQl+iVDyfQeIzo4+TQCMjVKts9NPhg\r\n3MJoP0yCduOQQWT8VyImF1bUsyk3fewlVEKfVzafsrzYTmDPQmNsXu/AWdaU\r\nu5AC1quqWDLIjPwMPVVVDjE9iUlK/W3+NuDF7nbGI4to2oF9fchFt89wOeh4\r\nZYlAsb3Novt17j222dhlgK8wgqHsPXFgbgzH181lwxNOvhZ+tLZ8QyVEv1cg\r\n6/tHroPenTDoL7FzECQgyzGGAilcJY6o1hOh+TUkImxZ31Z1YlWHhfq3n9Hv\r\nrEBnqMLjVhwN0RMgig0C02cBm9Tev4F1ZgrD8n3d2zZq23ISSYBr4rDy+o07\r\nl+fIXYku0nl4SFYirpPa+UwNX27JY74o2Atl5LnAJuN9x3Qc6KTNjhYjOK8q\r\nolcto5uaHUly7imR7ufIqeB4E4I6uj/Gm9XjnknmuY9OTc9fqvNjbdmrxR5q\r\nVdxCpagFjjwXyAkiz9Ec0aF83gjlMz7vLat0ex3QtLm/4akEU6KiKezFQM5X\r\njLzCndK9/ZcJFCMQv9gTTcBoiaG+phfYwr3JSkU/tdmtdPPSvhd94ZyBAuXi\r\nRGdkXxTys1eMB3dMleJS101+QTEu2UPQBaQ5AwdxD/UyGECrGpevfIrd4xHf\r\n5pYiHnYjiC9gfqOQwp9e4m0ZR8HajL4pinQ=\r\n=mx2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/density":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"15.0.0-canary.5a5c38538.0","@material/touch-target":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5a5c38538.0_1681252246254_0.6381829244903028","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/icon-button","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e4b5ea7eb.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"755e363e4a9a7522a4c5e03d5bd2a3a9235be4a9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":40,"integrity":"sha512-dRTgxDtePQRN3Rfw8xI7x+bCM4kt5yQ/rYVxW3xGK05Zws9Zv9WOVch6JYC9r+tvDt4Hs/uvB2b/8qPZngUBtw==","signatures":[{"sig":"MEQCIFmzCMrUFRtGSsDZqhaaTo6/XjyUlt1+glPL9iqh7a8bAiAZpQa0G3RsZOMU42vMNQD8In4YAhu4iO4ySTz+gZjIwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeePACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSnRAAjx7jt/ZyaXoe7iP98ubvQKz6rYDRu88w0MDG864PrMW2MJdE\r\nmzsezUpShWzqoXqrPw/NJhDdqd8O+RgfBuisdp3nt/fbw75BcCHW7Hw5Vtph\r\nIx7GoJsVxXZf7B0ofmdcWFSoMZn9hlc7V+Fx6bJI7xnzsjdgw68xLeGKbJzh\r\nYNBOhpqiRTZdyo0TNQWrO3FpXImQVUsAMMVjceckcLE144qO7lGEXA7Ug+s4\r\n8nuCsrSEfMUDT9+yX3cxJs2rn1E3pmHPnfz4CPkjyjQr3jDkZzOnWCuB7P0B\r\njNi5an24BEALLppRgQeTjHPO3wXM+PGE8CG6kXITgTjppoXLsVTJ754saHsY\r\nzO4zlDIlwpA0JxoKvw8mMoAVp+llDr1hIMeIwK8WgvcD8RW1qBsqNqvMN5i+\r\ngmrTLxhSq5Ayp58DReZldkLTLAfRYeiJRFEh7ZvLNPAEwkqc/wBqQn1SDijM\r\nIFd6lp5vpbpjRe0L+uYeKFTMmVDykpWCz4qXxJSdDik29gtx7Iplbt9uvVUx\r\nGIXFh2Lri2ONdLeGocBjbuhKlap9ODeknLFZuioJWaBK1qJbHn1AFDPhsWlX\r\nT0AU0Oiap4oqobKKICp+p5YVfZxlSQKIXN450L2JCMrjLjO5kzoOnYgdpcwC\r\nxOKO2l2zk5SmURuy7NcW9Mbghsvc+it9ZgA=\r\n=ZISA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/density":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e4b5ea7eb.0_1681254287199_0.9310149878251468","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/icon-button","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a094dd9c1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95041ff371ab4e07a56ed79d15d5a9a2ba2faff","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a094dd9c1.0.tgz","fileCount":40,"integrity":"sha512-pWv82dn8n8P+wqzPcxf6NUEmwRvHzq6eUmmD0oye4uyR/RtjmiyckkhUJ3mD/rp1Q+tI63Cux2tKiv85smqUhQ==","signatures":[{"sig":"MEQCIHtkEjxDtYF2QmWrwOEua/J3SmoBlPO9WRUVtSkvxNFiAiB+8aAs9nq2NsAfyDCPmeHpGsvB3ReptEyCuVh35MjKtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZRhAAlKOSbv560dIh1tSmQCiX3slTTCrQdg54TUOs3pEj0aRi3DFu\r\nKymkJO24h8Klma67KvyvgJE+etxGUJd+K7P2ManQRhpRHYP7ViTEKeuwmdPk\r\n58Yaz14KW+r0OS+GzOX78GpXEB09O2ko/bQOUWDhXPNP1CsFTesb89LfK0TX\r\nx01+V6KVY/ehEHdwWqf5HJrxRHQiSoDC9sWg1I0W1yf+cHoJAsdKSB9t4wXW\r\n/aazE+PK4BMMgLivlCeVcEnCTKudyHlQMfmEgUrf5Qt1fIz8d+KO2P3qDaDu\r\nw4Oi8N2NIRCRYPhkPmT1gu3/V+YlRWs02A/2D4oMMnpFZk2yqGSVMpa/1ng6\r\nMiukxtVtoF2GE3zLN3S0nqk2uyRh5NJsx14D6ndYdKW+tR9EDbyNoTU68RF/\r\ntXFKWn9MRc59v8qsx157TMOm7nsvHOBdmSuq76wmLPxssbw8LEyBm2+INj8f\r\nSU/IwjsrKLMxQxxN3GzyMKBHkevq4CsYMpF6Do0VYe12WV0Ia03lU1MJYfJ4\r\nBFuUWZzu4hMWCqO8Tc2zmq4eEt6xBtUpCURzla1Z3FJU8xZYCJXQk+bvs18l\r\nk4xAEIPlNNDZB49MVEd/7A82bkNPvm1ayzdKNb00IWzyZYS6mOEMv243YL2N\r\ncjOXPb85s7BmEpBYBIeinAEPI1CMci5DExw=\r\n=K2e7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/density":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a094dd9c1.0_1681512176596_0.8798761917188147","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/icon-button","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f771b091c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98a1e53ba99c16116e06a0b10c74c4f891493949","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f771b091c.0.tgz","fileCount":40,"integrity":"sha512-xRBSoZHp/5CUShUKMI8n9+8pyRpCJuu0oAGRoSM6gbt6vDHI0RtWaBQs+mkJeIHTWzYiFE6xXpED1vqdpyRDnQ==","signatures":[{"sig":"MEYCIQCFX0fhMaeLUhL2sLIxuLBPT4wKHe6ip0GZ1679Gh5iFwIhAM23YPh3wamlMdtQlSBCxYg1iBIJuOTnDEMyegJZtBr4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWgAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+whAAjYBmisKNXHJGkDGVClxAB8++4NYT8KPurVw7bZyaFbk9fTDk\r\nq98+9dIovi4R921Y1yHncYtaGy4Fq7ntSKtzEe1GQMDGW01z1cKIrT9QJItw\r\nJtlc6FJsAcfPdpqrdYa+Kl/OE/k2dPkhwPhZEUB7BZF0eJKHYHrnU5kdhLsT\r\n7BDB4s9vk6LiD29f4ABGHMK/ceH9EUwNIpnQcYE31P7D7HXE8a7DhgZ6DtH0\r\nImjsddeWuXG5OJMQ3qlXJLN2MZfm7G8uRLAKBigMV2zsLciyxI+gDTM52xGK\r\nnQYB6d2+0jj/qEf+yIUr/hBUIRyf7yCCaxzmxdnD/H+QrqlxmnuB9duB1M/2\r\nCpRm+8lpdBGNCCFqjTIPUL4bMM0ZBczOfQTPGCgfL7oHtgPqhy/WbUKV07fP\r\n2KNLXzCtCn6YnVxWVYlj7c5z5h45FXXqmh3l3RNCAkoPt8DVdiNnIHbRn3A7\r\nlvUltf9FS2TFxyU6mGoQXHKTHgoXv/ekopywULPbwf0uQO9ujChaVB//XPbP\r\nl3Gw3en4g5cSPJqrc8lMoEiltz2FE058MSUW3Z9far3nOX8jOnFcaSRM+Nid\r\nrKKoYLMQ7AHut8Wmglb94i0pb6C7uQWq+scKSSwI/evnIxA1zOIbi2JjArO4\r\n9hCYprbq7Ro0CtP3+CBViR+iuH5h6Ucn5YI=\r\n=87pm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/density":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"15.0.0-canary.f771b091c.0","@material/touch-target":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f771b091c.0_1681745920537_0.7642062656214434","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/icon-button","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.79b1b612b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bc8593ea86d8b0f9331e5f54ed8d51ae0f495e6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.79b1b612b.0.tgz","fileCount":40,"integrity":"sha512-94Lj2uSDFfL33MugztLqk710BANXa6YyD8Qz2a/+EhLeAUwQTrr46W2d7v2kSYl5QEU6ur89zLaQ7k2rzrdNLw==","signatures":[{"sig":"MEQCIEDhbwdBG2qsjZrmuJIHgxhK7+tbmYp1tbTZLxGZ3hofAiAZt1HplsT2VhV5Ux8AsP70V6EnYINjfKchLak5FqVuAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOBQ/9E9LfjE00P29ZNoJpesm6SB2hLjoQnWpp4wIz5iIZWBvV8LZ/\r\nUA83dTnRvM3UM18w16XCgjMNoqLHPW1puAVBOGvQ1+D2K0mCUAk0y9AT870Z\r\nHwxWfu2AdCpILJ6SphjDD1itrMUO21o3A8eLMe7MaUO7lrIe+acWryAuYFW5\r\nBViOW9+kB8ExRSHAyiRI9ck+6+JEQtcYEdQIHiQzzU0coouoP0lqBhTxpmLX\r\nmH9eS1KFI1fei2yLTL71Skt0XnA2iGQmOcZ0tE3AICEEkOVillDiX2NcGAw4\r\nyxKLXLO7W9Ad8rFOE2c463eBqmrgyohUQ1+L68Rmu1/4C/LnmlU4DzzweIXo\r\nlH/WepuKRsRPqHgC+rQKEMXoqUkg+HOltD6urXDNdg7h5JSloxDmu598Gw96\r\nBTfatOPZ9n87H4DVWl04fY2aj4QY76gVlTWn9AM2oI19pdKTu9olrX2uxpMy\r\nt5lHMTHyPC3X1RXkgacv0ExPF/ffTU1WhJgmewFDPapEFbGIlzzmBawINNln\r\nTURUmbwUc0vG7b07SSJb337OgTZXK0oq7A4HG3vjesbZxT0cJc0u63igShSE\r\nkscLcFgVUpFcjPoYa9iQiBcVWYfwjqcjMAFAYPs8QMI0+rbEU46BjZ36tkAY\r\nStn3Dr2ljdku17RkkaX3Tj5943PIvt414dw=\r\n=gARy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/density":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"15.0.0-canary.79b1b612b.0","@material/touch-target":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.79b1b612b.0_1681947628478_0.8932320371908138","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/icon-button","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6f50071e5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ae083e8b9ae52e055f232c918d905e9ad34dcf","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6f50071e5.0.tgz","fileCount":40,"integrity":"sha512-kXjwskhmc7BFAxwousQW+9OwUf26wWPXM6Iu+97IR5uwCtq7AWx3WbV47LjwBTloxplIW9F82xGUckUgp6wNRg==","signatures":[{"sig":"MEUCIQCvX4UrSYIgO+R7maNzobuxJa+oIef3/LRbkf3aNAjfAwIgDqCkyhfNoOb2MMxQDzOUl3ReqxdPsxmTaiphc0o1imc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6RQ//YsVIlXIo4FKW8RDiZ4bgAOBsulOpALjPzy9zkrv+S7zle5yR\r\nD1PRDUQ7ZUrRl1nBXETz01KB9x3bP/DZdKpF+aJ4sAj+lw8reN1hEzVbhyVT\r\n1cr3F8SwVpzico2y5OxsOWh7PJOs2CFIoE3/GJEYjlEOboXIq1NdPkZZsM/D\r\nXhq7R6GhfTMUJmr29xid7owWSdAUME62xD0KhlZuljgtIgmEFbY6BFGTMdb7\r\nnNXE0cBm/+6A+JWIUhluurJL30Jal45QPyS0mK61FZm1kXfI0uwJUHbiT8p4\r\ncIrPWApLYQ4MdgXGfBO3xD+Q5bGIi5ejfnUBjo/fEbGPui8+crIVa1/O1Dzv\r\n7LRWo1PEa8ss42OPuwp5RNhKgdONwIrwFauBDaKGPmENw4bdrlMMIG8vj0rN\r\npygGZw70OCg9qHXVWVWA6JRCqAwT0rwcav2ixpggYbZqtqygZG/9FNLCazEi\r\nV9son/22HN9xnFJ+mUkR3jdfF2dPLn3CDQyGE5JL4YP9rk7nfHHf73PL4p7z\r\nPaoDMlcIivH+DLCj8+VcCLOYjKfBPR6AxU9wFlbLMJ34pUuvta3IJaTRMCeL\r\nY+u+dUG34oSdiO436b763fiw21aiRGTIuwFJjjYaW/LJgCUAPdfYoXMWBGNo\r\nHAKC7IlMOloZq8VwYDbFg+nCZu5gBqdwlx0=\r\n=37Rr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/density":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"15.0.0-canary.6f50071e5.0","@material/touch-target":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6f50071e5.0_1682013674755_0.5151910772061794","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/icon-button","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ef754381c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75cf10daad04871718d9cb5260dd81953c14c928","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ef754381c.0.tgz","fileCount":40,"integrity":"sha512-6nQp7tud+CC3TtlvjqSEFzOyVhSbr3bkiLy68igBme/N8lc4/v1F5c3asuyZIDwI08qJRN/dim6TIvikESR1/Q==","signatures":[{"sig":"MEUCIDxgafWOamCmaYWl+zKL4af/gFapSwSQALjKsgXFyOHUAiEAmr/CUFxaV3VVXYX9nPVLXZAdAC7kvSXgzzjvPUF2ooc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfAA/+Nrg/NawVoBXlBeMB+9Wn53ZCFgCWErQD/Ujb6zZeuQNPFiVi\r\n5HF56bEZ2Koh+m9RIspde/FkF7NkbDMD7hoHOwT4pNxpx450UuJ7g0ozf3Pj\r\n6+sEiDCYEzf0o17yYAzo8ASDMkSgP592GXFpR7WJ7LDiWYafe7SjiFK4o/Ba\r\ne1mihpGsr3RD+zLdr1BWGZEbJEhDYMR/+pDqDgliOYBPU+FeT6AlZJ8qNQJ4\r\nip3Z8D+SPO7UpWCKIrN0pVuRb2+Y5+WFNDdESQgx+/ZM7jyZBTxnAEilzE7q\r\nTxqqCqtT4IQacR9JGtId9qbam5KyNCuIlAI5cfcyxY0VtE3PA/zG8wB1cT+Q\r\nGAJjqFqMOM0S1fFc3MIKGlqpNc8VHcqL77KaUtnrIPeZJF+NupgNGUGG03md\r\nCFhEgykbnwwn4tU9u4T8V+oojORpuu0nMbvx3yZrQoE4IT3Nk6D+rSHNPVHD\r\nC7iuBfuowNp0EmuYvLgwUNfNR1fXI4ivZ73Yk3JBjo3+Z6MTku/e1KaVey5W\r\nhjzW91YVTL8g+OYdYGdAKtuc5z7sXGM9EVNyqHvjupfKJMCppbzsnvyzbmpt\r\ncm+aus14b0r8qbodjS5zPOVSFZCgEspyT0XPetHlRbLj2NhcS4IEn1E16Awj\r\nq+vmX9IH/24u1pLivPsAx7HwYe4OTxksc5Y=\r\n=7Hhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/density":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"15.0.0-canary.ef754381c.0","@material/touch-target":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ef754381c.0_1682369483933_0.7057125522031313","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/icon-button","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.69ebf61ea.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dbcbae4766d03fe0c34fab7ef0d71620956d865","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.69ebf61ea.0.tgz","fileCount":40,"integrity":"sha512-pmUC8z/OV+/pT+62Q704JW0QxrkBgc56mr9JZmdSKyb6Asogxxj+wDv8NvYAN/IxRqqY0rzmYDq6Ic5Zj//jCA==","signatures":[{"sig":"MEYCIQD3Jd6CxBvfzoLDDWMF6Iou6+BYQV0cc1oZV2zRROHkOQIhALf818qjWhNgqK1co9eSFmh4qYfB1BXZhbiI8wFno+HO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq84ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUyw//eD04aF5W76Fk/iH1QGq98Zuy3Dwea7f7etlOjYgR/XEACcN2\r\ncsVOZBmW5rSc1xUXPWmlVl4pBSKpWcU4weOZw7c4DFF48lFrZlHc9Tcjd03z\r\n7pNBsLGwGsHLW0g+v3E7bNYih7vWSZJtUWiSkrOzB41LMSzgIMt/qil3UjG9\r\nZyFZOOuvLtfBv2O/SFUR7vmBfb5UW/UD/fNWs/f+l7RCsXvuHywcXiDU9now\r\n18ua+kSn7KrZ3RnIBJyPaxqMrmkEzaSemWq0j78k0SRL+QWJa0LsXG636Osc\r\nWTDYtVajcPNnyrEBfSsAGHwHm0lYzvL7LuL/NTdgS69k0xjQ8wTY+Je7feuT\r\nrBDA8P5MrI029Pnn/wI8F+Uo2crEQ2rW6jioQwy0xej9i3nt85YOLg857PEY\r\nTIi6RYjMFEy3M+nCnyV3vpRvUcBr8PxoUR7o2K/10Nj2Lbvx2OLaSKLy7o1o\r\nBntktmd0/bIlZNTnAQgkrcqvp+ET2LwW6oLQUAhV7vSUlHqFqHgL1qmjK1aq\r\npOLnbiIYQ/tg4zpE+yomdgwsZd0YpVRljIzKdQ3LHURTjizwK5y4e6t8M6vQ\r\n0qDcdtLuLlFdtHtxxuqc5+pzq9R4R60+2pkwCuoFlOzVJ1v0ogIdYqeqlqZh\r\nljv1b/Y8SIepbJJxB+eOn5OemFbTAtDpqmo=\r\n=zu6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/density":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.69ebf61ea.0_1682616120382_0.37345925331075236","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/icon-button","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b90be86de.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e9fb79a71f1efddab293d749517a70a4b16a92","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b90be86de.0.tgz","fileCount":40,"integrity":"sha512-NWTUkKqNb/UQZ3fJDpzu0kGnLjZo8SaVJpuIvUlIQ54t4ul/MbbIoFuefC4PUNKHs4ymHLBcxkbRHZS9eoYAiQ==","signatures":[{"sig":"MEQCIDeYeZJmI6Ftt8D1R/YLREbRULsxzbjA1Iafz9gifYsFAiAYSCJ9RaPzJR49ewCNcyE831nn5sjBYmKtSRx00Is1Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHJBAAk98pc6BIpsIdpGgU4ggIi8L7AF4Gua4ZbeCN6vuXBvM5xPSl\r\nCbqSvjKrZdV/WTVZ/6tCLPKSF+a+IvDRGBhe1m0+7R3QKiEItxEfsG+L1WhG\r\nDxjiXBrGxp5MOH+zfalXhLSHmC+rhVuVogHRUBXclEsPAsCORdzNt14dDB7R\r\n8tRvg5R5XwGgSp/DywkjZ11xiSqvfCbK2ONe20Le6TbvFduFaK5vNK9fMiLF\r\nNQ194LC5PAf+w3L8jOgBvsoQjR3NY3TXpXnZCxXnbHJSIC/1C6y/wOOCvBwO\r\nOqDgsW3Iwhejjx81lsOkHycQAAVo1a3vcC88ZrHjTDDdqAwkg9zx+bgLkcD0\r\nizJpe4zkZyLWN8F/dXa1AZZRRhOs401eunG25nt80GmmJ0i5JIgtPnJc55RN\r\ndPgcq1ay63xN+JoP9pbujf6zjzA6nFnICQuk6XHel6CAEDBv6jPqQrR5lyLL\r\nb/YT3+RiIA7V7PoSlJgYnV5MXE/BpkKbuQtEgJy3lGHEdtcNMhN9MSdHFUHF\r\n+Mw33A7vKDytkPzum/UIEfE6FDF6H18jN5b0y2wI/SzhXp909CjJI+CusDt9\r\njptHgW2w1xBG50bcxnI8CJVlhttu0026489GXygVA/fHCXb3B9mCDN8+aHQ+\r\nJMI476qTi7B2ZrcwdDinum1KQPuadijP5OM=\r\n=BZcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/density":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"15.0.0-canary.b90be86de.0","@material/touch-target":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b90be86de.0_1682727724976_0.6504035467248939","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/icon-button","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.51f9c0c28.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21da0191a9cc7854d087fd90259953f0ffa0e5b5","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.51f9c0c28.0.tgz","fileCount":40,"integrity":"sha512-/qJscrbn45yZN+yno0NHBdHGttJ/0kgOIY34OIb9LeGDnVe+snsWrA8DkiaPeYJTLge+ACtgfDdk/iN+6vvckg==","signatures":[{"sig":"MEUCIQDKWbgs3jMOQ6/Tzz8lpy8zHztrsWYA0Qy86lXDx6kr2AIgNzoM6jwdhd/t5D29sIp0mPyTKAOC1i5vIG//bEg1ECs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGV3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWqRAAlGbfOmvDSGIkD+6vIzZkKRM1a5ofE5Q6C4DMniYL68NbDjmA\r\nNQixXSnRzShbdw/5ANyGWulpN6+1BEvlGWSLVsbyMgIpf/DAQdYAwPeGPwqc\r\nSEGmF3+dsmFI9oNCD+4NLjseVDe2swxJhj/aY7XGnn1X/g8w0SeDRSxVsyB1\r\nKpBxn9fRbOQKoA74/BAhC0uYEfuan4ImV5pvcryhQvppt/Wa8hqHjqkKNyod\r\n6wER6RNMjO2ijE2GHuJH+ViXfv1pmzISby5A3Nw6HdOEVTqA/g3g5XiXMKy/\r\n9TxFRhtMXDE1CCvnWZK1jF7N2cqtlczpj3Q+AwbD+ULIBYmWLYDET8C3zM4I\r\ngrOXw0L0FsnuYIx1Ct61xAu6T/+nHGrAAxuTDiqBAOuafEwZleNuYv4n+GxZ\r\nObzRx9EzjtZfx12zDQo9BeMYTDBJ1fCtpS9zTrlKCRiY8vkbkbFZlpmOghsG\r\nBP0gWrmdpgtNluSVpngQ8T/2ybI5HvRjxy/Z8umeZyGWN2Za8mjDLIQL61c9\r\n0i0A/rr5YnJ2ARFLgSZpnSU+jD4JKYfG8DeQMRA+50rCspaXH3I6hxb2duIj\r\n1xDGoY5Uvsg5kZRXxphQzOqDAz5rCqFnomEHv8PyCXVdUQ3VQ9qODgJrZKTP\r\n2E1gXC8q/9zSyAsSfE87dh8kDg+vlkUJ1EE=\r\n=aQhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/density":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.51f9c0c28.0_1682728310743_0.44502947442934815","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/icon-button","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4e840d685.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6b92617d43e4000d4c0c1e22c8621abb34921c6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4e840d685.0.tgz","fileCount":40,"integrity":"sha512-l7jDXumI6N5XuSSaRkm4TWkkcJ/PHxAkLh6lShQKftsWcLaBXRgCxgJhks42x6/cD0EJlO2jRsTj27YFKRTOJQ==","signatures":[{"sig":"MEYCIQDN3SMUzWSx6scBFt5gJARB3ew3Uj4gvUknpNYe8HSyhQIhAI/E39Jhvx5ZdH0ZIxixCpC7sl2YkyANe33EN5VKHh8K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/density":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"15.0.0-canary.4e840d685.0","@material/touch-target":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4e840d685.0_1683041646259_0.9759214212695879","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/icon-button","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.10b8563e4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"802ecffd49ccf8c0564702ce7586ca5d55759e06","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.10b8563e4.0.tgz","fileCount":40,"integrity":"sha512-s3Tw1+fOCoywa3huzBHgzZiFhAMHBrXNnyMX5NmAYjuj4I2BmTRl3QTriRRWRvYAApV431cIWfjSlvgG7asznw==","signatures":[{"sig":"MEQCIDiEFrQwp0pskEBF/LyV+XZ9qwasPR2FOqyLzd6iOamtAiAQ6umFeRPpJBGDfTD7oSBsUTb/zq50CdXCUQvISfKFaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfDRAAkCxRy4AzV5ku7SU1TGUXHYF3TV1i52P9NtyHa3OycztdQpMC\r\n+k/mtIaDN8DGOXp4hmSFLv6naItEkrE8ST1+Ft3OHEmBrRs39xr2ggCyqMOQ\r\nCgSrsrwqaYb+6FRwJuPnDiVZOZG2ZpqzwqJMYDECgPlcc/cNRZ0J6Xn9GsUQ\r\n/vNbjwRjRSXmnWr0f9qBKulU3WlnTxD8G9RYyMouOpOetmcNZru/K3qn916U\r\nD7NutmRtY74Y1oGvMDjdXFF2HRzWn5qvtwXPYRwUUuBMQQ3R5IbKite/RJBo\r\ncMeQ238CDPyGD3b2uZmVdlo7sl4MUxXPXGFjC2kA3UKU9ED5B/0puhjtbDoM\r\nCk1NCxR+1KnanODRPY0B033yQSybaVtmqvTucqaxcrvGYbDGIsR62WPn3dEf\r\nZgk9NnNK4FMGU4v8gxbPnx7Z1GSYJx+9oB6NnV5F8ponsgqEH9vBDmvEHC0P\r\n7CAvRGXgUvqS/Tgs6rOl4ZIloPkVvdIOk8aeAelFhogkkODz7QRs84aO9Iih\r\nR+3Gf+L7Tf9xL/+BXknU+ZfCqXylxyuxybpoZSJqGdb8+8RdOUwQfQIbw5Qz\r\n5nL2VWkEBAHv04ISFCri7h51E3z8Mu+qYbGBDmH9zK2HksMXnOQUXdWgfo9o\r\nAURzhk1ci8Q+WRHzZojmJtru1pwETimPavY=\r\n=h7Wf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/density":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"15.0.0-canary.10b8563e4.0","@material/touch-target":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.10b8563e4.0_1683070935876_0.3193582563946129","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/icon-button","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.736b7fda4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ede603ec622d88dd4656534f815fa9eab03e4639","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.736b7fda4.0.tgz","fileCount":40,"integrity":"sha512-Q/3u9Tqz0qNL3uvQDq+/PxhhCnsgccJDOYTZivqIFxVwTPMICaETZiwmu41rq5LI5NFCUDUtWc3qF8bUFxIafA==","signatures":[{"sig":"MEYCIQDAICquhjOX0M0bMpD8dk9x/hx+0tbCmyghQxsBuWh9/AIhAOWgVdqNoGqtR3Wby16Eo8i84roDfKMsdpfg0N92uKUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnlAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkqw/8CzJsvjJ5BDMs7TOj9P4kD2ALARVAhNjf3pGIJ13Av+lTQSgQ\r\naSDK+c0zBuygEKDwdmrShlIdHFvOqYy1WqQXcOX2KE8gLJCYoZPE7Sp2ntnd\r\nXksb5xmQS3Juuw90YBdZ7POtXTu//mysk/glwmMZ7YHqXL9CBZoLeL7CUWRt\r\nllO/ZIp9JosLPszQNmIhxHWNBhp7N0SRhZwPXJgcPO0s+2p9xizqCbMbxG4Z\r\n3/eeahq1xXw5bhy9Jr2LjnIb83S/4pzFoPM4yDEbqglcskaZ716aHDX5D13W\r\n5qu0ouY0RrGd4cWZVEDf147rfEFRbMlR34L8abzf/Jl0CTye/77WmZPfnL1V\r\nn2W+Eu0VPIKHt1X2XOT+MNHrCGy7kByoXmlVrSBGNcD6MqSa5/cJ5f2xmB+n\r\nqi8hKyYbkTzxpBmfoOKL1c8Q0SVbhyxnwf8mJWrrREuP/CiTt6ENu7u26yow\r\n4u3UcsksyuhtfPVVs051Ts2UTJLX2rRc1msjB2hRWs6xXDJHomfgBFx8DNe0\r\nSR6WbTUGEjdEfYJpSW7Iu0SzaBY0sKKmERM/hwuW3AsMeWxPHfewqbs4Vxei\r\nMAi+7Al517h7iac5Sm8JcT33f7F4jFlzWkJOXaWvIeYuTu6yopX8uGRixxO9\r\neAaoK956WMLlcVCnoqAIDAAUQpjcisAbM+A=\r\n=GNCx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/density":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"15.0.0-canary.736b7fda4.0","@material/touch-target":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.736b7fda4.0_1683126592155_0.9356246266465127","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/icon-button","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0e533c5a1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eda54b0ce0741c74b5b552a00d5362ba4a59e31","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0e533c5a1.0.tgz","fileCount":40,"integrity":"sha512-RKwyTo57BLhKx/MrH7WpPYqU44/AQLssKbazUM/Tznr7qtcv+voAhBAaBCGY7P3yvwXax7Vg3YAyvJ6qlMzy7w==","signatures":[{"sig":"MEUCIQC8MrjViiaJZHztHnsqcCnvU1AjwKhqwvgtymKrJitceAIgV9IGGzcmq6AFUDlbH61Go4vEmk2vEEkYu4setTsP9l4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/density":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0e533c5a1.0_1683305812543_0.38230545724670106","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/icon-button","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5f01c15a2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5747127f567054161cf3d0c3d704b94c93a49760","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5f01c15a2.0.tgz","fileCount":40,"integrity":"sha512-iYX7SG2xTaLJ+HfkB2By8/MhNAdQpT1HLPxc8+oXXnd/wf2C+5bjcFDr0Oery7fBon1SpvTwDfnsfPb61JOm0w==","signatures":[{"sig":"MEUCIDz9nJNRifkYyscD7cD7sEE2Xwi469oSH5s3eRgD+jPGAiEAj0/iHVH1B7gM0UgESEm3XG579plP12hjBXysG2b3xpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/density":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5f01c15a2.0_1683307603701_0.8611918562709266","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/icon-button","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3b5b55e31.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b0ae9e61174cb3728ee06eb23488ea9e5983947","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3b5b55e31.0.tgz","fileCount":40,"integrity":"sha512-MHn/R18YjXH4UIOnZPIcDa1VKTuU/KbXIHaMoLDXDo4QfISoQLs6AbxgK77l6rmFACRi8MHKhRJ8LAdKKUF38w==","signatures":[{"sig":"MEUCIBVSypFGcwlgPEwVfeaLcQlG2QeT3avbhMLJQ/8r/J9ZAiEA50XVgG1THcxHKiHLKldVOyLFJSa+OD8lQnG8KLpkGuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/density":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3b5b55e31.0_1683311981102_0.17062453828248803","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/icon-button","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d0788120f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0422d5433e0468e31a786be041960afb4d8d193f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d0788120f.0.tgz","fileCount":40,"integrity":"sha512-Qx0x1qtiJBb9/YjMk9O9MVRSI6W1SSSrjFB4L/aHwpLkhcTzGuMLrkzZsK3VDqqr/7Heg0inCDrS5DpXAC/3ug==","signatures":[{"sig":"MEYCIQDwDjcSd5HOv2pgGmK0tvvK5QM+K7bJyz72oW9QHulYEgIhANpP7P1ulAo6KPa+E2LeZmuH/EhI2PEIyrBGA8P+19u8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/density":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"15.0.0-canary.d0788120f.0","@material/touch-target":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d0788120f.0_1683620616262_0.2950973777360866","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/icon-button","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f52358dd0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c547e12697117f7a75450e27cc84c461c0400875","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f52358dd0.0.tgz","fileCount":40,"integrity":"sha512-jlPFHHfjE0Ccl34OEgsv3PiYMbOiQcjVLJP3qav8+J5buyo0ON4cSSKTqJUA5O7oiBtNg/a/qHQ4ZWX4RUuoUw==","signatures":[{"sig":"MEYCIQDIHiMoBnSjt5bHQvL7kXbT4GDfGy4jiRJ1qYIbC10rkgIhAKY0P9hzj2kW9yGHXCNKKYdA7TZfvOIu9Hp+5bJiYWbF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/density":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"15.0.0-canary.f52358dd0.0","@material/touch-target":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f52358dd0.0_1683901855818_0.6995164827715541","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/icon-button","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d3c3fbaa3.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde820493749c6f7425b7d5a9319db2b9c8a62d9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":40,"integrity":"sha512-uqmzMqkPx8FBjlFE2JvcUfNMhdMgxeh+Kqy0ASQJOfyjuu6/glCW/UAXzMQLUOlbtRJ5kHE684k94dstvg9k3Q==","signatures":[{"sig":"MEUCIQCbEDPeYgXAsj17g4uu8O+uCP9Lt+uDyKel9L9a4VXpNgIgB+Get9mmAFqPHcura+Yljr8cmb2q8mdnOK/PU+uYAyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777254},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3c3fbaa3.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/density":"15.0.0-canary.d3c3fbaa3.0","@material/elevation":"15.0.0-canary.d3c3fbaa3.0","@material/focus-ring":"15.0.0-canary.d3c3fbaa3.0","@material/touch-target":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d3c3fbaa3.0_1683914485198_0.7256948330328277","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/icon-button","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.576d3d2c8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad05174ab6405e1c73ebb72e98219c9c2767521","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.576d3d2c8.0.tgz","fileCount":40,"integrity":"sha512-Wer60ASSo7nj2xXcJRUTFbm6uiKVvtpuoAn9a7SvtNYDLPGBTCmDDxI0VEXjDfTMSPhpxIo92i40gl5Hk0fsKQ==","signatures":[{"sig":"MEUCID7/OwXGXzJu7hhEhLbHc/kuCueZkSU6m7aq2rvJGo+uAiEA+KqD7QW21UyYOVhhFYK+gHUuExJK6B+pVQTMCGcbfRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/density":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.576d3d2c8.0_1684202427463_0.34453757167521926","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/icon-button","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.19bb36a46.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4247424bd60cef37c7314a8d259ff43b200bc7fd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.19bb36a46.0.tgz","fileCount":40,"integrity":"sha512-x0UkSIf/3RKyH79WIVaQgdmUVS2Vjk++VYBsnLRGRcSr9TQyRj3sPYNRCncqtvyEyCli6yvzJIAAWBDnZplM7g==","signatures":[{"sig":"MEUCIEwgfZ+BRYo7qPRgDYp2rmJVwYzvOT6c44tsRgId+H4CAiEA/JLoCeinQRzGkPF5acovjCQuJuyGETgLv13aTwmUdH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/density":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"15.0.0-canary.19bb36a46.0","@material/touch-target":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.19bb36a46.0_1684266867763_0.37167038946363684","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/icon-button","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.aa5ac7fe5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90af54d98797cae3d1f0d15e6f64bb7aae1674a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":40,"integrity":"sha512-/KfA4wqu09ut0JH2IZUEj13mgIgcgLKAD5vrZ14BmQOBzfnsTTAxRWGiHGkKiWcNKKGCY8k7gGpb2wr3spD3HQ==","signatures":[{"sig":"MEUCIBRp8Y0PXb3DLilRFFRi53ozY8+9c9rL3tRe15l6eSE5AiEAuImyGLjrp05sKQgGr0SSb0/DpHgoFWr3BtLiIS/m3s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/density":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.aa5ac7fe5.0_1684776374508_0.866538387411562","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/icon-button","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.90291f2e2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1057b6bb24ffa116beaf87660285c61842d2f401","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.90291f2e2.0.tgz","fileCount":40,"integrity":"sha512-bpqiVPkf/LJEP7iIV5VL9Th0chCIQKTeOuw0mK8HmYucuvqq+k76oPsUcE7mvxRvuKyVh6KJ9fTHAkjse0y7cg==","signatures":[{"sig":"MEUCIQD9TpPsLCdDDk0Oo9rrHi68ig6GbClIwb3YJGiLY/tCjgIgau3tICnP6Hl8f7twIaPrHwIogdiScQalByCUPhQeyp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/density":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"15.0.0-canary.90291f2e2.0","@material/touch-target":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.90291f2e2.0_1684863787616_0.29039838659711736","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/icon-button","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.446734f27.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff5fced76cff3157c4950347222a68cb31dd802e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.446734f27.0.tgz","fileCount":40,"integrity":"sha512-1Ewhu5vXtJtkn6zFEiUsUdNh7kB1ueFt7Utke0T/AK2DITZ6whRJqwketv7TiF496V02pKBpIEXKAWNXacxLMQ==","signatures":[{"sig":"MEUCIFrVUT5TZ1Aa/p9yDdkWpOg+11SSdGu5kRaUDcz9N+YAAiEA8on9ruC71ZkO8p31N1ANta4TWnU4VbT7x9xFe1oQzaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/density":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/focus-ring":"15.0.0-canary.446734f27.0","@material/touch-target":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.446734f27.0_1685483321285_0.6025302562318646","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/icon-button","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.19de312d8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"850d4a00446b20f9f1574c562e5cad04ee78edb8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.19de312d8.0.tgz","fileCount":40,"integrity":"sha512-GSvdJpXgu0fU206C4jECHGzeQtkCCfAS5GBBJxYPa2XRQlrXEX/T48aQVZrlkIq+XcB1E3otuxT0gJnDH+4KGw==","signatures":[{"sig":"MEUCIFoymNqEaomtRva8zUvOXyuEaTe5/jc+Q9Gd2tQqqAMIAiEA66k9QkgeL1C3ikbqfNH6N0UvESqJYBBVuMaNFKhxU4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/density":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"15.0.0-canary.19de312d8.0","@material/touch-target":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.19de312d8.0_1686071932640_0.5027500663688527","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/icon-button","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6081d829b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5e5b31245ba2bcee16c3655d333b9d9d62797e","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6081d829b.0.tgz","fileCount":40,"integrity":"sha512-Lxx2SAZ3Xrc6ttxTJcbFpQOzd9oLZZnIOEPurz1NfiGgwlRILxNGF5T15n8tBtuLYh0HUeFFrzGiMSv183xUcw==","signatures":[{"sig":"MEUCIHW7kVFdpVJxm82mH0dh53swUWuiGwcKH4ZFpxvhPBfGAiEAlxkLS/TPhVFI1AlD8vlSHHTDxQi0KH8ooVolJ9sL1/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/density":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"15.0.0-canary.6081d829b.0","@material/touch-target":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6081d829b.0_1686100467266_0.9205524935385987","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/icon-button","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b26c34a68.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ff7a846e42def2b2ebba759e3e0e73f5873a7d8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b26c34a68.0.tgz","fileCount":40,"integrity":"sha512-z92UiGyyNVpGKxVdYV3NvejEMjvT1ncO2AsEgrVdJffbm+sJ2w8bmiNGO9A7/ptkBZlOGg4V5fuB4NcIBf1YjQ==","signatures":[{"sig":"MEUCIQDuHCCaC2o/XSKutrljTjqvG1u4/DLMSM4XpxDOB8cyEAIgQr8rTNY8Q2RRfhgWAItj/Ami56kdhO9KudxFSh8NUfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/density":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"15.0.0-canary.b26c34a68.0","@material/touch-target":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b26c34a68.0_1686169124599_0.10723543483938691","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/icon-button","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4fe911371.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d12dee45ba55ada800608fa1ac99e5e8288ec2e0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4fe911371.0.tgz","fileCount":40,"integrity":"sha512-drwc35TNLRW7M9SDHPUCnGIu0qvlaCzrVQ8J7zSOQ5DH4tlkOjmGiuqBvJdsl1CPPOlZVwRaLFb1QBGbgRtAZw==","signatures":[{"sig":"MEUCIGh8uRixH79nSQJTC6fdaykL0i7ZuHv2l4yj4f7jKNXYAiEA56FRpiJtdxMJvWGzNRVGVYUQe1fnLDqxLrdOU+TuEZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/density":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"15.0.0-canary.4fe911371.0","@material/touch-target":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4fe911371.0_1686179191144_0.2324488916875378","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/icon-button","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a9ff9866f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85664ea8c93a2d327cc09a9ba958ef896ef24da6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a9ff9866f.0.tgz","fileCount":40,"integrity":"sha512-QOnrXuuyT0CRkv8arFMn/oasV+7+UErt4u5oq0KNA7t3jfbIo/DGMaq5MBqkMPlnlrTno2CWDQS0uaxhPG/7SQ==","signatures":[{"sig":"MEUCIQDO+T2w3dVECZdcEL/9J9Z/+2GTDr41UYhwGgBEOt4lHAIgFduHT34OoBgGFMh8pHjfYJLNI9OPKA2ytIRKFUAo5/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/density":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a9ff9866f.0_1686656321472_0.5638285928984796","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/icon-button","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b994146f6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da5f7dae70ee00852aa328e6aadb237c79d10e38","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b994146f6.0.tgz","fileCount":40,"integrity":"sha512-X6DvOv4jpymHUjI7ZAbO946nDgGYKDwPZfkRzBE84gv2XEr2qfMuABhojxkYubRbt03oauBdcJVVMFCXkVhArQ==","signatures":[{"sig":"MEUCIEZ6GtmrjkPwJ3xiP6uYwPLif/jyH9tKccv7f0ANz9VKAiEAhZ0s3k/Y7ag49T9xaaNe8CaVnVh2FNotiRg0owlKTK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/density":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"15.0.0-canary.b994146f6.0","@material/touch-target":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b994146f6.0_1686776656043_0.5156300204556834","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/icon-button","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1fb4b1a06.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a3a6d4fff6dda34e62a0452ca737c8b6b62d0a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":40,"integrity":"sha512-P9PJLeD9G4V96sIagzQESVIBoJqpPsf0k5o2vUp3B7TlhMGdPLW5eElEGXGCSYzdNXrvAafK9o07DTrSxGPXag==","signatures":[{"sig":"MEQCIEqdxRuhc2bwPGGJvVsFvXwP5CrblLOGlQ/JJ+X0WY14AiB356F516YLrPXCGr9WrW5UH1LKM8aeej8UNmASFBQOdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/density":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1fb4b1a06.0_1687892262403_0.6574637895609026","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/icon-button","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c64a2776e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb181b0817a4d3f36f4a3cef2ae15b5b8cbce0b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c64a2776e.0.tgz","fileCount":40,"integrity":"sha512-M3P4ztNlFQ5G7GCEBgkv3HuMCqhmHwkFije0jX0rP5j8ChEdteiGW2upX1zvJN9wDegdK1TutcxHwC1ynlkjcw==","signatures":[{"sig":"MEYCIQC+ZJWVyXWZBZfr2k0hraxohBKzfuUqHA5XTPrkfWhkeAIhAJ3tcFaen7brIojAFL2C0iePlaP1aPbRY0Ob6tF+t4iR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/density":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"15.0.0-canary.c64a2776e.0","@material/touch-target":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c64a2776e.0_1687897033297_0.5348844031159545","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/icon-button","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.b05d9eb7c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89029a3bc2e238eae6ed6aad27175c0b55f51058","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":40,"integrity":"sha512-OnRxEx04MiQ8DcvfaFbCL8wCpFczbtHwVwX8xf2e5yj6gGqaVMbx0ZMC8V7TBKdPk+P+5uY/eTbTeYR81Gv30A==","signatures":[{"sig":"MEUCIQDp8xeNkjDBXoigH64bS02KSZ0RhZ91veXJ5HJQ1kvM3QIgJEmz16nDKCIXwr6JpnO96sK5Rz3840Oob11EWfMBSbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/density":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.b05d9eb7c.0_1688055851382_0.2695264566042215","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/icon-button","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2a9697dc5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17d45e7641fd9711fc38d6fa332290e666b645c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2a9697dc5.0.tgz","fileCount":40,"integrity":"sha512-kMPUoeKNhGMy0cULlqfIvcIA1QiGGTfLM5dAi0AUPvrbPfu3Ue/op9UaJxi1yRekYe4CADqlR7NR6Z0/Ik0oOw==","signatures":[{"sig":"MEUCIQDnC6/T891Xcroz9hExSr+p/5ES5JT1egy9c/6D+K+pNgIgBBGsHsWipoLQkDkCLKUNBlQwQWtJ2q4uwM4H7zKDOSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/density":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2a9697dc5.0_1688163261026_0.39502464815243754","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/icon-button","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0c52adeab.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a3130b29b0978175f9fc16b2aebbd99fbcbe19","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0c52adeab.0.tgz","fileCount":40,"integrity":"sha512-9SpwD80Bt6CwKX3Pv8Wzt2svpIPEjDWPglrxobz1JslWSmtHNPfG/PZrm8S75URC7zgNuveHiGYgrebXcfTVOA==","signatures":[{"sig":"MEYCIQDJvcIkc4Zz7L78TLF4GNe/EScHkRhz4E6Bu6+mDOjiCwIhAJC/jcr+jK8eKw9UjdWrTRSdX+D9nwxv9q8wM+8mnJEV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/density":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"15.0.0-canary.0c52adeab.0","@material/touch-target":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0c52adeab.0_1688574377956_0.6573530873708213","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/icon-button","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.83355c322.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06465188d90e48f39d03405c94d7b1b5eacf73c3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.83355c322.0.tgz","fileCount":40,"integrity":"sha512-K5aBNXnYHLx6Gmx3cwoXpeCas8sVdIKhtixQXf+cBzcNivjZ8w2UcVsuMLku2QMt+FS9l+sPMc++gKoxISq0Tw==","signatures":[{"sig":"MEQCIDIxFdV62dt5AuWlM5QEzUoUgLMoqOZAV+ekJXirbUzFAiAfclBZnkGXobu3a9vkIcMw9X/3LUsACtMj8ZgiRtwtlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/density":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/focus-ring":"15.0.0-canary.83355c322.0","@material/touch-target":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.83355c322.0_1689001571770_0.4237434008884675","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/icon-button","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.bc9ae6c9c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67246733d5e1aef1953208d3dfac01425d560ede","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":40,"integrity":"sha512-1a0MHgyIwOs4RzxrVljsqSizGYFlM1zY2AZaLDsgT4G3kzsplTx8HZQ022GpUCjAygW+WLvg4z1qAhQHvsbqlw==","signatures":[{"sig":"MEYCIQCwgqZAMMUExb1sSVJlmm+k/Vuz2/0wayUdag/hlXTqYAIhAOknmdoH2DyoQkENbKZS/z73Kr77S7dSpg63RYnVmLmH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/density":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.bc9ae6c9c.0_1691097696887_0.36390841055113166","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/icon-button","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.3c44cd956.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61e8f29447cdb7c33fb8d3c59582edda9dc4654c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.3c44cd956.0.tgz","fileCount":40,"integrity":"sha512-I3OSBS5+41yZ3ZH31vEoO6UVPxbeX9KsA5IRSz5jzGm/3SZ0ge4HPdXCroo7av8O8fGQn2ggcXpa67Y1Rj7AIA==","signatures":[{"sig":"MEUCIQDno5swsJBTlhlXz+9k3fAdtHachTBzSGSDEaFR4Z+KtgIgMer9kjMPOSPPHiHxiabF0p6SofLoKJg2pKEtm31Mnww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777244},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/density":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"15.0.0-canary.3c44cd956.0","@material/touch-target":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.3c44cd956.0_1691430469714_0.31502930512061345","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/icon-button","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.02702296e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb73a13e868dfed2f26e548a8826d3d75d1f92d9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.02702296e.0.tgz","fileCount":40,"integrity":"sha512-ceqecUMKkkM+bS/AoU74s6cZf7NS12IvX6ViXki7X1gQ62HBzfdAF2V/tsUcvbEZNUF6FbG5z+/O8rN1AiHEew==","signatures":[{"sig":"MEQCIQCLaf4OQcBw8mMMt936WEXEk/ZTV4DMjc3Mi1wChhzcjwIfET77OtL/mCpqGfwvcsKxPJLoMjF73fUrHSDySq3k7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":778045},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/density":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/focus-ring":"15.0.0-canary.02702296e.0","@material/touch-target":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.02702296e.0_1692965125824_0.6474047025726744","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/icon-button","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.872b65832.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63747dc6a1e126af7565e74d2b6de57dec163138","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.872b65832.0.tgz","fileCount":40,"integrity":"sha512-MTOfbT7sn9KI3PRxA2XAAVgGVK8j/+jv7SSgXLu91nHJaLYiusEye767pzPTGnf/QGAZqc4v1aFzAlIfWuBQvA==","signatures":[{"sig":"MEUCIQDeOivMCGSHRmuOqGcb3CeVkq/OARUE6sfyif1w50QtEwIgTf6WZMwXwG22H3XTw6HhjwNwyaZroX8v+gOY7MjCjoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":778045},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/density":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/focus-ring":"15.0.0-canary.872b65832.0","@material/touch-target":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.872b65832.0_1693397630673_0.03752566955631553","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/icon-button","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.89b2e4122.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3a22c97e39d216acf2361e527eab023245bd2ad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.89b2e4122.0.tgz","fileCount":40,"integrity":"sha512-Szj9PwfmujMj+5lzR+W7MtMq6hnjc6uiVQp75Um/XGGaVNOsPSDht2Tal8cCr9Cnr/sQTnjWmVPqIFj6oEM0Sg==","signatures":[{"sig":"MEQCIAkmZnxlmCbvdsLy1tg/ttcRIGJIVOJMj4j72lSg+ipgAiAKtXqO/o5uqwAmKzWF7+ZE3mGJWJOHO/aORBsZFg9szw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":778045},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/density":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"15.0.0-canary.89b2e4122.0","@material/touch-target":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.89b2e4122.0_1693498038037_0.10339298658652063","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/icon-button","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7a3942e7a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e039006f06596eebf3633855c0e5abc01b73628","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7a3942e7a.0.tgz","fileCount":40,"integrity":"sha512-pOz29J1j+0mddWTpj50itwS9kgTbMJnniiGRs1tKlI49Rxkk5k8A/I2KLX5reWGn7XwL8tEMRSYYdCqdR//x6A==","signatures":[{"sig":"MEYCIQD/i7y53a1Yirrl4eE+j9wJKXOwNM0ZEb8TiLTXxTu/iAIhAKoZ6rp+YlReL7n5+6jlB/c9jwhNB8x3XRzuf1PBc3Ko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":778069},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/density":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7a3942e7a.0_1693507214132_0.3305098737848917","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/icon-button","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.54feb3020.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0b74c0fd2122d88579272c2f9bcabee810f296","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.54feb3020.0.tgz","fileCount":40,"integrity":"sha512-rpJa47sRIGDCC1K5OptPpC4BuawJ1vJF3MtYqp6mw9pPO2wN8Jvwpxt2bv+MizNZRxp2IZd7bgh0GtZP8stSVw==","signatures":[{"sig":"MEYCIQCHDA/bu+OzVXvFwDkove+9ErzGeyB2CEJgybXzSS+uOAIhAM3/NFL0JkI5HAsrl5JCNZaRc7L1zEgfTyorxuhNUyz2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":782906},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/density":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"15.0.0-canary.54feb3020.0","@material/touch-target":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.54feb3020.0_1694466334641_0.28291297267407245","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/icon-button","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.6cda3ce8d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c69983e78cf51c5a43545bba1265bf701a8ab32c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":40,"integrity":"sha512-BapuVECcv6/hEdiPWH6xd6YGJ6CrBkkWFxVb9Y46q7awAVDjCFnd7lm2PjsyJ3FwoZ9Bw/Gf2XFrJfM5zZ1A2g==","signatures":[{"sig":"MEQCIBfqSoDrgplhyalUDuRCAQ40FBJQ7EcSkYIIh7r3pmr+AiBEj/HoUu+DxcKCHRxcKQrpiuZfDNVJWMZ+DKvTZ+9cTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":778069},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/density":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.6cda3ce8d.0_1694483146217_0.22114418506489142","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/icon-button","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.205b20b36.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6844da160a0a4d027e52199e08388abe60fffb1b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.205b20b36.0.tgz","fileCount":40,"integrity":"sha512-0+w544VW7hC84yPCTYj1fMW45uij8tGR/St6Ytok6+gS+dR4oPcAY5CgWOLIMY6ic0msyWq0lrHowksARwZL6A==","signatures":[{"sig":"MEYCIQD3RFYpFF5TaGC/C80QgVl2NM9fOb0QyUHZ6pwT9RR9FgIhANv497LaDmxosLq6G8XNdSg3+zo4jPKdaPpCFe+4qTMj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":780854},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/density":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"15.0.0-canary.205b20b36.0","@material/touch-target":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.205b20b36.0_1694625447306_0.27103196066143","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/icon-button","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.22bf82024.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e4e5c619677f7b53bf82b63015fd427ba31aad","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.22bf82024.0.tgz","fileCount":40,"integrity":"sha512-GsYx7uIL2Q8LACjuo5d0ELLFsHSPmh7ga5Dip3GFxi23CltaYBv4/6uqo0Mm9QnO9UB6v19UohNl6kfHHBTeNQ==","signatures":[{"sig":"MEYCIQD5ICSFbnsjvOgRUQHFImraCMOzVjSJ9tNu5gTO38w3ugIhAI9Tny2gmiMXk8kTKdfMGR6JyHgsLdf6djOFINLEse+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":783106},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/density":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"15.0.0-canary.22bf82024.0","@material/touch-target":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.22bf82024.0_1695028343718_0.14463747053822407","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/icon-button","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a246a4439.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0121dd8ab97b024dcd36eee620b61fe8bbc8a8","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a246a4439.0.tgz","fileCount":40,"integrity":"sha512-Igyo94rkIlqC91BR1Tv+WLTz1ZWcZZjl1xU7Vsx8mbWA1PnaRDUTNVV5LFi4e0ORp6GSblFTImpHngEy4agMEg==","signatures":[{"sig":"MEQCIH8XAOPFQMF0MPt0kasJ/WUVPpT4R4ByAszIKTE8NnL6AiBe10/fi4F23tTRLpPe6sslLHTyLz1dAieksKRDJjsTpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":783382},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/density":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"15.0.0-canary.a246a4439.0","@material/touch-target":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a246a4439.0_1695059191245_0.5368041188536521","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/icon-button","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d153db62b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2acc9c0ff929b626bef54b14767455e7ecd093b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d153db62b.0.tgz","fileCount":40,"integrity":"sha512-B+3mnFEjaT5Ov3JtKV6K+zG7f///az0jfzd/rg7OrcbRTUxKZCkukuJbJASTrBzgNsnH1b4Om8SYDDvoezXiVA==","signatures":[{"sig":"MEQCIBoAwUlQNmMl3W+a/T8NDaz2TKDx+gDzfU0qC/Nb/LLfAiBal0Ygje9HmS2vQP7+pnak+DulzlP1hn2kt/Gq6WWb8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":783382},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/density":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"15.0.0-canary.d153db62b.0","@material/touch-target":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d153db62b.0_1695150931402_0.0017807575162422928","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/icon-button","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2528c1c3b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a1116a2f54a5c644d31dba375ffbe1f76685cb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2528c1c3b.0.tgz","fileCount":40,"integrity":"sha512-DEeG4zHI8ezyAxedxcvpGnwoFcHNw8TMIjy2/n/iLbwrFrtD2u1dRC1vhSC5K4D7hS3C5WfNxaZh1hqvngbJtw==","signatures":[{"sig":"MEQCIDfjsT/2EOap3iKIcl01JAJtH2Zvu4mr8TqijzbfSyhvAiAn+fzG/iaiEjai6nye+TrHSHIYNrkjJ6qCfN53GlEW+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":783382},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/density":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2528c1c3b.0_1695233218693_0.6702194093764788","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/icon-button","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.1728a6dcf.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0073e60dbcaa52722fe95d1e4a3b648a1add235b","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.1728a6dcf.0.tgz","fileCount":40,"integrity":"sha512-fzDr0Or5TKK6HPmBtd8pLlyETiV+GmD3V9JrVCzC76xsLll2k+SuU/KMbSjcqiOCpTPyJAtUc5w4MXg3sjkqIA==","signatures":[{"sig":"MEUCIHFSsrrLSkEuzo03N70OD1wNM4+d8yTZZ9/jjl/I+W+WAiEAkJCDZsWPeTZe6PolYxBcJ1FO/MgbsxYpKV7Wr4OCEDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784783},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/density":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.1728a6dcf.0_1695691416393_0.8822000565666632","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/icon-button","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.ebb636f3d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0efaec37b99710c42ffa0a531a887aade3f61ab7","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.ebb636f3d.0.tgz","fileCount":40,"integrity":"sha512-oYo4IxdDmLMBtWdmFrg7ovRLApAx9pegbnHg7QSGTVDVu+KJt4Zy6iBQiyEIXxYiQ+SUeyFPVmW4jI21SgnWbA==","signatures":[{"sig":"MEUCIQCrjk8M+mlW8brPcqDJFXGyRkkwRVfyBuqBqsc8z9ey8AIgIGEmxUoRQmlvu3ushOcoYOLX56pz0Hrm7AIF7S8Fvg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784783},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/density":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.ebb636f3d.0_1696016687631_0.8753761680099366","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/icon-button","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c0d21ecc9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7108704a45340dc9aba55f1100540fc343dc82c","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":40,"integrity":"sha512-LlHcH8kf8Twh2q/CRqTmr5x45DIAf80Y5BYRZEJBeU56JnIt1kIiMiYg37W8m0DRAHZPzJoO/oLZXBnsUpjdGA==","signatures":[{"sig":"MEUCIQChT96XQAKWIDljvbdlpXPXffXD8I677VL26zfGUEYo+wIgSC82tUTrrn5iXEtm3vplLyQRtvtwkEVSz628CAKkRdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784783},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/density":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c0d21ecc9.0_1696880232797_0.23723512238730282","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/icon-button","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.127a44b28.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c920e7e46261fc298f5a8df8563bbffcb351bd68","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.127a44b28.0.tgz","fileCount":40,"integrity":"sha512-rkulWW9JEoNODHfESYjl54pInlBLHC+xZenZLZMXAjKqu+Y7jfkY1gF5KvkGo4hluuq2ac9AGieTb3IRHr7AkQ==","signatures":[{"sig":"MEUCIQD+57u0p1+qIt0WEP3CnxrvpkaPegQrFbCSiUXsshaWPQIgNwHCw7f1HldKkuyx+qiG5kWYdSr3VoSOXXFjw5OR07o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/density":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"15.0.0-canary.127a44b28.0","@material/touch-target":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.127a44b28.0_1697140857295_0.5299200931430692","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/icon-button","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.0ad128337.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"077c7af3e4c911873266ab4724cf3af463a73475","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.0ad128337.0.tgz","fileCount":40,"integrity":"sha512-YlTm4hnQuTsvPuZ224mlLfb5Zzqj8fEZYqLnx8oIaz/AX2COXn3EWs8AryYUXtOohmvJ29WKxCUWxkeyK6kF/A==","signatures":[{"sig":"MEUCIDVqwQW9QX5NfEquqc28qMOIYruFlnV3CN3ZZF78upVXAiEA1Po9HlSFYpnM6SQDpJbEnZ71l2qsDHRZRHu7TUVIJYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/density":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"15.0.0-canary.0ad128337.0","@material/touch-target":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.0ad128337.0_1697741543319_0.48559795900909974","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/icon-button","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.9cec94097.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"427f9bb569c38203f8be5982c88f18b7f1856377","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.9cec94097.0.tgz","fileCount":40,"integrity":"sha512-td4xJoZVhTGzVMhx68UzbzVEZtPLh4JzEcx0sl3cfR8c+v21kzMpSlWW0q4XfWHwQ02AjpvW4aw8KM/dtD7QZQ==","signatures":[{"sig":"MEUCIFystOA6FQWcQrypZrk6AH/MtXveKZzRDF8kNvnlV2YkAiEAqN3Jg9hTmPrakI4HHFIh6sg4EPAvEKNvNU9vXFcZE7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/density":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"15.0.0-canary.9cec94097.0","@material/touch-target":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.9cec94097.0_1697756984653_0.31587152311885647","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/icon-button","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c51a0bbcc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95bae46a6c58ebc6c8b1ddf538672731b35cf31f","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":40,"integrity":"sha512-FCtZpe7nAjaWmUk6BqcNRhSATqnBnAeZ04ByCRn6IHeTg3XG0RH7DeHxO4fBG7A1s534nwTRIujJf8ia2XwisQ==","signatures":[{"sig":"MEQCIANfC/K63CabgmgB3oD1h3E35z6lRR8dHXlQJxPHi3HqAiAi2N6JaaHYea7OSaeLmyOgrYoOULaarS0NNjbjcWbhqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/density":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c51a0bbcc.0_1700081928538_0.4096284958049443","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/icon-button","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.d76666ad4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff5167ef9ac800a1a872da1d676c0b5d6ee3cfb","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.d76666ad4.0.tgz","fileCount":40,"integrity":"sha512-ZfvVb9PVhIe1CwFqd5tl4oxQbpHdOglDLnew/XZRuVYR2KZz4HPVg6aetq7vCUGjRok+T/4NADPHBrvIJm7K9A==","signatures":[{"sig":"MEUCIQDtiRUfI5vt9KGOgT34+h8kSjLqWzHp7sfOAKYQt0yfVQIgSxRAJUNI2o2jdLeTpF1bF5EUon+f2Ugr1TJvmqe2w2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/density":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"15.0.0-canary.d76666ad4.0","@material/touch-target":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.d76666ad4.0_1701123193623_0.12299090103577015","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/icon-button","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.8656bf0e0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed3c773880062fe621aa60134944f68897118b3","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.8656bf0e0.0.tgz","fileCount":40,"integrity":"sha512-AowZFY6DyvsaWOUfrWcnAJuK+YP41PH/+dn4qSmrYmWNm54yoSThqGf7qTN4fYYlfZFuhIDXbVigV+MiBK76Sg==","signatures":[{"sig":"MEYCIQCteZR9Yz4lcOhs0GKEDaOjDatyYa0ZRgrB8F2Gb+2XKAIhAPNBbHrNwzd2AMWntCYFDLfMxoKSobahBscDfVr4A6pu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788259},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/density":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.8656bf0e0.0_1702415925017_0.09244166768217088","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/icon-button","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.7f224ddd4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75a31e0b1287f98fba4355554725248340521c04","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7f224ddd4.0.tgz","fileCount":40,"integrity":"sha512-DcK7IL4ICY/DW+48YQZZs9g0U1kRaW0Wb0BxhvppDMYziHo/CTpFdle4gjyuTyRxPOdHQz5a97ru48Z9O4muTw==","signatures":[{"sig":"MEQCIDyBZAIhDLJk1cQtlaevxlR5sJ01DYO6E4sxBn+/rslWAiADQzFyY9xzlVWteRiighD0e+4BI10j1/JokUdhu1q+/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/density":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.7f224ddd4.0_1703743752732_0.44146251671731074","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/icon-button","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.a0b8a90c0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2466f526b125419dfa150e656fdd5d49367f5d51","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":40,"integrity":"sha512-L6g19Jivv0o9CSu4fQ6yE7Gtov5Q+Qc+zGnJgIa9juDbN0UwKS85WUHm64PK1FADTWCM0YuItNfShXVPXZfeBg==","signatures":[{"sig":"MEYCIQCjF3DZIJaSGCnjPEstTbsncLw0eTa10drji0brOVVcvgIhAMZEG3yC1yMiJRykqyERWy2/XLu8k7x9HkKmLxOmJRKb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/density":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.a0b8a90c0.0_1707333576581_0.4970515446010624","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/icon-button","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.e50b478eb.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e4a617f8a90a971511532026add7988ff6c2625","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.e50b478eb.0.tgz","fileCount":40,"integrity":"sha512-qYir5NeU+Z7/n/+PQIW6a05WWAzSArC5oNQ8mWbCDkdi1B8sN7k7MPSTO9ZKPXdCaHasjck3hTELBud8C+wlBw==","signatures":[{"sig":"MEYCIQCtZs7oja1k5VpgpgsiV25aXoj5WjOzOrT9POYekO8d5AIhAMlPZ23+gDDTLeLKroThiP2uy9oNJtyMEtDrilinb9g1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/density":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"15.0.0-canary.e50b478eb.0","@material/touch-target":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.e50b478eb.0_1707415688769_0.8750645621401856","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/icon-button","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.c43b3438b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75f9fc7b0d7ee4bd249013ef078f604d21536fb0","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.c43b3438b.0.tgz","fileCount":40,"integrity":"sha512-mMEhU8Ok0s5EReG48+9bnT/rw0XMFh57dLA03IWzLAEdf0AguvxiKP/7Ih8W9Xpqeo2qq343t7uaHMbDbIqGdQ==","signatures":[{"sig":"MEUCIGfYtwDUylO7f9l359no/UUCBY8vfsbe0pDdh7Va060uAiEAut1gCYLeUHyH0adSGGfX4y9BqrwxdGscL/EA2UNeQNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/density":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"15.0.0-canary.c43b3438b.0","@material/touch-target":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.c43b3438b.0_1708719460786_0.7220511804377663","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/icon-button","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.819498d8c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5193960e461354a80454f0efb6180c82d251f81","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.819498d8c.0.tgz","fileCount":40,"integrity":"sha512-BPmn+qlcSWeqYaQ70AF0mwKj3pGEHbjQaGej6KV4C71uEYaR5/WyioYy6wliJVgLovpyFuHS7lG/imwnQgst6A==","signatures":[{"sig":"MEUCIESgfFoHLIvRdidnpsf4dGyu+HqEgzQu55pDczI8pvXQAiEArfmzzrqrK+7IuLdCrP1ieghvQHxTs/B6xO8I/JbqWKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/density":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"15.0.0-canary.819498d8c.0","@material/touch-target":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.819498d8c.0_1710515705244_0.05373357684226221","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/icon-button","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.453a6248a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62458ae1b056a901de5526fe498567c8d0f60ca6","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.453a6248a.0.tgz","fileCount":40,"integrity":"sha512-u2T3yRtQT0rQ1a1uKYlF2pDx48148Y0gIKTgiNpqWO6oAHWFtScrLqENfzb36VPDD/rvRovkSHz+pie/odBgNA==","signatures":[{"sig":"MEUCIHB3ZlJavi/ld6PYOnlW3XZ5oxxilkjxijNrBeMkI0o+AiEA/H56gIAfHyEp/YslP6PxVxf4YedFdSC4ZOee0oJARqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/density":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"15.0.0-canary.453a6248a.0","@material/touch-target":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.453a6248a.0_1711386821601_0.23703683738447134","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/icon-button","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.68edc03c6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55792c38924b514543c66bbab491e9a6fee58f03","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.68edc03c6.0.tgz","fileCount":40,"integrity":"sha512-LVCDjluFnD7NkYq/N+THNyV06grcJToRF2wEUJaVN52/KWJnUjpWVxkqSV5wQNVum45L0ceRMO1z91sUVqYR2Q==","signatures":[{"sig":"MEUCIQD1tTrHJ4tmNjCX2Qhsp8PBNISwEtcqMYJkzm7YE5BGggIgUqCVWn0R549kMqcjrNSquaiVVGEts+wZ13RGjnqRrE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/density":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"15.0.0-canary.68edc03c6.0","@material/touch-target":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.68edc03c6.0_1712603177427_0.6815572776335279","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/icon-button","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.5bebc0064.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e5b2a14768ad11cb2b85f4989545c70a31752a2","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.5bebc0064.0.tgz","fileCount":40,"integrity":"sha512-MTGIBpZYZSdGxXhj8GLccwZlAQg9CUpP8UkmULqUT+rvpOLJQZLtOc3+SjzaabsjlJYEIA1vicHAk+9SfboiIg==","signatures":[{"sig":"MEUCIQDdJkjTHK0YlIM0LUNMvmomJ0YoWiDd6gtXNtfgpZ0KmgIgVSFe3kKmszPnFVgKzLnBUpRBWgEIV43xBVxeuXlhZDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788420},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/density":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"15.0.0-canary.5bebc0064.0","@material/touch-target":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.5bebc0064.0_1712871666300_0.7047891685655092","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/icon-button","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.311f29a60.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab6e574c1d53b37d78d6c18ed61ff3c0b0375edd","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.311f29a60.0.tgz","fileCount":40,"integrity":"sha512-VogcqA7QGgSO0AFsMePubUNDTV7k4iDg+NQcUtEPHLehLqDVGrkS/j98ajmxBhs1YNIwLqnG36us2ekCn8jetQ==","signatures":[{"sig":"MEUCIQCimU2a1W4s90L9YY223pwblzrPb80yUU+ya0nyfumyZgIgYm5q58X9eZuCJBXe5cE1cc3ZlAuXsIJM5D7O3oIigyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":790801},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/density":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"15.0.0-canary.311f29a60.0","@material/touch-target":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.311f29a60.0_1713895210508_0.2195578380027361","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/icon-button","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.65c10a622.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2885cd4d318d51214873e267ebb009bbd520731","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.65c10a622.0.tgz","fileCount":40,"integrity":"sha512-E4nasPL9wGF8cqNsmazju520iVNe4PDrnZFsMY3o3G1jn95qciPEXh1CcR7KuGs8m2shDETZBxSwlgljOlruEA==","signatures":[{"sig":"MEUCIQCweeoaPfy9nlCHsP85pLR67uEoc7vN/PrkdzDY6M0kdQIgP/BQSOZJDr7LLgRLSalNjwxPAT4syAMKHKowDltYp4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793362},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/density":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"15.0.0-canary.65c10a622.0","@material/touch-target":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.65c10a622.0_1714070940706_0.5902288178454296","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/icon-button","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.4b35cb7d0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f63516606e4fcca985851999806cba9d242ef9","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":40,"integrity":"sha512-n6VdLXROwhf4poFTiD5ufm2e5pFv9GCYwh25B53od/FSTeYc7gKCBl7z3VCZ83t97DTJjI3XaZmSAX/IQlVx/w==","signatures":[{"sig":"MEUCIBB8us7jIPU5q6DPfpKlH/rdw0eXElG1ISj63+sKCASrAiEAn1Du/rzySmW4Y3f6mdr1IU1SiB80MK0qWURF/Oq8ulg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793362},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/density":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.4b35cb7d0.0_1714651383771_0.6701240820318803","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/icon-button","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.f80ac92b0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff9c3b2e6b326ff98a32725a8054d8f925406202","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.f80ac92b0.0.tgz","fileCount":40,"integrity":"sha512-gAviznmjuvUK3L/AzuJY64pOok7gGDJBNJJQTqtxrzsE2bf1us4dZMxPYeXe02b2Gs5otJxc2n9FAd0TTM41KQ==","signatures":[{"sig":"MEYCIQCQlaPLQZHWsZrgEEmR4dae2GNj33bbegpZSMYWNDPJOAIhAKHxMQWV3G2f1NkyquY8ZanLPcwi+pUp7l5C831Ccfgn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793362},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/density":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.f80ac92b0.0_1714651996011_0.8091982028690352","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/icon-button","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.2f5b899bc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa9bf94afcd6583da7e8193087013ccf4de4bb20","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.2f5b899bc.0.tgz","fileCount":40,"integrity":"sha512-xLRi/8mZDFEm5kBfrP0SDbcSUz1HPn98mSLnN8dBIfmD2Vynr2thMh6T4Xkinwo6+vr787EJGKQOic6JvKtO1g==","signatures":[{"sig":"MEUCIEXo6zwTcPIaN3KwFpDEBJDGMiMRK5iFnEJ8z58eLGJoAiEAuMNs8/00NKpEtau2U+TOBG4XB/A0FHxMnoc4fIBt6Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793362},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/density":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.2f5b899bc.0_1716213355687_0.6128885871809691","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/icon-button","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","_id":"@material/icon-button@15.0.0-canary.cfec83c74.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79df9feb7b599b0661874bc528ecb3e8f55a601","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.cfec83c74.0.tgz","fileCount":40,"integrity":"sha512-HIxEDSsmf02k80kDfhdehyw1RBejX+JZxfdv0YqigMsXapHMou/3lK0SPBBAsqWICX/OWUL5PdEkG9wXKmpt/w==","signatures":[{"sig":"MEQCIAmTuS+LX98CIBDBsayKKFO0uuU4ElUFY2iXoI6YRZdlAiAizYoB5WgIQHOfN/U0y8jH/TExNFlfWA7jkxq8mnh+tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793362},"main":"dist/mdc.iconButton.js","module":"index.js","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web icon button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/density":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"15.0.0-canary.cfec83c74.0","@material/touch-target":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/icon-button_15.0.0-canary.cfec83c74.0_1716231410061_0.7056537514648207","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/icon-button","description":"The Material Components for the web icon button component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","main":"dist/mdc.iconButton.js","module":"index.js","sideEffects":false,"keywords":["material components","material design","button","icon button","icon toggle"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-icon-button"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/touch-target":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n\n```\n\n**Note**: The MDC Icon Button can be used with both `\n\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n\n```\n\n### Icon button toggle 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 `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/icon-button@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-c9N7LKy/2MGDxPyVWXJ7CKCj59//ATt3Ky8SfxBKNIPYsK0DZpZyNKHMZh1VlGfR64ghhsHJRwM1OzD73hFixg==","shasum":"c43a370afbc3233bd5cb76b39278c47b08b984fa","tarball":"https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.423edc3dc.0.tgz","fileCount":40,"unpackedSize":793362,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZmu+uVSgFBANfRGf6UdFxrj3FBBm8O3snsgQSZ6zM3wIhAL2qxCoPKQJkFZwFrwVj3+Sb6ALeLTi8JV61v1J6hh6j"}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/icon-button_15.0.0-canary.423edc3dc.0_1719425529749_0.7408781144170073"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-29T15:22:15.623Z","modified":"2024-06-26T18:12:10.337Z","0.36.0-0":"2018-05-29T15:22:16.311Z","0.36.0":"2018-06-04T15:38:04.806Z","0.37.0":"2018-07-02T22:14:04.594Z","0.37.1":"2018-07-16T21:19:28.574Z","0.38.0":"2018-07-30T17:07:04.898Z","0.38.1":"2018-08-13T20:39:07.046Z","0.39.0-0":"2018-08-16T15:15:43.280Z","0.39.0":"2018-08-27T17:40:41.891Z","0.39.1":"2018-08-31T21:36:30.824Z","0.39.2":"2018-09-11T16:55:10.983Z","0.39.3":"2018-09-11T17:18:59.361Z","0.40.0":"2018-09-24T20:01:18.265Z","0.40.1":"2018-10-08T20:54:40.928Z","0.41.0":"2018-10-29T20:22:09.660Z","0.42.0":"2018-12-04T22:54:52.897Z","0.43.0":"2019-01-07T19:49:15.408Z","0.44.0":"2019-02-04T18:24:00.317Z","0.44.1":"2019-02-19T23:02:53.312Z","1.0.0-0":"2019-02-27T23:59:37.934Z","1.0.0-1":"2019-03-04T23:33:31.506Z","1.0.0":"2019-03-06T21:08:21.907Z","1.0.1":"2019-03-11T22:07:30.907Z","1.1.0":"2019-03-26T19:26:03.239Z","2.0.0":"2019-04-29T17:40:12.531Z","2.1.1":"2019-05-10T17:25:19.421Z","2.3.0":"2019-05-28T21:23:56.799Z","3.0.0-alpha.0":"2019-06-12T04:07:01.663Z","3.0.0-alpha.1":"2019-06-12T19:02:20.600Z","3.0.0":"2019-06-25T22:27:58.317Z","3.1.0-alpha.0":"2019-07-16T13:29:18.678Z","3.1.0":"2019-07-22T22:02:41.012Z","4.0.0-alpha.0":"2019-08-07T21:09:37.916Z","4.0.0-canary.0":"2019-09-05T04:38:01.944Z","4.0.0-canary.1":"2019-09-09T20:20:55.691Z","3.2.0":"2019-09-12T21:53:32.733Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:43.416Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:31.908Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:19.291Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:03.580Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:24.937Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:47.272Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:46.268Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:54.210Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:01.173Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:35.496Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:07.174Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:28.129Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:24.588Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:14.942Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:13.053Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:55.134Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:33.747Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:47.681Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:07.601Z","4.0.0":"2019-11-02T18:11:55.344Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:00.913Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:05.827Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:02.310Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:36.748Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:36.496Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:44.096Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:06.888Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:04.507Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:11.667Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:22.584Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:11.680Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:57.498Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:47.867Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:08.781Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:59.915Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:23.394Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:30.501Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:08.816Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:54.590Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:31.366Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:19.069Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:47.066Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:24.871Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:05.832Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:28.968Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:16.713Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:06.277Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:41.582Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:39.804Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:42.026Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:23.698Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:23.969Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:32.536Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:40.479Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:59.406Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:22.819Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:37.385Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:34.380Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:46.283Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:32.113Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:22.343Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:20.416Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:47.546Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:30.439Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:31.777Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:12.706Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:10.383Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:12.512Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:29.157Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:02.294Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:02.535Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:39.335Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:30.956Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:41.921Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:55.649Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:50.279Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:23.788Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:43.116Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:57.071Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:11.105Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:51.566Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:46.501Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:54.435Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:38.435Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:27.015Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:01.252Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:28.435Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:39.291Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:15.510Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:32.085Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:18.105Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:14.469Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:53.820Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:39.714Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:13.780Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:41.900Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:01.023Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:43.997Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:40.247Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:31.986Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:44.361Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:22.021Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:14.915Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:38.575Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:41.216Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:39.013Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:42.460Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:16.810Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:27.406Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:12.796Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:50.309Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:59.601Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:43.646Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:44.766Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:18.055Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:22.978Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:25.463Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:44.693Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:24.653Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:43.283Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:50.113Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:13.902Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:18.570Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:24.536Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:06.101Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:41.924Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:35.592Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:06.166Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:17.632Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:08.915Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:21.829Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:53.610Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:15.920Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:40.985Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:41.627Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:20.657Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:54.964Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:55.708Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:01.005Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:20.481Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:47.677Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:59.456Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:48.531Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:30.018Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:55.266Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:23.662Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:08.608Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:44.706Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:21.966Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:34.575Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:41.863Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:41.898Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:16.628Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:58.727Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:01.286Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:55.778Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:20.036Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:39.173Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:29.171Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:31.306Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:21.228Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:33.905Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:56.215Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:14.906Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:19.610Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:58.754Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:04:11.012Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:28.585Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:08.301Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:32.154Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:44.513Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:44.871Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:04.586Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:24.577Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:53.339Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:40.067Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:27.393Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:23.908Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:51.802Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:59.745Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:28.866Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:56.297Z","5.0.0":"2020-02-14T00:09:11.319Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:27.758Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:43.796Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:35.724Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:08.313Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:58.180Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:45.460Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:05.706Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:44.434Z","5.1.0":"2020-02-25T21:38:03.868Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:38.536Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:58.625Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:30.344Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:19.412Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:04.986Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:46.450Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:09.724Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:03.811Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:17.918Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:53.852Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:00.685Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:22.469Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:51.684Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:21.986Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:27.783Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:19.758Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:30.476Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:03.426Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:25.053Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:09.139Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:15.020Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:58.378Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:46.025Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:56.316Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:30.129Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:12.148Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:17.377Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:27.345Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:05.247Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:25.507Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:58.252Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:31.511Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:35.353Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:22.441Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:59.090Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:34.413Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:52.328Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:03.730Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:42.863Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:29.571Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:47.286Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:33.580Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:57.883Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:22.750Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:55.335Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:32.259Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:03.412Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:46.987Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:02.040Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:04.295Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:28.043Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:28.023Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:25.119Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:51.702Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:48.879Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:15.759Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:30.319Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:06.036Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:00.822Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:13.631Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:02.062Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:37.090Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:05.596Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:28.355Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:04.959Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:21.549Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:58.697Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:33.844Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:03.020Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:20.376Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:09.675Z","6.0.0":"2020-04-23T17:26:42.785Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:49.492Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:17.070Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:10.607Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:57.668Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:02.336Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:23.311Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:06.559Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:35.049Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:07.864Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:44.285Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:00.023Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:56.587Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:47.065Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:54.497Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:40.377Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:56.351Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:40.790Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:08.572Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:35.053Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:06.650Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:12.403Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:31.075Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:34.896Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:57.733Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:14.000Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:48.318Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:35.648Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:30.426Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:54.091Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:29.953Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:39.244Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:12.794Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:08.671Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:37.359Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:20.604Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:09.791Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:14.942Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:24.794Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:50.959Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:33.540Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:43.650Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:08.804Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:06.431Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:51.536Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:23.471Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:16.141Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:38.059Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:36.787Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:51.968Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:51.380Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:15.556Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:09.043Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:03.125Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:16.479Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:25.984Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:46.342Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:47.346Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:10.330Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:48.682Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:10.871Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:06.708Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:08.674Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:14.197Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:03.248Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:41.219Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:06.459Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:02.809Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:26.642Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:23.491Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:38.527Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:40.588Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:09.967Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:46.730Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:58.787Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:23.941Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:53.053Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:54.933Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:01.613Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:18.765Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:56.935Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:21.896Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:27.638Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:23.387Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:11.898Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:00.868Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:39.177Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:30.666Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:14.923Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:00.625Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:48.203Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:10.741Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:40.948Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:32.968Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:21.034Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:42.987Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:10.652Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:43.432Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:04.239Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:22.146Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:03.886Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:36.026Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:34.956Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:22.147Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:03.344Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:54.555Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:07.683Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:14.919Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:30.530Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:40.963Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:12.415Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:26.284Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:44.323Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:25.582Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:10.323Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:45.833Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:18.545Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:22.803Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:23.235Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:50.978Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:10.911Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:36.468Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:57.363Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:25.482Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:38.656Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:54.688Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:46.025Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:30.451Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:47.844Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:57.401Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:02.211Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:29.925Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:22.232Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:05.613Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:38.950Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:27.248Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:47.078Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:14.554Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:25.011Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:24.465Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:21.063Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:11.619Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:38.495Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:04.353Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:13.107Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:37.627Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:00.731Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:00.138Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:58.296Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:24.962Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:00.987Z","7.0.0":"2020-06-23T19:10:40.231Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:39.598Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:07.718Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:58.993Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:37.894Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:36.505Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:16.375Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:38.124Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:48.451Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:31.676Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:45.953Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:47.621Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:16.664Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:37.105Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:18.599Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:35.748Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:41.675Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:30.507Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:22.256Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:57.654Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:07.682Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:12.155Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:56.469Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:19.661Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:05.752Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:48.623Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:05.570Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:28.695Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:15.367Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:11.641Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:45.859Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:39.056Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:28.916Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:43.260Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:15.710Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:19.479Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:04.961Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:30.282Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:03.444Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:04.964Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:20.285Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:20.393Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:17.414Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:00.678Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:37.243Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:13.405Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:10.024Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:13.330Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:46.376Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:31.790Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:54.655Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:39.379Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:46:01.232Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:25.824Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:44.371Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:35.349Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:40.916Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:59.262Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:39.094Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:48.530Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:52.281Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:17.330Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:29.948Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:28.750Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:03.896Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:08.387Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:15.410Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:32.612Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:33.279Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:34.841Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:05.315Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:21.263Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:05.856Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:22.707Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:14.861Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:22.230Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:55.876Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:22.605Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:13.412Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:44.450Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:57.002Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:48.947Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:49.368Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:29.216Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:23.014Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:24.308Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:20.114Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:38.560Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:15.160Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:30.737Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:09.610Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:58.466Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:46.616Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:24.358Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:20.693Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:34.717Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:27.691Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:03.300Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:50.917Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:40.287Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:03.499Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:26.667Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:21.490Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:14.488Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:13.705Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:50.269Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:57.480Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:45.007Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:25.701Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:39.359Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:59.340Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:43.563Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:29.584Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:23.046Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:22.336Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:37.237Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:34.956Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:49.874Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:51.472Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:11.262Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:09.799Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:15.439Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:13.003Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:41.268Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:41.350Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:25.210Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:59.284Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:50.340Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:21.762Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:56.975Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:10.346Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:40.439Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:30.352Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:26.513Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:17.298Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:49.335Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:47.200Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:56.847Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:55.893Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:55.846Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:57.339Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:32.735Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:09.414Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:49.063Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:24.919Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:08.427Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:44.403Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:21.893Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:36.295Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:50.318Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:44.020Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:18.941Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:49.372Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:50.288Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:24.704Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:17.487Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:03.339Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:10.973Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:27.042Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:21.623Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:49.671Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:02.418Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:33.416Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:43.576Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:35.938Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:12.724Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:14.565Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:44.929Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:30:38.322Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:49.493Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:20.510Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:55.598Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:45.140Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:45.749Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:01.234Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:34.185Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:55.222Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:11.580Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:11.958Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:14.024Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:19.562Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:34.385Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:21.800Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:33.411Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:12.753Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:06.026Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:53.252Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:01.511Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:25.829Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:48.637Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:48.485Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:37.863Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:22.985Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:05.759Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:38.474Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:15.089Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:39.265Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:12.209Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:05.202Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:49.622Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:19.088Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:47.143Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:31.864Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:19.650Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:56.403Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:07.988Z","8.0.0":"2020-11-02T22:59:32.673Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:36.177Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:00.029Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:14.723Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:09.248Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:07.479Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:57.761Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:24.754Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:40.259Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:06.378Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:42.124Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:44.507Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:03.636Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:48.867Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:19.589Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:11.121Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:30.401Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:08.366Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:58.942Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:55.140Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:02.864Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:28.442Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:19.710Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:28.028Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:12.265Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:37.846Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:30.913Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:52.897Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:37.683Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:03.943Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:33:08.967Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:22.613Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:24.549Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:33.523Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:37.806Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:02.722Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:40.334Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:33.964Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:26.028Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:26.872Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:38.979Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:31.352Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:14.412Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:26.893Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:45.773Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:55.829Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:01.266Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:55.181Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:30.850Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:29.318Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:15.950Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:18.685Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:19.198Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:39.245Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:19.892Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:02.884Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:51.351Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:21.766Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:53.306Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:09.238Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:27.323Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:21.664Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:49.944Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:36.447Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:29.046Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:57.880Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:02.130Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:37.623Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:30.131Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:00.446Z","9.0.0":"2020-12-29T19:46:04.538Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:08.851Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:51.306Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:27.033Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:15.564Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:42.990Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:12.900Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:29.042Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:14.873Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:58.532Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:42.138Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:13.243Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:25.500Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:11.888Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:48.247Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:25.863Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:37.506Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:17.323Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:20.779Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:13.393Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:06.264Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:54.673Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:17.253Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:00.544Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:32.727Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:47.121Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:03.688Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:56.874Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:49.156Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:29.661Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:42.914Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:18.198Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:06.522Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:27.313Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:34.622Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:47.261Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:03.668Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:54.229Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:12.044Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:44.062Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:52.182Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:59.618Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:07.588Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:55.096Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:02.898Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:09.868Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:16.684Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:29.088Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:25.320Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:33.745Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:20.609Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:11.088Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:56.099Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:29.590Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:54.624Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:08.087Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:02.820Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:48.527Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:33.928Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:41.893Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:13.099Z","10.0.0":"2021-02-05T16:18:43.356Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:57.605Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:34.319Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:48.037Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:25.188Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:34:02.126Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:07.120Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:34.774Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:12.817Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:33.119Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:04.726Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:44.519Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:49.252Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:48.363Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:15.444Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:45.524Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:38.625Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:05.253Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:43.025Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:00.623Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:04.496Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:39.654Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:00.568Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:17.223Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:36.337Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:06.647Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:23.742Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:28.528Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:48.463Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:06.536Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:26.756Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:34.590Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:34.078Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:19.889Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:49.604Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:32.871Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:45.680Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:45.804Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:06.859Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:53.203Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:31.498Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:26.268Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:40.651Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:14.350Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:59.779Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:13.139Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:42.557Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:03.539Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:44.846Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:39.691Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:04.916Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:06.059Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:46.592Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:52.672Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:12.685Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:14.635Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:45.185Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:59.102Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:22.908Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:10.137Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:03.120Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:45.525Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:42.713Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:31.641Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:05.134Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:37.028Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:13.203Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:34.244Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:54.980Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:18.217Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:00.351Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:45.362Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:45.219Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:39.628Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:50.913Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:29.354Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:04.462Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:14.206Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:05.593Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:29.628Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:12.053Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:40.638Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:58.005Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:54.421Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:32.855Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:37.442Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:52.820Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:26.539Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:57.839Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:31.356Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:40.152Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:50.807Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:24.082Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:27.797Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:31.502Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:43.784Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:19.543Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:18.685Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:02.064Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:20.690Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:55:49.493Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:06.970Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:19.643Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:34.816Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:28.025Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:26.538Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:53.630Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:55.594Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:37.500Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:06.996Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:42.062Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:51.919Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:20.337Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:04.853Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:29.384Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:40.766Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:36.517Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:53.010Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:25.622Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:11.539Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:48.975Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:12.843Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:21.496Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:23.470Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:15.428Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:51.198Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:58.922Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:08.579Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:59.094Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:05.424Z","11.0.0":"2021-04-15T22:58:06.701Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:44.039Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:41.646Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:11.526Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:41.812Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:22.063Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:02.940Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:41.796Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:18.356Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:21.286Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:16.067Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:01.603Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:59.839Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:18.127Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:40.622Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:44.483Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:28.944Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:10.414Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:34.056Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:56.915Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:25.515Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:42.284Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:45.754Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:27.576Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:38.459Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:08.074Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:53.667Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:46.041Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:33.624Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:51.122Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:37.145Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:11.508Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:20.574Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:28.187Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:42.817Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:01.986Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:36.506Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:06.413Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:54.262Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:22.870Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:14.447Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:37.430Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:19.854Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:46.371Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:26.959Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:59.583Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:04.422Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:25.650Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:33.117Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:14.188Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:03.705Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:56.951Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:50.428Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:14.697Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:53.677Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:17.556Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:13.250Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:20.605Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:53.640Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:45.212Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:26.313Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:05.577Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:42.640Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:51.458Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:42.841Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:30.908Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:21.814Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:13.134Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:31.125Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:44.198Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:09.238Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:38.451Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:54.757Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:59.034Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:37.446Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:35.822Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:48.592Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:06.971Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:14.639Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:46.719Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:58.358Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:30.915Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:43.187Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:22.976Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:20.444Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:50.113Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:32.611Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:21.973Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:55.921Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:11.854Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:15.764Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:04.841Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:38.943Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:15.585Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:08.019Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:45.533Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:59.311Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:02.509Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:47.439Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:44.737Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:45.576Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:21.624Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:04.631Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:01.776Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:53.119Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:04.277Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:30.990Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:46.119Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:01.492Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:10.151Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:20.542Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:07.953Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:24.056Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:38.283Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:22.901Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:51.420Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:00.153Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:33.777Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:20.853Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:50.724Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:27.895Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:49.422Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:21.669Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:28.161Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:10.502Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:58.104Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:11.700Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:34.334Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:10.453Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:25.913Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:14.331Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:19.653Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:14.017Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:10.536Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:54.065Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:25.993Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:22.331Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:02.709Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:06.430Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:52.826Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:17.169Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:08.414Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:55.124Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:06.189Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:59.422Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:09.314Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:58.846Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:44.623Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:49.282Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:27.386Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:32.219Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:55.688Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:49.091Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:23.366Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:19.368Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:14.919Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:13.431Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:45.962Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:53.386Z","12.0.0":"2021-07-27T19:49:49.860Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:27.433Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:10.873Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:49.755Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:05.221Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:20.345Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:59.223Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:23.515Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:21.046Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:53.225Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:46.436Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:21.330Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:17.577Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:06.366Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:54.731Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:53.306Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:25.940Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:18.479Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:27.303Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:32.744Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:52.023Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:33.199Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:47.747Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:21.852Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:19.374Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:30.480Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:08.119Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:51.546Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:15.903Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:10.904Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:37.440Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:15.539Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:39.178Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:39.583Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:19.292Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:40.206Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:24.226Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:17.730Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:43.362Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:07.801Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:34.270Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:19.736Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:59.427Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:36.443Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:43.739Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:14.278Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:53.560Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:40.484Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:22.709Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:30.891Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:47.227Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:48.945Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:54.173Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:33.425Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:14.420Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:16.279Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:31.425Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:15.309Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:48.320Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:14.543Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:45.275Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:04.936Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:19.565Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:03.696Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:21.881Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:02.520Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:13.337Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:14.350Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:41.598Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:35.459Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:28.903Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:09.090Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:09.553Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:08.625Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:53.574Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:11.464Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:18.881Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:48.824Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:27.500Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:03.684Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:10.923Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:21.734Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:24.221Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:58.876Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:25.336Z","13.0.0":"2021-09-24T19:46:21.005Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:05.151Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:30.464Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:45.374Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:30.873Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:24.271Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:48.438Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:00.587Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:25.135Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:34.101Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:09.868Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:20.112Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:15.799Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:50.654Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:20.220Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:03.258Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:30.879Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:23.712Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:37.004Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:18.539Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:15.286Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:00.469Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:00.940Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:56.073Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:16.430Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:19.645Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:48.882Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:42.908Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:19.990Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:07.145Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:55.582Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:00.594Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:42.611Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:03.034Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:51.643Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:16.659Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:00.250Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:02.311Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:08.678Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:25.311Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:46.904Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:02.187Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:11.028Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:24.010Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:09.387Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:58.577Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:54.108Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:35.593Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:45.732Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:28.376Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:09.662Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:39.929Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:59.670Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:01:58.655Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:05.556Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:49.218Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:27.215Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:12.208Z","14.0.0-canary.390220e42.0":"2022-01-17T16:46:58.479Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:31.368Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:18.162Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:10.332Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:09.974Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:44.787Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:57.601Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:50.893Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:11.345Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:37.243Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:36.991Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:57:59.027Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:31.449Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:30.211Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:02.784Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:20.333Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:16.357Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:46.791Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:59.239Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:45.718Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:27.972Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:45.211Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:47.014Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:59.874Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:20.183Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:58.086Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:12.920Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:11.195Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:38.762Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:10.364Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:26.883Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:49.890Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:48.596Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:38.379Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:39.642Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:22.410Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:08.877Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:30.435Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:10.667Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:32.098Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:51.833Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:31.884Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:50.832Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:48.151Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:58.826Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:19.142Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:18.123Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:55.116Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:30.364Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:58.758Z","14.0.0":"2022-04-28T16:56:34.197Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:38.407Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:17.067Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:08.030Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:38.661Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:56.694Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:28.071Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:57.730Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:05.473Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:51.092Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:30.836Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:06.384Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:37.857Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:19.821Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:23.043Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:28.313Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:24.715Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:44.333Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:43.888Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:10.722Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:22.129Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:59.930Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:08.750Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:40.172Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:00.744Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:34.574Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:04.973Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:40.306Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:38.680Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:16.237Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:02.347Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:15.597Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:54.082Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:40.178Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:41.000Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:33.426Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:35.204Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:52.804Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:43.289Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:57.837Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:46.600Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:43.569Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:42.016Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:46.874Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:18.561Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:24.264Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:19.373Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:25.468Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:40.795Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:41.187Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:49.351Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:12.744Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:10.036Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:07.180Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:18.748Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:22.428Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:17.338Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:29.308Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:07.731Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:30.132Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:51.773Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:12.053Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:11.573Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:32.528Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:50.613Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:18.588Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:14.997Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:29.930Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:27.794Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:31.428Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:44.343Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:22.456Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:13.333Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:00.265Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:33.258Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:57.658Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:13.724Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:35.992Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:50.141Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:05.421Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:17.514Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:38.326Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:44.262Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:28.012Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:06.682Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:20.132Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:10.335Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:36.084Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:12.623Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:28.520Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:34.730Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:47.335Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:08.910Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:16.783Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:17.629Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:04.610Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:44.205Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:16.955Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:17.666Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:35.041Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:32.489Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:50.666Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:04.879Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:44.295Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:00.935Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:42.721Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:21.068Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:59.056Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:24.843Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:46.940Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:01.214Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:32.014Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:52.983Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:46.742Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:49.169Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:08.556Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:49.356Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:36.209Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:35.591Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:19.929Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:09.033Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:13.579Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:35.661Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:34.981Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:28.880Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:02.427Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:42.729Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:54.454Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:57.715Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:51.664Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:18.681Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:10.463Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:19.870Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:38.364Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:32.289Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:30.219Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:25.300Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:30.402Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:01.400Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:50.009Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:21.100Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:00.669Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:25.018Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:00.075Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:42.400Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:17.464Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:33.220Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:17.361Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:57.417Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:19.178Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:41.965Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:00.486Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:29.084Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:50.644Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:36.072Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:34.578Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:18.603Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:44.743Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:01.539Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:18:02.095Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:42:00.104Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:28.870Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:59.585Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:43.807Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:15.532Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:23.934Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:34.712Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:34.022Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:31.417Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:09.874Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:37.313Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:47.033Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:17.660Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:36.471Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:41.576Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:24.437Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:15.409Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:55.839Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:32.350Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:11.422Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:27.740Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:53.806Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:54.392Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:16.581Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:19.093Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:14.906Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:50.747Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:08.634Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:14.889Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:18.840Z","15.0.0-canary.65c411674.0":"2022-11-29T17:39:04.110Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:46.658Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:08:00.771Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:46.702Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:00.793Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:46.048Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:10.590Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:33.648Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:25.160Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:10.747Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:14.657Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:02.711Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:26.967Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:31.933Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:52.202Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:58.047Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:25.369Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:37.596Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:49.250Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:40.323Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:27.480Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:26.019Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:29.714Z","15.0.0-canary.34767110.0":"2022-12-14T17:20:54.485Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:08.570Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:10.156Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:43.569Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:23.980Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:48.344Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:49.131Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:44.333Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:27.889Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:18.114Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:49.596Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:33.474Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:34.412Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:16.994Z","15.0.0-canary.af490a848.0":"2023-01-03T15:58:08.308Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:24.108Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:46.432Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:53.976Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:20.417Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:42.131Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:20.863Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:27.672Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:57.850Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:08.766Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:41.977Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:44.354Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:34.174Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:45.456Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:09.991Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:10.256Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:08.577Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:54.780Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:50.937Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:22.181Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:17.949Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:55.287Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:09.953Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:57.221Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:46.456Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:21.842Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:18.867Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:31.634Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:09.751Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:39.440Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:47.182Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:08.405Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:52.618Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:00.711Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:45.288Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:52.935Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:29.291Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:03.713Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:23.094Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:07.071Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:56.088Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:37.419Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:23.536Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:19.638Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:42.680Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:00.786Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:57.901Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:21.288Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:07.470Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:00.274Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:21.687Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:27.042Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:53.628Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:14.888Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:10.233Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:47.022Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:30.878Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:48.025Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:13.915Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:25.098Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:30.202Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:54.384Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:31.545Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:29.686Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:44.122Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:21.589Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:42.284Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:03.230Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:19.222Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:44.534Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:57.837Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:33.174Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:55.475Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:08.966Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:55.264Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:49.210Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:20.232Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:39.862Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:29.888Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:14.383Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:53.690Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:54.760Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:15.055Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:15.969Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:53.125Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:44.394Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:43.562Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:58.393Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:55.110Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:34.212Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:35:08.524Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:25.077Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:35.398Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:19.282Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:14.026Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:55.886Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:46.476Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:47.432Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:56.831Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:40.828Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:28.752Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:15.143Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:24.168Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:00.561Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:05.192Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:51.008Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:06.551Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:16.132Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:52.429Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:52.794Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:43.892Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:41.343Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:36.541Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:56.029Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:25.473Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:27.715Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:28.061Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:14.774Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:43:07.869Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:41.590Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:52.888Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:27.527Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:44.844Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:31.334Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:41.722Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:16.238Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:42.677Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:13.522Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:11.754Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:21.296Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:18.198Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:12.105Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:37.120Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:50.032Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:26.088Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:50.876Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:18.308Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:14.426Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:34.902Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:46.544Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:27.623Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:23.999Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:31.519Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:31.698Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:59.017Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:36.728Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:47.876Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:13.054Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:57.598Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:23.554Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:45.003Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:48.806Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:13.965Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:45.277Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:12.977Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:36.812Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:08.985Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:40.953Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:05.474Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:41.812Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:17.794Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:06.534Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:10.865Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:01.038Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:04.041Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:16.224Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:55:55.867Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:50.299Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:09.934Z"},"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-icon-button"},"keywords":["material components","material design","button","icon button","icon toggle"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}